Related
Is it possible to disable the modal animation of React Navigation?
class HomeScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
const params = navigation.state.params || {};
return {
headerLeft: (
<Button
onPress={() => navigation.navigate('MyModal')}
title="Info"
color="#fff"
/>
),
/* the rest of this config is unchanged */
};
};
/* render function, etc */
}
class ModalScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontSize: 30 }}>This is a modal!</Text>
<Button
onPress={() => this.props.navigation.goBack()}
title="Dismiss"
/>
</View>
);
}
}
const MainStack = createStackNavigator(
{
Home: {
screen: HomeScreen,
},
Details: {
screen: DetailsScreen,
},
},
{
/* Same configuration as before */
}
);
const RootStack = createStackNavigator(
{
Main: {
screen: MainStack,
},
MyModal: {
screen: ModalScreen,
},
},
{
mode: 'modal',
headerMode: 'none',
}
);
Examples are obtained from React Native official documentation: https://reactnavigation.org/docs/en/modal.html
Solution
Use transitionSpec in transitionConfig for custom screen transition. And make transition duration to Zero.
Official
Example (Not tested)
const ModalNavigator = createStackNavigator(
{
Main: { screen: Main },
Login: { screen: Login },
},
{
headerMode: 'none',
mode: 'modal',
defaultNavigationOptions: {
gesturesEnabled: false,
},
transitionConfig: () => ({
transitionSpec: {
duration: 0,
},
})
...
It's not quite what you want, but you can use the built in Modal component rendered the screen instead. The benefit of doing this is that the Modal component has an animationtype prop that you can set to "none" to get an animation-less modal.
I'm trying to change the color of the background in my react native app, from grey to white. I'm using react-navigation to make a TabNavigator after I render it. I tried to put this TabNavigator in a view and set backgroundColor but all screen became white. How can I solve this?
index.js
...
render() {
return (
<View style={{ backgroundColor: '#FFFFFF'}}>
<Tabs />
</View>
)
}
...
Tabs
...
const Tabs = TabNavigator(
{
Home: {
screen: HomeStack,
navigationOptions: {
title: 'Acasa',
},
},
...
Account: {
screen: AccountScreen,
navigationOptions: {
title: 'Contul meu',
},
},
},
{
tabBarComponent: props => <FooterNavigation {...props} />,
tabBarPosition: 'bottom',
initialRouteName: 'Home',
},
);
...
Home Screen
render() {
const {
data, refreshing, loading, error,
} = this.state;
return (
<ScrollView>
<Container>
{error && <Text>Error</Text>}
{loading && <ActivityIndicator animating size="large" />}
<List>
<FlatList
data={data}
renderItem={({ item }) => (
<ListItem onPress={() => this.props.navigation.navigate('Item', item)}>
<Item data={item} />
</ListItem>
)}
// ID from database as a key
keyExtractor={item => item.title}
ItemSeparatorComponent={this.renderSeparator}
ListFooterComponent={this.renderFooter}
ListHeaderComponent={this.renderHeader}
refreshing={refreshing}
onRefresh={this.handleRefresh}
onEndReached={this.handleLoadMore}
onEndReachedThreshold={0}
/>
</List>
</Container>
</ScrollView>
);
}
I've solved my problem, it was caused by StackNavigator. To solve it , just add some extra options
const HomeStack = StackNavigator(
{
Home: {
screen: HomeScreen,
},
Item: {
screen: ItemScreen,
navigationOptions: ({ navigation }) => ({
title: `${navigation.state.params.title}`,
}),
},
},
**
{
headerMode: 'screen',
cardStyle: { backgroundColor: '#FFFFFF' },
},
**
);
For React Navigation 5 and above
<Stack.Navigator
initialRouteName='dashboard'
screenOptions={{
headerStyle: { elevation: 0 },
cardStyle: { backgroundColor: '#fff' }
}}
>
<Stack.Screen name="Home" component={HomeStack} />
</Stack.Navigator>
For React Navigation 4 and earlier
const HomeStack = StackNavigator(
{
Home: {
screen: HomeScreen,
},
},
{
headerMode: 'screen',
cardStyle: { backgroundColor: '#fff' },
},
);
For React Navigation 6,
<Stack.Navigator screenOptions={{
contentStyle:{
backgroundColor:'#FFFFFF'
}
}} initialRouteName="Home">
Edit your View tag like this,
<View style={{flex: 1,backgroundColor: '#6ED4C8'}}></View>
The following will no longer work due to deprecation.
const HomeStack = StackNavigator(
{
Home: {
screen: HomeScreen,
},
Item: {
screen: ItemScreen,
navigationOptions: ({ navigation }) => ({
title: `${navigation.state.params.title}`,
}),
},
},
**
{
headerMode: 'screen',
cardStyle: { backgroundColor: '#FFFFFF' },
},
**
);
You now have to use defaultNavigationOptions (see below).
const HomeStack = StackNavigator(
{
Home: {
screen: HomeScreen,
},
Item: {
screen: ItemScreen,
navigationOptions: ({ navigation }) => ({
title: `${navigation.state.params.title}`,
}),
},
},
**
{
headerMode: 'screen',
defaultNavigationOptions: {
cardStyle: { backgroundColor: '#FFFFFF' },
},
},
**
);
The correct prop to be set is sceneContainerStyle:
<BottomTab.Navigator
...
sceneContainerStyle={{ backgroundColor: 'white' }}
>
...
</BottomTab.Navigator>
Set in view that's where you want to set background colour
view: {
backgroundColor: '#FFFFFF'
}
I am using react-navigation and as per the structure of my application, we have a tab navigator inside stack navigator, I am not been able to find any proper guide for implementing Deep-Linking.
https://v1.reactnavigation.org/docs/deep-linking.html. this doesn't give any reference for nested navigators.
You have to basically pass a path to every upper route untill you come to you nested route. This is indipendent of the type of navigator you use.
const HomeStack = createStackNavigator({
Article: {
screen: ArticleScreen,
path: 'article',
},
});
const SimpleApp = createAppContainer(createBottomTabNavigator({
Home: {
screen: HomeStack,
path: 'home',
},
}));
const prefix = Platform.OS == 'android' ? 'myapp://myapp/' : 'myapp://';
const MainApp = () => <SimpleApp uriPrefix={prefix} />;
In this case to route to an inner Navigator this is the route: myapp://home/article.
This example is using react-navigation#^3.0.0, but is easy to transfer to v1.
So, after the arrival of V3 of react navigation, things got extremely stable. Now i will present you a navigation structure with deep-linking in a Switch navigator -> drawerNavigator-> tabNavigator -> stack-> navigator. Please go step by step and understand the structure and keep referring to official documentation at everystep
With nested navigators people generally mean navigation structure which consists of drawer navigator, tab navigator and stackNavigator. In V3 we have SwitchNavigator too. So let's just get to the code,
//here we will have the basic React and react native imports which depends on what you want to render
import React, { Component } from "react";
import {
Platform,
StyleSheet,
Text,
View, Animated, Easing, Image,
Button,
TouchableOpacity, TextInput, SafeAreaView, FlatList, Vibration, ActivityIndicator, PermissionsAndroid, Linking
} from "react-native";
import { createSwitchNavigator, createAppContainer, createDrawerNavigator, createBottomTabNavigator, createStackNavigator } from "react-navigation";
export default class App extends Component<Props> {
constructor() {
super()
this.state = {
isLoading: true
}
}
render() {
return <AppContainer uriPrefix={prefix} />;
}
}
class WelcomeScreen extends Component {
state = {
fadeAnim: new Animated.Value(0.2), // Initial value for opacity: 0
}
componentDidMount() {
Animated.timing( // Animate over time
this.state.fadeAnim, // The animated value to drive
{
toValue: 1,
easing: Easing.back(), // Animate to opacity: 1 (opaque)
duration: 1000,
useNativeDriver: true // Make it take a while
}
).start(); // Starts the animation
}
render() {
let { fadeAnim } = this.state;
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center", backgroundColor: '#000' }}>
<Animated.View // Special animatable View
style={{ opacity: fadeAnim }}
>
<TouchableOpacity
onPress={() => this.props.navigation.navigate("Dashboard")}
style={{
backgroundColor: "orange",
alignItems: "center",
justifyContent: "center",
height: 30,
width: 100,
borderRadius: 10,
borderColor: "#ccc",
borderWidth: 2,
marginBottom: 10
}}
>
<Text>Login</Text>
</TouchableOpacity>
</Animated.View>
<Animated.View // Special animatable View
style={{ opacity: fadeAnim }}
>
<TouchableOpacity
onPress={() => alert("buttonPressed")}
style={{
backgroundColor: "orange",
alignItems: "center",
justifyContent: "center",
height: 30,
width: 100,
borderRadius: 10,
borderColor: "#ccc",
borderWidth: 2
}}
>
<Text> Sign Up</Text>
</TouchableOpacity>
</Animated.View>
</View>
);
}
}
class Feed extends Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Button
onPress={() => this.props.navigation.navigate("DetailsScreen")}
title="Go to details"
/>
</View>
);
}
}
class Profile extends Component {
render() {
return (
<SafeAreaView style={{ flex: 1, }}>
//Somecode
</SafeAreaView>
);
}
}
class Settings extends Component {
render() {
return (
<View style={{ flex: 1 }}>
//Some code
</View>
);
}
}
const feedStack = createStackNavigator({
Feed: {
screen: Feed,
path: 'feed',
navigationOptions: ({ navigation }) => {
return {
headerTitle: "Feed",
headerLeft: (
<Icon
style={{ paddingLeft: 10 }}
name="md-menu"
size={30}
onPress={() => navigation.openDrawer()}
/>
)
};
}
},
DetailsScreen: {
screen: Detail,
path: 'details',
navigationOptions: ({ navigation }) => {
return {
headerTitle: "Details",
};
}
}
});
const profileStack = createStackNavigator({
Profile: {
screen: Profile,
path: 'profile',
navigationOptions: ({ navigation }) => {
return {
headerTitle: "Profile",
headerMode: 'Float',
headerLeft: (
<Icon
style={{ paddingLeft: 10 }}
name="md-menu"
size={30}
onPress={() => navigation.openDrawer()}
/>
)
};
}
},
DetailsScreen: {
screen: Detail,
path: 'details',
navigationOptions: ({ navigation }) => {
return {
headerTitle: "Details"
};
}
}
});
const settingStack = createStackNavigator({
Settings: {
screen: Settings,
path: 'settings',
navigationOptions: ({ navigation }) => {
return {
headerTitle: "Settings",
headerLeft: (
<Icon
style={{ paddingLeft: 10 }}
name="md-menu"
size={30}
onPress={() => navigation.openDrawer()}
/>
)
};
}
},
DetailsScreen: {
screen: Detail,
path: 'details',
navigationOptions: ({ navigation }) => {
return {
headerTitle: "Details"
};
},
}
});
const DashboardTabNavigator = createBottomTabNavigator(
{
feedStack: {
screen: feedStack,
path: 'feedStack',
navigationOptions: ({ navigation }) => {
let tabBarVisible = true;
if (navigation.state.index > 0) {
tabBarVisible = false;
}
return {
tabBarLabel: "Feed",
tabBarVisible,
//iconName :`ios-list${focused ? '' : '-outline'}`,
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-list" color={tintColor} size={25} />
)
};
}
},
profileStack: {
screen: profileStack,
path: 'profileStack',
navigationOptions: ({ navigation, focused }) => {
let tabBarVisible = true;
if (navigation.state.index > 0) {
tabBarVisible = false
}
return {
tabBarVisible,
tabBarLabel: "Profile",
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-man" color={tintColor} size={25} />
)
};
// focused:true,
}
},
settingStack: {
screen: settingStack,
path: 'settingsStack',
navigationOptions: ({ navigation }) => {
let tabBarVisible = true;
if (navigation.state.index > 0) {
tabBarVisible = false;
}
return {
tabBarVisible,
tabBarLabel: "Settings",
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-options" color={tintColor} size={25} />
)
}
}
},
},
{
navigationOptions: ({ navigation }) => {
const { routeName } = navigation.state.routes[navigation.state.index];
return {
// headerTitle: routeName,
header: null
};
},
tabBarOptions: {
//showLabel: true, // hide labels
activeTintColor: "orange", // active icon color
inactiveTintColor: "#586589" // inactive icon color
//activeBackgroundColor:'#32a1fe',
}
}
);
const DashboardStackNavigator = createStackNavigator(
{
DashboardTabNavigator: {
screen: DashboardTabNavigator,
path: 'dashboardtabs'
},
DetailsScreen: {
screen: Detail,
path: 'details',
navigationOptions: ({ navigation }) => {
return {
headerTitle: "Details"
};
}
}
},
{
defaultNavigationOptions: ({ navigation }) => {
return {
headerLeft: (
<Icon
style={{ paddingLeft: 10 }}
name="md-menu"
size={30}
onPress={() => navigation.openDrawer()}
/>
)
};
}
}
);
const AppDrawerNavigator = createDrawerNavigator({
Dashboard: {
screen: DashboardStackNavigator,
path: 'welcome'
},
DetailsScreen: {
screen: Detail,
path: 'friends',
navigationOptions: ({ navigation }) => {
return {
headerTitle: "Details",
};
}
}
});
//Switch navigator , will be first to load
const AppSwitchNavigator = createSwitchNavigator({
Welcome: {
screen: WelcomeScreen,
},
Dashboard: {
screen: AppDrawerNavigator,
path: 'welcome'
}
});
const prefix = 'myapp://';
const AppContainer = createAppContainer(AppSwitchNavigator);
For the process to setup React-navigation deep-linking please follow the official documentation
DetailsScreen was in my different folder and that will have class component of your choice
To launch the App the deep-link URL is myapp://welcome
To go to root page the deep-link URL is myapp://welcome/welcome
(this will reach at first page of first tab of tab navigator)
To go to any particular screen of tab navigator (suppose details
screen in profile tab) -
myapp://welcome/welcome/profileStack/details
const config = {
Tabs: {
screens: {
UserProfile: {
path: 'share//user_share/:userId',
parse: {
userId: (userId) => `${userId}`,
},
},
},
},
};
const linking = {
prefixes: ['recreative://'],
config,
};
if you have a screen in tab navigator you can do it like this via react-navigation v5
Having problem hiding the tabBar once we are inside StackNavigator which is inside TabRouter.
im using the navigatorOption, but it does not seem to be doing anything.
navigationOptions: {tabBarVisible: false}
can access expo.io from https://snack.expo.io/Sk4fQHAfZ
import React from 'react';
import {
Button,
Platform,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
import {
createNavigator,
createNavigationContainer,
TabRouter,
addNavigationHelpers,
StackNavigator,
} from 'react-navigation';
const MyNavScreen = ({ navigation, banner }) => (
<ScrollView>
<Text>{banner}</Text>
<Button
onPress={() => {
navigation.goBack(null);
}}
title="Go back"
/>
</ScrollView>
);
const NestedMyNavScreen = ({ navigation, banner }) => (
<ScrollView>
<Text>{banner}</Text>
<Button
onPress={() => navigation.navigate('Profile', { name: 'Jane' })}
title="Go to a profile screen"
/>
<Button
onPress={() => navigation.navigate('Photos', { name: 'Jane' })}
title="Go to a photos screen"
/>
</ScrollView>
);
const MyNotificationsScreen = ({ navigation }) => (
<MyNavScreen banner="Notifications Screen" navigation={navigation} />
);
const MySettingsScreen = ({ navigation }) => (
<MyNavScreen banner="Settings Screen" navigation={navigation} />
);
const MyPhotosScreen = ({ navigation }) => {
let params = navigation.state.routes[navigation.state.index].params;
// let params = navigation.state.params;
return <MyNavScreen
banner={`${params.name}'s Photos`}
navigation={navigation}
/>
};
MyPhotosScreen.navigationOptions = {
title: 'Photos',
};
const MyProfileScreen = ({ navigation }) => {
let params = navigation.state.routes[navigation.state.index].params;
// let params = navigation.state.params;
return <MyNavScreen
banner={`${params.mode === 'edit' ? 'Now Editing ' : ''}${params.name}'s Profile`}
navigation={navigation}
/>
};
const CustomTabBar = ({ navigation }) => {
const { routes } = navigation.state;
return (
<View style={styles.tabContainer}>
{routes.map(route => (
<TouchableOpacity
onPress={() => navigation.navigate(route.routeName)}
style={styles.tab}
key={route.routeName}
>
<Text>{route.routeName}</Text>
</TouchableOpacity>
))}
</View>
);
};
const SimpleStack = StackNavigator({
NestedHome: {
screen: NestedMyNavScreen
},
Profile: {
path: 'people/:name',
screen: MyProfileScreen,
navigationOptions: {tabBarVisible: false}
},
Photos: {
path: 'photos/:name',
screen: MyPhotosScreen,
},
});
const CustomTabView = ({ router, navigation }) => {
const { routes, index } = navigation.state;
const ActiveScreen = router.getComponentForState(navigation.state);
return (
<View style={styles.container}>
<ActiveScreen
navigation={addNavigationHelpers({
...navigation,
state: routes[index],
})}
/>
<CustomTabBar navigation={navigation} />
</View>
);
};
const CustomTabRouter = TabRouter(
{
Home: {
screen: SimpleStack,
path: '',
},
Notifications: {
screen: MyNotificationsScreen,
path: 'notifications',
},
Settings: {
screen: MySettingsScreen,
path: 'settings',
},
},
{
// Change this to start on a different tab
initialRouteName: 'Home',
}
);
const CustomTabs = createNavigationContainer(
createNavigator(CustomTabRouter)(CustomTabView)
);
const styles = StyleSheet.create({
container: {
marginTop: Platform.OS === 'ios' ? 20 : 0,
flexDirection: 'column',
justifyContent: 'space-between',
flex: 1
},
tabContainer: {
flexDirection: 'row',
height: 48,
},
tab: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
margin: 4,
borderWidth: 1,
borderColor: '#ddd',
borderRadius: 4,
},
});
export default CustomTabs;
Seems like its not working when your using your custom tabRouter.
I got it to work removing it : https://snack.expo.io/H1NmvXE5b
(Also in your expo link you've wrongly used {tabBar : {visible:false}}
You can try and style your tab bar buttons either in each screen in the navigationOptions
OR
you could do it the way its done here:
(Just for example sake from the native-base docs:)
export default MainScreenNavigator = TabNavigator(
{
LucyChat: { screen: LucyChat },
JadeChat: { screen: JadeChat },
NineChat: { screen: NineChat }
},
{
tabBarPosition: "bottom",
tabBarComponent: props => {
return (
<Footer>
<FooterTab>
<Button
vertical
active={props.navigationState.index === 0}
onPress={() => props.navigation.navigate("LucyChat")}>
<Icon name="bowtie" />
<Text>Lucy</Text>
</Button>
<Button
vertical
active={props.navigationState.index === 1}
onPress={() => props.navigation.navigate("JadeChat")}>
<Icon name="briefcase" />
<Text>Nine</Text>
</Button>
<Button
vertical
active={props.navigationState.index === 2}
onPress={() => props.navigation.navigate("NineChat")}>
<Icon name="headset" />
<Text>Jade</Text>
</Button>
</FooterTab>
</Footer>
);
}
}
));
The problem is that you can only set navigation options for the navigator that renders a given screen. The screen that you want to hide the tab bar on is rendered by a stacknavigator, which does not have a tabBarVisible navigation option.
This link to the docs explains in more detail:
https://reactnavigation.org/docs/en/navigation-options-resolution.html#a-stack-contains-a-tab-navigator-and-you-want-to-set-the-title-on-the-stack-header
The solution is to set the navigation options in your stackNavigator, which is rendered by the tabNavigator. You can use a function to vary the navigation option per screen. Below is an example from the docs:
https://reactnavigation.org/docs/en/navigation-options-resolution.html#a-stack-contains-a-tab-navigator-and-you-want-to-set-the-title-on-the-stack-header
Here's another simple example:
const HomeStack = createStackNavigator(
{
Home: HomeScreen,
Settings: SettingsScreen
},
{
initialRouteName: "Home",
}
);
HomeStack.navigationOptions = ({ navigation }) => {
// get the name of the route
const { routeName } = navigation.state.routes[navigation.state.index];
if (routeName === 'Settings'){
tabBarVisible = false;
}
else{
tabBarVisible = true;
}
return {
tabBarVisible, // this now varies based on screen
tabBarLabel: "Search", // this is the same for all screens
};
};
export default createBottomTabNavigator(
{
HomeStack,
})
I'm having some issue with react-navigation. I want to have a custom Tab Bar in which one of the screen is made of a StackNavigator.
So Basically, I have
Tab
-- StackNavigator
-- Dashboard (main)
-- Wallet
-- Etc...
-- Other tabs...
To make my custom tab, I used TabRouter, createNavigationContainer and createNavigator
const Tabs = TabRouter(
{
Main: {
screen: Main,
},
},
{
initialRouteName: 'Main',
tabBarComponent: TabView.TabBarBottom,
swipeEnabled: false,
animationEnabled: false,
backBehavior: 'none',
},
);
const CustomTabView = ({ router, navigation }) => {
const { routes, index } = navigation.state;
const ActiveScreen = router.getComponentForState(navigation.state);
return (
<View style={{ flex: 1 }}>
<ActiveScreen
navigation={addNavigationHelpers({
...navigation,
state: routes[index],
})}
/>
<View style={styles.tabContainer}>
{routes.map(route => (
<TouchableOpacity // custom tab items
key={route.routeName}
onPress={() => navigation.navigate(route.routeName)}
>
<TabItem />
</TouchableOpacity>
))}
</View>
</View>
);
};
const TabBar = createNavigationContainer(createNavigator(Tabs)(CustomTabView));
Where Main is:
const Main = StackNavigator({
Dashboard: Dashboard,
Wallet: Wallet,
...
}, { initialRouteName: 'Dashboard' });
But it doesn't because Dashboard must declares a screen.
What I'm doing wrong? I don't know. How can we put a StackNavigator in a TabBar screen?
Fortunately, it's very easy.
What StackNavigator (or any other navigator) returns is React component. That means you can use it as screen component for any other route.
Thus, one of your routes screen will be StackNavigator.
Sample code
const Tabs = TabNavigator(
{
Main: {
screen: StackNavigator({
Dashboard: {
screen: Dashboard,
}
Wallet: {
screen: Wallet,
}
}),
},
},
{
initialRouteName: 'Main',
tabBarComponent: TabView.TabBarBottom,
swipeEnabled: false,
animationEnabled: false,
backBehavior: 'none',
},
);