Left and Right buttons won't show together

[cohendl]

This is my code:

<NavigationBar
style={styles.headerStyle}
title={titleConfig}
 leftButton={
              <HamburgerMenu
style={{ marginLeft: -SCREEN_WIDTH + 65, paddingTop: 15, width: 30 }}
onPress={() => this.props.navigation.navigate('DrawerOpen')}
 />
}
rightButton={
<TouchableOpacity
style={{ marginLeft: SCREEN_WIDTH - 45, paddingTop: 16, width: 40 }}
onPress={() => console.log('sort requests')}
>
<Image
style={{ height: 25, width: 25 }}
source={require('../../../assets/img/filter.png')}
/>
</TouchableOpacity>
}
/>

If I take out the "rightButton" prop the left button displays and vice versa. But if both props are in, only the "rightButton" displays. Any reason this behavior is happening? Please help! Thanks!

[Alexey Kureev]

I think there is a simpler way to achieve the desired behaviour:

<NavigationBar
  style={styles.headerStyle}
  title={titleConfig}
  leftButton={null}
  rightButton={
    <View>
      <HamburgerMenu
        style={{ paddingTop: 15, width: 30 }}
        onPress={() => this.props.navigation.navigate('DrawerOpen')}
      />
      <TouchableOpacity
        style={{ paddingTop: 16, width: 40 }}
        onPress={() => console.log('sort requests')}
      >
        <Image
          style={{ height: 25, width: 25 }}
          source={require('../../../assets/img/filter.png')}
        />
      </TouchableOpacity>
    </View>
  }
/>

Any chance it solves your problem?

[Alexey Kureev]

Closed due to lack of feedback