React Native Mantine › Theming

Gradients

Gradient support for buttons and backgrounds

Import: import { Gradients } from 'react-native-mantine';

Usage

import { Button } from 'react-native-mantine';

// Basic gradient button
<Button
  variant="gradient"
  gradient={{ from: 'blue', to: 'cyan' }}
>
  Click Me
</Button>

// With custom angle
<Button
  variant="gradient"
  gradient={{
    from: 'orange',
    to: 'red',
    deg: 45  // Diagonal gradient
  }}
>
  Diagonal Gradient
</Button>

// Available colors:
// blue, cyan, grape, pink, orange, red,
// teal, lime, indigo, green, yellow, violet

// Angles: 0 = left to right
//         45 = diagonal
//         90 = top to bottom
//         135 = diagonal (reverse)

Source on GitHub · npm