react-native nested StackNavigator passing parameters - react-native

I initially had this routing set up below with a tabNagivator and I was navigating to the 'Home' route and passing parameters using:
this.props.navigation.navigate('Home',{station:e,code:f,filter:'',filterName:'',offset:0});
Routing:
const PrimaryNav = TabNavigator({
Home: {
screen: LaunchScreen,
navigationOptions: {
swipeEnabled: false,
tabBarIcon: ({
tintColor
}) => ( <
Image source = {
require('../Images/trains.png')
}
style = {
[styles.icon]
}
/>
),
},
},
Map: {
screen: MapScreen,
navigationOptions: {
tabBarIcon: ({
tintColor
}) => ( <
Image source = {
require('../Images/locationTab.png')
}
style = {
[styles.icon]
}
/>
),
},
},
}, {
headerMode: 'none',
tabBarPosition: 'top',
animationEnabled: true,
tabBarOptions: {
showIcon: true,
showLabel: false,
activeTintColor: '#ffffff',
indicatorStyle: {
borderBottomColor: '#33b2f4',
borderBottomWidth: 3,
},
style: {
backgroundColor: '#000', // Makes Android tab bar white instead of standard blue
paddingTop: 5,
}
},
});
What I now want to do is replace 'LaunchScreen' in Home route with a stackNavigator but I don't know how to now pass the parameters to the stackNavigator down to the 'LaunchScreen':
const FeedStack = StackNavigator({
Launch: {
screen: LaunchScreen,
navigationOptions: {
header: null,
},
},
Tweets: {
screen: TweetScreen,
navigationOptions: {
title: 'Service Tweets',
headerTintColor: '#fff',
headerStyle: {
backgroundColor: '#000'
},
},
},
}, {
initialRouteName: 'Launch',
}
);
const PrimaryNav = TabNavigator({
Home: {
screen: FeedStack,
navigationOptions: {
swipeEnabled: false,
tabBarIcon: ({
tintColor
}) => ( <
Image source = {
require('../Images/trains.png')
}
style = {
[styles.icon]
}
/>
),
},
}...

I solved this by navigating to the route and storing the parameters in my mobX store bypassing the navigation parameters altogether.

Related

React-navigation open screen out of bottomNavigation

I have a bottomTabNavigator with some groups of screens:
{
Home: {
screen: Home,
navigationOptions: {
tabBarTestID: 'homeMenuButton',
tabBarIcon: TabItem('home'),
},
},
Beneficios: {
screen: AdvantageClub,
navigationOptions: {
tabBarTestID: 'beneficiosMenuButton',
tabBarIcon: TabItem('loyalty'),
tabBarLabel: 'BenefĂ­cios',
},
},
Repom: {
screen: RepomScreen,
navigationOptions: {
tabBarTestID: 'saldoMenuButton',
tabBarIcon: TabItem('attach-money'),
tabBarLabel: 'Saldo',
},
},
Profile: {
screen: Profile,
navigationOptions: {
tabBarTestID: 'profileMenuButton',
tabBarIcon: TabItem('person'),
tabBarLabel: 'Perfil',
},
},
},
{
initialRouteName: 'Home',
tabBarOptions: {
activeTintColor: colors.blue.primary,
inactiveTintColor: colors.blue.secondary,
style: {
height: 64,
borderTopWidth: 0,
paddingVertical: 0,
},
tabStyle: {
paddingVertical: 8,
},
},
},
);
Inside of "Beneficios" (screen: AdvantageClub) i have one StackNavigator:
const AdvantageClub = createStackNavigator(
{
WebView: AdvantageClubScreen,
AdvantageClubSignUp: AdvantageClubSignUpScreen,
AdvantageClubSignUpConfirm: AdvantageClubSignUpConfirmScreen,
AdvantageClubTerms: AdvantageClubTermsScreen,
},
{
initialRouteName: 'AdvantageClubSignUp',
...noHeader,
},
);
I need to open this WebView (AdvantageClubScreen) out of my bottomTabNavigator, like a new window. When i use navigator.navigate('WebView') the bottom menu keeps on screen.
What version of react-navigation are you using ?
I guess it's the V4, then in your nested StackNavigator "AdvantageClub" you can use tabBarVisible property in navigationOptions with something like this :
AdvantageClub.navigationOptions = ({navigation}) => {
const routes = navigation.state.routes;
const tabBarVisible = routes[routes.length -1].routeName === 'WebView'
return {tabBarVisible};
};

How to call a alert from bottom tab navigator in react navigation v4

For calling a stackNavigator we use props.navigation.navigate('home').
But how to call for alert when i clicked on a bottom tab navigation icon.
You can use tabBarOnPress in navigationOptions as below
CreatePostt: {
screen: createStackNavigator(
{
CreatePost: {
screen: CreatePost,
navigationOptions: {
// header: null
}
},
PostExpanded: {
screen: PostExpanded,
navigationOptions: {
title: "Upload Post",
headerStyle: {
elevation: 1
},
}
},
},
{
defaultNavigationOptions: {
headerTitleStyle: {
fontWeight: "bold"
}
}
}
),
navigationOptions: {
tabBarOptions: {
showIcon: true,
showLabel: false
},
tabBarVisible: false,
labelStyle: { margin: 0, padding: 0 },
title: "",
tabBarIcon: ({ focused }) => <BtnPost style={{ marginTop: 15 }} />,
tabBarOnPress: ({ navigation, defaultHandler }) => {
}
}
},
thanks.. it is working.....
const AlertStack = createStackNavigator(
{
Alert: AlertScreen
},
);
AlertStack.navigationOptions = {
tabBarOnPress: () => {
alert('Hello');
},
};

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'
})
);

