Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create a gradient text in react-native

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 ?

like image 604
Lau Kumra Avatar asked Jul 09 '18 14:07

Lau Kumra


People also ask

How do I add a gradient in react-native?

Manual. Right click on Libraries and click Add Files to "Your Project Name" . Look under node_modules/react-native-linear-gradient/ios and add BVLinearGradient.

How do you make a gradient in react?

To add a linear-gradient background in a React component, we can put the linear-gradient value in the style prop object. to set the background property to "linear-gradient(#e66465, #9198e5)" .

How do you put a gradient on text in CSS?

To add a gradient overlay to a text element, we need to set three different CSS properties to the text we want to style: background-image: <gradient> background-clip: text. text-fill-color: transparent.


1 Answers

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>
like image 108
Harshal Avatar answered Sep 22 '22 16:09

Harshal