CODEWITHSUNDEEP
react-native
Roger Staxx
Roger Staxx

Reputation: 439

Add linear gradient to cardStyle react native

I want to add a linear gradient in place of my cardStyle: { backgroundColor: "pink" }

Here is my code:

<Stack.Navigator
        initialRouteName="Camera"
        screenOptions={{
          headerStyle: { elevation: 0 },
          cardStyle: { backgroundColor: "pink" },
        }}
      >
.....

Upvotes: 0

Views: 183

Answers (1)

Alistair Nelson
Alistair Nelson

Reputation: 3293

To be able to use a gradient in the header you will need to add another package called react-native-linear-gradient

Once this is added and you have referenced it in your file you can then create a gradient in the header as follows:

<Stack.Navigator
    initialRouteName="Camera"
    screenOptions={{
      headerStyle: { elevation: 0 },
      headerBackground: () => (
          <LinearGradient
            colors={['#4c669f', '#3b5998', '#192f6a']}
            style={{height: '100%'}}
          />
        ),
    }}
  >
.....

Upvotes: 1

Related Questions