How do I implement Logout in React Native using DrawerNavigation - react-native

I have a bit of a Problem. I am trying to implement Logout from the Stacknavigator in React native. I have sought online and have not seen any good source to learn a thing or two from.
My source code for App.js is looking somewhat like this.
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View , Image, TextInput, TouchableOpacity,Alert } from 'react-native';
import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {createDrawerNavigator} from 'react-navigation-drawer';
import Icon from 'react-native-vector-icons/SimpleLineIcons';
import Splash from './src/Splash';
import Dashboard from './src/Dashboard';
import DubaiVisaRequest from './src/DubaiVisaRequest';
import HotelReserveRequest from './src/HotelReserveRequest';
import Login from './src/Login';
const DashboardNavigator = createStackNavigator({
'Dashboard':{screen: Dashboard,
navigationOptions: ({navigation}) => ({
headerLeft: () => (
<TouchableOpacity
style={{marginLeft: 20}}
onPress={() => navigation.toggleDrawer()}>
<Icon name="menu" size={12} /></TouchableOpacity>
)})
},
});
const DubaiVisaReqNavigator = createStackNavigator({
'Dubai Visa Request':{screen: DubaiVisaRequest,
navigationOptions: ({navigation}) => ({
headerLeft: () => (
<TouchableOpacity
style={{marginLeft: 20}}
onPress={() => navigation.toggleDrawer()}>
<Icon name="menu" size={12} /></TouchableOpacity>
)})
},
});
const HotelReqNavigator = createStackNavigator({
'Hotel Reservation':{screen: HotelReserveRequest,
navigationOptions: ({navigation}) => ({
headerLeft: () => (
<TouchableOpacity
style={{marginLeft: 20}}
onPress={() => navigation.toggleDrawer()}>
<Icon name="menu" size={12} /></TouchableOpacity>
)})
},
});
const DrawerNavigator = createDrawerNavigator({
Dashboard:{
navigationOptions:{
drawerLabel: 'Dashboard',
},
screen: DashboardNavigator,
},
DubaiVisaRequest:{
navigationOptions:{
drawerLabel: 'Dubai Visas',
},
screen: DubaiVisaReqNavigator,
},
HotelReserveRequest:{
navigationOptions:{
drawerLabel: 'Request Hotel',
},
screen: HotelReqNavigator,
},
});
const AppSwitchNavigator = createSwitchNavigator({
'Splash' : {screen: Splash},
'Login' : {screen : Login},
'Drawer' : {screen: DrawerNavigator}
},
{
initialRouteName: 'Splash'
})
const App = createAppContainer(AppSwitchNavigator);
export default App;
Please I would like to know how I can implement Logout, I tried something like this
const LogoutNavigator = createStackNavigator({
'Hotel Reservation':{screen: Login,
navigationOptions: ({navigation}) => ({
headerLeft: () => (
<TouchableOpacity
style={{marginLeft: 20}}
onPress={() => navigation.navigate('Login')}>
<Icon name="menu" size={12} /></TouchableOpacity>
)})
},
});
But this does not work as I expect. Kindly Assist. I am a bit new to React native.

Related

How do i pass arguments in the screens of drawernavigation?

