linear-gradient.md

title	sourceCodeUrl	packageName
LinearGradient	https://github.com/expo/expo/tree/master/packages/expo-linear-gradient	expo-linear-gradient

import APISection from '/components/plugins/APISection'; import {APIInstallSection} from '/components/plugins/InstallSection'; import PlatformsSection from '/components/plugins/PlatformsSection'; import SnackInline from '/components/plugins/SnackInline';

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

Installation

Usage

<SnackInline label='Linear Gradient' dependencies={['expo-linear-gradient']}>

import * as React from 'react';
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>
  );
}

/* @hide const styles = StyleSheet.create({ ... }); */
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',
  },
});
/* @end */

API

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