Expo LinearGradient

A universal React component that renders a gradient view.

Android

iOS

tvOS

Web

Included in Expo Go

Recommended version:

~15.0.8

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

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!