import {ProfileScreen} from './ProfileScreen';
import {DashboardScreen} from './DashboardScreen';
import {
DrawerNavigator,
createSwitchNavigator,
createAppContainer,
} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {
createDrawerNavigator,
DrawerNavigatorItems,
} from 'react-navigation-drawer';
import {NotificationScreen} from './NotificationScreen';
export class A_HomePage extends Component {
static navigationOptions = {
header: null,
};
state = {
email: '',
};
render() {
this.setState({
email: 'qwerty#gmail.com',
});
return <AppContainer />;
}
}
const ProfileStackNavigator = createStackNavigator(
{
ProfileNavigator: ProfileScreen,
},
{
defaultNavigationOptions: ({navigation}) => {
return {
headerLeft: (
<Icon2
style={{paddingLeft: 10}}
onPress={() => navigation.openDrawer()}
name="menu"
size={30}
/>
),
};
},
},
);
const NotificationScreenStackNavigator = createStackNavigator(
{
NotificationScreenNavigator: NotificationScreen,
},
{
defaultNavigationOptions: ({navigation}) => {
return {
headerLeft: (
<Icon2
style={{paddingLeft: 10}}
onPress={() => navigation.openDrawer()}
name="menu"
size={30}
/>
),
};
},
},
);
const AppDrawerNavigator = createDrawerNavigator(
{ Profile: {
screen: ProfileStackNavigator,
navigationOptions: {
drawerLabel: 'Profile',
drawerIcon: ({tintColor}) => (
<Icon name="glass" size={25} color="#00b33c" />
),
},
},Notification: {
screen:NotificationScreenStackNavigator ,
navigationOptions: {
drawerLabel: 'Notifications',
drawerIcon: ({tintColor}) => (
<Icon4 name="notification" size={25} color="#cc0099" />
),
},
},
},);
const AppSwitchNavigator = createSwitchNavigator(
{
Profile: {screen: ProfileScreen},
Notification: {screen:NotificationScreen},
},);
const AppContainer = createAppContainer(AppSwitchNavigator);
**
here i have created the two drawernavigation and homescreen contains all the stack of
drawernavigator screen how do i pass this.state.email to the profile and notification screen of the drawernavigation or how can i access the states(here is email) in the screens profile and notification screens pls help this can improve my project work i have searched it in google and docs but didnt got any idea **
Use React Redux with Redux
Redux is central state management system which also available for React-Native
React Redux Getting Started

REACT-Native react-navigation-tabs createBottomTabNavigator tabBarVisible false not working

REACT-native; react-navigation-tabs for createBottomTabNavigator wuth tabBarVisible=false not working.
I tried to hide bottom tab for AddSetting & Manager but unsuccessful. My code as below:
import React from 'react' import { createSwitchNavigator, createAppContainer } from 'react-navigation' import { StyleSheet, Text, TextInput, View, Icon, Image, Button, ScrollView } from 'react-native';
import { createBottomTabNavigator} from "react-navigation-tabs"; import Ionicons from "react-native-vector-icons/Ionicons";
import Login from '../screens/Login' import Signup from '../screens/Signup'
import MyList from '../MyList' import MyForm from '../MyForm';
import Manager from '../Manager'; import ManagerScreen from '../ManagerScreen';
import Setting from '../Setting';
import SettingScreen from '../SettingScreen';
import AddSetting from '../AddSetting'
const Tabs = createBottomTabNavigator({
Request: {
screen: MyForm,
navigationOptions: ({navigation}) => ({
title: 'Request',
tabBarVisible: true,
tabBarIcon: ({tintColor}) => (
<View style={styles.bottomButtons}>
<Ionicons
name="ios-paper"
size={25}
color={tintColor}
/>
</View>
)
})
},
Status: {
screen: MyList,
navigationOptions: ({navigation}) => ({
title: 'Status',
tabBarVisible: true,
tabBarIcon: ({tintColor}) => (
<View style={styles.bottomButtons}>
<Ionicons
name="ios-alarm"
size={25}
color={tintColor}
/>
</View>
)
})
},
Setting: {
screen: Setting,
navigationOptions: ({navigation}) => ({
title: 'Setting',
tabBarVisible: true,
tabBarIcon: ({tintColor}) => (
<View style={styles.bottomButtons}>
<Ionicons
name="ios-settings"
size={25}
color={tintColor}
/>
</View>
)
})
},
AddSetting: {
screen: AddSetting,
navigationOptions: ({navigation}) => ({
title: 'AddSetting',
tabBarVisible: false,
tabBarIcon: ({tintColor}) => (
<View style={styles.bottomButtons}>
<Ionicons
name="ios-settings"
size={25}
color={tintColor}
/>
</View>
)
})
},
Manager: {
screen: Manager,
navigationOptions: ({navigation}) => ({
title: 'Manager',
tabBarVisible: false,
tabBarIcon: ({tintColor}) => (
<View style={styles.bottomButtons}>
<Ionicons
name="ios-person"
size={25}
color={tintColor}
/>
</View>
)
})
}
});
const SwitchNavigator = createSwitchNavigator({
Login: {
screen: Login
},
Signup: {
screen: Signup
},
Home: {
screen: Tabs
}
},
{
initialRouteName: 'Login'
}
)
export default createAppContainer(SwitchNavigator)
const styles = StyleSheet.create({
buttonBottom: {
width: 200
},
textFont:{
fontFamily:'arial',
size:20,
alignItems: 'center',
}
})
Please advise.
Regards,
Micheale
you'll have to make use of StackNavigator for those that you want the tabbar to be invisible
const SettingsStack = createStackNavigator({
Setting: {screen: Setting}
})
SettingsStack.navigationOptions = ({navigation}) => {
let tabBarVisible = true;
if(navigation.state.index > 0){
tabBarVisible = false;
}
return {
tabBarVisible,
}
}
const Tabs = createBottomTabNavigator({
SettingsStack :{ screen :SettingsStack }
})

Navigating screens by pressing images

I am trying to navigate between different screens by pressing image components. Each different image leads to a different screen.
I am firstly trying to navigate by clicking 'meo.sudoeste.png' to 'meo_sw'. However whenever I press the image nothing happens. This is my HomeScreen.js:
import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity, TextInput, ScrollView, Image} from 'react-native';
import * as firebase from 'firebase';
import Icon from 'react-native-vector-icons/Ionicons';
import { StackNavigator } from 'react-navigation';
export default class HomeScreen extends React.Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return (
<View style={styles.screen}>
<View style={styles.container}>
<View>
<Icon name={"ios-search"} style={styles.icon}/>
</View>
<TextInput style={styles.inputBox}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Procura aqui"
placeholderTextColor = "black"
selectionColor="black"
keyboardType="default"/>
</View>
<ScrollView style={styles.teste}>
<Text style={styles.festivais}>Recomendados</Text>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.festivais_lista}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('meo_sw')}>
<Image source={require('../assets/meo_sudoeste.png')} style={styles.image}/>
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('vodaf_coura')}>
<Image source={require('../assets/vodafone_coura.png')} style={styles.image} />
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('superR_superB')}>
<Image source={require('../assets/superbock_superrock.png')} style={styles.image}/>
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('nos')}>
<Image source={require('../assets/nos_primavera.png')} style={styles.image}/>
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('rock_in_rio')}>
<Image source={require('../assets/rock_in_rio.png')} style={styles.image}/>
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('edp_cool_jazz')}>
<Image source={require('../assets/edp_cooljazz.png')} style={styles.image}/>
</TouchableOpacity>
</ScrollView>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
// I took this off because it is irrelevant.
});
Could you please help me?
This is my App.js, which contains the stack navigator
import React from 'react';
import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {createBottomTabNavigator} from 'react-navigation-tabs'
import {Ionicons} from '#expo/vector-icons';
import ChatScreen from './screens/ChatScreen';
import PostScreen from './screens/PostScreen';
import NotificationScreen from './screens/NotificationScreen';
import ProfileScreen from './screens/ProfileScreen';
import LoadingScreen from './screens/LoadingScreen';
import LoginScreen from './screens/LoginScreen';
import RegisterScreen from './screens/RegisterScreen';
import HomeScreen from './screens/HomeScreen';
import firebaseConfig from './config';
import * as firebase from 'firebase';
import meo_sw from '../Eventos/Festivais/meo_sw';
const AppContainer = createStackNavigator(
{
default: createBottomTabNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: {
tabBarIcon: ({tintColor}) => <Ionicons name='ios-home' size={30} color={tintColor}></Ionicons>
}
},
Chat: {
screen: ChatScreen,
navigationOptions: {
tabBarIcon: ({tintColor}) => <Ionicons name='ios-chatboxes' size={30} color={tintColor}> </Ionicons>
}
},
Home: {
screen: HomeScreen,
navigationOptions: {
tabBarIcon: ({tintColor}) => <Ionicons name='ios-home' size={30} color={tintColor} style={{
shadowColor:'#E9446A',
shadowOffset:{
width:0,
heigth:0,
shadowRadius:10,
shadowOpacity:0.3}}}></Ionicons>
}
},
Post: {
screen: PostScreen,
navigationOptions: {
tabBarIcon: ({tintColor}) =>
<Ionicons name='ios-add-circle'
size={48} color={tintColor}>
</Ionicons>
}
},
Notification: {
screen: NotificationScreen,
navigationOptions: {
tabBarIcon: ({tintColor}) => <Ionicons name='ios-notifications' size={30} color={tintColor}> </Ionicons>
}
},
Profile: {
screen: ProfileScreen,
navigationOptions: {
tabBarIcon: ({tintColor}) => <Ionicons name='ios-person' size={30} color={tintColor}> </Ionicons>
}
}
},
{
defaultNavigationOptions:{
tabBarOnPress: ({navigation, defaultHandler}) => {
if (navigation.state.key === 'Post') {
navigation.navigate('postModal')
} else {
defaultHandler()
}
}
},
tabBarOptions: {
activeTintColor: '#FFA200',
inactiveTintColor: '#B8B8C4',
showLabel: false
}
}
),
postModal: {
screen: PostScreen
}
},
{
mode: 'modal',
headerMode:'none'
}
)
const AuthStack= createStackNavigator({
Login: LoginScreen,
Register: RegisterScreen
})
export default createAppContainer(
createSwitchNavigator(
{
Loading: LoadingScreen,
App: AppContainer,
Auth: AuthStack
},
{
initialRouteName: 'Loading'
}
)
)
UPDATE
And this is my meo_sw.js :
import * as React from 'react'
import { View, Text, ScrollView, TouchableOpacity, StyleSheet } from 'react-native';
export default function Meo() {
return (
<ScrollView>
<View style={styles.header}>
<Text style={styles.texto}>Meo Sudoeste</Text>
</View>
</ScrollView>
);
};
const styles = StyleSheet.create({
header:{
width:'100%',
height:90,
paddingTop:36,
backgroundColor: 'blue',
alignItems: 'center',
justifyContent: 'center'
},
texto:{
color:'white',
fontSize: 18
}
});
looks like you're trying to navigate to meo_sw which is not registered in your Stack Navigator. Do you want to try updating your code as follows:
import meo_sw from "./meo_sw"
const AppContainer = createStackNavigator(
{
meo_sw: meo_sw,
default:
... // Your existing code.
}
That should register it as a screen you can navigate to.
Create a separate StackNavigator for HomeScreen & inert your meo_sw into it
const HomeStack = createStackNavigator({
Home: { screen: HomeScreen },
meo_sw : { screen: meo_sw },
});
Then change your TabNavigator to handle HomeStack
Home: {
screen: HomeStack,
navigationOptions: {
tabBarIcon: ({ tintColor }) => <Ionicons name='ios-home' size={30} color={tintColor}></Ionicons>
}
Check A stack navigator for each tab for more informations or check Complex Navigation example with react navigation.
Hope this helps you. Feel free for doubts.
Here is a very minimal example you can customize accordingly.
https://snack.expo.io/#raajnadar/navigate-on-press-of-image-inside-stack
Final route config
import React from 'react';
import { Image, Text, TouchableWithoutFeedback, View } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { Ionicons } from '#expo/vector-icons';
import MeoSw from './MeoSw';
function HomeScreen({ navigation }) {
return (
<View>
<Text>Home Screen</Text>
<TouchableWithoutFeedback onPress={() => navigation.navigate('MeoSw')}>
<Image
source={require('./assets/snack-icon.png')}
style={{
width: 200,
height: 200,
marginTop: 40,
alignSelf: 'center',
}}
/>
</TouchableWithoutFeedback>
</View>
);
}
function ChatScreen() {
return (
<View>
<Text>Chat Screen</Text>
</View>
);
}
const Stack = createStackNavigator({
MeoSw: MeoSw
})
const AppContainer = createBottomTabNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: {
tabBarIcon: ({ tintColor }) => (
<Ionicons name="ios-home" size={30} color={tintColor} />
),
},
},
Chat: {
screen: ChatScreen,
navigationOptions: {
tabBarIcon: ({ tintColor }) => (
<Ionicons name="ios-chatboxes" size={30} color={tintColor}>
{' '}
</Ionicons>
),
},
},
Stack: Stack
},
{
defaultNavigationOptions: {
tabBarOnPress: ({ navigation, defaultHandler }) => {
if (navigation.state.key === 'Post') {
navigation.navigate('postModal');
} else {
defaultHandler();
}
},
},
tabBarOptions: {
activeTintColor: '#FFA200',
inactiveTintColor: '#B8B8C4',
showLabel: false,
},
}
);
export default createAppContainer(AppContainer);

