Explanation: In the code below, the main view has a style opacity set to 1 and shadow works perfectly. When I set the opacity to 0.6, shadow makes the view disrupted. Please check the images to see the difference. How do I solve this problem?
Note: I didn't test it on IOS but it looks like this on android.
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
opacity: 1,
}}>
<View
style={{
padding: 20,
borderRadius: 10,
backgroundColor: Colors.white,
shadowColor: '#000',
elevation: 5,
}}>
<Text>Test 123</Text>
</View>
<View></View>
</View>
react-native style opacity for parent and child
Related
I have the following code which is used to put a text label right next to a text input inline:
<View style={{ flexDirection: "row", alignItems: "center" }}>
<Text
style={{ fontSize: 16, backgroundColor: "green" }}
>
🇺🇸 +1{" "}
</Text>
<TextInput
style={{
fontSize: 16,
backgroundColor: "red",
flex: 1,
}}
placeholder="Enter your phone number"
/>
</View>
As you can see, I put them in a flex row view, aligning them to the center. For some reason, on Android, you can see the text input has a larger height, despite having the same font size.
There seemed to be some kind of hidden padding so I tried adding padding: 0 but that didn't work either. On iOS, they are the exact same height. Any idea of what I can do here?
To be clear, I want them to be the same height on Android as iOS correctly does. Thank you for your help.
You may add paddingVertical: 0 to style. This will reset the Android native module padding.
<View style={{ flexDirection: "row", alignItems: "center" }}>
<Text
style={{ fontSize: 16, backgroundColor: "green" }}
>
🇺🇸 +1{" "}
</Text>
<TextInput
style={{
fontSize: 16,
backgroundColor: "red",
flex: 1,
paddingVertical: 0
}}
placeholder="Enter your phone number"
/>
</View>
Result
Source: https://stackoverflow.com/a/37882782/20002061
I want to apply a different borderRadius and padding styling to nested texts, but as far as I could understand this is not supported by react native yet. Is there a workaround for this ?
What I tried so far is :
<Text>
<Text
style={{
backgroundColor: 'green',
borderRadius: 12,
}}>
Text1
</Text>
<Text
style={{
backgroundColor: 'blue',
borderRadius: 12,
}}>
Text2
</Text>
</Text>
Expected Result: Text with different backgrounds and with a borderRadius.
Actual Result: backgrounds are differnet but no borderRadius is applied
You can put this code in the text style
<View
style={{
backgroundColor: 'green',
borderRadius: 10,
borderWidth: 1,
borderColor: '#fff',
padding: 10
}}>
<Text>Text1</Text>
</View>
I want to create a dashed border for the input of my TextInput in react-native. Like this http://uupload.ir/files/v9mn_dads.png
So far this is my code:
<TextInput maxLength={5} keyboardType={'numeric'} style={styles.numBox}></TextInput>
And stylesheetz:
numBox: {
display: 'flex',
width: 270,
height: 58,
marginLeft: 'auto',
marginRight: 'auto',
marginTop: 50,
textAlign: 'center',
fontFamily: 'IRANSansMobile_Bold',
fontSize: 16,
color: '#CD0448',
backgroundColor: 'white',
borderColor: '#CD0448',
borderWidth: 1,
borderRadius: 10,
paddingTop: 15,
},
});
I only manage to create the box and the don't know how to tackle the content dashed issue.
Take a look at this package. I guess if you use a monospace font, you can achieve this by defining a proper font styles.
I use expo template for creating an application. I would like to make the bottom menu with border-radius, but I have white space instead of background the page. How to fix it? Example see on the image
My styles for createBottomTabNavigator:
width: '100%',
height: 94,
paddingBottom: 20,
backgroundColor: 'red',
borderTopLeftRadius: 51,
borderTopRightRadius: 51,
borderWidth: 0,
borderColor: '#68a0cf',
overflow: 'hidden'
My styles for page(screen):
backgroundColor: 'blue',
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'flex-start'
You should take the parent container for both the Bottom tab navigator and the page and style it with with = screenWidth and hight = screenHeight and make the background color blue of whatever you want.
By this way you will be able to get off with these white spaces.
I am currently trying to make a design work in React Native inside a Scroll View. The layout works as expected Without a Scroll View but With a Scroll View it gets stretched downwards. Any advice or suggestions will be appreciated. :)
Without ScrollView
<View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
<View style={{ position: 'absolute', flexDirection: 'column', justifyContent: 'flex-start' }}>
<LinearGradient
start={{ x: 0.0, y: 1.0 }} end={{ x: 1.0, y: 0.0 }}
colors={['#1E2AC0', '#347FC4']}
style={{ height: height * 0.4, width: width }}
/>
<View style={{ height: height * 0.6, width: width, backgroundColor: '#FFFFFF', alignSelf: 'flex-end' }} />
</View>
<View style={{ paddingTop: height*0.6-30, width: width * 0.9, backgroundColor: 'transparent', alignSelf: 'center' }}>
//TextInput and Button
</View>
</View>
This looks the way I want it to look. However, I want the Views to go up when I scroll up. But when I use a scroll view this is what happens at the start. For some reason top gets stretched.
With ScrollView
<ScrollView>
//Same Code as above
</ScrollView>