xxxxxxxxxx
import React from 'react';
import { Text, View } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
const App = () => {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<LinearGradient
colors={['#4c669f', '#3b5998', '#192f6a']}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 0 }}
style={{ padding: 10, borderRadius: 5 }}
>
<Text style={{ fontSize: 20, fontWeight: 'bold', color: '#fff' }}>
Linear Gradient Text
</Text>
</LinearGradient>
</View>
);
};
export default App;
xxxxxxxxxx
// Step 1: Install Libraries
yarn add @react-native-masked-view/masked-view
yarn add react-native-linear-gradient
// Step 2: Make GradientText component
import React from 'react';
import {Text} from 'react-native';
import MaskedView from '@react-native-masked-view/masked-view';
import LinearGradient from 'react-native-linear-gradient';
const GradientText = props => {
return (
<MaskedView maskElement={<Text {props} />}>
<LinearGradient
colors={['red', 'yellow']}
start={{x: 0, y: 0}}
end={{x: 1, y: 0}}>
<Text {props} style={[props.style, {opacity: 0}]} />
</LinearGradient>
</MaskedView>
);
};
export default GradientText;
// Step 3: Using GradientText component
<GradientText style={styles.textStyle}>Hello world</GradientText>
xxxxxxxxxx
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>