Comments (18)
from react-native-shadow-2.
https://snack.expo.dev/@joe06102/6c4fc6
I can not reproduce the problem on the expo. Do you have any idea how it happens?
from react-native-shadow-2.
I will take a look into it this weekend. It would be very helpful for me if you find a way to reproduce it on iOS emulator in Expo (as I don't own an iOS), maybe trying a bigger resolution somehow (the gaps may be vanishing due to the zoom out / scale, the many pixels of the ios screen become fewer pixels to fit our pc screens), maybe trying fractional sizes, like 101.93 etc.
As you are entering the size prop, I think the problem may be in the dp to pixel conversion.
If I can't find how to fix it, I will use the native iOS shadow, that very certainly will have the exact same look as this lib for Android.
from react-native-shadow-2.
Just to be sure, what version of this lib are you using in your project? Please, ensure you are using the latest one and clean your RN/Expo cache and try it again, if you at some point had a previous version.
from react-native-shadow-2.
Just to be sure, what version of this lib are you using in your project? Please, ensure you are using the latest one and clean your RN/Expo cache and try it again, if you at some point had a previous version.
Thx for the reply! I'm using the latest version 5.1.0. I tried starting the program with the resetCache: true, which did not work either.
Besides, I've run the program on different apple devices and the behaviors varies among them. on iPhone 6s, the gap is less obvious on the iPhone 6s than that on the iphoneX.
from react-native-shadow-2.
I will take a look into it this weekend. It would be very helpful for me if you find a way to reproduce it on iOS emulator in Expo (as I don't own an iOS), maybe trying a bigger resolution somehow (the gaps may be vanishing due to the zoom out / scale, the many pixels of the ios screen become fewer pixels to fit our pc screens), maybe trying fractional sizes, like 101.93 etc.
As you are entering the size prop, I think the problem may be in the dp to pixel conversion.
If I can't find how to fix it, I will use the native iOS shadow, that very certainly will have the exact same look as this lib for Android.
I tried the native shadow on ios before but it did behave the same as the shadow-2 with the same params. Maybe I should take more tries to align the behaviors.
from react-native-shadow-2.
By native shadow, I mean the https://reactnative.dev/docs/shadow-props :) But I just noticed that it doesn't support some functionalities of this lib, like specific radius for each corner (it actually uses the borderRadii style values). But, if we can't figure out how to fix it, I may add a fallback to it for iOS.
I am going to ask a few things -- this is the only way I may help your case and other iOS users (besides the fallback to the native shadow):
- The source code is the https://github.com/SrBrahma/react-native-shadow-2/blob/main/src/index.tsx.
Copy it and the utils.ts to a folder in your project, and import the Shadow component from it.
-
Add
console.log(JSON.stringify({scale, width, height, distance, radii, cornerShadowRadius, }, null, 2))
at the line 308.
(JSON to have a pretty and better readable output) -
Also, see if the problems also happen even if not passing the size prop (as you did with
size={[100, 100]}
). The lib has a way to get the exact component size with onLayout. -
Send me here the log output when it happens and when it doesn't, if you find out. Try also changing the radius values, I suspect that the problem is with it or with the dp scaling rounding.
Edit: if you don't use typescript, you will need to change the lib .js file in the node_modules/react-native-shadow-2/lib. You may need to rename the variable values if they have different names there, changed in the TS compilation process. The line number may also be different, but just add it before the return inside the shadow useMemo().
from react-native-shadow-2.
Thx, SrBrahma.
The output with size={[100,100]}(render only triggered once):
{
"scale": 2,
"width": 100,
"height": 100,
"distance": 15,
"radii": {
"topLeft": 10,
"topRight": 10,
"bottomLeft": 10,
"bottomRight": 10
},
"cornerShadowRadius": {
"topLeftShadow": 25,
"topRightShadow": 25,
"bottomLeftShadow": 25,
"bottomRightShadow": 25
}
}
And the output without size props(render triggered twice):
//the first
{
"scale": 2,
"width": "100%",
"height": "100%",
"distance": 15,
"radii": {
"topLeft": 10,
"topRight": 10,
"bottomLeft": 10,
"bottomRight": 10
},
"cornerShadowRadius": {
"topLeftShadow": 25,
"topRightShadow": 25,
"bottomLeftShadow": 25,
"bottomRightShadow": 25
}
}
// the second
{
"scale": 2,
"width": 100,
"height": 100,
"distance": 15,
"radii": {
"topLeft": 10,
"topRight": 10,
"bottomLeft": 10,
"bottomRight": 10
},
"cornerShadowRadius": {
"topLeftShadow": 25,
"topRightShadow": 25,
"bottomLeftShadow": 25,
"bottomRightShadow": 25
}
}
Unfortunately, the problems still happen in both case.
from react-native-shadow-2.
I appreciate. Is there any gap when using radius={0}?
from react-native-shadow-2.
with shadow' s radius = 0 & children's borderRadius = 0
But the gap becomes smaller if I change to the fractional size:
<Shadow
distance={15}
startColor={'#000000ff'}
finalColor={'#00000000'}
offset={[10, 0]}
radius={0}
size={[101.93, 101.93]}
>
<View
style={[
{
width: 101.93,
height: 101.93,
borderRadius: 10,
backgroundColor: '#fff',
},
]}
></View>
</Shadow>
from react-native-shadow-2.
Seems that we are having overlaps before the gaps. Apparently the problem is how iOS is handling the parts positioning.
Can you send here an image with
<Shadow
distance={15}
startColor={'#00f9'}
finalColor={'#f009'}
radius={0}
size={[100, 100]}
paintInside
/>
then
<Shadow
distance={15}
startColor={'#00f9'}
finalColor={'#f009'}
radius={0}
size={[100, 100]}
sides={[]}
paintInside
/>
then
<Shadow
distance={15}
startColor={'#00f9'}
finalColor={'#f009'}
radius={0}
size={[100, 100]}
corners={[]}
paintInside
/>
All without the child. This will allow us to see what parts are invading the other part space.
Also, in line 43 there is const additional = isWeb ? 0 : 1;
. Try changing this 1 to 5 and see if there is any change on the first code in this message.
from react-native-shadow-2.
And changing the addtional from 1 to 5 doesn't have any effect.
from react-native-shadow-2.
You are being very helpful! Thanks a lot, really.
Three questions before trying the fixes:
a) Are you using the copied .tsx file or changing the .js in node_modules? I ask this because sometimes when changing the node_modules files they won't take effect right away.
b) Just to be sure, are you using [email protected], right?
c) Are you using RTL? If you don't know what this is, you are not using and that's ok (would also be ok to use it)
Using the previous component:
<Shadow
distance={15}
startColor={'#00f9'}
finalColor={'#f009'}
radius={0}
size={[100, 100]}
paintInside
/>
No need to send images for the requests below as I don't want to give you too much work, but be very attentive with the answers. For each item, watch out for any changes and report them or say that there are visible no changes.
For right gap:
-
Add
, backgroundColor: '#000', width: 100, height: 100
in paintInside svg style, at line 410. See if the gap between the center square and the right shadow is filled with black. If the black grows by more pixels than it should, change thewidthWithAdditional
andheightWithAdditional
to100
at the line above, 409. At least, there must be a visible black square below/above the center square. If not, the changes aren't taking effect. -
If above doesn't work, undo the changes and do the same for the right shadow style, with
, backgroundColor: '#000', width: 15, height: 100
. You may also need to change the WithAdditional to 15 and 100, like above. -
Undo everything and add
viewBox={'0 0 15 100'}
prop to line 329 andviewBox={'0 0 100 100'}
to now line 412. This shouldn't work if any of the two above didn't work, but not bad trying anyway. If above worked, this may fill the gap properly. -
If no success, undo and at line 328 change
left: -distance
toright: 0
.
Undo everything above. For top overlap:
-
Add
viewBox={'0 0 100 15'}
to line 345. -
If no success, undo and add
width: 100, height: 15
to styles at line 344. Look for changes and then change the corresponding WithAdditional props at the line above with the same values. -
If no success, undo and change
top: -distance
at 344 totransform: [{translateY: -distance}]
-
If no success, undo and change
top: -distance
at 344 tobottom: 115
. Maybe the overlap will turn into a gap.
If we don't achieve success and I don't have any more ideas, I will open an Issue at the react-native-svg repo requesting for help.
Once again, thank you very much for your service! :)
from react-native-shadow-2.
It seemed like that there were some incorrect screen-scale settings in our ios app that led to the problem. By accident, I found all the gaps are disappeared after they fixed the screen-scale errors. And the lib works like a charm now on both platforms.
I'll paste the resolution when I figure it out later.
Thx again for your kind responses!
from react-native-shadow-2.
:)
Please let me know later where was the problem!
from react-native-shadow-2.
I am getting the same issue when I apply an offset to my shadow. A 1 pixel gap appears on iOS (Android is fine)
<Shadow
distance={SPACING.s12}
viewStyle={{ alignSelf: 'stretch' }}
radius={SPACING.s16}
startColor={COLORS.primary}
finalColor={SHADOW_COLORS.finalColor}
offset={[0, 2]}
safeRender
>
from react-native-shadow-2.
Thanks, @walterholohan . Just on the bottom side?
I have an iOS now and when I have the time I will investigate this.
from react-native-shadow-2.
Nope its on the right side too if I add a x offset
from react-native-shadow-2.
Related Issues (20)
- Support multiple children and follow shape of SVG HOT 1
- Have tried to use this lib, but I can't. What am doing wrong? HOT 5
- [Fixed in v13.6.0] Incompatible with react-native-svg v13.5.0 HOT 5
- On IOS, setting distance=0 does not work properly HOT 2
- Border radius problem HOT 2
- x-axis offset not working as expected (iOS) HOT 1
- could you provide a new prop `blur`? HOT 3
- X offset not working on IOS HOT 1
- Inner shadow HOT 4
- Issue with borderRadius in the latest version 7 when size of the elements changes HOT 5
- Unable to find an element with testID HOT 3
- Can I do this effect with this library? HOT 1
- Sides and corners HOT 2
- Fail to compile on web "Support for the experimental syntax 'jsx' isn't currently enabled" HOT 3
- Android
- SVGs in corners with border radius are not aligned properly HOT 9
- I'm using react-native-shadow-2 but it's weirdly slow when switching to screen ? HOT 2
- the shadow can not as same as web css HOT 2
- Sandbox update
- Corners/sides types should allow Partial
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-shadow-2.