I tried to add a shadow using the following code:
<View style={{alignItems: 'center'}}>
<View
style={{
width: '95%',
borderWidth: 1,
elevation: 5,
shadowColor: 'black',
shadowRadius: 10,
}}>
<TextInput
style={{
borderColor: colors.primary,
borderWidth: 1,
color: 'black',
fontSize: 18,
height: 64,
}}
onChange={input => this.onChange(input.nativeEvent.text)}
value={this.state.input}
/>
<View>{this.state.results}</View>
</View>
</View>
Somehow, the elevation effects the width and hight of the inner "box":
When I use elevation: 10:
When I use elevation: 0:
How can I set the shadow to be outside the boarder?
After a lot of testing, I figured out the problem was that there's no backgroundColor applied to the View with the shadow.
Now the shadow seems to work as expected
Related
Hello React Native developers,
The code below produces the image in caption. I'm just wondering why the shadow of the first view (with the icon) is diminished compared to the black view. I added visible borders so you can see the difference between the two shadows. The "issue" both applies to Android & iOS platforms.
Is this really an issue or this is just normal behavior ?
<>
<View
style={{
alignSelf: 'center',
marginTop: 50,
width: 50,
height: 50,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 0,
},
shadowOpacity: 1,
shadowRadius: 16.0,
borderRadius: 1000,
borderColor: 'red',
borderWidth: 1,
}}>
<Icon name="cog" type="ionicons" color="black" size={50} />
</View>
<View
style={{
alignSelf: 'center',
marginTop: 50,
width: 50,
height: 50,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 0,
},
shadowOpacity: 1,
shadowRadius: 16.0,
backgroundColor: '#000',
borderRadius: 1000,
borderColor: 'red',
borderWidth: 1,
}}
/>
</>
Some function in React Native shadow works badly. Try to use https://github.com/SrBrahma/react-native-shadow-2 instead.
import { Shadow } from 'react-native-shadow-2';
<Shadow>
<Text style={{ margin: 20, fontSize: 20 }}>🙂</Text>
</Shadow>
I have created a customized horizontal bar graph in react native and I have already achieved it. Here's a code snippet:
And the exact code in the snack expo https://snack.expo.dev/#vicrn101/6c812d
<View style={[styles.container]}>
<View style={[styles.barGraph, styles.greenDeep]}>
<View style={{ flex: 6 }}>
<Text style={styles.textLeft}>agree</Text>
</View>
<View style={{ flex: 6}}>
<Text style={styles.textRight}>3 (60 %)</Text>
</View>
</View>
</View>
styles:
container: {
flex: 1,
flexDirection: "column",
alignContent: "space-between",
},
textLeft: {
fontSize: 12,
color: 'white',
textAlign: 'left'
},
textRight: {
fontSize: 12,
color: 'white',
textAlign: 'right'
},
barGraph: {
flexDirection: 'row',
marginBottom: theme.SIZES.BASE,
width: width - theme.SIZES.BASE * 10,
padding: 10,
borderRadius: 5
},
greenDeep: {
backgroundColor: '#36d79a'
},
Now, I want to make vertical graph similar to image below:
Is it possible to achieve this with react native's flex column property?
If anyone has idea with it please feel free to edit my code here: https://snack.expo.dev/#vicrn101/6c812d
Here is my view styling
<View
style={{
flexDirection: 'column',
marginTop: 15,
borderTopWidth: 2,
borderStyle: 'dashed',
borderTopColor: 'rgb(225, 225,225)',
margin: 20,
alignSelf: 'center',
paddingTop: 10,
}}
>
on android, I get a nice dashed line
on iOS, however, I get no line
and
WARN Unsuppported dashed / dotted border style
AND the rest of the containing view is not rendered at all
I have already mentioned in the comments that I do not know exactly why this is failing and it seems to me like a bug. There are similar issues on GitHub GitHub here, here and here.
Since it is working on Android but not on iOS, we could exploit the usage of overflow: hidden. This does not work on Android. This is iOS only! If the above works for you on Android, then you could use a conditional solution via the Platform module: Platform.OS === 'ios' ? ... : ....
<View style={{ overflow: 'hidden'}}>
<View style={{ borderStyle: 'dashed', borderWidth: 1, borderColor: 'red', margin: -2, marginTop: 0}} />
</View>
The trick is to use overflow: hidden for the parent, then set borderWidth: 1 while additionally setting a negative margin margin: -2. We reset the margin of the top back to zero. This fakes a top dashed border.
Here is an example with a child view, and how it will look on iOS.
<SafeAreaView style={{ margin: 20 }}>
<View style={{ overflow: 'hidden' }}>
<View
style={{
borderStyle: 'dashed',
borderWidth: 1,
borderColor: 'red',
margin: -2,
marginTop: 10,
}}>
<View style={{ height: 200, width: 200 }} />
</View>
</View>
</SafeAreaView>
it's not working because you set the borderTopWidth instead of borderWidth. if you want a dashed line you have two option in my opinion :
1- use library like react-native-dash
2- use this solution =>
<View style={{ height: 1, width: '100%', borderRadius: 1, borderWidth: 1, borderColor: 'red', borderStyle: 'dashed' }} />
This is how I managed:
<View style={{overflow: 'hidden'}}>
<View
style={{
borderStyle: 'dashed',
borderWidth: 1,
borderColor: '#000',
margin: -1,
height: 0,
marginBottom: 0,
}}>
<View style={{width: 60}}></View>
</View>
</View>
I'm new at react native development, I want to make a card with a semi circle like this:
I tried something with :
borderRadius:'45%',
bottom:10,
right:10,
And get that this result, but isn't what I need
You can do this works
<View style={{
width: '90%',
height: 160,
backgroundColor: 'white',
elevation: 4,
borderRadius: 40,
overflow: 'hidden',
alignSelf: 'center'
}}>
<View style={{
width: 100,
height: 100,
justifyContent: 'center',
alignItems: 'center',
borderBottomRightRadius: 80,
borderTopRightRadius: 80,
backgroundColor: '#f29a50',
elevation: 4,
}}>
{/* Your Icon */}
</View>
</View>
[1]: https://i.stack.imgur.com/4tcEh.png
Putting overflow: "hidden" on the parent View solved the overlay issue.
Is it possible to make the <View /> having the same height? I am fetching a data from server side and some content are short and some are long. So when I display them in a box form, the height of the box aren't same. If I fix the height or minimum height the long text will exceed the height of the box.
EDIT : Sample code
DisplayEguides(){
var winsWidth = Dimensions.get('window').width;
if(this.state.eguides != null){
var eguides = this.state.eguides.map((data, i)=>(
<View key={i} style={[ { width: (60/100)*winsWidth, paddingHorizontal: 5 } ]}>
<TouchableOpacity
onPress={()=>this.OpenUrl(data.url)}
style={{ backgroundColor: '#ffffff', borderBottomWidth: 1, borderColor: '#efefef', elevation: 1, shadowOpacity: 0.8, marginBottom: 15, padding: 15, borderRadius: 15 }}>
<View style={{ alignItems: 'center', overflow: 'hidden', position: 'relative' }}>
<Text style={{ fontWeight: 'bold', textAlign: 'center', marginBottom: 15 }}>{ data.title }</Text>
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ color: Color.default, fontWeight: 'bold' }}>Download</Text>
<AntDesign name="download" size={16} color={Color.default} style={{ paddingLeft: 10, fontWeight: 'bold' }} />
</View>
</View>
</TouchableOpacity>
</View>
))
return (
<View style={{ paddingHorizontal: 15 }}>
<AppText type="bold" style={{ fontSize: 18, marginBottom: 15 }}>E-Guides</AppText>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>{ eguides }</ScrollView>
</View>
);
}
}
Seems like Flexbox in react native is doing the job but need to place at the right element. Setting the view to flex: 1 will auto adjust all content inside it to have the same height. In my case, I have to set flex: 1 at TouchableOpacity since my box style is in this element.
<TouchableOpacity
onPress={()=>this.OpenUrl(data.url)}
style={{ backgroundColor: '#ffffff', borderBottomWidth: 1, borderColor: '#efefef', elevation: 1, shadowOpacity: 0.8, marginBottom: 15, padding: 15, borderRadius: 15, flex: 1 }}>
{ /* The rest of code goes here */ }
</TouchableOpacity>