How to create a gradient text in react-native

Question

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 ?

I used this code : https://github.com/iyegoroff/react-native-text-gradient/blob/master/TextGradientExample/App.js — Lau Kumra, Jul 09 '18 at 17:43
Hey, @LauKumra, react-native-text-gradient will not work with expo, because it contains native code, which is not included in expo sdk - https://docs.expo.io/versions/v28.0.0/introduction/faq#how-do-i-add-custom-native-code. You can use my module only in raw react-native app. — iyegoroff, Jul 22 '18 at 23:11

score 27 · Answer 1 · answered Jun 01 '21 at 06:20

27

Implemented Gradient on Text using @react-native-community/masked-view and react-native-linear-gradient

Step 1: Creating our custom GradientText component

import React from "react";
import { Text } from "react-native";
import MaskedView from "@react-native-community/masked-view";
import LinearGradient from "react-native-linear-gradient";
    
const GradientText = (props) => {
  return (
    <MaskedView maskElement={<Text {...props} />}>
      <LinearGradient
        colors={["red", "green"]}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 0 }}
      >
        <Text {...props} style={[props.style, { opacity: 0 }]} />
      </LinearGradient>
    </MaskedView>
  );
};

export default GradientText;

Step 2: Using our GradientText component

<GradientText style={styles.textStyle}>Hello world</GradientText>

answered Jun 01 '21 at 06:20

Harshal

7,562
2
30
20

1

Remember to `yarn add @react-native-masked-view/masked-view` in stead of `yarn add @react-native-community/masked-view` because of this bug https://github.com/react-native-masked-view/masked-view/issues/114 on the older versions. – user2602152 Feb 04 '22 at 20:27
1

This works very well on iOS, but had an issue on Android of this. https://github.com/react-native-masked-view/masked-view/issues/114#issuecomment-1001666835 Have you met this issue and do you have some solution or suggest? – highjump May 07 '22 at 21:40
2

Can anyone share what this actually looks like? – Slbox Jan 20 '23 at 01:19
Thanks, your solution was smart to have 2 Text one for setting the Linear gradient width (with the opacity: 0) and the actual displayed width, previously I struggled with the fixed width for the linear gradient – Sherif Samir Jul 27 '23 at 20:02

score 9 · Accepted Answer · answered Jul 09 '18 at 16:02

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>

@Rishabh jsut use text as `key` prop for every text changing causes remount. — MJ Studio, Oct 18 '22 at 02:18

score 6 · Answer 3 · answered Oct 29 '18 at 13:56

There are 2 packages you could use for gradient text:

1) 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>

Result would be like this:

Sources: https://github.com/iyegoroff/react-native-text-gradient

2) react-native-linear-gradient:

import LinearGradient from 'react-native-linear-gradient';

const styles = StyleSheet.create({
  text: {
    color: 'black',
    fontSize: 14,
  },
  gradient: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

   <View>
    <View>
      <Text style={styles.text}>
         This is a gradiented text
      </Text>
      <Text style={styles.text}>
         This is a gradiented text
      </Text><Text style={styles.text}>
         This is a gradiented text
      </Text><Text style={styles.text}>
         This is a gradiented text
      </Text><Text style={styles.text}>
         This is a gradiented text
      </Text>
    </View>
     <LinearGradient
        start={{ x: 0.0, y: 0.0 }}
        end={{ x: 0.0, y: 1.0 }}
        locations={[0.0, 1.0]}
        colors={['#ffffff40', '#fffffff5']} //<-- last 2 chars from color control the opacity
        useViewFrame={false}
        style={styles.gradient}
      />
    <View>

The result will look like this:

More info of react-native-linear-gradient here:

https://github.com/react-native-community/react-native-linear-gradient

How to create a gradient text in react-native

3 Answers3

Linked