How is it possible to make the screen scroll to top when the tab bar label is pressed? I am using createMaterialTopTabNavigator from react-navigation version 4.X.
I suspect that the way to do this is to do something inside tabBarOnPress, but I just can't figure out what! Here's a Snack to work with: https://snack.expo.dev/URMUVXUXxw
Thanks for your time.
Instead of importing ScrollView from react-native, import the ScrollView from react-navigation. I'm not sure how this fixes the problem, but it does :)
Related
I want to achieve this effect in react-native, Is there a component that achieves this or can this can be done using Animated View ?
I want to only to create the custom tab component, with this sliding animation when switching between them
If you mean TopTabs and use react-navigation to navigate around your app you can use the TopTabNavigator from react-native. Otherwise this can be done with React Animated
I use this libary for my modal:
https://github.com/jeremybarbet/react-native-modalize
if I open the modal, my statusbar is white. How can I make this transparent ?
Please use statusBarTranslucent. This will solve your problem perfectly.
This has added since React Native 0.62
<Modal {...props} statusBarTranslucent>...</Modal>
Thanks.
I use react-native-modal and I have the same issue.
This library doesn't completely hide the status bar but makes it transparent instead of white. No codes required. You just need to link the library and it works.
https://github.com/listenzz/react-native-modal-translucent
I'm using React native drawer navigation, when you swipe out from the left or right - it opens the drawer.
Does anyone know a way of changing the gesture start point, so that it starts slightly further into the screen?
My users are finding on curved screens it doesn't always drag out and feels un-natural to use.
I've looked through the documentation and couldn't find anything there.
Thank you!
Use edgeWidth props in react-navigation drawer.
edgeWidth-
Allows for defining how far from the edge of the content view the swipe gesture should activate.
For more details https://reactnavigation.org/docs/drawer-navigator/#edgewidth
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 want to scale down the screen view when the Drawer Content is open using react-navigation with DrawerNavigator. You can see the expected behavior here. I'm not sure if is it possible, so suggestions using react-navigation are welcome.
react-native-scaling-drawer supposed to work with React Navigation v1.
Let me know if you manage it to work with v2.