Expo LinearGradient

A universal React component that renders a gradient view.

Android

iOS

tvOS

Web

Included in Expo Go

Recommended version:

~55.0.18

expo-linear-gradient provides a native React view that transitions between multiple colors in a linear direction.

React Native also provides experimental_backgroundImage (Android and iOS) and backgroundImage (Web) style properties on View component that support CSS gradient syntax such as linear-gradient() and radial-gradient(). This can be an alternative for gradient backgrounds without adding an extra dependency. Since this is an experimental property, if you encounter any issues, please report them to the React Native repository.

Installation

Terminal

- npx expo install expo-linear-gradient

- yarn expo install expo-linear-gradient

- pnpm expo install expo-linear-gradient

- bun expo install expo-linear-gradient

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Linear Gradient

import { StyleSheet, Text, View } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

export default function App() {
  return (
    <View style={styles.container}>
      <LinearGradient
        // Background Linear Gradient
        colors={['rgba(0,0,0,0.8)', 'transparent']}
        style={styles.background}
      />
      <LinearGradient
        // Button Linear Gradient
        colors={['#4c669f', '#3b5998', '#192f6a']}
        style={styles.button}>
        <Text style={styles.text}>Sign in with Facebook</Text>
      </LinearGradient>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'orange',
  },
  background: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    height: 300,
  },
  button: {
    padding: 15,
    alignItems: 'center',
    borderRadius: 5,
  },
  text: {
    backgroundColor: 'transparent',
    fontSize: 15,
    color: '#fff',
  },
});

API

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

No API data file found, sorry!