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>
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
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
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.
The resizeMode='contain' in the React Native Image component distorts some images on Android devices and emulators. For most images, it creates a distorted line in the PNG image background. I've tried many different images, also tried resizing them, but nothing fixes the distorted coloured line.
Note: All those images look fine on iOS.
Andoid Nexus 10 API 28 emulator
Amazon Fire Tablet 8th Gen.
iPad Pro (11-inch) simulator
Here is my code for the Image component. I am trying to create a grid view of images for a pizza app.
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'stretch',
}}>
{/* ==================================First Row ===================================*/}
<View style={{ height: 600, flexDirection: 'row', backgroundColor: 'transparent', marginVertical: 10 }}>
<View style={{
flex: 1, flexDirection: 'column', marginHorizontal: 20,
borderWidth: 2, borderColor: 'lightgray', borderRadius: 10
}}>
<Image
style={{
flex: 1, height: undefined, width: undefined, borderColor: 'black', borderWidth: 1,
}}
source={require('./Images/pizza5.png')}
resizeMode='contain'>
</Image>
<Text style={{ fontSize: 20, marginVertical: 5, marginHorizontal: 10 }}>Pizza 1</Text>
<Text style={{ fontSize: 17, marginTop: 15, marginBottom: 10, marginHorizontal: 10 }}>$10.99</Text>
</View>
<View style={{
flex: 1, flexDirection: 'column', backgroundColor: 'transparent',
borderWidth: 2, borderColor: 'lightgray', borderRadius: 10, marginRight: 20,
}}>
<Image
style={{
flex: 1, height: undefined, width: undefined, borderColor: 'black', borderWidth: 1
}}
source={require('./Images/pizza1copy.png')}
resizeMode='contain'>
</Image>
<Text style={{ fontSize: 20, marginVertical: 5, marginHorizontal: 10 }}>Pizza 2</Text>
<Text style={{ fontSize: 17, marginTop: 15, marginBottom: 10, marginHorizontal: 10 }}>$10.99</Text>
</View>
</View>
</View>
Try remove the borderColor: 'black', borderWidth: 1 and set them to an additional parent View
I have one TextInput with some predefined text.
The problem is that on Android the text is displayed at the bottom of the text input. I tryed with textAlignVertical: 'top' to display it at top position, but without success the strange thing is that on the IOS is working perfectly
React Native TextInput Multiline
multiline
If true, the text input can be multiple lines. The default value is false. It is important to note that this aligns the text to the top on iOS, and centers it on Android. Use with textAlignVertical set to top for the same behavior in both platforms.
current behaviour:
the text is displayed at the bottom
desired behaviour:
the text to be displayed at the top
index.js
render() {
return (
<View style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ecf0f1',
paddingTop: 20,
paddingBottom: 50,
paddingLeft: 20,
paddingRight: 20}}>
<TextInput
style={{
flex: 1,
textAlignVertical: 'top',
borderWidth: 1}}
autoCapitalize={'none'}
autoCorrect={false}
value={this.state.textTabs}
multiline={true}
onChangeText={(text) => {this.setState({textTabs: text})}}
underlineColorAndroid={'transparent'}
editable={true}
/>
</View>
);}
Thanks in advance