Gradients bring out a colorful taste in our apps. So it’s important to know how and when to use them in your mobile apps. In React Native, gradients are extremely easy to integrate and in this article we are going to describe exactly how to implement them. There are mainly two types of linear gradients in React Native and CSS: Linear and Radial gradient Two of the most used JavaScript libraries for generating gradients in React Native are expo-linear-gradient and react-native-linear-gradient They are both very similar and for this article on gradients in React Native we’re going to make use of . expo-linear-gradient Installation: 1. For Expo: expo install expo-linear-gradient 2. For bare projects: Install and configure unimodules expo install expo-linear-gradient cd ios && pod install First use case of gradients are to make buttons look solid: React ; { StyleSheet, Text, View, Button } ; { LinearGradient } ; { ( <LinearGradient
        colors={["#48F10E", "#078716", "#093203"]}
        style={styles.buttonContainer}
      >
        <Text
          style={styles.buttonText}
        >
          Login to read
        </Text>
      </LinearGradient> );
} styles = StyleSheet.create({ : { : , : , : , : ,
  }, : { : , : , : }, : { : , : , : ,
  }
}); import from "react" import from "react-native" import from "expo-linear-gradient" ( ) function GradientExampleOne return < = > View style {styles.container} </ > View const container flex 1 backgroundColor "#fff" alignItems "center" justifyContent "center" buttonContainer padding 15 alignItems "center" borderRadius 5 buttonText fontWeight "bold" fontSize 18 color "#fff" The color prop accepts an array of colors to be displayed in a linear gradient. Let’s make another nice thing with gradients: We are going to combine an image with a gradient, like the example below: Now, what’s going on here? We’re overlaying a gradient on an ImageBackground, a React Native component and then reduce the opacity of the gradient. Then we center our the text inside the . LinearGradient React ; { StyleSheet, Text, View, ImageBackground } ; { LinearGradient } ; { ( <ImageBackground source={require('./assets/workspace.jpg')} style={styles.imgBackground}>
        <LinearGradient
          colors={["#09203f", "#537895"]}
          start={[0.1, 0.1]}
          style={styles.linearGradient}
        >
          <Text style={styles.text} >Linear Gradient Example</Text>
        </LinearGradient>
      </ImageBackground> );
} styles = StyleSheet.create({ : { : , : , : , : ,
  }, : { : , : , : ,
  }, : { : , : , : , : , : }, : { : , : , : , : }
}); import from "react" import from "react-native" import from "expo-linear-gradient" ( ) function GradientExampleOne { navigation } return < = > View style {styles.container} </ > View const container flex 1 backgroundColor "#fff" alignItems "center" justifyContent "center" imgBackground flex 1 width "100%" alignItems "center" linearGradient width '100%' height '100%' opacity 0.95 justifyContent 'center' alignItems 'center' text color '#fff' fontSize 40 fontWeight 'bold' textAlign 'center' I introduced a prop , the prop is an array to tell the gradient where to start. The first element positions the gradient horizontally(x-axis), while the second element positions the gradient vertically. start start For example, [0.1, 0.2] means that the gradient will start 10% from the left and 20% from the top. Let us see some visual examples: This is what a gradient with [0.9, 0.9] looks like. start in React Native is easy and seamless to implement. We have used them to make our buttons have a solid look and feel. We have made a crisp UI background for our text and looked into the start prop. LinearGradient This is how you can implement gradients in React Native. As you can see, it was pretty straightforward. Previously published at https://www.instamobile.io/mobile-development/gradients-react-native/

Different

Localizing Your React-Native App [A How-To Guide]

React Native Templates

Flutter Templates

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

How to Create Different Gradient Backgrounds in React Native Application

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Effortless Data Fetching with React Suspense

10 Web Development Boosting Node.js Libraries and Frameworks

10 Things You Didn't Know You Could Do With Google Keep

10 Best Low-Code And No-Code AI Application Development Platforms in 2022

10 Data Table Libraries for JavaScript

Effortless Data Fetching with React Suspense

10 Web Development Boosting Node.js Libraries and Frameworks

10 Things You Didn't Know You Could Do With Google Keep

10 Best Low-Code And No-Code AI Application Development Platforms in 2022

10 Data Table Libraries for JavaScript

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps