expo-linear-gradient

What is expo-linear-gradient?

The expo-linear-gradient package is a part of the Expo ecosystem and provides a way to create linear gradients in React Native applications. It is particularly useful for creating visually appealing backgrounds, buttons, and other UI elements with gradient effects.

What are expo-linear-gradient's main functionalities?

Basic Linear Gradient

This feature allows you to create a basic linear gradient with multiple colors. The gradient is applied to a View component, and you can customize the colors and style as needed.

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

const BasicGradient = () => (
  <LinearGradient
    colors={['#4c669f', '#3b5998', '#192f6a']}
    style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
  >
    <Text style={{ color: 'white' }}>Basic Gradient</Text>
  </LinearGradient>
);

Gradient with Custom Start and End Points

This feature allows you to define custom start and end points for the gradient. This can be useful for creating diagonal or other non-standard gradient directions.

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

const CustomGradient = () => (
  <LinearGradient
    colors={['#ff7e5f', '#feb47b']}
    start={[0, 0]}
    end={[1, 1]}
    style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
  >
    <Text style={{ color: 'white' }}>Custom Gradient</Text>
  </LinearGradient>
);

Gradient with Locations

This feature allows you to specify the locations of each color in the gradient. This can be useful for creating more complex gradient effects where colors change at specific points.

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

const GradientWithLocations = () => (
  <LinearGradient
    colors={['#e96443', '#904e95']}
    locations={[0.3, 0.7]}
    style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
  >
    <Text style={{ color: 'white' }}>Gradient with Locations</Text>
  </LinearGradient>
);

Other packages similar to expo-linear-gradient

react-native-linear-gradient

The react-native-linear-gradient package provides similar functionality to expo-linear-gradient, allowing you to create linear gradients in React Native applications. It offers more flexibility and is not tied to the Expo ecosystem, making it a good choice for projects that do not use Expo.

react-native-svg

The react-native-svg package allows you to create complex vector graphics, including gradients, in React Native applications. While it offers more advanced features and flexibility compared to expo-linear-gradient, it also has a steeper learning curve and is more complex to use.

README

Provides a React component that renders a gradient view.

API documentation

• Documentation for the latest stable release
• Documentation for the main branch

Installation in managed Expo projects

For managed Expo projects, please follow the installation instructions in the API documentation for the latest stable release.

Installation in bare React Native projects

For bare React Native projects, you must ensure that you have installed and configured the expo package before continuing.

Add the package to your npm dependencies

npx expo install expo-linear-gradient

Configure for Android

No additional set up necessary.

Configure for iOS

Run npx pod-install after installing the npm package.

Contributing

Contributions are very welcome! Please refer to guidelines described in the contributing guide.