diff --git a/README.md b/README.md index 7a07946..b322631 100644 --- a/README.md +++ b/README.md @@ -64,6 +64,7 @@ export const App = () => { start={{ x: 0.5, y: 0 }} end={{ x: 1, y: 1 }} textStyle={{ fontSize: 40 }} + textProps={{allowFontScaling: true}} // Optional /> ); @@ -88,7 +89,8 @@ const styles = StyleSheet.create({ | colors | string[] | **Required** | An array of at least two color values that represent gradient colors. Example: `colors={["black", "white"]}`. | | start | { x: number, y: number } | { x: 0.5, y: 0 } | An optional prop. He declare the position that the gradient starts. Example `start={{ x: 0.5, y: 0 }}`. | | end | { x: number, y: number } | { x: 1, y: 1 } | Same as start, but for the of the gradient. | -| textStyle | [TextStyle](https://reactnative.dev/docs/text-style-props) | Default Value | A property to change all styles that a text has. | +| textStyle | [TextStyle](https://reactnative.dev/docs/text-style-props) | Default Value | A property to change all styles that a text has. +| textProps | [TextProps](https://reactnative.dev/docs/text-style-props#props) | Default Value | A property to apply native props to text. | --- @@ -103,6 +105,10 @@ const styles = StyleSheet.create({ --- +## Contributors + + +- [](https://github.com/BLOCKMATERIAL) [MATERIALBLOCK](https://github.com/BLOCKMATERIAL) ## License This project is under the MIT license. See the [LICENSE](./LICENSE) to learn more. diff --git a/example/src/App.tsx b/example/src/App.tsx index eb3f441..e3c66b3 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -1,15 +1,23 @@ import React from 'react'; -import { StyleSheet, View } from 'react-native'; +import {StyleSheet, View } from 'react-native'; import { LinearGradientText } from 'react-native-linear-gradient-text'; export default function App() { + return ( + ); @@ -19,7 +27,9 @@ const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', + rowGap: 20, justifyContent: 'center', + marginHorizontal: 100, backgroundColor: '#ffffff', }, }); diff --git a/src/components/LinearGradientText.tsx b/src/components/LinearGradientText.tsx index 2d40f46..b737742 100644 --- a/src/components/LinearGradientText.tsx +++ b/src/components/LinearGradientText.tsx @@ -2,23 +2,27 @@ import React, { FC } from 'react'; import { Text, TextStyle, StyleSheet } from 'react-native'; import MaskedView from '@react-native-masked-view/masked-view'; import LinearGradient from 'react-native-linear-gradient'; +import { TextProps } from 'react-native'; interface Props { text: string; textStyle?: TextStyle; + textProps?: TextProps; colors: string[]; start?: { x: number; y: number }; end?: { x: number; y: number }; } export const LinearGradientText: FC = (props) => { - const { text, textStyle = {}, colors, start = { x: 0, y: 1 }, end = { x: 1, y: 1 } } = props; + const { text, textStyle = {}, textProps={}, colors, start = { x: 0, y: 1 }, end = { x: 1, y: 1 } } = props; return ( {text}}> - {text} - + + {text} + + ); };