Outline
it’s difficult to make the gradient background on RN(Reat Native). in this blog, we’ll introduce how to make the gradient background by react-native-linear-gradient library.
- react-native-linear-gradient official site: https://github.com/react-native-community/react-native-linear-gradient
Installation
execute belwo command to install react-native-linear-gradient library to use the gradient on RN(React Native).
npm install --save react-native-linear-gradient
Link Library
execute below command to link react-native-linear-gradient to RN(React Native) project.
react-native link react-native-linear-gradient
How To Use
below source code is about how to make the gradient by react-native-linear-gradient on RN(React Native). (source code is from react-native-linear-gradient official site)
import LinearGradient from 'react-native-linear-gradient';
// Within your render function
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
<Text style={styles.buttonText}>
Sign in with Facebook
</Text>
</LinearGradient>
// Later on in your styles..
var styles = StyleSheet.create({
linearGradient: {
flex: 1,
paddingLeft: 15,
paddingRight: 15,
borderRadius: 5
},
buttonText: {
fontSize: 18,
fontFamily: 'Gill Sans',
textAlign: 'center',
margin: 10,
color: '#ffffff',
backgroundColor: 'transparent',
},
});
we use below source code to make the gradient background.
...
import LinearGradient from 'react-native-linear-gradient';
import styled from 'styled-components/native';
...
const Background = styled(LinearGradient)`
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
`;
...
<Background
colors={[item.background[0], item.background[1]]}
start={{
x: item.direction.start.x,
y: item.direction.start.y,
}}
end={{ x: item.direction.end.x, y: item.direction.end.y }}
/>
...
also, when the page that has the gradient background is switched, we applied the animation to switch smoothly the gradient background. we referred below site to make the animation.
- gradient animation example: AnimatedGradient
Completed
let’s make RN(React Native) project more beautiful by the gradient background.
Reference
- react-native-linear-gradient official site: https://github.com/react-native-community/react-native-linear-gradient
- gradient animation example: AnimatedGradient
Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!
App promotion
Deku.Deku created the applications with Flutter.If you have interested, please try to download them for free.
