I'm in need of applying a box shadow to one of my buttons in my react native application but box shadow property is not supported in android. So i'm trying to create a shadow view from LinearGradient and place the button at center of that view. Something like this
<LinearGradient
colors={['transparent', backgroundColor]}
start={{ x: 0.5, y: 0.5 }}
end={{ x: 1, y: 1 }}
style={{
width: '100%',
padding: 5,
height: 60,
justifyContent: 'center',
alignItems: 'flex-start',
marginTop: 0,
borderRadius: 2,
backgroundColor: 'transparent',
zIndex: 2,
bottom: 0,
}}>
<Pressable
onPress={onPress}
disabled={disabled}
style={({ pressed }) => [
{
borderWidth: state === 'primary_link' ? 0 : pressed ? 4 : borderWidth,
},
styles.background,
]}>
<ButtonTitle />
</Pressable>
</LinearGradient>
I tried changing the start and end values but could not get it to start from the center. Is there a way to do this using LinearGradient? I'm trying to get something like this
As the name implies, LinearGradient is for linear gradients only. What you described is a radial gradient. See this issue: https://github.com/react-native-linear-gradient/react-native-linear-gradient/issues/29
You may have box shadows as described here: Creating a UI with box shadow in react native
boxWithShadow: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 5
}
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
},
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 trying to add form fields validation to several forms on a react native mobile app. I am running into an issue where the View that contains the error message I want to appear seems to take up half of the space to the right of the TextInput control instead of the form control taking up the whole line and the error message appearing on the next line. For example, this is how my form field seems to appear when I add a background color to the error View container:
Here is the css code for this:
import { StyleSheet } from 'react-native';
import EStyleSheet from 'react-native-extended-stylesheet';
const INPUT_HEIGHT = 36;
const BORDER_RADIUS = 4;
export default EStyleSheet.create({
$buttonBackgroundColorBase: '$white',
$buttonBackgroundColorModifier: 0.1,
container: {
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'flex-start',
backgroundColor: '$white',
height: INPUT_HEIGHT,
borderRadius: BORDER_RADIUS,
marginVertical: 11,
borderWidth: 1,
borderColor: 'gray'
},
containerDisabled: {
backgroundColor: '$lightGray',
},
buttonContainer: {
flex: 1,
height: INPUT_HEIGHT,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '$white',
borderTopLeftRadius: BORDER_RADIUS,
borderBottomLeftRadius: BORDER_RADIUS,
},
buttonText: {
fontWeight: '600',
fontSize: 20,
paddingHorizontal: 16,
color: '$primaryBlue',
},
separator: {
height: INPUT_HEIGHT,
width: StyleSheet.hairlineWidth,
backgroundColor: '$border',
},
input: {
height: INPUT_HEIGHT,
flex: 1,
//width: '100%',
borderTopRightRadius: BORDER_RADIUS,
paddingHorizontal: 8,
backgroundColor: '$white',
marginBottom: 0,
paddingBottom: 0,
marginTop: 0,
paddingTop: 0
},
icon: {
flex: 1,
alignSelf: 'flex-start'
},
errorContainer: {
height: INPUT_HEIGHT,
flex: 1,
paddingHorizontal: 8,
backgroundColor: 'transparent'
}
});
The JSX code:
<View style={containerStyles}>
<View style={{flex: 1, flexDirection: 'column', alignSelf: 'stretch'}}><TextInput style={textStyles} underlineColorAndroid="transparent" {...props} /></View>
<View style={{flex: 1, flexDirection: 'column', alignSelf: 'stretch', backgroundColor: '#ff0099'}}>{ error }</View>
</View>
The code that generates the error message:
let error = props.error ? <Text style={{color: '#ff0000'}}>{props.error}</Text> : null;
When the onBlur event fires, it keeps adding the error message in the pink area instead of the text field taking up the entire line and the pink area displaying under the text field? I am setting flex=1 for the all of the containers and the text box. I want to allow for multiple different screen resolutions. Please explain what I am doing wrong and can I fix this issue?
In the style object you're passing into your container view, your flexDirection should be 'column'.
Having some styling issues on React Native with Shadows.
I'd like to get a shadow on just the image, which has curved edges (not a square) with the borderradius I've given it. But if I apply a shadow on the parent View, it can't seem to 'follow the edges' of the Image. I'd like for the shadow to be around the curved edges of the Image, not around the square view.
Here is my code:
<View style={[styles.closedcontainer]}>
<Image source={{uri: props.food.url}}
style={styles.smallimage}
/>
</View>
And here is my styling:
const styles = StyleSheet.create({
closedcontainer: {
height: 100,
width: 100,
flexDirection: 'row',
flexWrap: 'wrap',
paddingLeft: 50,
paddingRight: 50,
paddingBottom: 0,
paddingTop: 0,
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#fff9f9',
shadowColor: 'black',
shadowOffset: {width: 2, height: 5},
shadowOpacity: .30,
shadowRadius: 5,
// overflow: 'hidden'
},
smallimage: {
height: 100,
width: 100,
borderRadius: 30,
borderColor: "#f97070",
borderWidth: 2.75,
margin: 10,
backgroundColor: 'white',
resizeMode: 'contain'
}
I thought perhaps adding overflow hidden to the parent View's styling (closedcontainer) would do it, but that gets hides the whole shadow altogether.
Any ideas? Thanks!
UPDATE: per suggestion, tried setting the borderRadius directly in the , unfortunately still no luck.
Try setting borderRadius directly as a prop on the image instead using it as a style.
<Image borderRadius={25}/>
Or similar