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!
Related
I have created an angular app where the sidebar is height: 100%. However when viewing the webapp in Chrome for Android, when scrolling the document:
The chrome address bar slides up gently
The 100% real size remains the same until you TouchEnd
The darkgrey sidebar is height: calc(100% - 55px) so the top bar should normally always remain visible, and always fill the remaining space between the top bar and the very bottom.
I've already tried several things to get this fixed. The footer has bottom: 0 and this one is in fact always rendered correctly. So this made me try to use top: 55px; bottom: 0 instead of height: calc(100% - 55px). But from the moment you're setting both top and bottom, the result is the same as setting the height.
Does anybody know a way to make the viewport adjust its height while the address bar is appearing/disappearing?
I was able to solve this issue by
Creating a css variable (variables.scss)
:root {
--viewport-height: 100%;
}
Instead of using 100% use var(--viewport-height)
height: calc(100% - 55px);
becomes
height: calc(var(--viewport-height) - 55px);
Then binding to the visualViewport.resize event (MUST use addEventListener here)
if (!serverSide) {
visualViewport.addEventListener('resize', () => {
document.documentElement.style.setProperty('--viewport-height', `${visualViewport.height}px`);
});
}
Make sure there is no transition set for the height property.
CSS variables are supported by all major browsers.
VisualViewport docs
Linked-from-docs Demo with source code
Commit reference
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
}
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
}
When I run my React Native App on Android (real device or Simulator) the screens are to big somehow and get cut off at the bottom (looks almost like as if the missing part is as high as the status bar, but I don't know if it has something to do with it, check the last screenshot)
The parent view is a simple View with flex: 1 and the rest is relative to that.
Am I missing something on Android? It's my first Android App, I've only done iOS before.
I have the following code to test it:
return (
<View
style={{
backgroundColor: 'red',
width: Dimensions.get('window').width,
height: Dimensions.get('window').height - 24, // 24 = status bar???
}}
>
<Text>{Dimensions.get('window').height}</Text>
</View>
);
I have figured out that it's exactly 24 to high - is this because of the status bar? If so, is it safe to use 24 or does it vary?