React Native: Is there way to add icon “share” into my drawer instead the button?

Question

Is there way to add icon "share" into my drawer? i try to add an icon <Ionicons name="md-share" size={24} color="black" /> that it will be instead the Button . now if i do it so i see only icon with no title as i see in the settings

import { shareDb } from '../helpers/shareDb';

const PlacesNavigator = createStackNavigator(
  {
    screen1: WaterQualitySamplesScreen, // FUNCTIONAL COMPONENT.
    screen2: AreasPrototypesScreen, // CLASS COMPONENT.
    screen3: PrototypePointsScreen,
    screen4: ListOfPerformanceRequirementsScreen,
    screen5: ContainersForSampling_1,
    screen6: ContainersForSampling_2,
    screen7: ContainersForSampling_3,
    settings: SettingsScreen,
  },
  {
    mode: 'modal',
    defaultNavigationOptions: {
      headerStyle: {
        // animationEnabled: true,
        backgroundColor: Platform.OS === 'android' ? Colors.primary : '',
      },
      headerTintColor: Platform.OS === 'android' ? 'white' : Colors.primary,
    },
  }
);


const SettingsNavigator = createStackNavigator(
  {
    settings: SettingsScreen,
  },
  {
    navigationOptions: {
      drawerIcon: (drawerConfig) => (
        <Ionicons
          name={Platform.OS === 'android' ? 'md-settings' : 'ios-settings'}
          size={23}
          color={drawerConfig.tintColor}
        />
      ),
    },
  }
);


const MainNavigatopr = createDrawerNavigator(
  {
    'close menu': PlacesNavigator,
    settings: SettingsNavigator,  
  },
  {
    contentComponent: (props) => (
      <SafeAreaView style={styles.container}>
        <View
          style={{
            height: 220,
            alignItems: 'center',
            justifyContent: 'center',
            paddingTop: 60,
            paddingBottom: 20,
          }}
        >
          <Image
            source={require('../assets/drawer_image.png')}
            style={{ width: '100%', height: '100%' }}
            resizeMode="contain"
          />
          <View style={styles.sidebarDivider}></View>
        </View>
        <ScrollView>
          <DrawerItems {...props} />
<Button title="LOG OUT" onPress={() => shareDb()} title="DB-Share" />
        </ScrollView>
      </SafeAreaView>
    ),
  }
);
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  sidebarDivider: {
    height: 1,
    width: '100%',
    backgroundColor: 'lightgray',
    marginVertical: 10,
  },
});

export default createAppContainer(MainNavigatopr);

Answer 1

You can do something like this for your issue 1

const SettingsNavigator = createStackNavigator(
  {
    settings: SettingsScreen,
  },
  {
    initialRouteName:settings,
    navigationOptions: {
      title: 'Settings',
      style: settingStyle.header, // you can create a different style sheet and import in here
      titleStyle: settingStyle.headerTitle,
      tabBarIcon: ({ tintColor }) => (
        <Image source={settingActive} style={[{ tintColor }]} />
      ),
    } as NavigationBottomTabOptions,
  },
);

And if you want to change the tab settings when active and inactive

SettingScreens.navigationOptions = () => {
  const navigationOptions: NavigationBottomTabOptions = {};
  navigationOptions.tabBarLabel = ({ focused }: any) =>
    focused ? (
      <Text style={styles.fontBoldCenter}> Setting</Text>
    ) : (
      <Text style={styles.fontCenter}> Setting</Text>
    );
  navigationOptions.tabBarIcon = ({ focused }) =>
    focused ? (
      <Image source={settingActive} />
    ) : (
      <Image source={settingInactive} />
    );

  return navigationOptions;
};