I am using Bottom Tab of react navigation and I am using borderWidth:1 and elevation:0 in tabBarStyle property of Tab.Navigator. How can I make top border visible?
Related
Bottom navigation tabs don't hide without animation. Whenever I use the text input in react native bottom navigation tab is pushed up by the keyboard. That was somewhat solved by using:
screenOptions={{
tabBarHideOnKeyboard: true,
}}
However, even after trying that bottom tab is seen for a moment. Is there a way to not see that bottom tab or turn off that bottom tab appearing and disappearing animation? I'm using react-navigation bottom tabs.
I'm trying to right align my header title in my react native app but can't seem to do so. In react navigation, you can set headerTitleAlign prop only to center and left. I try to use headerRight and remove headerTitle but the default title kicks in which is the name of the screen.
Had a search online but no answers has cropped up.
Wrap your header inside a view. And pass this style ={{alignItems: 'flex-end', alignContents: 'flex-end'}}
I have a component that when scrolling a button remains at the same height as the header, that header has headerBackTitleVisible: true, and when pressing those buttons in that position, they do not work.
I have tried with headerMode to float or to screen but I still can't find the solution
Working with a long form in Formik that needs Scrollview. Scrollview works for the form; however it will not render the submit button at the bottom of the form.
Can I define the form with a container element, use Scrollview and leave button outside element so it will stay at the bottom of the viewport.
FYI working in React navigation v5 with a Tab Navigation at bottom of viewport.
Thanks
I have a materialTopTabNavigator in my app and one of the screens needs to have the swiping between tabs gesture enabled on only part of the screen (for example, from the bottom of the screen to 200 from bottom). I think I should be able to do this with gestureHandlerProps prop of the materialTopTabNavigator, but it doesn't seem to work. This prop allows you to pass props to the underlying PanGestureHandler. Here is what I am passing as gestureHandlerProps and the link to the PanGestureHandler docs:
gestureHandlerProps={{
maxPointers:1,
failOffsetY:height-200,
hitSlop: {left:0, right:0, top:0, bottom:200}
}}
//height is height of screen
Link to PanGestureHandler Docs: https://docs.swmansion.com/react-native-gesture-handler/docs/handler-pan
I figured out how to do this using the common handler props listed in the react-native-gesture-handler docs. I used the hitSlop prop and passed it an object with height and top properties as follows. This was passed to my material top tabs navigator gestureHandlerProps prop.
gestureHandlerProps={{
maxPointers: 1,
hitSlop: {height: 100, top: 0}
}}
This allows the underlying PanGestureHandler of the material top tabs navigator to only be activated from 100 points from the bottom of the screen.
Link to common handler props: https://docs.swmansion.com/react-native-gesture-handler/docs/handler-common