I tried to transparent navbar on current page in react native router flux but i found an issue that previous navbar is gone
expected: current page not showing navbar and previous navbar stil showing when current page navbar is transparent
before:
after:
How to do this ?
Try
Stack key=... hideNavBar={true}
Related
I use react native navigation and Expo in my project. Everything works as expected but the header on the web is not fixed. How can I keep it on top even by scrolling the page?
I tried many thing like cardStyle: { flex: 1 } in screenOptions but nothing works.
"expo": "^47.0.6",
React native navigation V6
The header can be styled as desirder through Screen -> options -> headerStyle
There's more info in the docs: https://reactnavigation.org/docs/headers/#adjusting-header-styles
I set up an Expo Snack with React Navigation v6, with a ScrollView including a few squares, so you can scroll: https://snack.expo.dev/#p-syche/header-styles
BottomTab is not working on my app and it isn't showing any error:
App JS
tabs JS
In your App.js file, the navigator has a props: initialRouteName={'Home'}
This means navigator will load Stack.Screen with name="Home", in this case your app is showing the Home component for the main screen but not the Tabs component for main screen.
My suggestion: change initialRouteName={'Home'} to initialRouteName={'Tabs'} in line 18 of App.js file
I am working on a react-native app using react navigation.
I want to add a partial modal that covers 30% of screen when pressing on one of the tabs in the bottom-tab, similar to the "+" tab in the YouTube app:
Youtube modal
I've tried to use react-native Modal component, but
I have problems with activating it from bottom tab
it covers whole screen
Any suggestions?
Thanks..
To answer your question 100% correct I'd need to know more details about your project but, I can try to explain how can be your logic to do this withou any libs.
You can create another component called "Start" where you're gonna put your Modal with absolute position above your navigator.
You can create a Modal that will be above your navigator:
export const Start(){
return(
<View style={{flex:1}}>
<Modal>
<View/>
</Modal>
<NavigatorComponent/>
</View>
)
}
This is going to work because when you put a component with absolute position above the other, this component stay in front of the below component. In your case, will stay in front of everything including the TabBar.
To the modal has just 30% of the height you just need to put in its styles the attribute height: '30%'.
In the initial component of your App (usually the index.js file), you just return the new Start component.
I hope you like my answer. Please, if you have more questions you can ask. Waiting for your feedback :).
I made my own Header component in TabNavigator (react-navigation).
When I'm swiping between tabs, every component is swiping as well.
Is it possible to make fixed Header during swiping between different tabs?
Add headerMode :float in navigation options of TabNavigator, as mentioned in this link react-navigation
Wrap the Navigator in a root view then provide header inside the view
Pseudo code wll look like
<View>
<Header/>
<TabNavigator/>
</View>
Header will remain constant while the tab navigator works as indented
I've created a ReactNative app that uses StackNavigator. Whenever the app navigates from one screen to another, it animates the navigation. Is there a way to remove the animation or customize it? StackNavigator also adds a title to each of my screen. Is there a way to remove the screen title? I tried setting the 'title' property of navigationOptions to an empty screen and the screen was rendered without a title. However, navigating from this screen to another one will cause an exception.
e.g. the "welcome" title in these sample screens
To remove the header from a stackNavigator screen, set headerMode in StackNavigatorConfig to none. So, your stackNavigator should look like so:
import HomeScreen from 'path/to/screen';
const stack = StackNavigator({
Home: {
screen: HomeScreen
}
}, {
headerMode: 'none' // <= here
});
There is an active proposal to allow the customization of animation in react navigation. You can follow this open issue