I am developing a react native application.
Here i am using this way to navigate between screens, navigatiion works OK. but when i press back button from the 3rd level screen, it comes to the 1st level screen instead of 2st level screen.
how do i fix this? please help me.
const HomePageScreen = createStackNavigator({
HomeLists: {
screen: HomeScreen,
navigationOptions: {
header: null
}
},
HotAdsLists: {
screen: AdsDetailScreen,
navigationOptions: {
title: 'Hot Ads2',
}
},
DetailsScreen: {
screen: DetailsScreen,
},
});
const SearchStack = createStackNavigator({
Home:{
screen:HomePageScreen,
navigationOptions: {
header: null
}
}
},{
initialRouteName: 'Home',
headerMode: 'screen'
});
const DrawerNavigatorExample = createDrawerNavigator({
SearchStack
},{
drawerType: 'slide',
contentComponent: Page2ComponentExample,
drawerBackgroundColor: '#4eb6ce'
});
The stack is working properly
I done the stack manually and it works fine.
Related
I have a react native application which has got a stack navigator and a bottom tabs navigator. Bottom tabs navigator and stack navigator has common screens between them. Here is the structure:
const ExploreNavigator = createStackNavigator({
Explore: {
screen: ExploreScreen
},
Read: {
screen: ReadScreen
},
CreateImage: {
screen: CreateImageScreen
}
})
const TabsNavigator = createBottomTabNavigator({
ExploreTab: {
screen: ExploreNavigator,
navigationOptions: {
tabBarLabel: "Explore"
}
},
ReadTab: {
screen: ReadScreen,
navigationOptions: {
tabBarLabel: "Read"
}
}
})
Now, if I directly move to Reading screen from Bottom tab navigator and move to CreateImage screen of stack navigator, when I press the back button I come back to default screen that is explore screen?
So, what is the best approach to solve the issue? I know I can create another stack navigator and add the relevant screens. Also, if this approach is followed can I name the stack navigator screens same?
I think this doesn't need keed one screen in the bold stack and bottom tab. So I suggestion like this
const ExploreNavigator = createStackNavigator({
Tabs: {
screen: TabsNavigator
},
CreateImage: {
screen: CreateImageScreen
}
})
const TabsNavigator = createBottomTabNavigator({
Explore: {
screen: ExploreScreen,
navigationOptions: {
tabBarLabel: "Explore"
}
},
ReadTab: {
screen: ReadScreen,
navigationOptions: {
tabBarLabel: "Read"
}
}
})
i would do it like this
const ExploreNavigator = createStackNavigator({
ExplorePrimary: {
screen: ExploreScreen
},
ReadPrimary: {
screen: ReadScreen
},
CreateImagePrimary: {
screen: CreateImageScreen
}
})
const ReadNavigator = createStackNavigator({
ExplorePrimary: {
screen: ExploreScreen
},
ReadSecond: {
screen: ReadScreen
},
CreateImageSecond: {
screen: CreateImageScreen
}
})
const TabsNavigator = createBottomTabNavigator({
ExploreTab: {
screen: ExploreNavigator,
navigationOptions: {
tabBarLabel: "Explore"
}
},
ReadTab: {
screen: ReadNavigator,
navigationOptions: {
tabBarLabel: "Read"
}
}
})
const RootStack = MultiNavigator({
Splash: {
screen: Splash
},
Registration: {
screen: Registration
},
WelcomeScreen: {
screen: WelcomeScreen
},
HomeScreen: {
screen: HomeScreen
}
}, {
initialRouteName: "HomeScreen",
},
);
what ever i rendered as initial page , some space is coming at top side. I have to avoid it. I used header: null/none/false. But no result.Thanks in advance.
I have fixed this issue, by using headerMode: none.
const RootStack = MultiNavigator({
Splash: {
screen: Splash
},
Registration: {
screen: Registration
}
}, {
initialRouteName: "Registration",
headerMode: "none"
});
I'm trying to work my way toward building a drawer navigator using this really nice tutorial/demo
Issue is that although this code works and I can walk through all the screens in my stacknavigator:
const navigator = StackNavigator({
home: { screen: Home },
signup: { screen: SignUpStep },
login: { screen: Login },
selectTeachers: { screen: SelectTeachers },
dashboard: { screen: Dashboard },
},
{
headerMode: 'float',
navigationOptions: {
headerStyle: { backgroundColor: '#E73536' },
title: 'You are not logged in',
headerTintColor: 'white'
}
});
export default navigator;
But when i try to include, as a first step, consolidating the login scenes into a loginstack and then having that as a screen in another const, it does not work:
const LoginStack = StackNavigator({
home: { screen: Home },
signup: { screen: SignUpStep },
login: { screen: Login },
selectTeachers: { screen: SelectTeachers },
dashboard: { screen: Dashboard },
},
{
headerMode: 'float',
navigationOptions: {
headerStyle: { backgroundColor: '#E73536' },
title: 'You are not logged in',
headerTintColor: 'white'
}
});
const navigator = StackNavigator({
loginStack: { screen: LoginStack },
//drawerStack: { screen: DrawerNavigation }
}, {
// Default config for all screens
headerMode: 'none',
title: 'Main',
initialRouteName: 'loginStack'
});
export default navigator;
here is the error I am getting:
The link you brought spread a wrong approach out.
I wrote a comment there,
Putting drawer under the StackNavigation is a bad idea and it’s not
fit with any design guide. In iOS, drag to open action is duplicated
with go back action in navigation. In Android, you can find no app
from google use this approach. A drawer should cover StackNavigator
from outside.
You need to change your second StackNavigator to DrawerNavigator. And see 'react-navigation' documents or example for DrawerNavigator.
I've made a custom tab bar in a Component which uses StackNavigator like so
export default StackNavigator(
{
Login: {
screen: Login,
},
ForgotPassword: {
screen: ForgotPassword,
},
SignUp: {
screen: SignUp,
},
Home: {
screen: Home,
},
},
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
},
initialRouteName: 'Home',
},
);
Now my Home screen has a custom made Tab Bar like so
export default () => (
<View>
<Text>HOME</Text>
<TabBar />
</View>
)
I want my Home screens Tab bar to have no transition
Currently it animates (left to right for IOS & bottom to up for Android) when one of the Tab link is clicked
I checked docs & found mode property but it has only 2 props card & modal & I want no animation
How to do it ?
Thanks to #Vojtech, I got the answer
const customAnimationFunc = () => ({
screenInterpolator: (sceneProps) => {
const { scene } = sceneProps;
const tabs = ['Home'];
if (tabs.indexOf(scene.route.routeName) !== -1) return null;
},
});
export default StackNavigator(
{
Login: {
screen: Login,
},
ForgotPassword: {
screen: ForgotPassword,
},
SignUp: {
screen: SignUp,
},
Home: {
screen: Home,
},
},
{
headerMode: 'none',
transitionConfig: customAnimationFunc,
navigationOptions: {
headerVisible: false,
},
initialRouteName: 'Home',
},
);
The only problem right now is nothing is animating. I'll edit the answer when few screens animate & tabs don't
I want to use the Navigator All togather but i fail to implement this the code which i use for integration is
const MyApp = const MyApp = TabNavigator({
Home: {
screen: HomeScreen,
},
Notifications: {
screen: HomeButton,
},
},
DrawerNavigator({
Home: {
screen: list,
},
SwipeList:{
screen:SwipeLists
},
},{
initialRouteName: 'Home',
contentComponent: SideDrawer,
});
});
const Simple = StackNavigator({
Login: {
screen: Login,
},
signup: {
screen: SignUp,
},
forget:{
screen:forget
},
});
I use this above but this is not correct i am not now how to integrate them plz recmond the way how to integrate the three navigator in react native