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.
Related
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.
I currently have a ScrollView/Flatlist containing 4 items with paging enabled. When rendered, each item covers the entire screen in portrait mode. On Android, when the user tries to swipe vertically from one item to another, this requires "large" swipe gestures.
I am trying to increase the "sensitivity" of the react native ScrollView so that the user requires smaller swipe gestures to switch from one item to another.
At the moment the switch to the next/previous page requires that roughly 50% of the target page is visible. I want to reduce this value so that the user does not need to do big swipe gestures.
Any suggestions on how I could fine-tune the props of the ScrollView/FlatList would be great!
So I have a react-native app which is using react-native-navigation.
Whenever I click a card in my app, it pushes me the card screen.
What I want to achieve is the following: when swiping down from that screen, as you swipe down the screen gets smaller and the other one is in the background, but I haven't found anything that can help me with that, any packages? Also, I'd have to pop the current screen to have the other one the background, but if I pop it, the current screen can't stay and get smaller as i swipe down.
So basically I need to animate a component pop.
If you haven't figured it out yet, you could show the card screen as an overlay or modal and add a swipe-down gesture to the Container component of the screen and when it reaches the bottom, you could dismissOverlay or dismissModal with no animation.
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.
In my app, I have horizontal FlatList which is used for swiping between several sub-pages of a screen. This works great.
However, on one of the pages, I have a Slider component. On iOS it works fine, but on Android, the parent ScrollView of the FlatList seems to "steal" the swipe gesture. I am only able to adjust the Slider by clicking very precisely on its thin line, but I cannot adjust it by sliding.
What I need is something like one of these
A view that wraps the Slider component and stops swipe gestures from being propagated to the parent ScrollView
A way to make the FlatList/ScrollView not consume swipes directly on elements that responds to horizontal swipes themself
Somehow adjust the area of which the Slider component will eat the touches around it (it's very small and hard to hit directly). I already tried adding a hitSlop prop, with no luck.
Any suggestions for a solution are very appreciated :)
Check example code and result here.
https://snack.expo.io/#esbenvb/mad-yogurt