I want to create text with linear gradient color in react-native, but cannot find a suitable way or package to do this. I tried to use this package : https://github.com/iyegoroff/react-native-text-gradient. But, while trying to run an example with expo, it is giving me the following error :
TypeError: Cannot read property 'x' of undefined
This error is located at:
in RNLinearTextGradient (at App.js:26)
in RCTView (at View.js:60)
in View (at App.js:17)
in App (at registerRootComponent.js:35)
in RootErrorBoundary (at registerRootComponent.js:34)
in ExpoRootComponent (at renderApplication.js:33)
in RCTView (at View.js:60)
in View (at AppContainer.js:102)
in RCTView (at View.js:60)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:32)
at linear-text-gradient.js:16
at Object.render (create-text-gradient-class.js:219)
at finishClassComponent (ReactNativeRenderer-dev.js:8811)
at updateClassComponent (ReactNativeRenderer-dev.js:8761)
at beginWork (ReactNativeRenderer-dev.js:9580)
at performUnitOfWork (ReactNativeRenderer-dev.js:12924)
at workLoop (ReactNativeRenderer-dev.js:12953)
at renderRoot (ReactNativeRenderer-dev.js:12996)
at performWorkOnRoot (ReactNativeRenderer-dev.js:13632)
at performWork (ReactNativeRenderer-dev.js:13545)
Would you please help me to resolve this issue or find another way to create gradient text in react-native ?
use [react native svg][1]
[1]: https://github.com/react-native-community/react-native-svg for example:
import Svg, {
LinearGradient,
Text,
Defs,
Stop,
TSpan
} from 'react-native-svg';
<Svg viewBox="0 0 300 300" height="300"
width="300">
<Defs>
<LinearGradient id="rainbow" x1="0" x2="0" y1="0" y2="100%" gradientUnits="userSpaceOnUse" >
<Stop stopColor="#FF5B99" offset="0%" />
<Stop stopColor="#FF5447" offset="20%" />
<Stop stopColor="#FF7B21" offset="40%" />
<Stop stopColor="#EAFC37" offset="60%" />
<Stop stopColor="#4FCB6B" offset="80%" />
<Stop stopColor="#51F7FE" offset="100%" />
</LinearGradient>
</Defs>
<Text fill="url(#rainbow)">
<TSpan
fonSize="72"
x="0"
y="72"
>
gradient
</TSpan>
<TSpan fonSize="72" x="0" dy="72">text</TSpan>
<TSpan fonSize="72" x="0" dy="72">all up in here</TSpan>
</Text>
</Svg>