I just created react native app with expo init, built for Android. When i open app in landscape mode and after turn to portrait, the height of app is half of screen. https://i.stack.imgur.com/kzIlD.jpg
Here is code: https://github.com/catalin935/reactNativeHeightBug/blob/master/App.js
It looks like your view has been initialised with a height, perhaps Dimensions.get('screen').height?
If you want the view to always fill the screen, add flex: 1 to the styles to get it to flex to it's container rather than using height/width values.
Alternatively, you could attach an event listener to Dimensions to listen for the change event and use that to rerender your views although I'd only really recommend that if you want your UI to change depending on the screen ratio/orientation (eg, set a FlatList to use two columns rather than one in landscape mode. I have a small library called react-native-screenutils that may help you with that.
Related
I'm making an app with react native, expo, bottom-tab-bar navigation package, and expo-screen-orientation package.
The app is for reading some text that is inside some View elements in the middle of the screen, and is controlled with the bottom tab bar.
When I rotate the phone, and change the screen orientation (portrait-landscape), it kind of messes with the UI layout.
What I'd like to achieve, is to only have the View element that contains the readable text to rotate when the phone changes orientation, but the rest of the app (The bottom tab bar, background, buttons, etc.) to stay in the 'portrait' orientation.
What I've tried so far is this:
I've tried to lock the screen to portrait with
ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);
and then listening to orientation changes with eventListeners, Dimentions, useWindowDimentions, and expo-screen-orientation's ScreenOrientation.AddOrientationChangeListener(Listener),
and then maybe rotating the View element manually.
But if the screen is locked and not rotated, the change is not detected.
I've looked but couldn't find an answer.
I want to have a scrollable (with snap points) react native navigation stack screen(presentation: "modal") in my app. I don't want anything like "react-native-modal" library or official Modal from react native library. I want an actual screen with modal behaviour and I can achieve that with presentation: "modal" property but I want it to have snap points. Perfect example would be the iOS fitness app.
So this is the screen when you initially press upload button. As you can see it takes maybe 40% - 50% height of the screen
If you scroll down height expands and it acts as ordinary screen with presentation: "modal"
And lastly if you scroll back up it springs back to its original position and it acts as a modal(no gap at the top of the screen as in second image)
That is the behaviour I am looking for.
If it is possible I would like to get similar behaviour on android as well.
I tried to implement that behaviour with "react-native-modal" and official Modal from "react-native" components but I want to have it as a separate screen. I also want it to feel "native like" and with these stuff it doesn't feel that way.
You may try this library react-native-simple-bottom-sheet
I have a screen with WebView (react-native-webview) which has scrollable content. If user continues scrolling after reaching the end of WebView, I want to take user to a different screen with a swipe up animation. With WebView's onScroll function property, I am able to determine if the user has reached end of content or not. But I am not able to take user to a different screen with an animation effect.
Since WebView acts different for android and ios platform (you can continue scrolling even after reaching end of content on ios), I had to use PanGestureHandler to identify if the user is performing swipe up action after reaching end of web content. But when I manually try to navigate user to a different screen, I am unable to create swipe up effect similar to one in GIF below.
I am using react-navigation v5 in my app.
I have already tried using react-native-swiper. It does not work well in Android because it internally uses Scrollable and WebView stop scrolling inside a Scrollable component.
I am using custom HTML content here, so replacing WebView is not really a choice. Is there a way to utilize Stack Navigator to create such an effect?
Thank you.
In my react-native app, I need different screen behaviour on different screens when keyboard pops up.
In some screens i need the screen to move up, and in some screens i do not want to change the screen position etc.
Individual behaviours can be achieved by setting values of android:windowSoftInputMode to adjustNothing or adjustResize in AndroidManifest.xml file.
But setting these values in the manifest file changes the behaviour for all the screens.
Is there a way to change it programmatically within different screens ?
In android code it looks achievable using a getWindow() call. How to do it in react-native ?
Try this component react-native-android-keyboard-adjust
When the component in which you don't want to move up views mounts, set AndroidKeyboardAdjust.setAdjustPan() and when that component unmount reset it to AndroidKeyboardAdjust.setAdjustResize() or whatever option that suits your criteria
See this answer
try use ScrollView instead of View then wrap it on KeyboardAvoidingView
If i make my application screen on nexus4 emulator screen and wanted to see it on small screen phones, would it be necessary to use scrollview instead of View in react-native.
In some cases yes, because scaling everything according to the screen size will make the app elements look extremely tiny on some devices and text will be hard to read. I had a similar issue where I scaled every screen according to the device resolution and customers complained about not being able to read on small devices.
What I did was wrap such screens in a ScrollView, then put a View inside it with a minHeight: screenHeight then put elements with flexbox and fixed size inside it. This way it would fit most screens perfectly and on smaller ones it would still look good enough. You should experiment a little to see what works best for your app.