CODEWITHSUNDEEP
androidcssreact-native
Tarik Sahni
Tarik Sahni

Reputation: 168

Linear Gradient In React-Native

I have a component and I want a linear gradient from right bottom to top left in react native, I tried using from 'react-native-linear-gradient' but it's not working.

Component :

// render return 

   return( 
      <LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} >
       <View style={styles.container}>
         <View  style={styles.topPart}>
           <Header ></Header>
           <Content ></Content>
        </View>  
        <Footer style={styles.footer}></Footer>
      </View>
    </LinearGradient>  
);

Please guide how to achieve this.

Upvotes: 2

Views: 23214

Answers (5)

Irfan wani
Irfan wani

Reputation: 5075

Linear gradient is causing some issues with the new architecture (especially with iOS, were the nested elements are not properly updated on state change). So for now, i just created a linear gradient on figma, import it as png image and use it with <ImageBackground />

Upvotes: 0

Sjonchhe
Sjonchhe

Reputation: 828

<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} start={{x: 0, y: 0}} end={{x: 1, y: 1}}>
....
</LinearGradient>

This wll pretty much solve what you are looking for.

Upvotes: 0

Surendra Pathak
Surendra Pathak

Reputation: 204

If you have installed the library using npm and imported it in your project, you still have to link the library. Link the library by running, 

react-native link

Upvotes: 0

Aditya
Aditya

Reputation: 3673

After installing react-native-linear-gradient library by:

npm install --save react-native-linear-gradient

Try to link your project's all dependencies as,

react-native link

And make sure you are importing LinearGradient as,

import LinearGradient from 'react-native-linear-gradient';

And the last but most important thing set some flex value to your LinearGradient,

<LinearGradient 
     colors={['#6e45e2', '#88d3ce']}
     style = { styles.container }>

          <View>
               //your elements here
          </View> 
 </LinearGradient>

Your LinearGradient style as,

const styles = StyleSheet.create({
  container: {
      flex: 1,
  }
});

Note I am sure your gradient is not visible because of flex value, just add it. It will definitely work.

Upvotes: 7

j3491
j3491

Reputation: 495

You can achieve an angled gradient by setting start and end positions as props. In your case, those should be:

start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}

If you mean that you don't see any gradient at all, did you link the library according to the install instructions?

Upvotes: 1

Related Questions