ReactNative Combining StackNavigation with DrawerNavigation

I am using both createStackNavigator & createDrawerNavigator but the stackNavigator isn't working i can't navigate to any page. here is the app.js
const DrawerNavigator = createDrawerNavigator({
homeScreen: {
screen: homeScreen,
navigationOptions: ({ navigation }) => {
return {
title: 'Home',
headerStyle: {
backgroundColor: '#231f20',
height: 0,
},
headerLeft: null,
gesturesEnabled: false,
}
},
},
categoryScreen: {
screen: categoryScreen,
navigationOptions: ({ navigation }) => ({
title: 'Makeup',
//title: navigation.getParam('category'),
headerStyle: {
backgroundColor: '#231f20',
},
headerTintColor: '#f5f5f5',
}),
},
categoryScreen: {
screen: categoryScreen,
navigationOptions: ({ navigation }) => ({
title: 'Photographers',
//title: navigation.getParam('category'),
headerStyle: {
backgroundColor: '#231f20',
},
headerTintColor: '#f5f5f5',
}),
},
},
{
contentOptions: {
activeTintColor: '#d03036',
activeBackgroundColor : '#f5f5f5',
inactiveBackgroundColor : 'rgba(0,0,0,0)',
inactiveTintColor: '#545f7a',
itemStyle: {
marginVertical: 0,
},
labelStyle: {
fontWeight:'bold',
backgroundColor: 'transparent'
}
},
headerMode: 'screen', // screen on android
// headerBackTitleVisible: false,
headerTransitionPreset: 'fade-in-place',
headerLayoutPreset: 'center',
cardStyle: {},
initialRouteName: 'homeScreen',
drawerPosition: 'left',
contentComponent: CustomDrawerContentComponent,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle'
});
const AuthStackNavigator = createStackNavigator(
{
loadingScreen: {
screen: loadingScreen,
navigationOptions: ({ navigation }) => {
return {
header: null,
}
},
},
loginScreen: {
screen: loginScreen,
navigationOptions: ({ navigation }) => {
return {
header: null,
}
},
},
DrawerNavigator: {
screen: DrawerNavigator,
navigationOptions: ({ navigation }) => {
return {
header: null,
gesturesEnabled: false
}
},
},
},
{
initialRouteName: 'loadingScreen',
// mode: 'modal',
headerMode: 'screen', // screen on android
// headerBackTitleVisible: false,
headerTransitionPreset: 'fade-in-place',
headerLayoutPreset: 'center',
cardStyle: {},
}
);
const NavigationApp = createAppContainer(AuthStackNavigator);
// Export the App
export default NavigationApp;
import { useScreens } from 'react-native-screens';
useScreens();
i tried exporting the DrawerNavigator but then the stacknavigator isn't working anymore can i use both at the same time ?
also i got design issue when doing so i tried searching for hours but with no luck

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,
}
});