Learn how to use LinearGradient components in React Native for stunning UI effects. Create smooth color transitions with Linear Gradient for beautiful app designs. This is an illustration of Linear Gradient component in

App.tsx

file.

import './global.css';
import React, { useState } from 'react';
import { Input, InputField, InputIcon, InputSlot } from '@/components/ui/input';
import { SafeAreaView } from '@/components/ui/safe-area-view';
import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider';
import { LinearGradient } from '@/components/ui/linear-gradient';
import { Heading } from '@/components/ui/heading';
import { Text } from '@/components/ui/text';
import { Center } from '@/components/ui/center';
import { Mail } from 'lucide-react-native';

export default function App() {
  const [colorMode, setColorMode] = (useState < 'dark') | ('light' > 'light');
  return (
    <SafeAreaView className="flex-1 justify-center items-center">
      <GluestackUIProvider mode={colorMode}>
        <Center className="rounded-xl bg-background-0 p-8 m-6 web:max-w-[400px]">
          <Heading size="xl">Stay up to date</Heading>
          <Text className="text-center leading-[22px] my-2">
            Subscribe to our newsletter for the latest news and product updates.
          </Text>

          <Input
            variant="outline"
            size="md"
            isDisabled={false}
            isInvalid={false}
            isReadOnly={false}
            className="w-full rounded-full my-3"
          >
            <InputField placeholder="abc@example.com" />
            <InputSlot className="pr-3">
              <InputIcon
                as={Mail}
                color={colorMode === 'light' ? '#525252' : '#DBDBDC'}
              />
            </InputSlot>
          </Input>

          <LinearGradient
            className="w-full rounded-full items-center py-2"
            colors={['#8637CF', '#0F55A1']}
            start={[0, 1]}
            end={[1, 0]}
          >
            <Text className="text-white font-semibold">Subscribe</Text>
          </LinearGradient>
        </Center>
      </GluestackUIProvider>
    </SafeAreaView>
  );
}

Installation

Step 1: Install the following dependencies:

npx expo install expo-linear-gradient

Step 2: Copy and paste the following code into your project.

'use client';
import React from 'react';
import { tva } from '@gluestack-ui/nativewind-utils/tva';
import { LinearGradient as ExpoLinearGradient } from 'expo-linear-gradient';
import { cssInterop } from 'nativewind';

cssInterop(ExpoLinearGradient, {
  className: 'style',
});

const linearGradientStyle = tva({
  base: '',
});

export const LinearGradient = React.forwardRef(
  ({ className, ...props }: any, ref?: any) => {
    return (
      <ExpoLinearGradient
        {...props}
        className={linearGradientStyle({ class: className })}
        ref={ref}
      />
    );
  }
);

Step 3: Update the import paths to match your project setup.

API Reference

To use this component in your project, include the following import statement in your file.

import { LinearGradient } from '@/components/ui/linear-gradient';

export default () => <LinearGradient />;

Edit this page on GitHub

Go backMCP Server

Up nextBuilding Ecommerce App

Go backMCP Server

Up nextBuilding Ecommerce App