react-native-multi-color-view
Version:
A React Native component for creating multi-color gradient views
69 lines (51 loc) • 2.06 kB
Markdown
# react-native-multi-color-view
[](https://www.npmjs.com/package/react-native-multi-color-view)
[](https://www.npmjs.com/package/react-native-multi-color-view)
[](https://opensource.org/licenses/MIT)
[](https://www.apple.com/ios/)
[](https://www.android.com/)
[](https://www.apple.com/macos/)
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
```bash
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
```jsx
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)
```jsx
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