Question 34197 in React native Question posted in
The official React Native documentation can be found here.

How to use linear-gradient text in react native mobile apps (android apps)? no expo

How to use linear-gradient text in react native mobile apps (android apps)? no expo and I want to make text color in linear-gradient how can I do? is it possible if yes than how and if no than how popular apps use linear-gradient text they also use react native in their tech stack tired tired to give color style to color linear-gradient but it didn’t work

background: linear-gradient(90.35deg, #33DFDF 10.9%, #0047FF 25.48%, #00A3FF 40.06%, #044AFF 54.65%, #FA00FF 69.23%, #D90AFB 83.81%);

my code

//import liraries
import React from 'react';
import { Image, Text, View, TouchableOpacity } from 'react-native';
import WrapperContainer from '../../Components/WrapperContainer';
import imagePath from '../../constatns/imagePath';
import strings from '../../constatns/lang';
import navigationStrings from '../../constatns/navigationStrings';
import colors from '../../styles/colors';
import styles from './styles';
import LinearGradient from 'react-native-linear-gradient';
import MaskedView from '@react-native-masked-view/masked-view';

const TermsCondition = ({ navigation }) => {
    return (
        <WrapperContainer containerStyle={{ alignItems: 'center' }}>
            <Image resizeMode='contain' style={styles.logoStyle} source={imagePath.icLogo} />
            <Text style={styles.headingStyle}>{strings.WELCOME_TO_ourapp}</Text>
            <Text style={styles.descStyle}>{strings.READ_OUR} <Text style={{ color: colors.lightBlue }}>{strings.PRIVACY_POLICY}</Text> {strings.TAP_AGREE_AND_CONTINUE_TO_CEEPT_THE} <Text style={{ color: colors.lightBlue }}>{strings.TERMS_OF_SERVICE}
            </Text></Text>

            <TouchableOpacity onPress={() => navigation.navigate(navigationStrings.PHONE_NUMBER)} activeOpacity={0.7}>
                <Text style={styles.agreeStyle}>{strings.AGREE_AND_CONTINUE}</Text>
            </TouchableOpacity>
        </WrapperContainer>


    );
};

export default TermsCondition;
Tags:

2

Answers


  1. 0

    I think react-native-linear-gradient can only be customized in the background text, not in the text.

    code

    Android:

    enter image description here

    I also have another option, using react-native-text-gradient, but until now there is still an issue in the installation. https://github.com/iyegoroff/react-native-text-gradient/issues/53

    so, Now I suggest using @react-native-masked-view/masked-view if you want a custom gradient in the text, I think this helps, you can read here
    https://github.com/react-native-masked-view /masked-view

    masked-view

    Android:

    android-masked-view

    Login or Signup to reply.
  2. 0

    step 1 :

    yarn add react-native-linear-gradient-text

    or

    npm install react-native-linear-gradient-text

    step 2 :

    import React from 'react';
import { View, StyleSheet } from 'react-native';
import { LinearGradientText } from 'react-native-linear-gradient-text';

export const App = () => {
  return (
    <View style={styles.container}>
      <LinearGradientText
        colors={['#E76F00', '#EA374E']}
        text="Hello World"
        start={{ x: 0.5, y: 0 }}
        end={{ x: 1, y: 1 }}
        textStyle={{ fontSize: 40 }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

    Hope this solves your problem. for the library documentation check this link :
    https://www.npmjs.com/package/react-native-linear-gradient-text

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search