How to create a label with space in createDrawerNavigator?

user_16606387 0
Viewed 45

hi I am creating a restaurant ordering where I would like the users to see the word with spaces. How do I create a label with space in createDrawerNavigator so far i am only able to find examples only with one word. Is there anyway I can turn this into a label with spaces? My code is as below

const ShopNavigator = createDrawerNavigator(
  {
    Option: StartNavigator 
  },
  {
    contentOptions: {
      activeTintColor: Colors.primary
    }
  }
);

const StartNavigator = createStackNavigator(
  {
    Option: StartingScreen
  },
  {
    navigationOptions: {
      drawerIcon: drawerConfig => (
        <Ionicons
          name={Platform.OS === 'android' ? 'md-list' : 'ios-list'}
          size={23}
          color={drawerConfig.tintColor}
        />
      )
    },
    defaultNavigationOptions: defaultNavOptions
  
  }
);

to

const ShopNavigator = createDrawerNavigator(
  {
    Dine in / Take Away: StartNavigator, 
  },
  {
    contentOptions: {
      activeTintColor: Colors.primary
    }
  }
);

const StartNavigator = createStackNavigator(
  {
    Dine in / Take Away: StartingScreen
  },
  {
    navigationOptions: {
      drawerIcon: drawerConfig => (
        <Ionicons
          name={Platform.OS === 'android' ? 'md-list' : 'ios-list'}
          size={23}
          color={drawerConfig.tintColor}
        />
      )
    },
    defaultNavigationOptions: defaultNavOptions
   }
);

thanks

react-native
2 Answers

Shouldn't you put Dine in / Take Away in quotes?

const ShopNavigator = createDrawerNavigator(
  {
    "Dine in / Take Away": StartNavigator, 
  },
  {
    contentOptions: {
      activeTintColor: Colors.primary
    }
  }
);
user_54582000

I found out that we can use the props under the navigationOptions that is title.

below is the code i changed

const StartNavigator = createStackNavigator(
  {
    Start: StartingScreen,
  },
  {
    navigationOptions: {
      drawerIcon: (drawerConfig) => (
        <Ionicons
          name={Platform.OS === "android" ? "md-list" : "ios-list"}
          size={23}
          color={drawerConfig.tintColor}
        />
      ),
     //add the props title here to change the drawer title
      title: "Dine in / Take away",
    },
    defaultNavigationOptions: defaultNavOptions,
  }
);
user_166063870
Related