react-native-gradient-texts
## About
`react-native-gradient-texts` is React Native component for different Gradient styled Texts for iOS & Android.
---
## Installation
1. Install library
from npm
```bash
npm install react-native-gradient-texts
```
from yarn
```bash
yarn add react-native-gradient-texts
```
- Make sure that you have installed the [`react-native-svg`](https://github.com/react-native-svg/react-native-svg) libarary.
2. Link native code
```bash
cd ios && pod install
```
---
## Example
1. Gradient Text with Gradient Border
```jsx
import React from "react";
import { StyleSheet, SafeAreaView } from "react-native";
import GradientText from "react-native-gradient-texts";
const App = () => {
return (
);
};
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
});
```
2. Gradient Stroke Text
```jsx
```
3. Bordered Text
```jsx
```
4. Simple Gradient Text
```jsx
```
---
## Props
| Props | Params Type | Default | Description |
| ---------------- | ---------------------- | ---------------------- | -------------------------------------- |
| text (Required) | String | '' | Text to be display |
| height | Number | 100 | SVG height |
| width | Number | 300 | SVG width |
| gradientColors | [String, String] | ['#810955', '#533483'] | Colors for text Gradient |
| borderColors | [String, String] | ['#b429f9', '#26c5f3'] | Colors for text Border/Stroke |
| locations | {x: Number; y: Number} | {x: 150, y: 80} | Distance on x, y axis |
| start | {x: Number; y: Number} | {x: 0, y: 0} | Start of the gradient on the x, y axis |
| end | {x: Number; y: Number} | {x: 1, y: 1} | End of the gradient on the x, y axis |
| isGradientFill | Boolean | false | For gradient text |
| fillColor | String | '#FFFFFF' | For single colored text |
| isGradientStroke | Boolean | false | For gradient Text Border |
| strokeColor | String | '#000000' | For simple text border |
| strokeWidth | Number | 0 | Text border Width |
| fontSize | Number | 18 | Customize font size |
| fontFamily | String | 'Avenir Next' | Customize font family |
| fontWeight | String or Number | 900 | Customize font weight |
| style | ViewStyle | {} | Styling for container view |
---
## Author
Drashti Sabhaya
---
## License
This project is under the MIT license. See the [LICENSE](./LICENSE) to learn more.
[Contact!](https://www.linkedin.com/in/drashti-sabhaya/)