How to add background image to navigator in react-native-navigation

Question

I want to add background image to navigator in react native navigation by Wix. Is that even possible?

This is where I want to add the image

Answer 1

No its not possible, to achieve it you need to create your own Navigation bar and hide wix's one:

  static navigatorStyle = {
    navBarHidden: true,
  };

And then you can try writing your own:

return (
  <View
    style={[
      styles.navBar, // here you can pass image
      style,
      typeof renderRightContent === 'function' && styles.withRightButton,
    ]}
  >
    {typeof renderTitle === 'function' && renderTitle()}
    {!hideBackButton &&
      <TouchableOpacity
        style={styles.backButton}
        onPress={onPress || (() => navigator.pop())}
      >
        {!hideBackArrow &&
          <Image source={require('../../assets/arrow_left_icon.png')} />}
        <Text style={styles.backTitle}>
          {leftTitle || I18n.t('common.backButton')}
        </Text>
      </TouchableOpacity>}
    {typeof renderRightContent === 'function' && renderRightContent()}
  </View>
);

Few days ago i wrote something like this

Answer 2

This can only be implemented if you hide navigation bar and write your own custom bar. You can give it a bottom shadow too as mentioned in your design.

static navigatorStyle = {
   navBarHidden: true
};

const NavBar = (
  <View>
  // your content
  </View>
);

And in your render function, you can directly use it hiding native bar.

render() {
   return (
      <View style={{flex: 1}}>
         <NavBar />
         <View style={{flex: 1}}>
         // render your page content here
         </View>
      </View>
   );
}