0

I am using Wix's react-native-navigation V2. I want to give gradient color to the topBar. I have installed react-native-linear-gradient successfully. But I am not getting how to give gradient color to topBar.

Following is the code of pushing the screen into the stack.

Navigation.push('mainStack', {
      component: {
        name: 'SignIn',
        options: {
          topBar: {
            visible: true,
            animate: false,
            //hideOnScroll: true,
            //buttonColor: 'white',
            drawBehind: false,
            title: {
              text: 'Sign In',
              fontSize: 18,
              //color: 'white',
              fontFamily: 'Ubuntu',
              alignment: 'center'
            },
            backButton: {
              // icon: require('icon.png'),
              id: 'backButton',
              visible: true,
              //color: 'white'
            },
            background: {
              color: '#1abc9c'
            }
          },
          sideMenu: {
            left: {
              enabled: false
            }
          },
          animations: {
            push: { // It works! Push with animation from right to left
              content: {
                x: {
                  from: 1000,
                  to: 0,
                  duration: 100,
                },
                alpha: {
                  from: 1,
                  to: 1,
                  duration: 100,
                }
              }
            },
            pop: { // It works! Pop with animation from left to right
              content: {
                x: {
                  from: 0,
                  to: 1000,
                  duration: 50,
                },
                alpha: {
                  from: 1,
                  to: 1,
                  duration: 50,
                }
              }
            }
          }
        }
      }
    });

I tried to give a gradient color in options like below

background: {
              color: <LinearGradient colors={['#a8ff78', '#78ffd6']} style={styles.container} />
            }

But it is not working.

Ahtesham Shah
  • 243
  • 2
  • 7
  • 31

2 Answers2

0

I'm not sure that works, I've always used that library wrapping the component that I want to have the gradient color, like below

<LinearGradient
      colors={["#34495E", "#2e4154", "#485b6e"]}
      start={{x: 0.0, y: 0}}
      end={{x: 0.60, y: 0}}
>
  <View>
    {...}
  </View>
</LinearGradient>
josecastillo86
  • 330
  • 1
  • 8
0

Render <LinearGradient colors={['#a8ff78', '#78ffd6']} style={styles.container} /> in a React Component and register it using Navigation.registerComponent() and then use it as follows

topBar: {
  background: {
    component: {
      name: "" // The name of the registered component
    }
  }
}

The only problem is that the component will not render in the unsafe area.

rorschach
  • 1
  • 1