xxxxxxxxxx
<button style={{ backgroundImage: `linear-gradient(to right, rgba(0, 224, 255, 1), rgba(0, 133, 255, 1))`, }} >
xxxxxxxxxx
import React from 'react';
const MyComponent = () => {
return (
<div
style={{
background: 'linear-gradient(to right, #ff0000, #0000ff)',
height: '200px',
width: '400px',
}}
>
{/* Content of the component */}
</div>
);
};
export default MyComponent;
xxxxxxxxxx
import React from 'react';
import { View } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
const App = () => {
return (
<View style={{ flex: 1 }}>
<LinearGradient
colors={['#4c669f', '#3b5998', '#192f6a']}
style={{ flex: 1 }}
>
{/* Your content here */}
</LinearGradient>
</View>
);
};
export default App;
xxxxxxxxxx
React inline background
<div className='w-[300px] h-[300px] popular-teacher-bg ' style={{
background: `linear-gradient( to bottom,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.5)
),url(${bg})`
}}>
xxxxxxxxxx
<LinearGradient
colors={['#4c669f', '#3b5998', '#192f6a']}
style={styles.linearGradient}>
<Text style={styles.buttonText}>
Simple Linear Gradient Backgrount
</Text>
</LinearGradient>
xxxxxxxxxx
import LinearGradient from 'react-native-linear-gradient'; // Within your render function<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}> <Text style={styles.buttonText}> Sign in with Facebook </Text></LinearGradient> // Later on in your styles..var styles = StyleSheet.create({ linearGradient: { flex: 1, paddingLeft: 15, paddingRight: 15, borderRadius: 5 }, buttonText: { fontSize: 18, fontFamily: 'Gill Sans', textAlign: 'center', margin: 10, color: '#ffffff', backgroundColor: 'transparent', },});
xxxxxxxxxx
You may refer to this link:
https://github.com/react-native-linear-gradient/react-native-linear-gradient