I have a react-native Modal, I would like to render it with rounded corners like this:
but if I define it like this:
<Modal
style={{
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
overflow: 'hidden',
}}
nothing happens (at least on Android). I also tried to wrap the Modal with a View with the same style but with no more success.
What am I doing wrong?
The solution is to put a View inside the Modal (right after its declaration) with this style:
<Modal>
<View
style={{
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
overflow: 'hidden',
}}
>
</Modal>
Related
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
All of my gifs are on non-solid backgrounds. The only way to get GIFs to respect borderRadius right now is to use a hack called overlayColor per:
Rounded corner issue with GIF image in react native android
https://github.com/facebook/react-native/issues/11363
Does anyone have any other solution? overlayColor is not a solution for my use.
The solution for me was to wrap the Image in a View and have both the Image and the View with the same borderRadius.
EDIT: originally I said the image needed to have an overlayColor but it looks like it has no effect (which makes sense). Added code example that I'm using:
<View style={{ width: 80, height: 80, borderRadius: 40, overflow: 'hidden' }}>
<Image
source={image}
resizeMode='cover'
style={{
borderRadius: 40,
alignSelf: 'center',
width: 80,
height: 80
}} />
</View>
I'm struggling with Android version of my simplest ever React Native app.
Seems like Android ignores some of the props, namely translucent in <StatusBar /> and, most annoyingly, multiline and underlineColorAndroid in the <TextInput />.
Here's the code, it's pretty straightforward:
<View style={[styles.main, {backgroundColor: background_color}]} >
<StatusBar
barStyle="light-content"
translucent={true} />
<View style={[styles.header, {backgroundColor: background_color}]}>
<Button name='clear' disable={this.state.text} action={this.clearInput} />
<Button name='run' disable={this.state.text} action={this.openFullScreen}/>
</View>
{
this.state.fontLoaded ? (
<TextInput
style={styles.input}
ref='input'
onChangeText={(text) => this.setState({text: text})}
placeholder={this.state.placeholder}
value={this.state.text}
multiline={true}
placeholderTextColor={placeholder_color}
returnKeyType='done'
blurOnSubmit={true}
numberOfLines={5}
autocorrect={false}
underlineColorAndroid='transparent' />
) : null
}
</View>
const styles = StyleSheet.create({
main: {
flex: 1,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'flex-start'
},
header: {
height: 88,
width: '100%',
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between'
},
input: {
width: '94%',
flex: 1,
fontSize: 50,
lineHeight: 1,
fontFamily: 'Roboto',
fontStyle: 'normal',
fontWeight: '900',
color: '#ffffff',
overflow: 'hidden',
textAlignVertical: "top",
//lame fix for Android
//paddingTop: Platform.OS == 'android' ? 40 : 0,
},
});
This is what it looks like on iOS:
iOS-with-text
And this is the mess on Android: android-with-text
As you can see, for some reason it a) draws the text on the top of the screen instead of top of the TextInput, b) doesn't do line breaks, overlapping all of the words on just 1 line (BTW I tried changing textBreakStrategy prop but to no avail), and с) still shows a white underline. Placeholder state on Android looks fine though (meaning placeholder is located right where it should be and has line breaks).
It's my first RN app and I used create-react-native-app to set up the project.
react-native-cli: 2.0.1
react-native: 0.47.2
Any advice would be much appreciated!
UPD: lineHeight: 1 caused half of the trouble (not sure what its problem with translucent and underlineColorAndroid is though). NTS: never ever blindly copy paste your styles from your web ReactJS app.
Couple of things. Multiline is not enough to enable the wrapping. You also need to use numberOfLines as a prop.
Also, I think your problem is just the height of the TextInput or the flex surrounding the TextInput.
And lastly, it could be that your style header view has either a top attribute or a position absolute that is messing with the view.
If this does not solve it, please post your styles.
Edit: Some of those styles could be messing with the height. Try starting with something more simpler like this:
input: {
width: '94%',
flex: 1,
height: 60, //-> Add this to make sure the text has a height instead of flex
//fontSize: 50, -> This is huge, the text might not be able to show entirely.
//lineHeight: 1, -> Line height is not the amount of lines. Is the size. It should be around the font size, so either remove it or try setting this value to 50 like the font size.
fontFamily: 'Roboto',
fontStyle: 'normal',
fontWeight: '900',
color: '#ffffff',
//overflow: 'hidden', -> This might be messing with the header
textAlignVertical: "top",
//lame fix for Android
//paddingTop: Platform.OS == 'android' ? 40 : 0,
},
version of RN is 0.41.2
does anyone know how to stop View's that use flexbox for sizing, from automatically "shrinking" their height if a TextInput element is used in one of the Views? It's probably easier to illustrate by example, and to be clear, you can see that these are View's nested inside a <Modal>.
Here is the view when no keyboard is open. Same on both.
Here's what happens when TextInput has the focus. I dont want these views to adjust as they have, above the keyboard. I want the yellow and blue colored View's to remain 'full size' - exactly as illustrated in the iOS screenshot.
This same code, on iOS, does not move/adjust the View's (above the keyboard). That's the behavior I want on Android too.
Here is the sample render method code. It's just a standard template RN project with a change to the render method to test this out.
I tried inserting android:windowSoftInputMode="adjustNothing" into AndroidManifest.xml but had no effect. I'm sure it's just a prop or other manifest setting. Hoping someone can let me know?
render() {
return (
<View style={styles.container}>
<Modal
animationType={'slide'}
transparent={false}
onRequestClose={() => console.log('sd')}
>
<View style={{flex:1, backgroundColor: 'lightgrey'}}>
<View style={{
//height:300,
flex: 1,
backgroundColor: 'yellow',
alignItems: 'center',
justifyContent: 'center',
}}>
<View style={{
margin: 10,
//height:100,
width: 200,
justifyContent: 'center',
backgroundColor: 'green'}}>
<TextInput style={{height: 40, backgroundColor: 'orange'}} />
</View>
</View>
<View style={{
//height:200,
flex: 1,
backgroundColor: 'blue',
}}>
</View>
</View>
</Modal>
</View>
);
}
Did you try wrapping all of the contents within a ScrollView and then a child KeyboardAvoidingView?
I had exactly the same problem, and instead of adding ScrollView everywhere I just made a little change in AndroidManifest.xml:
instead of: android:windowSoftInputMode="adjustResize"
i wrote: android:windowSoftInputMode="adjustPan"
Worked like a charm for me
I'm creating a simple action button (floating button)
This is working :
<View style={{
width: this.props.size,
height: this.props.size,
borderRadius: this.props.size / 2,
backgroundColor: '#ee6e73',
position: 'absolute',
bottom: 10,
right: 10,
flexDirection:'row'
}}>
<Text>
+
</Text>
</View>
This is not :
<TouchableOpacity
onPress={()=>{
}} >
<View style={{
width: this.props.size,
height: this.props.size,
borderRadius: this.props.size / 2,
backgroundColor: '#ee6e73',
position: 'absolute',
bottom: 10,
right: 10,
flexDirection:'row'
}}>
<Text>
+
</Text>
</View>
</TouchableOpacity>
Just wrap with TouchableOpacity then my button not show up without any errors.
React 0.1.7, Android
Then I try move styling from View to TouchableOpacity, It's work
<TouchableOpacity
onPress={()=>{
}}
style={{
width: this.props.size,
height: this.props.size,
position: 'absolute',
borderRadius: this.props.size / 2,
backgroundColor: '#ee6e73',
bottom: 10,
right: 10,
}}>
<Text>
+
</Text>
</TouchableOpacity>
Can any one explain me why?
React Native docs said
[https://facebook.github.io/react-native/docs/touchableopacity.html][1]
A wrapper for making views respond properly to touches.
This is done without actually changing the view hierarchy,
and in general is easy to add to an app without weird side-effects.
This mean I wrap my original view and it would work as I expected, But it's not.
From my experience, TouchableOpacity does not work well with absolute positioning. Perhaps if you remove that, the onPress will work again.
Also please note that it is EXTREMELY important what element you render first and what you render last.
For example, if you do:
<View>
<TouchableOpacity style={{position:'absolute'}} onPress={()=>
{console.log("It works or not?")}}>
</TouchableOpacity>
<Text style={styles.aStyle}>
Some text bla bla......
</Text>
</View>
There is a pretty good chance that the Text will be rendered on top of the TouchableOpacity, therefore you won't be able to get the onPress working.
Then since the position is absolute, all you have to do is render it as the last child of the View:
<View>
<Text style={styles.aStyle}>
Some text bla bla
</Text>
<TouchableOpacity style={{position:'absolute'}} onPress={()=>
{console.log("It works or not?")}}>
</TouchableOpacity>
</View>
I know this is old but I had this issue and nothing above worked until adding flex: 1 to my TouchableOpacity.
TouchableOpacity does not assume the style of the view it is the parent of. You need provide it style information.
Incase anyone else stumbles across this, and none of these suggestions work my fix was to instead import TouchableOpacity from react-native instead of react-native-gesture-handler
So
import { TouchableOpacity } from "react-native";
Instead of
import { TouchableOpacity } from "react-native-gesture-handler";
I had a similar issue after a lot of debugging I found out that negative margin was the problem.
Beware of negative margin when using TouchableOpacity
Debugging step:
Remove all the styling
Create fresh component without styling
Make sure it is working without styling
Then state adding your styling