react native gradient button
16,648
Solution 1
Use https://www.npmjs.com/package/react-native-linear-gradient
<LinearGradient colors={['#FF00FF', '#FFF000', '#FF0000']}
style={{borderRadius: 20, width: width/3}}
start={{ y: 0.0, x: 0.0 }} end={{ y: 0.0, x: 1.0 }}>
<Button style={{borderRadius: 20, width: width/3,
textAlign: 'center', color: '#fff'}} title={`Welcome`}/>
</LinearGradient>
or
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']}
style={styles.linearGradient}
start={{ y: 0.0, x: 0.0 }} end={{ y: 0.0, x: 1.0 }}>
<Text style={styles.buttonText}> Done </Text>
</LinearGradient>
const 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',
},
});
Solution 2
Try this -
const GradientBtn = ({ name }) => (
<LinearGradient colors={['#d7d7d7', '#fafafa', '#e8e8e8']} style={styles.gradient}>
<Text style={styles.btn}>{name}</Text>
</LinearGradient>
)
const styles = StyleSheet.create({
gradient: {
flex: 1
}
});
& apply width
& height
to the TouchableOpacity
itself
<TouchableOpacity style={styles.wrapper}>
<GradientBtn name="Login" />
</TouchableOpacity>
const styles = StyleSheet.create({
wrapper: {
width: '24.55%',
height: 35
}
});
Didn't try it though but I guess it will work :)
Related videos on Youtube
Author by
Ishaq Ashraf
Full Stack developer. Hands-on product development experience with Silicon Valley startups and international companies.
Updated on June 04, 2022Comments
-
Ishaq Ashraf almost 2 years
I have a problem with my btn component, I am using react-native-linear-gradient lib...
btn.js
import React,{ Component } from 'react'; import {View,Text,StyleSheet, TouchableOpacity} from 'react-native'; import {Button,Item} from 'native-base'; import LinearGradient from 'react-native-linear-gradient'; class GradientBtn extends Component { constructor(props){ super(props); } render(){ return( <LinearGradient colors={['#d7d7d7', '#fafafa', '#e8e8e8']} style={[styles.btnContainer,{height:this.props.h,width:this.props.w}]}> <Text style={styles.btn}>{this.props.name}</Text> </LinearGradient> ); } } var styles = StyleSheet.create({ btnContainer:{ backgroundColor:'#f0f0f0', justifyContent:'center', marginLeft:1 }, btn:{ textAlign:'center', color:'#000', fontWeight:'700', fontSize:12 } }); export default GradientBtn;
app.js
<View style={{flexDirection:'row',justifyContent:'space-between',marginTop:5}}> <TouchableOpacity> <GradientBtn h={35} w={'24.55%'} name="Open Corrective"/> </TouchableOpacity> <TouchableOpacity> <GradientBtn h={35} w={'24.55%'} name="Open Corrective"/> </TouchableOpacity> <TouchableOpacity> <GradientBtn h={35} w={'24.55%'} name="Open Corrective"/> </TouchableOpacity> <TouchableOpacity> <GradientBtn h={35} w={'24.55%'} name="Open Corrective"/> </TouchableOpacity> </View>
when I remove TouchableOpacity tag from component then the view will ok, but I want touch opacity on that btn when I placed this tag then my view will compress means out the width and didn't see proper btn..
-
Thomas Wang over 5 yearsyou might want to try using
flex: 1
onTouchableOpacity
also, for reference, here's my component library for this: github.com/thomaswangio/react-native-gradient-buttons
-