react-native-multi-color-view

A React Native component for creating beautiful multi-color gradient views.

Requirements

• React Native >= 0.60.0
• React >= 16.8.0
• react-native-svg >= 9.0.0

Installation

npm install react-native-multi-color-view react-native-svg
# or
yarn add react-native-multi-color-view react-native-svg

# For iOS, run:
cd ios && pod install

Usage

With Gradient Colors

import { GradientView } from 'react-native-multi-color-view';

// In your component:
<GradientView
  colors={['#FF0000', '#00FF00', '#0000FF']}
  style={{ width: 200, height: 200 }}
/>

Without Colors (Regular View)

import { GradientView } from 'react-native-multi-color-view';

// In your component:
<GradientView
  style={{ width: 200, height: 200 }}
>
  <Text>Regular view without gradient</Text>
</GradientView>

Props

| Prop | Type | Description | |------|------|-------------| | colors | string[] | Array of color values (hex, rgb, rgba). If not provided, renders as a regular View | | style | ViewStyle | Style for the gradient view | | start | { x: number, y: number } | Starting point of the gradient (0-1) | | end | { x: number, y: number } | Ending point of the gradient (0-1) |

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT