🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more

expo-linear-gradient

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install
e

expo-linear-gradient

Provides a React component that renders a gradient view.

14.1.5
latest
92

Supply Chain Security

100

Vulnerability

82

Quality

99

Maintenance

100

License

Unstable ownership

Supply chain risk

A new collaborator has begun publishing package versions. Package stability and security risk may be elevated.

Found 1 instance in 1 package

Dependencies have 11 high alerts.

Socket optimized override available and High CVE

Version published
Weekly downloads
628K
18.17%
Maintainers
27
Weekly downloads
 
Created
Issues
783

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

FAQs

Package last updated on 05 Jun 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts