Skip to content

Commit

Permalink
Merge pull request #2 from BLOCKMATERIAL/feat/text-native-props
Browse files Browse the repository at this point in the history
Feat/text native props
  • Loading branch information
henriquemarquesdev authored Oct 27, 2023
2 parents 61f0a7b + 5964c69 commit 2dfb75b
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 5 deletions.
8 changes: 7 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
/>
</View>
);
Expand All @@ -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. |

---

Expand All @@ -103,6 +105,10 @@ const styles = StyleSheet.create({

---

## Contributors


- [<img src="https://github.com/BLOCKMATERIAL.png" width="30" height="30">](https://github.com/BLOCKMATERIAL) [MATERIALBLOCK](https://github.com/BLOCKMATERIAL)
## License

This project is under the MIT license. See the [LICENSE](./LICENSE) to learn more.
Expand Down
12 changes: 11 additions & 1 deletion example/src/App.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<View style={styles.container}>
<LinearGradientText
colors={['#000000', '#ff0000', '#000000']}
text="Hello World"
textStyle={{ fontSize: 40 }}

Check warning on line 13 in example/src/App.tsx

View workflow job for this annotation

GitHub Actions / lint

Inline style: { fontSize: 40 }
textProps={{ellipsizeMode: "head", numberOfLines: 1}}
/>
<LinearGradientText
colors={['#000000', '#ff9543', '#000000']}
text="Allow Font Scaling: False "
textStyle={{ fontSize: 40 }}

Check warning on line 19 in example/src/App.tsx

View workflow job for this annotation

GitHub Actions / lint

Inline style: { fontSize: 40 }
textProps={{allowFontScaling: true}}
/>
</View>
);
Expand All @@ -19,7 +27,9 @@ const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
rowGap: 20,
justifyContent: 'center',
marginHorizontal: 100,
backgroundColor: '#ffffff',
},
});
10 changes: 7 additions & 3 deletions src/components/LinearGradientText.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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> = (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 (
<MaskedView maskElement={<Text style={[styles.maskText, textStyle]}>{text}</Text>}>
<LinearGradient colors={colors} start={start} end={end}>
<Text style={[styles.text, textStyle]}>{text}</Text>
</LinearGradient>
<Text style={[styles.text, textStyle]} {...textProps}>
{text}
</Text>
</LinearGradient>
</MaskedView>
);
};
Expand Down

0 comments on commit 2dfb75b

Please sign in to comment.