Gradient Background Colors in React Native

Introduction

When developing a mobile application, the visual appeal and user experience are paramount. UI/UX designers dedicate their efforts to crafting stunning mobile applications. Gradient backgrounds are gaining traction due to their ability to enhance visual aesthetics. This blog post will walk you through creating a mobile application with captivating linear gradient backgrounds.

Creating Project

To begin, establish your React Native project with Expo CLI:

npx create-expo-app react-native-lineargradient

Next, navigate to the project directory:

cd react-native-lineargradient

Installing Dependencies

We'll utilize Expo's linear gradient library. Execute this step:

npx expo install expo-linear-gradient

Starting the Emulator:

To launch the emulator, run the command:

npx expo start

The emulator is up and running!

Usage: Linear Gradient Component

Using LinearGradient is very easy, all you need are color arrays and start/end points. While start/end points have default settings, you can modify the color direction if desired.

Crafting a Simple Facebook Button with Linear Gradient Background

import { Text, View } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
 
export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', padding: 18 }}>
 
      <LinearGradient
        colors={['#4c669f', '#3b5998', '#192f6a']}
        style={{ justifyContent: 'center', alignItems: 'center', padding: 20, borderRadius: 10 }}>
        <Text style={{ fontSize: 16, color: '#FFF' }}>Sign in with Facebook</Text>
      </LinearGradient>
 
    </View>
  );
}

This is how it appears:

Let's experiment with color direction by adjusting the start and end properties.

Altering the Gradient Direction: From Top-Left to Bottom-Right

import { View } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
 
export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', padding: 18 }}>
 
      <LinearGradient
        colors={['#405de6', '#5851db', '#833ab4', '#c13584', '#e1306c', '#fd1d1d']}
        start={[0, 0]}
        end={[1, 1]}
        style={{ justifyContent: 'center', alignItems: 'center', height: 250, borderRadius: 10 }}>
      </LinearGradient>
 
    </View>
  );
}

Imagine the background image as a grid with X and Y axes. The top-left point corresponds to 0 (start prop), and the bottom-right point corresponds to 1 (end prop).

Let's continue exploring the realm of captivating gradient backgrounds.

Implementation

If you're in search of appealing gradient colors, explore the this website uiGradients.

// ./App.js
 
import { View,Text, ScrollView } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
 
export default function App() {
 
  const COLORS = [{
    id: 1,
    name:'Sublime Vivid',
    colors: ['#FC466B', '#3F5EFB']
  },
  {
    id: 2,
    name:'Rainbow Blue',
    colors: ['#00F260', '#0575E6']
  },
  {
    id: 3,
    name:'Orange Fun',
    colors: ['#fc4a1a', '#f7b733']
  },
  {
    id: 4,
    name:'Moon Purple',
    colors: ['#4e54c8', '#8f94fb']
  },
  {
    id: 5,
    name:'Harvey',
    colors: ['#1f4037', '#99f2c8']
  },
  {
    id: 6,
    name:'Amin',
    colors: ['#8E2DE2', '#4A00E0']
  },
  {
    id: 7,
    name:'Yoda',
    colors: ['#FF0099', '#493240']
  },
  {
    id: 8,
    name:'Piggy Pink',
    colors: ['#ee9ca7', '#ffdde1']
  },
  {
    id: 9,
    name: 'Mango',
    colors: ['#ffe259', '#ffa751']
  },
  {
    id: 10,
    name:'Purpink',
    colors: ['#7F00FF', '#E100FF']
  }]
 
  return (
    <View style={{ flex: 1, justifyContent: 'center', padding: 20, }}>
 
      <ScrollView showsVerticalScrollIndicator={false} style={{marginTop: 20}}>
        {COLORS.map((item) => <LinearGradient
          key={item.id}
          colors={item.colors}
          start={[0, 0.5]}
          end={[1, 0.5]}
          style={{ justifyContent: 'center', alignItems: 'center', height: 120, borderRadius: 10, marginBottom: 8, }}>
            <Text style={{fontSize: 20, fontWeight: '800', color:'#FFF'}}>{item.name}</Text>
        </LinearGradient>)}
      </ScrollView>
 
    </View>
  );
}

Here's the final outcome, showcasing the beauty of gradient colors 😍

Source Code

Github Repository Link

Project Dependencies

"dependencies": {
    "expo": "~49.0.7",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-native": "0.72.3",
    "expo-linear-gradient": "~12.3.0"
  }

Conclusion

As a result, adding linear gradient backgrounds to your React Native mobile applications gives you a strong tool to improve usability and aesthetic appeal. You can easily make eye-catching color transitions by applying the expo-linear-gradient component. Happy coding!