Is there a way to hide a tab item when using createBottomTabNavigator and createStackNavigator and at the same time navigationOptions working?

I have three screens, i want to use the te tab bar only for the firsts two screens. In those two screens i put a button that navigate to the third screen.
my first aproach was tis code:
import React from "react";
import { Platform } from "react-native";
import {
createStackNavigator,
createBottomTabNavigator,
StackViewTransitionConfigs
} from "react-navigation";
import TabBarIcon from "../components/TabBarIcon";
import HomeScreen from "../screens/HomeScreen";
import LinksScreen from "../screens/LinksScreen";
import SettingsScreen from "../screens/SettingsScreen";
const Tabs = createBottomTabNavigator({
Home: {
screen: HomeScreen,
navigationOptions: ({ navigation }) => ({
tabBarLabel: "Home",
title: "Tahiry",
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={
Platform.OS === "ios"
? `ios-information-circle${focused ? "" : "-outline"}`
: "md-information-circle"
}
/>
)
})
},
Links: {
screen: LinksScreen,
navigationOptions: ({ navigation }) => ({
tabBarLabel: "Links",
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={Platform.OS === "ios" ? "ios-link" : "md-link"}
/>
)
})
}
});
export default createStackNavigator({
tabs: Tabs,
Settings: SettingsScreen
});
It is working but the "navigationOptions" are not working, so if i set a title to the header ( that is always displayed even if i set "header:null"), it doesn't appear.
I tried another approach with the next code but i can no manage to hide the third tab item:
import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';
const HomeStack = createStackNavigator({
Home: HomeScreen,
});
HomeStack.navigationOptions = {
tabBarLabel: 'Home',
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={
Platform.OS === 'ios'
? `ios-information-circle${focused ? '' : '-outline'}`
: 'md-information-circle'
}
/>
),
};
const LinksStack = createStackNavigator({
Links: LinksScreen,
});
LinksStack.navigationOptions = {
tabBarLabel: 'Links',
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}
/>
),
};
const SettingsStack = createStackNavigator({
Settings: SettingsScreen,
});
SettingsStack.navigationOptions = {
tabBarLabel: 'Settings',
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
/>
),
};
export default createBottomTabNavigator({
HomeStack,
LinksStack,
SettingsStack,
});
Any advice is welcome.
Use defaultNavigationOptions for customizing your tabBar
defaultNavigationOptions: ({ navigation }) => ({
// You can return any component that you like here!
return <View>
<View>
<Text> Tab 1</Text>
</View>
<View>
<Text> Tab =2</Text>
</View>
</View>
},
}),
If you're trying to hide the tab inside the StackNavigator, you can try this
const HomeTab = createStackNavigator({
Home:{screen: HomeScreen,},
Settings:{screen: SettingsScreen,}
}, {initialRouteName: 'Home', headerMode: 'none')}
HomeTab.navigationOptions = ({navigation}) => {
let tabBarVisible = true;
if(navigation.state.index > 0){
tabBarVisible = false;
}
return {
tabBarVisible,
}
}
const TabNavi = createBottomTabNavigator({
Home:{screen: HomeTab,},
Links :{screen: LinksScreen,},
})
export default TabNavi;
I finally manage to make it working. The solution is from the second approach.
First you have to declare you sceens in the stacks like this:
const HomeStack = createStackNavigator({
Home: HomeScreen,
Details1: DetailsScreen
});
Afterwards you have to import the tabBarIcon separately, i think its is necessary because the createStackNavigator has no TabBarIcon method
import TabBarIcon from "../components/TabBarIcon";
You have now navigations and icons working, you can add as many screens as you want in the stacks. and you only create tabs for the stacks.
Here is the complete example:
import React from "react";
import {
Platform,
StatusBar,
StyleSheet,
View,
Button,
Text
} from "react-native";
import {
createBottomTabNavigator,
createStackNavigator,
createAppContainer
} from "react-navigation";
import TabBarIcon from "../components/TabBarIcon";
class DetailsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Details1!</Text>
</View>
);
}
}
class DetailsScreen2 extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Details2!</Text>
</View>
);
}
}
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Home!</Text>
<Button
title="Go to Details1"
onPress={() => this.props.navigation.navigate("Details1")}
/>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Settings!</Text>
<Button
title="Go to Details2"
onPress={() => this.props.navigation.navigate("Details2")}
/>
</View>
);
}
}
const HomeStack = createStackNavigator({
Home: HomeScreen,
Details1: DetailsScreen
});
HomeStack.navigationOptions = {
tabBarLabel: "Home",
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={
Platform.OS === "ios"
? `ios-information-circle${focused ? "" : "-outline"}`
: "md-information-circle"
}
/>
)
};
const SettingsStack = createStackNavigator({
Settings: SettingsScreen,
Details2: DetailsScreen2
});
SettingsStack.navigationOptions = {
tabBarLabel: "Maison",
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={
Platform.OS === "ios"
? `ios-information-circle${focused ? "" : "-outline"}`
: "md-information-circle"
}
/>
)
};
export default createAppContainer(
createBottomTabNavigator(
{
Home: HomeStack,
Settings: SettingsStack
},
{
/* Other configuration remains unchanged */
}
)
);
and this is the content of tabBaricon.js
import React from 'react';
import { Icon } from 'expo';
import Colors from '../constants/Colors';
export default class TabBarIcon extends React.Component {
render() {
return (
<Icon.Ionicons
name={this.props.name}
size={26}
style={{ marginBottom: -3 }}
color={this.props.focused ? Colors.tabIconSelected : Colors.tabIconDefault}
/>
);
}
}

