I adding image of screen, this work in part of screen.
The Contacts screen need to be main page and not screen1 but its didn't work if i replace between them.
I adding the code, in 'LogedInNavigator' have there TabNavigator and DrawerNavigator - the 'Contants' page initializing from TabNavigator and part two - Screen1 with the side menu it's from DrawerNavigator - maybe it's doing the problem?
LogedInNavigator.js
import.......
styles......
const LoggedInNavigator = TabNavigator(
{
Contacts: {screen: ContactScreen,},
Chat: {screen: ChatScreen,},
Dashbaord: {screen: DashbaordScreen,},
Profile: {screen: ProfileScreen,},
Search: {screen: SearchScreen,},
},
{
initialRouteName: "Contacts",
tabBarPosition: "bottom",
tabBarOptions: {
showIcon: true,
activeTintColor: 'white',
}
}
);
export default () => <LoggedInNavigator onNavigationStateChange={null} />
export const Drawer = DrawerNavigator ({
Home:{
screen: Screen1,
navigationOptions: {
drawer:{
label: 'Home',
},
}
},
Camera: {
screen: Screen2,
navigationOptions: {
drawer:{
label: 'Camera',
},
}
},
})
Contants.js
class Contacts extends Component {
componentDidMount() {
// TBD loggedin should come from login process and removed from here
const { loggedIn, getContacts } = this.props;
loggedIn(1);
getContacts();
}
render() {
const Router = createRouter( () => ({})); //IDAN
const { navigation, avatar, contacts } = this.props;
return (
<NavigationProvider router={Router}>
<View style={{flex:1}}>
<ContactView
navigation={navigation}
avatar={avatar}
contacts={contacts}
/>
<Drawer />
</View>
</NavigationProvider>
);
}
}
const mapStateToProps = (state) => {
return (
{
avatar: state.user.user.avatar,
contacts: state.contacts.contacts,
}
);
};
export default connect(mapStateToProps, { loggedIn, getContacts })(Contacts);
Help me please..
After a while, i want to answer on my own question (with react-navigation v2)
everything inside <RootNavigator/>
const RootNavigator= createDrawerNavigator({ Tabs }, {
contentComponent: SideMenu,
drawerWidth: Dimensions.get('window').width * .75,
})
SideMenu:
class SideMenu extends Component {
render() {
return ( //...your side menu view )
}
}
Tab:
export default createBottomTabNavigator({
Menu: {
screen: HomeStack,
navigationOptions: {
title: 'תפריט',
tabBarIcon: ({ focused, tintColor }) => {
return <Icon name={'home'} size={20} color={tintColor} />;
},
}
},
Dashboard: {
screen: DashboardStack,
navigationOptions: {
title: 'בית',
tabBarOnPress: ({ navigation, defaultHandler }) => handleTabPress(navigation, defaultHandler),
tabBarIcon: ({ focused, tintColor }) => {
return <Icon name={'dashboard'} size={20} color={'green'} />;
},
}
},
QuickView: {
screen: QuickNav,
navigationOptions: {
title: 'מבט מהיר',
tabBarIcon: ({ focused, tintColor }) => {
return <Icon name={'short-list'} size={20} color={tintColor} />;
},
},
},
Chat: {
screen: Chat,
navigationOptions: {
title: "צ'אט",
tabBarIcon: ({ focused, tintColor }) => {
return <Icon name={'chat'} size={20} color={tintColor} />;
},
},
},
},
{
initialRouteName: 'Dashboard',
tabBarOptions: {
activeTintColor: 'green',
labelStyle: {
fontSize: 16,
marginBottom: 3,
},
},
},
)
For v5 onwards you can use drawer style
import deviceInfoModule from 'react-native-device-info';
<Drawer.Navigator
drawerStyle={{
width: deviceInfoModule.isTablet()
? Dimensions.get('window').width * 0.55
: Dimensions.get('window').width * 0.7,
}}
You can set the drawer width using Dimensions width. See the docs here
https://reactnavigation.org/docs/navigators/drawer
import { Dimensions } from 'react-native';
...
const { width } = Dimensions.get('screen');
...
export const Drawer = DrawerNavigator (
{
Home:{
screen: Screen1,
navigationOptions: {
drawer:{
label: 'Home',
},
}
},
Camera: {
screen: Screen2,
navigationOptions: {
drawer:{
label: 'Camera',
},
}
},
},
{
drawerWidth: width
});
In react-navigation version 6, you can use the drawerStyle in the screenOptions prop in the Drawer.Navigator component to change the width and add styles. This applies the applied style to all screens in the navigator.
<Drawer.Navigator
screenOptions: {{
drawerStyle: {
width: 240
}
}}
>
If you want the drawer to cover the entire screen, then import Dimensions from the react-native library and use Dimensions.get('window').width
import { Dimensions } from 'react-native'
<Drawer.Navigator
screenOptions: {{
drawerStyle: {
width: Dimensions.get('window').width
}
}}
>
Refer to react-navigation drawer for more.
Related
I have created one navigation drawer named HomeDrawer and in this drawer I show two items - Home and Settings. for that reason I have created two classes- NoteMeHome and SettingsScreen .
Now, if I want to go from SettingsScreen to another class (LoginScreen.js) by button click, which is not part of the navigation drawer, then it is not working
Here, I have provided the necessary code to understand the problem.
HomeScreen.js
class HomeScreen extends React.Component {
state = {
getValue: null,
}
async componentDidMount() {
const token = await AsyncStorage.getItem('token');
this.setState({ getValue: token });
}
render() {
console.log('#ZZZ:', this.state.getValue);
return (
<AppStackNavigator/>
);
}
}
const AppStackNavigator = new StackNavigator({
HomeDrawer: {screen:HomeDrawer},
WelcomeScreen: {screen:WelcomeScreen},
LoginScreen: {screen:LoginScreen},
NoteMeHome: {screen:NoteMeHome},
SettingsScreen: {screen:SettingsScreen}
})
export default HomeScreen;
HomeDrawer.js
class HomeDrawer extends Component {
state = {
loading: true
}
static navigationOptions = {
headerLeft: null
}
componentDidMount() {
AsyncStorage.getItem("user_email").then(value => {
user_email = value;
});
AsyncStorage.getItem("user_first_name").then(value => {
user_first_name = value;
});
}
async componentWillMount() {
await Font.loadAsync ({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf')
});
this.setState({loading:false});
}
render() {
if(this.state.loading) {
return(
<Root>
<AppLoading/>
</Root>
)
}
return(
<MyApp/>
)
}
}
const CustomDrawerContentComponent = (props) => (
<View style={{backgroundColor:"#ffff", height:'100%'}}>
<ImageBackground source={require('../assets/header.jpeg')} style={{width: '100%', height: 150, resizeMode:'cover', backgroundColor:"#aaaa"}}>
<Body style={styles.drawerBody}>
<Image
style={styles.drawerImage}
source={{uri: 'https://img.icons8.com/ultraviolet/80/000000/administrator-male.png'}}
/>
<View style={styles.drawerHeaderText}>
<Text style={{color:'#ffffff', fontSize:20, fontWeight:'400'}}>{user_email}</Text>
<Text style={{color:'#ffffff', fontSize:16, fontWeight:'200'}}>{user_first_name}</Text>
</View>
</Body>
</ImageBackground>
<Content style={{marginTop:30 }}>
<DrawerItems {...props}/>
</Content>
</View>
);
const MyApp = DrawerNavigator({
NoteMeHome:{
screen: NoteMeHome
},
Settings:{
screen: SettingsScreen
},
},
{
initialRouteName: 'NoteMeHome',
drawerPosition: 'left',
contentComponent: CustomDrawerContentComponent,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle'
}
);
SettingsScreen.js
class SettingsScreen extends Component {
static navigationOptions = ({navigation}) => ({
title: "Settings",
headerLeft: <Icon name="ios-menu" style={{paddingLeft:10}}
onPress={()=>navigation.navigate('DrawerOpen')}/>,
drawerIcon:
<Image source={{uri: 'https://img.icons8.com/ultraviolet/40/000000/automatic.png'}}
style={styles.icon}
/>
})
render() {
return(
<Container>
<CustomHeader
title="Settings"
drawerOpen={()=>this.props.navigation.navigate('DrawerOpen')}
/>
<Content contentContainerStyle={{flex:1, alignItems:'center',
justifyContent:'center', padding:10}}>
<Button full onPress={() => this.props.navigation.navigate('LoginScreen')}>
<Text style={{color:'white'}}>Go To Home Screen</Text>
</Button>
</Content>
</Container>
)
}
}
export default SettingsScreen;
** Check this example project enter link description here**
https://github.com/habeebrahmanpt/ReactNativeBoilerplate/blob/master/App/Navigation/AppNavigation.js
// drawer stack
const DrawerStack = createDrawerNavigator({
HomeScreen: { screen: HomeScreen },
TestPage: { screen: TestPage }
}, {
initialRouteName: 'HomeScreen',
drawerWidth: Dimensions.get('window').width / 1.3,
headerMode: 'none',
drawerPosition: 'left',
useNativeAnimations: false,
drawerBackgroundColor: 'transparent' ,
contentComponent: CounterApp,
})
const PrimaryNav = createStackNavigator({
// BottomStack: { screen: BottomStack },
DrawerStack: { screen: DrawerStack },
HomeScreen: { screen: HomeScreen },
CounterApp: { screen: CounterApp },
TestPage: { screen: TestPage },
Cart: { screen: Cart },
}, {
// Default config for all screens
headerMode: 'none',
title: 'HomeScreen',
initialRouteName: 'BottomStack'
})
export default PrimaryNav
I'm experiencing a display issue with React Native / React Navigation where navigating to a different tab within a Tab Navigator causes a bad bounce animation to trigger when the tab opens. This issue only happens after logging in, and after this happens once or twice it doesn't happen again.
Below is a 8 second video clip of the issue:
Youtube clip of error
What I've tried so far:
InteractionManager.runAfterInteractions within componentDidMount() to prevent fetching data during navigation animation
Turning lazyLoad on & off within the TabNavigator
Forcing the mapview to reload with this.forceUpdate() before navigating to another tab
Unfortunately none of this has worked, and I'm not sure where the problem is coming from now.
What I'm running:
"react-navigation": "^1.5.11"
"expo": "^26.0.0"
Relevant code snippet of React Navigation setup (the clip shows navigating from the userInfo > map > yourEvents:
export default class App extends React.Component {
render() {
const Stack = {
FirstView: {
screen: TabNavigator(
{
map: {
screen: HomeMapScreen,
transitionConfig: () => fromLeft(),
navigationOptions: ({ navigation }) => ({
header: null
})
},
yourEvents: {
screen: YourEventsScreen,
transitionConfig: () => fromLeft(),
navigationOptions: ({ navigation }) => ({
header: null
})
},
...
},
{
navigationOptions: {
animationEnabled: "false"
},
tabBarPosition: "bottom",
animationEnabled: false,
swipeEnabled: false,
tabBarOptions: {
showIcon: "true", // Shows an icon for both iOS and Android
style: {
backgroundColor: "#04151F"
},
showLabel: false,
activeTintColor: "#59C9A5",
inactiveTintColor: "#F7FFF7",
labelStyle: {
fontSize: 10
},
iconSize: Platform.OS === "ios" ? 30 : 24
}
}
)
},
...
userInfo: {
screen: UserInfo,
transitionConfig: () => fromLeft(),
navigationOptions: {
drawerLabel: <Hidden />
}
},
...
};
const DrawerRoutes = {
...
Home: {
name: "Home",
screen: StackNavigator(Stack, {
initialRouteName: "FirstView",
transitionConfig: () => fromLeft(),
headerMode: "none",
drawerIcon: () => {
return <Icon name="map" type="foundation" size={30} color={tintColor} />;
}
})
},
SecondViewStack: {
name: "SecondViewStack",
screen: StackNavigator(Stack, {
initialRouteName: "SecondView",
transitionConfig: () => fromLeft(),
icon: () => {
return <Icon name="map" type="foundation" size={30} color={tintColor} />;
}
})
}
};
const RootNavigator = StackNavigator(
{
Drawer: {
name: "Drawer",
screen: DrawerNavigator(DrawerRoutes, {
drawerBackgroundColor: "#D8DDEF",
transitionConfig: () => fromLeft(),
contentComponent: DrawerContent,
contentOptions: {
backgroundColor: 'black',
flex: 1
},
})
},
...Stack
},
{
headerMode: "none"
}
);
return (
<Provider store={store}>
<View style={styles.container}>
<MyStatusBar translucent backgroundColor="#04151F" barStyle="light-content" />
<RootNavigator />
</View>
</Provider>
);
}
}
Snippet of component displaying the "bounce" issue when loaded:
class YourEventsScreen extends Component {
state = {
attendingEvents: true,
ownedEvents: false,
isLogoutVisible: false,
animatePressAttend: new Animated.Value(1),
animatePressHost: new Animated.Value(1),
didFinishInitialAnimation: false,
}
static navigationOptions = {
title: "Your Events",
headerLeft: null,
tabBarIcon: ({ tintColor }) => {
return <Icon name="calendar" size={30} color={tintColor} type="entypo"/>;
}
};
componentDidMount() {
InteractionManager.runAfterInteractions(() => {
this.props.fetchOwnedEvents(this.props.currentUser.userId);
this.props.fetchAttendingEvents(this.props.currentUser.attendingEvents);
this.setState({
...this.state,
didFinishInitialAnimation: true,
});
});
}
Any ideas or insight on the issue here is very much appreciated!
I can only imagine what is happening here is that you are using LayoutAnimation somewhere when this tab change takes place. A good strategy when encountering issues like this is to remove code until the issue is resolved, then add it back piece by piece.
I had a similar issue when I toggled the visibility of a MapView by updating the state with react-navigation's onDidFocus and onWillBlur functions (from NavigationEvents).
Once I stopped updating this and removed my showMap parameter, the bouncing effect went away.
I have 2 screens.
First one is Login screen(without header) where I have "createStackNavigation"
and second one is Main screen where I would like to have bottom navigation(2 tabs) with Header in each of these two tabs.
I did bottom navigation but custom header does not work at all...It's only basic header. Can anyone have some basic example of this? Or can help me with tutorial?
My code in app.js:
const RootStack = createStackNavigator(
{
Home: {
screen: Login,
navigationOptions: ({ navigation }) => ({
header: null,
}),
},
Main: MainScreen,
},
{
initialRouteName: 'Home',
headerMode: 'screen',
}
);
My code in "Main" screen:
export default createBottomTabNavigator(
{
Domov: {
screen: HomeScreen,
},
Dnevnik: Diary,
},
{
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'Domov') {
iconName='home';
} else if (routeName === 'Dnevnik') {
iconName='ios-calendar';
}
return (
<Icon name={iconName} style={{fontSize: 20, color: '#FFF'}} />
);
},
}),
tabBarPosition: 'bottom',
tabBarOptions: {
activeTintColor: 'white',
showLabel: false,
inactiveTintColor: '#4C2601',
style: {
backgroundColor: '#033D51',
},
},
});
Thank you
Add header: null in your navigationOptions in Main screen. You'll be able to add your custom header.
I have 2 screens;
Login screen
Main screen with 2 tabs in it. (createbottomnavigation)
I want to acces my 3rd screen from Main screen, but I got an error: "undefined is not an object..."
Here is my routes in app.js:
const Routes = createStackNavigator(
{
Login: {
screen: Login,
navigationOptions: ({ navigation }) => ({
header: null,
}),
},
Main: {
screen: MainScreenRoutes,
navigationOptions: ({navigation}) => ({
header: null,
}),
},
MyProfil: {
screen: MyProfile,
}
},
{
initialRouteName: 'Login',
headerMode: 'screen',
navigationOptions: {
...HeaderStyles,
animationEnabled: true
}
}
);
I can not access MyProfil from "Main" screen where I had my tabs.
Main profile router:
let headerDefaultNavigationConfig = {
header: props => <CustomHeader {...props} />,
...HeaderStyles
};
const Tab1 = createStackNavigator(
{
Domov: {
screen: HomeScreen,
navigationOptions: {
},
},
/*MyProfil: {
screen: MyProfil,
}*/
},
{
navigationOptions: {
...headerDefaultNavigationConfig
}
}
);
const Tab2 = createStackNavigator(
{
Dnevnik: {
screen: Diary,
navigationOptions: {
headerTitle: "Tab2",
headerLeft: (
<Text>Ok</Text>
)
},
}
},
{
navigationOptions: {
...headerDefaultNavigationConfig
}
}
);
const bottomTabs = createBottomTabNavigator(
{
Domov: Tab1,
Dnevnik: Tab2,
},
{
initialRouteName: "Domov",
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'Domov') {
//iconName = `home${focused ? '' : '-outline'}`;
iconName='home';
} else if (routeName === 'Dnevnik') {
//iconName = `ios-calendar${focused ? '' : '-outline'}`;
iconName='ios-calendar';
}
// if focused return view with line
if(focused) {
return (
<View style={styles.item}>
<Icon name={iconName} style={{fontSize: 20, color: '#FFF'}} />
<View style={styles.line}></View>
</View>
);
} else {
return(
<Icon name={iconName} style={{fontSize: 20, color: '#FFF'}} />
)
}
},
}),
tabBarPosition: 'bottom',
tabBarOptions: {
activeTintColor: 'white',
showLabel: false,
inactiveTintColor: '#4C2601',
style: {
backgroundColor: '#033D51',
},
labelStyle: {
fontSize: 12,
lineHeight: 30,
},
},
swipeEnabled: true,
});
/*const All = createStackNavigator(
{
"Home":{
screen: bottomTabs,
navigationOptions: {
header: null,
},
},
"MyProfil":{screen: MyProfil},
},
{
initialRouteName: 'Home',
headerMode: 'screen',
navigationOptions: {
...HeaderStyles,
animationEnabled: true
}
}
);
*/
export default bottomTabs;
This is my code to change screen;
const { navigate } = this.props.navigation;
navigate('MyProfil');
This is my current navigation
const MainNavigator = TabNavigator(
{
SignIn: {
screen: SignInScreen,
},
Home: {
screen: SubNavigator,
}
},
{
navigationOptions: {
tabBarVisible: false,
swipeEnabled: false
},
initialRouteName: 'SignIn',
lazy: true
}
);
const SubNavigator = DrawerNavigator(
{
Page1: {
screen: StackNavigator(
{
pageOne: {
screen: ScreenOne,
navigationOptions: ({ navigation }) => ({
title: 'One',
headerLeft: (
<TouchableOpacity onPress={() => navigation.navigate('DrawerOpen')}>
<IOSIcon name="ios-menu" size={30} />
</TouchableOpacity>
),
headerStyle: { paddingRight: 10, paddingLeft: 10 },
})
},
pageTwo: { screen: ScreenTwo },
camera: {
screen: CameraScreen,
navigationOptions: {
title: 'Camera'
}
},
qrscanner: {
screen: QRScanner,
navigationOptions: {
title: 'QR Scanner'
}
},
},
)
},
Profile: {
screen: ProfileScreen, // log out from here
},
},
{
contentComponent: SideMenu,
initialRouteName: 'Driver',
contentOptions: {
activeTintColor: '#e91e63'
}
}
);
I want to log out from Profile and reset it to SignIn. It is triggered by onPress.
Inside code for Profile I put function and render a text like this
/*.......*/
navigateToReset(route) {
const navigateReset = NavigationActions.reset({
index: 0, key: null, actions: [NavigationActions.navigate({ routeName: route })],
});
this.props.navigation.dispatch(navigateReset);
}
onButtonPressSignOut = () => {
this.navigateToReset('SignIn');
}
/*....*/
render () {
return(
<View>
<Text onPress={this.onButtonPressSignOut}>
Sign Out
</Text>
</View>
);
}
But this gave me error:
Error: There is no route defined for key SignIn.
Must be one of: 'pageOne', 'pageTwo', 'camera', 'qrscanner'
I have searched online and found several issue like this.
This is some of the issue I found : Issue1, Issue2 but it does not work for me.
Did I miss something in the above code?
Thank you for your help and suggestion.