i am using react navigation v5 lib #react-navigation/bottom-tabs
my bottom tabs does not rendering the way is suppose to be(as i think), here is the photos
it renders as:
what i think it suppose to be :
how to make my app as second pic
Edit : i may add marginBottom for every screen as solution, but is't the best solution?
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 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
I'm looking for a solution, if possible a library or a custom component, for React Native, without Expo.
I need to create a video frame that is movable in the screen, up and down, and cover the content. I also need to make it possible to click on the content behind it.
Another difficulty is that I need it to stay up on all screens during navigation.
I first tried to use reanimated-bottom-sheet with some increments, but the content behind the bottom is not clickable. Also, to make it available on all screens I needed to put in at the same level as React Navigation's BottomTabNavigator and it covers the tab bar too even with a zIndex.
I also tried to use modals, but I'm relatively new to React Native and couldn't find how to make the background touchable as well as making it movable.
I guess I need to make a view with absolute positionning and learn Reanimated, unless you have a simpler idea?
Thanks
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 am currently working on an App for Android and iOS - i am using react native.
Is there any way to hide the navigation bar dynamically in react-navigation or should i rather switch to react native router flux?
When the user changes to landscape i want to hide the navigation bar, when he goes back to Portrait, i want to show it again.
I know how to change it statically by using {header: null} in the navigation Options, but this does not help me in this case, at least i did not find a way to solve this.
Thanks in advance!
This is sort of a hack but I think you can replace the provided header component from React navigation with your own, then add a redux state that controls its visibility.
Either wrap your screens with a view that contains an onLayout event that will trigger redux action to set the visibility of your custom header.