React-Native text gradient component for iOS & Android.
$ npm install react-native-text-gradient --save
$ react-native link react-native-text-gradient
- iOS - component works as drop-in replacement for standard
Text
component, e.g. it is possible to have nested gradients; - Android - currently only basic 'wrapper'-like behavior without nesting is supported, WIP;
- React-Native:
- with rn >= 0.55.0 use latest version;
- with rn >= 0.54.0 use 0.0.7;
- with rn >= 0.53.1 use 0.0.4;
- rn 0.53.0 is not supported;
- with rn >= 0.50.0 use 0.0.3.
import { LinearTextGradient } from 'react-native-text-gradient';
<LinearTextGradient
style={{ fontWeight: 'bold', fontSize: 72 }}
locations={[0, 1]}
colors={['red', 'blue']}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 0 }}
>
THIS IS TEXT GRADIENT
</LinearTextGradient>
iOS | Android |
---|---|
![]() |
![]() |
Interface is similar to Text
& LinearGradient
An array of at least two color values that represent gradient colors. Example: ['red', 'blue']
sets gradient from red to blue.
An optional object of the following type: { x: number, y: number }
. Coordinates declare the position that the gradient starts at, as a fraction of the overall size of the gradient, starting from the top left corner. Example: { x: 0.1, y: 0.1 }
means that the gradient will start 10% from the top and 10% from the left.
Same as start, but for the end of the gradient.
An optional array of numbers defining the location of each gradient color stop, mapping to the color with the same index in colors
prop. Example: [0.1, 0.75, 1]
means that first color will take 0% - 10%, second color will take 10% - 75% and finally third color will occupy 75% - 100%.
Optional. If true gradient will be calculated for text view background frame rather than text frame.
<LinearTextGradient
numberOfLines={1}
useViewFrame={true}
locations={[0.5, 0.95]}
// note colors like '#FF000000' are used for seamless transition to transparent
colors={['#FF0000', '#FF000000']}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 0 }}
>
%%%%%%%%%%%%%%%%%%%%%%
</LinearTextGradient>
When mixing several text gradients and Text
s top component always should be text gradient.
<LinearTextGradient {...someGradientProps}>
<Text>123</Text>
qwerty
<LinearTextGradient {...anotherGradientProps}>321</LinearTextGradient>
</LinearTextGradient>
This is necessary because only top text component is 'mapped' to actual native node and its children are 'virtual' from the native perspective.
- Yes, I use it in production