xxxxxxxxxx
You may refer to this link:
https://github.com/react-native-linear-gradient/react-native-linear-gradient
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
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>