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.
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 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 have ReactNavigation -> DrawerNavigation as a main navigator for my app and it holds StackNavigator as a base router for all app screens. Pretty basic setup i think.
Hovever: the first screen consist of ScrollView wchich is oriented horizontally. This interferes with drawer's edge drag to open functionality. Sometimes it works - most of the time scrollview takes over the swipe gesture.
I already increased the edgeWidth param in order to make sure it's not causing the issue.
My guess is the scrollview captures the gesture. Is there a way to give the drawer priority or to somehow limit scrollview gesture area so it's not trigerred at the edge of screen?
Much appreciate your help
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
I have a view, in which there is a redux form field linked to a text input.
First of all, is there a way to show that keypad on initial rendering without the sliding in animation?
Second, on finished editing, is there a way to still keep the keypad up there?
I have tried to set blurOnSubmit to false in TextInput, it seems to stop me from losing the focus by clicking outside.
Lastly, there is also a button on that page which will start a request with the input value, on resolved, a modal will slide up from the bottom to show a success screen. This modal is implemented using react-navigation. The modal is a relatively small rectangle shape with the rest part transparent. So users can see the original page even when the success modal is up. In this case, is there a way to always show the keypad in the original screen even when the modal is up?
First of all, is there a way to show that keypad on initial rendering without the sliding in animation?
No. React Native doesn't support a way to disable the slide animation.
Second, on finished editing, is there a way to still keep the keypad up there?
If the TextInput is being rendered inside a ScrollView, add keyboardShouldPersistTaps=handled. https://facebook.github.io/react-native/docs/scrollview#keyboardshouldpersisttaps. It will hold the focus.