I use transparentModal for open a modal in react native.
Stack Group 1: Contains App Screens
Stack Group 2: using transparentModal for handling modal
The modal only occupies 2/3 of screen, and there are some button on the top which should be clickable. However, we cannot press these buttons.
Please take a look at the image below
If you have any idea, please let me know.
Thank you in advance!
Transparent modals are just another screen (s. docs). Meaning that the background's screen is set to transparent, but the underlying screen is not pressable.
A possible solution is to move your buttons in a custom header component for your transparentModal screen (s. docs).
Alternatively (but in your case that's seems not the right way to go), you can set cardOverlayEnabled: true to make the screen close if you tap on the background of your transparent modal screen.
Bad news is that we cannot do it using react-navigation
Please take a look at this link
Related
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.
Hey their fellow stack over flowers!
As the question states, is it possible to perform such a feat?
If possible how would you go about doing it?
So the situation we have here is that there is a drawer and on top of it lies the bottom tab bar which annoys the whole view of the screen. That's why we should find a way to hide it. Isn't it?
Here's what you've got:
What's required is, hiding the tab bar when clicking on the hamburger menu and taking it back up when you touch or press down the bottom tab area. Obviously, I went through other quality questions with qualities answers here. But nothing seems to provide a providence a least bit
Do you know any clever way to handle this?
THANKS!!
If you are using custom tabBar, you could use React.Context or some kind of global state to trigger hiding your tabBar when you press a button. I would "hide" my tabBar by rendering the tabBar as a transparent Pressable with a certain height that when you click on it, it will rerender the original tabBar. You could also use setTimeout to rehide it automatically.
how to move a view from left to right ( intially the view should be hidden and on first button click the view should come from left to right with animation ) partially (30%) and then on second click it should open complete .How to acheive this in react native ??
Not sure I completely understand what you are asking but it sounds like a custom navigation might be possible with the library react-navigation . Here is a detailed blog post that shows possible customizations: https://medium.com/async-la/custom-transitions-in-react-navigation-2f759408a053
Solution lays in your approach. Having a View with screen's width doubled, render your two react components, and take a look on how to animate the hidden screen. TranslateX would do the trick.
It would be better for you if you learn Animated. But if you have a deadline or something, react-navigation has drawer navigation. Or if you don't need navigation, there is a library called react-native-gesture-handler which has Drawer created for you.
I'm using ReactNavigation with a StackNavigator for my screens. From time to time, I need to push a modal screen which the user cannot hit "Back" for. It should also transition from bottom to top (similar to native modal controllers in iOS). I'm not sure how to use the navigate method to do so.
I am not familiar with ReactNavigation (although it looks nice, I'll take a look), but ReactNative already has a Modal component that does what you want (bottom top is the slide animation that has by default: Modal