My View's shadow not covering all the outside but just the top and the bottom:
Here is the style:
root: {
borderRadius: 20,
elevation: 5,
paddingTop: 22,
paddingHorizontal: 20,
paddingBottom: 20,
marginTop: 16,
borderWidth: 0,
backgroundColor: '#ffffff',
}
How can I make the shadow to cover all the View?
You should give marginHorizonal in your root style.
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 am implementing a tile in reactnative and I have to make the Image right in the tile just like this
What I want (click here)
and this is what I can implement till now
What I get ()
this is my code
<View style={styles.container} >
<Image
style={styles.image}
source={item.image}
resizeMode="cover"
/>
<View style={styles.overlay} />
<View style={styles.textContainer}>
<Text style={styles.subText}>{item.title}</Text>
<Text style={styles.headingText}>{item.message}</Text>
</View>
</View>
and this is style
const styles = StyleSheet.create({
container: {
backgroundColor: '#206c72',
alignItems: 'flex-end',
borderRadius: 15,
width: COURSE_ITEM_WIDTH,
elevation: 7,
justifyContent: 'center',
alignItems: 'center',
position: 'relative',
marginTop: 20
},
image: {
width: COURSE_ITEM_WIDTH,
height: 120,
borderRadius: 10
},
textContainer: {
position: 'absolute',
left: 16,
flex: 1,
},
headingText: {
fontSize: 18,
color: '#ffffff',
marginTop: 5
},
subText: {
fontSize: 14,
color: '#ffffff',
},
timeText: {
fontSize: 15,
color: 'white',
textAlign: 'center',
marginTop: 5
},
overlay: {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
backgroundColor: '#206c72',
opacity: 0.6,
borderRadius: 10
}
})
Please help me i dont know what i am doing wrong. thanks in advance!
[note: please ignore the content, focus on alignment]
Your image is aligned to the right but there is nothing at the left of it. You should add flexDirection:'row' to the parent container and put an empty View with width : 40px before your image.
You can also remove the alignItems:flex-end and justifyContent:center from the main container
You can add alignSelf property to flex-end for image and image will be on end of the tile.
example 1:
image: {
width: "50%",
height: 120,
borderRadius: 10,
backgroundColor: "red", //for making sure how much space is taken by image you can remove on further
alignSelf: "flex-end"
},
for reference i tried a sandbox example check it out here
also noticed you are using alignItems value twice first one is only necessary you can remove 2nd alignItems and position relative value from styles.container then it will align the image to end. you will get the exact result you want
example 2:
container: {
backgroundColor: '#206c72',
alignItems: 'flex-end', // only need this alignItems
borderRadius: 15,
width: COURSE_ITEM_WIDTH,
elevation: 7,
justifyContent: 'center',
marginTop: 20
},
image: {
width: "50%",
height: 120,
borderRadius: 10,
backgroundColor: "red", //for making sure how much space is taken by image you can remove on further
// no need of alignSelf to flex-end here
},
How can I add border with some margin or padding ? I want to remove the extended underline broder on left side of details text The underline should be only below text Details how can I position it correctly ? I tried marginLeft and paddingLeft is not working. Code:
<TouchableOpacity>
<View style={styles.underlineTextContainer}>
<Text style={styles.imgText}>DETAILS</Text>
</View>
</TouchableOpacity>
underlineTextContainer: {
borderBottomWidth: 2,
borderColor: '#ffffff'
}
imgText: {
fontFamily: Fonts.SourceSansProBold,
fontSize: 16,
fontWeight: "bold",
fontStyle: "normal",
lineHeight: 16,
letterSpacing: 0,
color: "#ffffff",
paddingLeft: 25,
paddingBottom: 5,
textAlign: 'center'
}
Applying above code gives me this:
But I want something like this:
instead of giving paddingLeft: 25 on your text component's style give margin Left on the parent View component like this:
underlineTextContainer: {
borderBottomWidth: 2,
borderColor: '#ffffff',
marginLeft: 25,
}
imgText: {
fontFamily: Fonts.SourceSansProBold,
fontSize: 16,
fontWeight: "bold",
fontStyle: "normal",
lineHeight: 16,
letterSpacing: 0,
color: "#ffffff",
paddingBottom: 5,
textAlign: 'center'
}
I have used Animated API to scale my center item of FlatListtwice the size and it's working perfectly. The problem is the margins or paddings are not being scaled causing center item to overlap with previous and next item.
My Animated.View
<Animated.View
style={{
alignItems: 'center',
justifyContent: 'center',
marginLeft: 6,
marginRight: 6,
width: 70,
height: 70,
borderRadius: 35,
borderColor: 'white',
position: 'relative',
borderWidth: 2,
transform: [
{
scale: animatedValue.interpolate({
inputRange: [index - 1, index, index + 1],
outputRange: [1, 2, 1],
extrapolate: 'clamp'
})
}]
}}>
....other components
</Animated.View>
I have also tried putting all components inside Animated.View and giving them margin or padding. Still no success.
I am looking for some styling guidance for React-Native. I am wanting to create a border that only has a certain amount of the corners colored. Something like this:
I currently have this:
captureSquare: {
height: 450,
width: 450,
borderWidth: 2,
borderColor: '#FFFFFF,
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
},
I am not sure how to break up the borders. Any ideas?
Was able to do this by adding 4 <View />s to the captureSqaure and giving them the following properties:
topLeftEdge: {
position: 'absolute',
top: 0,
left: 0,
height: 25,
width: 25,
borderColor: '#FFFFFF,
borderLeftWidth: 3,
borderTopWidth: 3,
},