align navscreen content in react-native

Question

I am very new to react-native. I am trying to create a drawer using react-navigation. I could use DrawerNavigator but could not show the header/navbar on all the screens. That is why i create a NavScreen component with profile icon, title and back icon. However they are not aligned properly. I need profile icon to be shown on the left side, title on the center and back button on the right side. How can i do this?

Here is my code

const styles = StyleSheet.create({
  container: {
    marginTop: Platform.OS === 'ios' ? 20 : 10,
  },
});
const NavScreen = ({ navigation, banner }) => (
  <ScrollView style={styles.container}>
    <Text>{banner}</Text>
    <Icon
      name="ios-contact-outline"
      size={30}
      color="#000"
      onPress={() => navigation.navigate('DrawerOpen')}
    />
    <Icon
      name="ios-arrow-round-back-outline"
      size={30}
      color="#000"
      onPress={() => navigation.goBack(null)}
    />
  </ScrollView>
);

export default NavScreen;


class App extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    title: `${navigation.state.routeName}`,
    drawerTitle: `${navigation.state.routeName}`,
    drawerLabel: 'Home',
    drawerIcon: ({ whiteColor }) => (
      <MaterialIcons name="drafts" size={14} style={{ color: whiteColor }} />
    ),
  })

  render() {
    const { navigation } = this.props;
    return (
      <ScrollView>
        <NavScreen navigation={navigation} banner={'Main'} />
        <Text>Main Screen</Text>
      </ScrollView>
    );
  }
}

export default App;

I need similar to the below image

Claus Shapeshifter Claus Shapeshifter · Accepted Answer · 2017-06-20T23:06:31

First, try to build a StackNavigation, at headerRight, and headerLeft you define your custom buttons (the above), now you can very easy customize the align/padding whatever you need with your icons/buttons.

const stackNavigatorConfiguration = {
  // set first Screen
  initialRouteName: 'Home',
  mode: Platform.OS === 'ios' ? 'card' : 'card',
  navigationOptions: ({navigation}) => ({
    headerRight: <DrawerButton navigation={navigation} />,
    headerLeft: <YourProfileButton navigation={navigation} />,
    headerBackTitle: null
  })
}

const YourProfileButton = ({ navigation }) => (
  <TouchableOpacity>
    <Ionicons
      style={styles.profileButton}
      name='ios-menu-outline'
      size={32}
      onPress={() => navigation.goBack(null)}
    />
  </TouchableOpacity>
)

const DrawerButton = ({ navigation }) => (
  <TouchableOpacity>
    <Ionicons
      style={styles.drawerIcon}
      name='ios-menu-outline'
      size={32}
      onPress={() => navigation.navigate('DrawerOpen')}
    />
  </TouchableOpacity>
)

align navscreen content in react-native

1 Answers