I have a material top tab bar with 5 tabs. But all 5 tabs could't fit to a screen. in the screenshot below only 4 tabs visible.
I need a behavior where tab bar shift automatically to the left when 3rd tab has been clicked. I searched the docs couldn't find anything similar.
here is app.js
class App extends Component {
render() {
return (
<View style={{ flex: 1 }}>
<AppContainer />
</View>
);
}
}
const AppTabNavigator = createMaterialTopTabNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: {
tabBarLabel: 'Home'
}
},
Settings: {
screen: SettingsScreen,
navigationOptions: {
tabBarlabel: 'Settings'
}
},
Orders: {
screen: OrdersScreen,
navigationOptions: {
tabBarlabel: 'Order List'
}
},
Cancelled: {
screen: CancelledItemsScreen,
navigationOptions: {
tabBarlabel: 'Cancelled Items'
}
},
Others: {
screen: OthersScreen,
navigationOptions: {
tabBarlabel: 'Others'
}
}
},
{
initialRouteName: 'Home',
tabBarOptions: {
tabStyle: {
width: 100,
overflow: 'hidden'
}
}
}
);
const AppContainer = createAppContainer(AppTabNavigator);
export default App;
You can try this code.
renderScene = ({ route }) => {
if (Math.abs(this.state.index - this.state.routes.indexOf(route)) > 5) {
return <View />;
}
return <MySceneComponent route={route} />;
};
Related
in page app js
react :hook
navigation : version 4
backLeft error
ReferenceError: Can't find variable: navigation
I want to go back to the previous screen but the back () function doesn't work.
the navigation & goback function not recognized.
import Info from "./Screens/Info";
import Note from "./Screens/Note";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
function App() {
return (
<SafeAreaView style={styles.container}>
<StatusBar barStyle="dark" />
<AppContainer />
<View>
</View>
</SafeAreaView>
);
}
const AppStack = createStackNavigator(
{
Start: {
screen: Start,
navigationOptions: {
title: '',
},
params: { user: 'me' },
},
Info: {
screen: Info,
navigationOptions: { title: 'الصفحة الرئيسية' },
},
Guide: {
screen: Guide,
navigationOptions: { title: 'دليل الصيانة' },
},
Note: {
screen: Note,
navigationOptions: {
title: 'المذكرة',
// **the error is here ⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇❌❌❌❌❌❌**
headerLeft: () => <TouchableOpacity onPress={() => { goBack() }} ><Text style={{ color: '#fff' }}>back</Text></TouchableOpacity>
},
},
},
{
initialRouteName: "Start",
},
}
);
export default createAppContainer(AppStack);
Try this :
Note: {
screen: Note,
navigationOptions: ({ navigation }) => ({
title: 'المذكرة',
headerLeft: () => <TouchableOpacity onPress={() => { navigation.goBack() }} ><Text style={{ color: '#fff' }}>back</Text></TouchableOpacity>
}),
},
You can access navigation object in navigationOptions as above and then it will be used to navigate route.
I want to show an initial screen when the user logs into my react native app.But i don't want to show the screen on the drawer component as i have used drawer component for other screens from react navigation. When the user goes to different screens from the drawer component,i want to make them come to the previous initial screen on pressing back button.
const AppStackNavigator = createStackNavigator({
Map: {
screen: Maps,
navigationOptions: () => ({
header: null
})
},
UpdateProfile: {
screen: UpdateProfileScreen,
navigationOptions: () => ({
header: null
})
},
SearchDetails: {
screen: SearchDetails,
navigationOptions: () => ({
header: null
})
},
})
const AppDrawerNavigator = createDrawerNavigator({
Home: {
screen : AppStackNavigator,
navigationOptions: () => ({
title: `Map`,
drawerIcon: ({tintColor}) => (
<Image source={require('./assets/img/s_logo.png')} style={{height: 24, width: 24}}/>
)
})
},
Search: {
screen: SearchScreen,
navigationOptions: () => ({
title: `Search by`
})
},
Vendor: {
screen: HomeScreen,
navigationOptions: () => ({
title: `Vendor List`,
})
},
Notifications: {
screen: NotificationScreen
},
Events: EventsScreen,
Venue : {
screen: VenueAvailabilityScreen,
navigationOptions: () => ({
title: `Venue Availability`,
})
},
Settings: {
screen: SettingsScreen
}
}, {
drawerPosition: 'left',
contentComponent: customDrawerContentComponent,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoure: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
drawerWidth: 320,
contentOptions: {
activeTintColor: '#fff',
inactiveTintColor: '#030303',
activeBackgroundColor: '#B90066',
inactiveBackgroundColor: '#fff',
itemsContainerStyle: {
marginHorizontal: 10
},
itemStyle: {
height: 40,
borderRadius: 60,
},
activeLabelStyle: {
fontSize: 20,
fontWeight: 'normal'
}
}
})
const AuthStackNavigator = createStackNavigator({
SplashScreen: { screen: SplashScreen },
ModalScreen:{
screen: ModalScreen
},
LocationNotification: {
screen: LocationNotificationScreen,
navigationOptions: () => ({
header: null
})
},
LoginScreen: {
screen : LoginScreen,
navigationOptions: () => ({
header: null
})
},
SignUpScreen: {
screen : SignUpScreen,
navigationOptions: () => ({
header: null
})
},
SignUpStepTwo: {
screen : SignUpStepTwo,
navigationOptions: () => ({
header: null
})
},
ForgotPassword: {
screen: ForgotPassword,
navigationOptions: () => ({
header: null
})
}
})
const AppSwitchNavigator = createSwitchNavigator({
AuthLoadingScreen: AuthLoadingScreen,
Auth: AuthStackNavigator,
App: {
screen: AppDrawerNavigator
}
})
const MyAppDrawer = createAppContainer(AppSwitchNavigator)
class App extends Component {
render() {
return <MyAppDrawer />
}
I want to set the map screen as initial but don't want to show that on drawer. How could i do that?
You can't ... at least it's not easy. You need to create a custom contentcomponent yourself and implement the navigation. Tutorial here. Another approach is to make your appdrawernavigator ,a child of a stacknavigator with the initial screen
const AppSwitchNavigator = createSwitchNavigator({
AuthLoadingScreen: AuthLoadingScreen,
Auth: AuthStackNavigator,
App: MainStackNavigator
})
//the main stack
const MainStackNavigator= createStackNavigator({
InitialScreen: {screen: InitialScreen},
DrawerNav: {screen:AppDrawerNavigator}
},{headerMode: 'none'})
I am extremely new in React Native, tried to adding a testing screen in drawer, but I couldn't.
import { createDrawerNavigator, createStackNavigator } from "react-navigation"
/* Some imports here neglected...*/
/*
* icon size
* */
const iconSize = 18
const IntegratedNavigation = createStackNavigator({
bottomNavigator: { screen: BottomNavigator, navigationOptions: { header: null } },
something: { screen: Something, navigationOptions: { header: null } },
something2: { screen: SomethingElse, navigationOptions: { header: null } },
})
export const DrawerNavigator = createDrawerNavigator({
Tabs: {
screen: IntegratedNavigation,
navigationOptions: {
drawerLabel: "Explore",
drawerIcon: ({ tintColor, focused }) => (
<Icon icon={"search"} size={iconSize} color={tintColor}/>
),
header: null,
},
},
PartnersScreen: {
screen: PartnersScreen,
navigationOptions: {
drawerLabel: "Partners",
drawerIcon: ({ tintColor, focused }) => (
<Icon icon={"safety"} size={iconSize} color={tintColor}/>
),
},
},
HelloScreen: {
screen: PartnersScreen, /*This is a testing new drawer tab that never appear!*/
navigationOptions: {
drawerLabel: "Test!",
drawerIcon: ({ tintColor, focused }) => (
<Icon icon={"test"} size={iconSize} color={tintColor}/>
),
},
},
}, {
contentOptions: {
inactiveTintColor: color.palette.lightBlack,
activeTintColor: color.primary,
},
contentComponent: props => (<MenuUserInfo drawerItemsProps={props}/>),
drawerWidth: 240,
},
)
As a test, I just wanted to duplicate "PartnersScreen" as another tab. But the new route never appear. I couldn't figure out which other file I need to modify. Any idea?
Consider:
export default class App extends React.Component {
render() {
return(
<MyApp />
);
return(
<Navigation />
);
}
const Navigation = createStackNavigator({
Welcome: {
screen: Splash,
navigationOptions: {
header: null
}
},
Login: {
screen: Requesterlogin,
navigationOptions: {
title: "Login",
headerTitleStyle: {
alignSelf: "center",
textAlign: "center",
width: "77%"
},
headerStyle: {
backgroundColor: "#095473"
},
headerTintColor: "white"
}
},
Forgot: {
screen: Forgot,
navigationOptions: {
title: "Forgot Password",
headerTitleStyle: {
alignSelf: "center",
textAlign: "center",
width: "77%"
},
headerStyle: {
backgroundColor: "#095473"
},
headerTintColor: "white"
}
}
});
const MyApp = DrawerNavigator(
{
Home: {
screen: Reqlogin,
navigationOptions: {
drawerLabel: 'Home',
drawerIcon: () => (
<Icon
name="home"
size={25}
color="black"
//style={styles.useraccounticon}
/>
),
}
},
Profile: {
screen: Profile_Requester,
navigationOptions: {
drawerLabel: 'Profile',
drawerIcon: () => (
<Icon
name="user-circle"
size={25}
color="black"
//style={styles.useraccounticon}
/>
),
}
},
}
);
In the above code I use two navigation CreateStack navigations used for Navigation.
The Drawer navigator is used for Myapp. But in my case only Myapp is working. How can I return the proper way so both will be working?
It looks like you are trying to implement an authentication flow. You should do that using createSwitchNavigator and nesting your other navigators within that. SwitchNavigator can help you with authentication flows because it handles stuff like making sure you cannot jump to your main app from the Login screen using the Back button.
The idea is, you will have a SwitchNavigator as the parent navigator with two flows: whether the user is signed in or not. The child navigators would be something like Auth and Main. If the user is not signed in, the active navigator would be Auth, which will be a StackNavigator itself. If the user is signed in, the active navigator would be a DrawerNavigator with a stacked StackNavigator.
import { createSwitchNavigator, createStackNavigator, createDrawerNavigator } from 'react-navigation';
const App = createDrawerNavigator({ AppStack: AppStack });
const AppStack = createStackNavigator({
Home: { screen: Reqlogin },
Profile: { screen: Profile_Requester }
});
const Auth = createStackNavigator({
Welcome: { screen: Splash },
Login: { screen: Requesterlogin },
Forgot: { screen: Forgot }
});
export default createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen, // You'll check whether user is logged in or not here
App: AppStack,
Auth: AuthStack,
},
{
initialRouteName: 'AuthLoading',
}
);
For more help, visit this documentation and this article.
I am using stack navigator inside the drawer navigator. What I want to do is, I need to know the activeItem (the active screen), so as to display it as active.
StackNavigator
const stackNav = StackNavigator({
homeComponent: { screen: HomeScreen },
serviceScreen: { screen: ServiceScreen },
serviceDetailScreen: { screen: ServiceDetailScreen },
selectVehicleScreen: { screen: SelectVehileScreen },
addEditVehicle: { screen: AddVehicle },
dateTimeScreen: { screen: DateTimeScreen },
reviewScreen: { screen: ReviewScreen },
notesScreen: { screen: NotesScreen },
}, {
headerMode: 'none'
});
DrawerNavigator
const DrawerStack = DrawerNavigator({
appointment: {
screen: stackNav,
},
}, {
headerMode: 'none',
gesturesEnabled: false,
contentComponent: DrawerContainer
});
export default DrawerStack;
What you can do is
In your context there is only one screen that can be active and that is appointment screen.
If you want to know that if appointment screen is focused then you should check the props inside the DrawerContainer Component. It will give you the activeItemKey i.e appointment.
And then you can simply check in DrawerComponent that if
this.props.activeItemKey === 'appointment' ? { color: '#000' } : { color: '#fff' }]}
You can also pass the activeTintColor prop from DrawerNavigator as shown below
You can find other DrawerNavigatorConfigs here
const DrawerStack = DrawerNavigator({
appointment: {
screen: stackNav,
},
}, {
headerMode: 'none',
gesturesEnabled: false,
contentComponent: DrawerContainer,
contentOptions: {
activeTintColor: '#e91e63',
itemsContainerStyle: {
marginVertical: 0,
},
iconContainerStyle: {
opacity: 1
}
}
});
export default DrawerStack;