React JS: Need Gradient Color in Header

Question

I have this simple project here : https://github.com/bsumanji/firstmobileproject/blob/master/App.js and need a gradient colors in header background. Please help :)

import { LinearGradient } from 'expo-linear-gradient';

const Stack = createStackNavigator();
const standardColor = {
  headerStyle: { backgroundColor: "blue"}
  
};


export default function App() {

  return (

    
    <NavigationContainer>{/* Rest of your app code */}      
       <Stack.Navigator screenOptions ={standardColor}>
          <Stack.Screen name ="Welcome" component={welcomeScreen} />
          <Stack.Screen name ="Home" component={homeScreen} />
       </Stack.Navigator>
       
    </NavigationContainer>

    
  );
}

Anmol Bhardwaj · Accepted Answer · 2021-03-23 18:18:02Z

1

Instead of using a library, you can achieve the same thing with CSS linear-gradient() function.

Example:

.className{
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
}

Reference here

answered Mar 23, 2021 at 18:18

Anmol Bhardwaj

6747 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

layzee suman Over a year ago

this function is not helping :(

Anmol Bhardwaj Over a year ago

what did you do? can you post a snippet ?

Collectives™ on Stack Overflow

React JS: Need Gradient Color in Header

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related