I want to asking about why bottom tab didnt showing at home screen (hidden)
here is my code
import React from 'react';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import Signup from './screens/signup';
import Login from './screens/login';
import Home from './screens/Home';
import Loading from './screens/Loading';
import Welcome from './screens/Welcome';
import ForgotPassword from './screens/ForgotPassword';
import ApplyLoan from './screens/ApplyLoan';
import Profile from './screens/Profile';
import LoanHistory from './screens/LoanHistory';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
export default class App extends React.Component {
render()
{
return (
<AppContainer>
<RootNavigator/>
<MainTab/>
</AppContainer>
);
}
}
const RootNavigator = createStackNavigator({
loading: {
screen: Loading,
navigationOptions: {
headerShown: false,
headerTransparent: true,
},
},
Welcome: {
screen: Welcome,
navigationOptions: {
headerShown: false,
headerTransparent: true,
},
},
signup: {
screen: Signup,
navigationOptions: {
headerShown: false,
headerTransparent: true,
},
},
login: {
screen: Login,
navigationOptions: {
headerShown: false,
headerTransparent: true,
},
},
Home: {
screen: Home,
navigationOptions: {
headerShown: false,
headerTransparent: true,
},
},
ForgotPassword: {
screen: ForgotPassword,
navigationOptions: {
headerShown: false,
headerTransparent: true,
},
},
ApplyLoan: {
screen: ApplyLoan,
navigationOptions: {
headerShown: false,
headerTransparent: true,
},
},
LoanHistory: {
screen: LoanHistory,
navigationOptions: {
headerShown: false,
headerTransparent: true,
},
},
Profile: {
screen: Profile,
navigationOptions: {
headerShown: false,
headerTransparent: true,
},
},
InitialRouteName : Loading
});
const MainTab = createMaterialBottomTabNavigator(
{
Home: { screen: Home,
navigationOptions:{
tabBarLabel:'Home',
tabBarIcon: ({ tintColor }) => (
<View>
<Icon style={[{color: tintColor}]} size={25} name={'ios-home'}/>
</View>),
}
},
Profile: { screen: Profile,
navigationOptions:{
tabBarLabel:'Profile',
tabBarIcon: ({ tintColor }) => (
<View>
<Icon style={[{color: tintColor}]} size={25} name={'ios-person'}/>
</View>),
activeColor: '#f60c0d',
inactiveColor: '#f65a22',
barStyle: { backgroundColor: '#f69b31' },
}
},
},
{
initialRouteName: "Home",
activeColor: '#f0edf6',
inactiveColor: '#226557',
barStyle: { backgroundColor: '#3BAD87' },
},
);
const AppContainer = createAppContainer(RootNavigator, MainTab);
Is something wrong about my code?
Related
I got the following react-navigation structure :
<NavigationContainer>
{authToken ? (
<Tab.Navigator>
<Tab.Screen
name='HomeScreen'
component={HomeScreen}
/>
<Tab.Screen
name='SettingsScreen'
component={SettingsScreen}
/>
</Tab.Navigator>
) : (
<Stack.Navigator>
<Stack.Screen name="SignUpScreen" component={SignUpScreen} />
</Stack.Navigator>
)}
</NavigationContainer>
How to navigate from SignUpScreen to HomeScreen and conversely :
// HomeScreen.js button :
onPress={() => {
// remove authToken and then :
navigation.navigate(`SignUpScreen`);
}}
Got the error message : The action 'NAVIGATE' with payload {"name":"SignUpScreen"} was not handled by any navigator. Do you have a screen named 'SignUpScreen'?
Same from SignUpScreen after authToken = true.
Is there a way to navigate from one stack to another in a ternary operator ? (Or trigger the index of the navigation to re-render the condition ?).
Assuming what what you want to implement is an App that has a different navigation if you are logged in or out, I would suggest using the Switch navigator. In your case, your error it is most likely caused because the signup screen does not exist in the tree of both stack navigators. I'll post the entire main code but the part you should take a look is this:
const Navigator = createSwitchNavigator({
Main: MainTabNavigator,
Auth: AuthNavigator,
SplashScreen: SplashScreen,
Onboarding: Onboarding,
}, {
initialRouteName: 'SplashScreen',
headerMode: 'none'
});
The rest:
import React from "react";
import { createStackNavigator, createBottomTabNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation';
import {ThemeProvider} from 'styled-components'
import {configureStore} from "./redux/store"
import { Provider } from 'react-redux'
const theme = {
primaryColor: '#3F51B5',
darkPrimaryColor: '#303F9F',
containerBackgroundColor: '#FFFFFF',
lightPrimaryColor: '#C5CAE9',
accentColor: '#FF5722',
backgroundColor: 'white',
font: 'Lato-Regular',
fontBold: 'Lato-Bold'
}
const ConfigNavigator = createStackNavigator({
Config: ConfigScreen,
SettingsScreen: SettingsScreen,
...coreRoutes
}, {
initialRouteName: 'Config',
headerMode: 'none'
});
const HomeNavigator = createStackNavigator({
...coreRoutes
}, {
initialRouteName: 'HomeScreen',
headerMode: 'none'
});
const PlacesNavigator = createStackNavigator({
Places: PlacesScreen,
POI: POIScreen,
}, {
initialRouteName: 'Places',
headerMode: 'none'
});
const PinnedNavigator = createStackNavigator({
Pinned: PinnedScreen,
POI: POIScreen,
}, {
initialRouteName: 'Pinned',
headerMode: 'none'
});
const MainTabNavigator = createBottomTabNavigator({
Home: HomeNavigator,
Places: PlacesNavigator,
Pinned: PinnedNavigator,
Chat: ChatScreen,
Config: ConfigNavigator,
}, {
initialRouteName: 'Home',
tabBarPosition: "bottom",
swipeEnabled: false,
tabBarComponent: props => {
return <TabNavigation {...props}
items={[
{
text: Strings['home'], icon: { name: "home", type: "MaterialCommunityIcons" },
route: "Home"
},
{
text: Strings['places'], icon: { name: "map-marker-multiple", type: "MaterialCommunityIcons"},
route: "Places"
},
{
text: Strings['pinned'], icon: { name: "pin", type: "MaterialCommunityIcons" },
route: "Pinned"
},
{
text: Strings['chat'], icon: { name: "wechat", type: "MaterialCommunityIcons" },
route: "Chat"
},
{
text: Strings['settings'], icon: { name: "settings", type: "MaterialCommunityIcons" },
route: "Config"
}
]}
/>
}
});
const AuthNavigator = createStackNavigator({
Registration: RegistrationScreen,
}, {
initialRouteName: 'Registration',
headerMode: 'none'
});
const Navigator = createSwitchNavigator({
Main: MainTabNavigator,
Auth: AuthNavigator,
SplashScreen: SplashScreen,
Onboarding: Onboarding,
}, {
initialRouteName: 'SplashScreen',
headerMode: 'none'
});
const AppContainer = createAppContainer(Navigator)
let store = configureStore();
class App extends React.Component {
constructor(){
super();
this.theme = new Theme(theme);
}
render(){
return <Provider store={store}>
<ThemeProvider theme={this.theme.getTheme()}>
<AppContainer/>
</ThemeProvider>
</Provider>
}
};
export default App;
From then, you just navigate to Auth or Main and the entire navigator tree changes.
I want to know how to combine bottom tab navigator with Stack Navigator on Home Navigator in app.js
Here is my code
import React from 'react';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import Signup from './screens/signup';
import Login from './screens/login';
import Home from './screens/Home';
import Loading from './screens/Loading';
import Welcome from './screens/Welcome';
import ForgotPassword from './screens/ForgotPassword';
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
const navigator = createStackNavigator({
loading: {
screen: Loading,
navigationOptions: {
headerShown: false,
headerTransparent: true,
},
},
Welcome: {
screen: Welcome,
navigationOptions: {
headerShown: false,
headerTransparent: true,
},
},
signup: {
screen: Signup,
navigationOptions: {
headerShown: false,
headerTransparent: true,
},
},
login: {
screen: Login,
navigationOptions: {
headerShown: false,
headerTransparent: true,
},
},
Home: {
screen: Home,
navigationOptions: {
headerShown: false,
headerTransparent: true,
},
},
InitialRouteName: Loading,
});
const AppContainer = createAppContainer(navigator);
Any suggest to add bottom tab navigator in this code? I want to know how to combine Tab bottom navigator with stack navigator in app.js (calling home with bottom tab navigator)
thanks
You can create a tabNavigator and set it like any other route.
Obs: Also work for drawerNavigator.
Example:
const MainTab = TabNavigator(tabs, {
initialRouteName: initialRouteName,
tabBarPosition: "bottom",
});
const RootNavigator = StackNavigator(
{
Root: {
screen: MainTab,
navigationOptions: {
headerMode: "none"
}
},
/* Other Screens */
Login: { screen: LoginScreen },
}
)
const AppContainer = createAppContainer(RootNavigator);
Obs: this also work for drawerNavigator.
Ever since I started using Stack Navigator with Drawer Navigator, this problem occurred. Right now, I think I am passing the parent in the navigate so that it will navigate to the correct screen.
otherUser (username) {
this.props.navigation.navigate('AppStackNav', { username: username });
}
This is how my navigation are setup. I am using Drawer, Stack, and Tab:
const TabNav = TabNavigator({
Random: { screen: HomeScreen },
Recent: { screen: RecentScreen },
Trending: { screen: TrendingScreen },
AllTime: { screen: AllTimeScreen },
}, {
tabBarComponent: NavigationComponent,
tabBarPosition: 'bottom',
lazy: false,
animationEnabled: true,
swipeEnabled: true,
tabBarOptions: {
bottomNavigationOptions: {
labelColor: '#333',
rippleColor: 'white',
tabs: {
Recent: {
barBackgroundColor: '#EEEEEE',
activeLabelColor: '#212121',
},
Trending: {
barBackgroundColor: '#00796B',
},
RegisterScreen: {
barBackgroundColor: '#EEEEEE', // like in the standalone version, this will override the already specified `labelColor` for this tab
activeLabelColor: '#212121',
activeIcon: <Icon size={24} color="#212121" name="newsstand" />
},
AllTime: {
barBackgroundColor: '#00796B'
},
}
}
}
});
const AppStackNav = StackNavigator ({
OtherUserScreen: {screen: OtherUserScreen},
});
const AppDrawerNavigator = DrawerNavigator({
TabNav: {screen: TabNav},
LoginScreen: {screen: LoginScreen},
RegisterScreen: {screen: RegisterScreen},
ProfileScreen: {screen: ProfileScreen},
UserListScreen: {screen:UserListScreen},
HomeScreen: {screen: HomeScreen},
AppStackNav: {screen: AppStackNav},
OtherTagsScreen: {screen: OtherTagsScreen},
QuoteMachineScreen: {screen: QuoteMachineScreen},
},
{
initialRouteName: "TabNav",
contentOptions: {
activeTintColor: "#e91e63"
},
contentComponent: props => <SideBar {...props} />
},
);
Also, I am still learning in React Native so any tips will greatly be appreciated.
I have a navigation.js which returns SwitchNavigator...
I want to put TabIcon in one of the screens....But i can't do it inside the screen,
i.e
static navigationOptions = () => ({
header: null,
tabBarLabel: 'Orders',
});
As i have a nested tab, so i don't have a screen where i can do this ....here is my code
navigation.js
const AppStack = TabNavigator({
//ORDER TAB----->>>>
orders: {
navigationOptions: {
tabBarLabel: 'Orders',
},
screen: TabNavigator({
navigationOptions: {
tabBarLabel: 'Orders',
tabBarIcon: ({ tintColor }) => {
return <Icon name="shopping-cart" size={20} color={tintColor} />;
}
},
awaitingScreen: {
screen: StackNavigator({
awaiting: { screen: AwaitingScreen },
awaitingorderdetail: { screen: AwaitingDetailScreen }
})
},
confirmedscreen: {
screen: StackNavigator({
confirmed: { screen: ConfirmedScreen },
confirmedorderdetail: { screen: ConfirmedDetailScreen }
})
},
}, {
tabBarOptions: {
activeTintColor: '#415041', // Color o f tab when pressed
inactiveTintColor: '#b5b5b5', // Color of tab when not pressed
showIcon: 'true', // Shows an icon for both iOS and Android
//showLabel: (Platform.OS !== 'android'), //No label for Android
lazy: true,
animationEnabled: false,
indicatorStyle: {
borderBottomColor: '#f5e9dd',
borderBottomWidth: 2,
},
labelStyle: {
fontSize: 10,
color: 'white',
fontFamily: 'NeutraText-Book'
},
style: {
backgroundColor: '#415041',
}
}
}
)
},
//PAYMENT TAB---->>>
payments: { screen: PaymentScreen },
//CUSTOMER TAB----->>
customers: { screen: CustomerScreen },
//MESSAGES TAB----->>
messages: { screen: MessageScreen },
//backBehavior: 'none',
},
{
headerMode: 'none', // I don't want a NavBar at top
tabBarPosition: 'bottom', // So your Android tabs go bottom
swipeEnabled: false,
lazy: true,
animationEnabled: false,
tabBarOptions: {
activeTintColor: '#415041', // Color o f tab when pressed
inactiveTintColor: '#b5b5b5', // Color of tab when not pressed
showIcon: 'true', // Shows an icon for both iOS and Android
//showLabel: (Platform.OS !== 'android'), //No label for Android
labelStyle: {
fontSize: 8,
margin: 0,
padding: 0,
fontFamily: 'NeutraText-Book'
},
indicatorStyle: {
borderBottomColor: '#f5e9dd',
borderBottomWidth: 2,
},
style: {
backgroundColor: '#fff', // Makes Android tab bar white instead of standard blue
}
}
});
const AuthStack = TabNavigator({
selectadmin: { screen: SelectAdminScreen },
otp: { screen: OtpScreen },
password: { screen: PasswordScreen },
pin: { screen: PinScreen }
},
{
navigationOptions: {
tabBarVisible: false
},
tabBarPosition: 'bottom',
swipeEnabled: false,
lazy: true,
animationEnabled: false,
//backBehavior: 'none',
}
);
export default SwitchNavigator(
{
AuthLoading: AppLoadingScreen,
App: AppStack,
Auth: AuthStack,
},
{
initialRouteName: 'AuthLoading',
}
);
Now i want to import this navigator inside App.js
like
export default class App extends React.Component {
render() {
return (
<View style={{ flex: 1 }}>
<SwitchNavigator />
</View>
);
}
}
But i can't do this as i can't return JSX without React,
So is there any work around? I can declare all this inside my App.js but That is my last option as it will make my code messy.
return <Icon name="shopping-cart" size={20} color={tintColor}
It returns React must be in scope
Make sure to always import React in every file that contains jsx:
import React from 'react';
The error indicates that you forgot to do so in a file that contains jsx.
When I am in my SignIn screen and I reset my stack to point to the Main TabNavigator I see the Welcome screen briefly. It doesn't look appealing at all. How do I solve this?
I have the following code in my router:
export const WelcomeStack = StackNavigator({
welcome:{
screen: WelcomeScreen,
navigationOptions: {
header: () => { null }
}
},
SignIn: {
screen: SignIn,
navigationOptions: {
headerBackTitle: "Tilbake",
headerTintColor: colors.background,
headerStyle: {
marginTop: Platform.OS === 'android' ? 24 : 0,
backgroundColor: colors.primary
},
title: 'SeniorSmart'
}
},
main: {
screen: TabNavigator({
FindEvents: {
screen: FindEvents,
navigationOptions: {
title: 'Finn aktiviteter',
},
},
}, {
tabBarPosition: 'bottom',
tabBarComponent: TabBarBottom,
swipeEnabled: false,
animationEnabled: true
}),
}
And this is the code I use to navigate to the main tabnavigator screen:
const resetAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'main' }),
],
});
this.props.navigation.dispatch(resetAction);