I am doing stack navigation in React Native. It works fine, but the problem is that I want to do the navigation like the fragment navigation in Android.
In the image from link given below, the red highlighted part only gets navigated when I click the arrow button in green highlighted part(The green highlighted part is a navigation header).
https://i.stack.imgur.com/Wa4lL.png
If i understand your question correctly... you want to make a fragment in RN. In react native, it called modal and there is many packages providing this. One of this good packages is react-native-modalbox.
I hope i understand your question correctly.
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
Following the example of this docs page from React Navigation, I created a nested bottom navigation system for my React Native app (simplified version of my code can be seen and tested here). However, I have noticed that the icons for the pages shown in the navigation bar are the typical question mark symbols (on iOS) that show when the image is not recognized:
However, if I use a simple navigation bar, with no nesting, the icons are shown no problem. Any ideas on how to fix this?
I found out what the problem was: I was adding the icon into the deepest (second) layer of the navigation bar. When using nested navigation bars, the icons must be placed in the highest level navigation layer. Here is a working version of the previous example, with the appropriate correction.
I am trying to make the bottom sheet touch the bottom of the screen rather than the bottom of the tab bar.
screenshot
Attempts to increase the z-index and position it further down are fruitless as the View will not overlap the bottom bar, it will always go behind it.
I tried to wrap it in a Modal component, which fixes the alignment, but then you can not interact with the map.
To create a custom bottom sheet. You can use this package
react-native-actions-sheet
I have used this in many applications. This will resolve all of your issues. As this package is comfortable in iOS and android both.
You can try the bottom sheet libraries which are present in react native. Few of which I have used is:
react-native-raw-bottom-sheet //my choice
react-native-actions-sheet
You can also check this out
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.
Is there any way by which we can show the tabs to navigate screen in bottom part rather than default top part in Android. I am making an app where I need tabs to be at bottom just like in iOS.
I found out that by simply adding "tabBarPosition: 'bottom' " to TabBarConfig, I was able to get the expected output. You can refer to the docs here.