React Navigation(V3):How to set navigation function in custom router file?

I have a Router.js to set all of my components with react-navigation.
When I click the component FloorScreen headerRight button will show click alert.
Now I want to change it like this.props.navigation.navigate.goBack();
Router.js:
import React, { Component } from 'react';
import { Image, TouchableOpacity } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
// and import some screen...
const Router = createStackNavigator({
WelcomeScreen: {
screen: WelcomeScreen,
navigationOptions: () => ({
header: null
}),
},
HomeScreen: {
screen: HomeScreen
},
FloorScreen: {
screen: FloorScreen,
navigationOptions: {
drawerLabel: 'test',
headerStyle: {
backgroundColor: commonColor.appBackgroundColor,
},
headerRight: (
<TouchableOpacity onPress={() => alert('click')}>
<Image style={{ width: 20, height: 20}} source={BackIcon} />
</TouchableOpacity>
)
}
}
},
{
initialRouteName: 'WelcomeScreen',
headerMode: 'screen'
});
export default createAppContainer(Router);
I know I can set the code in FloorScreen.js to achieve it:
static navigationOptions = ({ navigation }) => ({
headerRight : (
<TouchableOpacity onPress={() => { navigation.goBack() }}>
<Image />
</TouchableOpacity>
),
});
Is possible to set the code in my Router.js ? Or set the code in FloorScreen.js is the only way to do it ?
Any help would be appreciated.
You can implement it at navigationOption
navigationOptions: () => ({
tabBarLabel: strings.labelJobs,
tabBarIcon: ({ tintColor }) => (
<Icon type="FontAwesome" name="someName" />
),
tabBarOnPress: ({ navigation, defaultHandler }) => {
if (navigation.state.index > 0) {
navigation.dispatch(StackActions.popToTop());
}
defaultHandler();
}
})
The above is to demonstrate how to display first screen of stack, just to show you how you can access navigation within navigationOptions