Pass to props to all screen of topnavigations - react-native

I'm trying to send props to all the screen children but only the default screen get the props.
I want to send the props to all the screen of the top navigation. I tried to navigate directly to the tab but it doesn't work either . I don't know what i'm doing wrong.
class RestaurantSummary extends Component {
render () {
return (
<TouchableRipple
onPress={() => this.props.nav.navigation.navigate("Plat", { restaurant: this.props.restaurant,
token: this.props.token, uri: uri})}>
<Card style={styles.container}>
<Card.Cover source={{ uri: uri }} />
<Card.Content style={styles.content}>
<Text style={styles.Text}>{this.props.restaurant.name} - {this.props.restaurant.address} </Text>
</Card.Content>
</Card>
</TouchableRipple>
)
}
}
Here is how i built my navigations . I have a switch navigator which allows me to switch between the app stack and the home stack. And in the App stack i have top bar navigations.
const TabScreen = createMaterialTopTabNavigator(
{
Entrées: { screen: Entrées },
Plat: { screen: Plat },
},
{
tabBarPosition: 'top',
swipeEnabled: true,
animationEnabled: true,
tabBarOptions: {
activeTintColor: '#FFFFFF',
inactiveTintColor: '#F8F8F8',
style: {
backgroundColor: '#633689',
},
labelStyle: {
textAlign: 'center',
},
indicatorStyle: {
borderBottomColor: '#87B56A',
borderBottomWidth: 2,
},
},
}, {
initialRouteName: 'Plat',
}
);
const top = createStackNavigator({
TabScreen: {
screen: TabScreen,
navigationOptions: {
headerStyle: {
backgroundColor: 'transparent',
},
headerTintColor: '#FFFFFF',
title: 'TabExample',
},
},
});
const AuthStack = createStackNavigator({
SignIn: {
screen: SignIn
},
SignUp: {
screen: SignUp
},
SignUpBiss: {
screen: SignUpBiss
}
},{
navigationOptions: {
headerTransparent: true,
},
mode: 'modal',
headerBackTitleVisible: 'true'
})
const AppStack = createStackNavigator({
Home: {
screen: Home
},
tab: top,
RestaurantDetail: {
screen: RestaurantDetail,
navigationOptions:()=>{
return {
tabBarVisible:false,
};
}
},
})
AppStack.navigationOptions = ({ navigation }) => {
let tabBarVisible = true;
if (navigation.state.index > 0) {
tabBarVisible = false; }
return {
tabBarVisible,
}
}
const bottomNav = createBottomTabNavigator({
Home : AppStack,
Logout : {screen: Logout}
})
const Nav = createSwitchNavigator({
App: bottomNav,
Auth: AuthStack
}, {
initialRouteName: 'Auth',
})
export default createAppContainer(Nav)

