Im working in a react native app, for my navigation, I used react-navigation 4, In one of the screens I want to Overlap the react-navigation header with a card component, On android, it's working fine but on iOS I can't get it to work even though I set the card zIndex to a big number it's always hidden by the react-navigation header.
here is the code for my component :
<View style={global.container}>
<View style={styles.info}>
<View style={styles.card}>
<Image style={styles.image} source={app.appLogo} />
</View>
</View>
<View>
and this is the CSS :
card:{
padding:0,
borderRadius: 30,
backgroundColor:"#fff",
position: 'absolute',
top: -70,
zIndex:99,
elevation:5
},
Display on android:
Display on iOS:
Please add zIndex to parent view. In iOS, the zIndex doesn't work for nested parentView. You need to make the parentView has high zIndex, and then target View again.
.container {
zIndex:101
}
.info {
zIndex:100
}
Related
REACT NATIVE
Is it possible to create a page on my app that covers the screen untill the navigation bar of the most modern phones? Like the page has enough height to wrap phones' bottom navigation bar like on my prototype?
Example in the image:
My Prototype
Yes there is, if you want your page to occupy the whole screen just do:
<View style={{ height: '100%', width: '100%' }}>
// YOUR CONTENT
</View>
Now, if you want to hide the android navigation bar you can do:
const visibility = NavigationBar.useVisibility()
async function setBar() {
await NavigationBar.setBehaviorAsync('overlay-swipe')
await NavigationBar.setVisibilityAsync('hidden')
}
useEffect(() => {
setBar()
}, []);
Since I don't own an iPhone I wouldn't know how to hide the ios navigation bar, but for android that is the solution.
I hope this helps!
I am working on a react native project made using react native cli. The problem is that the TextInput gets highlighted when the keyboard is visible/active & it squeezes the view and mess up the layout which reminded me of KeyboardAvoidingView behaviour. Even though I don't use KeyboardAvoidingView in this project because all text inputs are in the upper half of the screen so they won't get covered by the keyboard.
<TextInput
style={styles.inputText}
multiline={false}
onSubmitEditing={() => Keyboard.dismiss()}
autoCapitalize="none"
autoCorrect={false}
keyboardType="number-pad"
onChangeText={numberInputHandler}
value={enteredValue}/>
inputText: {
borderBottomColor: "white",
borderBottomWidth: 2,
width: "30%",
position: "absolute",
bottom: Dimensions.get("window").height / 5,
left: Dimensions.get("window").width / 5,
color: "white",
fontSize: Dimensions.get("window").height * 0.03,
fontFamily: "Lato-Regular"
}
React Native Ver 0.61.5
Testing was done on an Android emulator and an Android physical device
As I can see you are using absolute positioning where bottom uses Dimension api to get the height. The problem occurs due to this. Try giving static height rather then fetching from Dimension because when keyboard appears visible window gets shrink causing react to re-render because height changes.
position: "absolute",
bottom: Dimensions.get("window").height / 5,
Solution provided by Nikosssgr:
In AndroidManifest.xml
android:windowSoftInputMode="adjustResize" changed it to "adjustNothing"
I'm using a react-native Modal, which contains a View.
The View has some TextInput elements. When the keyboard pops up, the View elements all collapse to fit into the remaining space, but I don't want the View to change at all.
This does not happen for IOS. And also, it does not happen in non-modal Views for Android within the same app.
I have windowSoftInputMode="adjustPan" set in my android Manifest, but it doesn't seem to be applied on the Modal.
return(
<ImageBackground source={require('./../images/IMG1.png')}
style={{flex: 1}} imageStyle={{resizeMode: 'cover'}}>
<View style={{flex: 1}}>
(...)
<Modal visible={this.state.modalVisible} animationType={'slide'}
presentationStyle={'fullScreen'}
onRequestClose={() => this.closeModal()}>
<ImageBackground source={require('./../images/IMG2.png')}
style={{flex: 1}} imageStyle={{resizeMode: 'cover'}}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
<View style={{flex:1}}>
(...)
<View style={{flex:0.9, alignItems:'center', justifyContent: 'center',
flexDirection: 'row'}}>
<TextInput style={MyStyle.textInput}
onChangeText={(myTitle) => this.setState({myTitle})}
placeholder='Title'
/>
</View>
As a workaround, I ended up using a fixed height value for the Modal’s child View instead of flex. (Got it using Dimensions height).
It seems to work as I expected.
Seems like you need to apply statusBarTranslucent={true} prop for the Modal to make the modal content not to resize and the keyboard to pan over the modal content.
My workaround: I used the following style for the child of the modal.
container: {
left: 50,
position: "absolute",
right: 50,
top: 50
}
Using create-react-native-app, testing with an Android device. I'm trying to display a full screen photo in a scroll view. The image displays larger than my screen but I can neither scroll nor zoom.
export default function Photo({ filename }) {
return (
<ScrollView
centerContent
contentContainerStyle={{ flex: 1 }}
maximumZoomScale={2}
minimumZoomScale={1}
>
<View style={{ flex: 1 }}>
<Image style={{ flex: 1 }} source={{ uri: assetPath(filename) }} />
</View>
</ScrollView>
);
}
This component is rendered from a top level react-router Route:
<NativeRouter>
<AndroidBackButton>
<View style={styles.container}>
<Route path="/" exact component={PhotoListContainer} />
<Route
path="/photos/:filename"
component={({ match }) => (
<Photo filename={match.params.filename} />
)}
/>
</View>
</AndroidBackButton>
</NativeRouter>
In the examples I've seen, there's one notable difference: the Image element usually does not have any styles. But if I remove the style property, the image disappears altogether. I suspect at least part of my problem stems from not understanding flex and being new to RN, and that the solution is simple. Please help if you can!
These properties, minimumzoomscale and maximumzoomscale only works for IOS not for Android
Link to docs
Second thing is Scroll only available if your view is getting out of screen.
I have one big problem on Android in React Native.
The React version is 0.39
The render function is as follows:
return (
<View style={styles.container}>
<View style={styles.innerContainer}>
<View style={{ height: y_vis, width: x_vis}} onStartShouldSetResponder={this.onBullsEyeMove.bind(this)} onMoveShouldSetResponder={this.onBullsEyeMove.bind(this)} onResponderMove={this.onBullsEyeMove.bind(this)} onResponderRelease={this.onBullsEyeSet.bind(this)}>
<Image style={{position: 'absolute', top: top * -1, left: left * -1, width: p_width, height: p_height}} source={this.state.item.image} resizeMode="contain"></Image>
</View>
</View>
</View>
)
On iOS it works fine, like is should, but on android a have a strange problem.
Only first time it renders the photo, second time it renders white screen, without photo.
Is it an react native bug as mentioned here or is it something else? Does anybody have an idea?