Stack Navigator flow issue with TabRouter - react-native

Stack Navigator "Root"
--Stack Navigation A
-- SN Login
-- SN Signup
-- SN HOME
Initial Route is "LOGIN"
HOME contain tab navigation
--Tab Navigator
--- TAB Navigator A
----Screen "Setting"
--- TAB Navigator B
----Screen "1"
----Screen "Setting"
App.js
const AppNavigator = StackNavigator({
Login: {
screen: Login
},
SignUp: {
screen: SignUp
},
TermsConditions: {
screen: TermsConditions
},
Home: {
screen: Home
},
Setting: {
screen: Setting
}
}, {
initialRouteName: "Login",
headerMode: "none",
// mode: 'modal',
navigationOptions: {
gesturesEnabled: false
}
});
When user login, navigate to "Home" screen -- End open the Truck as initial route.
Home.js
const HomeNavigation = StackNavigator(
{
Home: {
screen: Trucks
},
TruckDetailController: {
screen: TruckDetailController
},
Setting: {
screen: Setting
},
{
initialRouteName: "Home",
headerMode: "none"
}
);
const FavouriteNavigation = StackNavigator(
{
Favourite: {
screen: Favourite
},
TruckDetailController: {
screen: TruckDetailController
},
Setting: {
screen: Setting
},
{
initialRouteName: "Favourite",
headerMode: "none"
}
);
const TabRoute = TabRouter(
{
Trucks: {
screen: HomeNavigation
},
Favourite: {
screen: FavouriteNavigation
},
Loyalty: {
screen: Loyalty
},
Offer: {
screen: Offer
}
},
{ initialRouteName: "Trucks" }
);
I Just want to logout from setting and switch to "Stack Navigation A -- Login" screen.
If anybody will give the solution for above so its appreciable and make a good point. :)

You have two options here. The first, is to use the Back action with a key (you'll have to save the key for the Feed screen when you're there).
The second is to use Reset as you have, but you misunderstood the role of the actions array - it is only intended for building a stack for a stack navigator.
To perform the inner stack-navigator navigation, you'll have to specify an action inside the navigation action:
const resetAction = NavigationActions.reset({
index: 1,
actions: [
NavigationActions.navigate({
routeName: '1',
params: {},
action: NavigationActions.navigate({
routeName: 'Feed'
})
})
]
});

Related

Navigate to different stack - Can't perform update on unmounted component (no-op)

I'm using react-native-navigation v3 and I'm trying to go from a screen in one stack to another screen in a different stack.
When I trigger onDetailButtonPress from the LoggedInStack, I'm able to open the ReleaseDetail screen but the bottomTabNavigator disappears and I get an error: Can't perform a React state update on an unmounted component.
What is causing this issue here? I'm able to navigate from the HomeStack to the LoggedInStack but not the other way around.
HomeStack.js:
const HomeStack = createStackNavigator(
{
Home: {
screen: HomeScreen
},
Settings: {
screen: SettingsScreen
},
ReleaseDetail: {
screen: ReleaseInfoContainerScreen
},
SettingOnboard: {
screen: OnboardStack
}
},
{
headerMode: 'none'
}
)
LoggedInStack.js:
onDetailButtonPress={() => {
this.props.navigation.navigate(
NavigationActions.navigate({
routeName: 'HomeStackView',
params: {},
action: NavigationActions.navigate({
routeName: 'ReleaseDetail',
params: {
releaseId: selectedReleaseId
}
})
})
)
}}
export const LoggedInStack = createStackNavigator(
{
TabNavigator: {
screen: connectedLoggedInTabContainerView,
navigationOptions: {
header: null
}
},
FullScreenPlayer: {
screen: PlayerScreen,
navigationOptions: {
header: null
}
},
},
{
mode: 'modal',
headerMode: 'none'
}
)
Try to use:
onDetailButtonPress={() =>
this.props.navigation.navigate('ReleaseDetail', { releaseId: selectedReleaseId })
}

react-navigation Drawer and Stack nested

I want to accomplish the most commont android structure: a drawer navigator with an header (stackNavigator).
The app is very simple: it is a dictionary and shows a list of item grouped by first letter (BrowseScreen) and also it allows a search by keyword (SearchScreen, someone call this Master–detail pattern).
Starting from those 2 screens, I have to be able to reach the ItemScreen (which shows the details of a single term).
How can I structure this in react-navigator 3? This is my attempt, but I'm not sure it's the best way, and also I don't know where to place ItemScreen. No drawer item should be active while I'm on an ItemScreen.
const RootDrawer = createDrawerNavigator(
{
Home: {
screen: createStackNavigator({
Home: { screen: Home },
//Browse: { screen: Browse },
//Search: { screen: Search }
}, {
initialRouteName: 'Home',
})
},
Browse: {
screen: createStackNavigator({
Browse: { screen: Browse }, //it shows a grid of buttons with the alphabet
Search: { screen: Search }, //it shows the items by a First letter
}, {
initialRouteName: 'Browse',
})
},
Search: {
screen: createStackNavigator({
Search: { screen: Search}
}, {
initialRouteName: 'Search',
})
},
Bookmarks: {
screen: createStackNavigator({
Bookmark: { screen: Bookmarks },
Item: { screen: ItemScreen },
}, {
initialRouteName: 'Bookmark',
})
}
},
{
mode: 'modal',
headerMode: 'screen' ,
initialRouteName: 'Home',
}
);

How to change priority screen load inside a route file - react-navigation

I'm using react-navigation.
now I want to change first screen load from inside of StackNavigator.
export const LoginStack = StackNavigator({
Login: {
screen: Login,
},
Phone: {
screen: Phone,
},
Activation: {
screen: Activation,
}
},
{
headerMode: 'none',
initialRouteName: 'Phone',
});
export const HomeStack = StackNavigator({
Home: {
screen: ContainerNavs,
},
Notifications: {
screen: Notification,
},
Question: {
screen: Question,
},
SelectContacts: {
screen: SelectContacts,
},
Options: {
screen: Options,
},
},
{
headerMode: 'none'
});
export const RootNavigator = StackNavigator({
Login: {
screen: LoginStack,
},
Home:{
screen: HomeStack,
},
},{
mode: 'modal',
headerMode: 'none',
initialRouteName: 'Login',
}
);
but my router always load Login screen. but I want to load Phone screen.
Just Replace The Screen and set first screen you want to load first .. that's it... so i just set Phone screen at the top of the stacknavigator
export const LoginStack = StackNavigator({
Phone: {
screen: Phone,
},
Login: {
screen: Login,
},
Activation: {
screen: Activation,
}
},
{
headerMode: 'none',
initialRouteName: 'Phone',
});

Avoid react native initial page having some space on top

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

How to stop default transition when using custom tab bar in React Native using React Navigation?

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