import React from 'react';
import { SafeAreaView, View, Text, StyleSheet } from 'react-native';
import MaskedView from '@react-native-community/masked-view';
import { LinearGradient } from 'expo-linear-gradient';

const GradientTextTag: React.FC = () => {
  return (
    <View style={styles.container}>
      <MaskedView
        maskElement={
          <View style={styles.maskContainer}>
            <Text style={styles.text}>New Pickup Time</Text>
          </View>
        }>
        <LinearGradient
          colors={['#3023ae', '#c86dd7']}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 0 }}
          style={styles.gradient}
        >
        <View style={{opacity: 0}}>
            <Text style={styles.text}>New Pickup Time</Text>
          </View>
           </LinearGradient>
      </MaskedView>
    </View>
  );
};

const App: React.FC = () => {
  return (
    <SafeAreaView style={styles.appContainer}>
      <GradientTextTag />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  appContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  container: {
    borderRadius: 20,
    borderWidth: 1,
    borderColor: 'transparent',
    padding: 4,
    minWidth: 100
  },
  maskContainer: {
    marginTop: 20,
    padding: 0,
    borderColor: 'black',
    borderWidth: 1,
    borderRadius: 26,
  },
  text: {
    fontSize: 16,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  gradient: {
    flex: 1,
  },
});

export default App;

In above example i’m rendering a text inside a react native gradient and masked view to get a linear gradient effect on the whole component.

I’m rendering text “New Location Data” which i want all on the same line. However for some reason the part of text is coming to next line

This gets fixed if i give some width to the gradient container however i want the container to take the width automatically using the content inside

Expo link: https://snack.expo.dev/@mmt10470/gradient-text-using-react-native-maskedview