I saw your problem and I feels your code is little bit in a chaos.
firstly you can change
onPress={() => this.props.nav.navigation.navigate("Plat",
to
onPress={() => this.props.nav.navigation.navigate("TabScreen",
and then try this code in your Tab Screens
this.props.navigation.dangerouslyGetParent().getParam('restaurant')
this.props.navigation.dangerouslyGetParent().getParam('token')
this.props.navigation.dangerouslyGetParent().getParam('uri')
Hope it helps .feel free for doubts

Related

trying to display a hamburger menu in left corner to open left side drawer?

I need to display a hamburger menu in the upper left hand corner which opens a left side drawer when clicked. I tried to implement the example provided in the following article but it doesn't appear to be functional when I implement it:
https://medium.com/#mollyseeley/a-simple-react-native-navigation-drawer-ba10fc203ad
Can you identify the problem with the implementation at the url above, or am I most likely messing something up with how I'm trying to implement the example? Are there other example urls for this type of implementation that you can recommend?
Try using this way.
const LoginNavigator = createStackNavigator({
Login: {
screen: Login,
navigationOptions: {
header: null,
}
},
SignUp: {
screen: SignUp,
navigationOptions: {
header: null,
}
}
});
class NavigationDrawerStructure extends Component {
toggleDrawer = () => {
//Props to open/close the drawer
this.props.navigationProps.toggleDrawer();
};
render() {
return (
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
<Image
source={require('../Img/hamburger.png')}
style={{ width: 25, height: 25, marginLeft: 20, tintColor: '#ffffff' }}
/>
</TouchableOpacity>
</View>
);
}
}
const HomeActivity_StackNavigator = createStackNavigator({
Home: {
screen: Main,
navigationOptions: ({ navigation }) => ({
title: 'Dashboard',
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#FF9800'
},
headerTintColor: '#fff'
}),
},
}, {headerLayoutPreset: 'center'});
const DrawerNavigators = createDrawerNavigator({
//Drawer Optons and indexing
Main: {
screen: HomeActivity_StackNavigator,
navigationOptions: {
drawerLabel: 'Dashboard',
}
}
});
const NonDrawerNavigators = createStackNavigator({
TaskView: {
screen: TaskView,
navigationOptions: {
title: 'Task',
headerStyle: {
backgroundColor: '#FF9800',
},
headerTintColor: '#fff'
}
},
TeamView: {
screen: TeamView,
navigationOptions: {
title: 'Team',
headerStyle: {
backgroundColor: '#FF9800',
},
headerTintColor: '#fff'
}
}
}, {headerLayoutPreset: 'center'});
const AppNavigator = createStackNavigator({
drawerStack: {
screen: DrawerNavigators,
navigationOptions: {
header: null
}
},
nonDrawerStack: {
screen: NonDrawerNavigators,
navigationOptions: {
header: null
}
}
});
export default createAppContainer(createSwitchNavigator({
SplashScreen: SplashScreen,
loginStack: LoginNavigator,
homeStack: AppNavigator
}, {
initialRouteName: 'SplashScreen'
})
);

react-navigation: disable modal animation

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.

Cannot navigate to route from within navigation stack.

I have one file with my whole navigation stack. In my navigation header I have a menu and I want to open a Drawer. Now In this example I get the error: Cannot read property 'navigation' of undefined
My AppNavigation file:
import React from 'react';
import { Text } from 'react-native';
import { createStackNavigator, createDrawerNavigator } from 'react-navigation';
import Login from '../components/Login';
import Dashboard from '../components/Dashboard';
import NewNotification from '../components/NewNotification';
const GuestStack = createStackNavigator(
{
loginScreen: { screen: Login },
}, {
headerMode: 'float',
headerLayoutPreset: 'center',
navigationOptions: {
headerStyle: { backgroundColor: '#61b1cd' },
title: 'Welcome',
headerTintColor: 'black',
},
},
);
const LoggedinStack = createDrawerNavigator({
dashboard: { screen: Dashboard },
newNotifciation: { screen: NewNotification },
});
const LoggedinNavigation = createStackNavigator(
{
LoggedinStack: { screen: LoggedinStack },
}, {
headerMode: 'float',
navigationOptions: {
headerStyle: { backgroundColor: '#61b1cd' },
title: 'Welkom!',
headerTintColor: 'black',
headerLeft: <Text onPress = { () =>
this.props.navigation.openDrawer('dashboard')
// navigation.openDrawer('dashboard')
}>Menu</Text>,
},
},
);
const VveNavigator = createStackNavigator(
{
guestStack: {
screen: GuestStack,
},
loggedinStack: {
screen: LoggedinNavigation,
},
}, {
headerMode: 'none',
initialRouteName: 'guestStack',
},
);
export default AppNavigator;
The problem seems to be over here:
headerLeft: <Text onPress = { () =>
this.props.navigation.openDrawer('dashboard')
// navigation.openDrawer('dashboard')
}>Menu</Text>,
And then in my App.js I have
export default class App extends React.Component {
render() {
return (
<APPNavigator />
);
}
}
Version of react navigation is 2.18.1
Thanks
headerLeft doesn't receive navigation prop (check the source code). So if you'd like to use a navigation prop on press, you should consider to refactor your stack navigator config:
const LoggedinNavigation = createStackNavigator(
{
LoggedinStack: { screen: LoggedinStack },
}, {
headerMode: 'float',
navigationOptions: ({ navigation }) => ({ // here you get the navigation
headerStyle: { backgroundColor: '#61b1cd' },
title: 'Welkom!',
headerTintColor: 'black',
headerLeft: (
<Text
onPress={() => {
navigation.openDrawer()
}}
>
Menu
</Text>
),
}),
},
);
Check this issue for more options.

react navigation back button back to spalsh screen

I want to use react navigation in react native project but when I use this code in header it shows some back button in every screen and when I click on this it goes back to the splash screen. How to use react navigation with check first splash and then go to stack home and show back button in any screen.its very confuse me.
const TabNav=createBottomTabNavigator({
Notification:{
screen:Notif,
navigationOptions: () => ({
title:'',
tabBarIcon: ({ tintColor }) => {
return (
<IconIonicons
name='ios-notifications'
size={40}
color={tintColor}
/>
);
},
tabBarOptions: {
activeTintColor: '#000',
}
})
},
Home:{
screen:Home3,
navigationOptions: () => ({
title:'',
tabBarIcon: ({ tintColor }) => {
return (
<Image style={{ width: 40, height: 40,marginTop:'20%' }} source={Home}/>
);
}
})
},
User:{
screen:ProfileScreen,
navigationOptions: () => ({
title:'',
tabBarIcon: ({ tintColor }) => {
return (
<IconIonicons
name='ios-person'
size={40}
color={tintColor}
/>
);
},
tabBarOptions: {
activeTintColor: '#000',
}
})
},
},
{
initialRouteName:"Home"
},{
header: null,
headerMode: 'none',
}
)
const StackHome = createStackNavigator({
Tabs:{
screen:TabNav
},
CardView:{
screen:CardView,
},
Thumb:{
screen:Thumb,
}, Item:{
screen:Item,
}, Product:{
screen:ProductScreen,
}, Festivals:{
screen:Festivals,
} , Review:{
screen:Review,
} , Movie:{
screen:Movie,
} , Naghd:{
screen:Naghd,
} , Advertisment:{
screen:Advertisment,
} , Advertis:{
screen:Advertis,
}, CreateAd:{
screen:CreateAd,
}, Insta:{
screen:Insta,
}, Test:{
screen:Test,
}, ForoshRah:{
screen:ForoshRah,
}, Home2:{
screen:Home2,
}, Login:{
screen:Login,
}, Elan:{
screen:Elan,
}, Sabtenam:{
screen:Sabtenam,
}, sponser:{
screen:sponsor,
},Splash:{
screen:Spalsh
},Products:{
screen:Products
},
initialRouteName : 'Home',
},{
headerMode:'none',
navigationOptions: {
header: (props) => <ImageHeader {...props} />,
}
}
)
const RootNav = createStackNavigator({
StackHome:{
screen:StackHome
},
Splash:{
screen:Spalsh
},Login:{
screen:Login
},
},{
initialRouteName : 'Splash',
header: null,
});
You can use SwitchNavigator of React Navigation. As the SwitchNavigator is to only ever show one screen at a time. By default, it does not handle back actions and it resets routes to their default state when you switch away.
Kindly refer this https://reactnavigation.org/docs/en/switch-navigator.html
Remove the **Splash** Screen from your **StackHome** StackNavigator
Alter your **RootNav** with Switch Navigator like below
// Uses SwitchNavigator
const RootNav = createSwitchNavigator({
StackHome:{
screen: StackHome
},
Splash:{
screen: Splash
},Login:{
screen: Login
},
},{
initialRouteName : 'Splash'
});
Your StackHome consist of some stack navigators screens, you can set the navigation options from there itself to set the image in the header. You can set like below.
const StackHome = createStackNavigator({
CardView:{
screen: CardView,
navigationOptions: ({ navigation }) => ({
headerTitleStyle: { flex: 1, fontWeight: 'normal', fontSize: 15, color: '#FFFFFF', fontFamily: 'DroidSans-Bold' },
headerTintColor: "#2662b2",
headerStyle: {
backgroundColor: "#05BFFF",
},
headerRight:(<View><NotificationComponent navigation={navigation}/></View>)
})
},
Thumb:{
screen: Thumb,
}, Item:{
screen: Item,
}
});

How do I change the name of titles that are inside a drawer in react navigation?

Due to the app being for a different language, I would like for the titles that appear in the drawer to appear in a different language. Currently, they default to the routes that they're set to. So instead of saying "Login" I would like "s'identifier" as an example.
Currently, drawer setup looks like this:
const allDrawerOptions = {
NotificationHistory: { screen: NotificationHistory, },
CameraRegistration: { screen: CameraRegistration, },
Settings: { screen: Settings, },
Info: { screen: Info, }
};
const drawerForNotificationHistory = DrawerNavigator(
allDrawerOptions,
{ initialRouteName: 'NotificationHistory' }
);
const hamburgerIcon = ({ navigation }) => ({
headerLeft:
<TouchableOpacity
onPress={() => navigation.navigate('DrawerToggle')}
style={{
height: '100%',
width: 60,
// marginLeft: 10,
justifyContent: 'center',
alignItems: 'center',
// borderWidth: 1, borderColor: 'red',
}}
>
<Text
style={{
fontFamily: 'FontAwesome',
fontSize: 25,
}}
></Text>
</TouchableOpacity>
});
and my stacknavigator looks like this:
const Navigation = StackNavigator(
{
Splash: { screen: Splash },
Login: { screen: Login },
SignUp: { screen: SignUp },
HomeScreen: { screen: HomeScreen },
Home: { screen: Home },
NotificationHistory: {
screen: drawerForNotificationHistory,
navigationOptions: hamburgerIcon,
},
},
initialRoute: 'HomeScreen'
}
}
They key was to add navigationOptions for each screen inside allDrawerOptions.
so NotificationHistory now looks like
NotificationHistory:
{ screen: NotificationHistory,
navigationOptions: () =>
({
title: '알림 내역'
})
},