How Do I create that Button?
I tried the wix ui lib, and I was able to get the border radius and shadow but I cannot set the gradient for the background.
My second approach was to export the design file of the button (svg) to png and pass it to a <ImageBackground /> but that looks really ugly in terms of wrong size. But even when I export it in a really big format, It looks stupid too, so this is not an option for me. Does somebody might know how to get to this?
Try wrapping your button around this lib
https://github.com/react-native-community/react-native-linear-gradient
Try this code
<LinearGradient colors={['#Color1', '##Color2', '##Color3']}
style={styles.YourPaddingStyle}
start={{ y: 0.0, x: 0.0 }}
end={{ y: 0.0, x: 1.0 }}>
<YourButton style={styles.YourButton}>
</YourButton>
</LinearGradient>
You can use the ART Library.
import {
ART
} from 'react-native';
class Circle extends React.Component {
render() {
const {radius, ...rest} = this.props
const circle = ART.Path()
.move(radius, 0)
.arc(0, radius * 2, radius)
.arc(0, radius * -2, radius)
return <ART.Shape {...rest} d={circle} />
}
}
const linearGradient = new LinearGradient({
'0': '#EC6474',
'1': '#7F5CFA'
},
"0", "0", "300", "0"
);
<ART.Surface width={200} height={200}>
<ART.Group x={0} y={0}>
<Circle radius={100} fill={linearGradient} />
</ART.Group>
</ART.Surface>
Result:
You are going to have to play a little bit with the path and also to link the ART library to your project but it is already included in RN.
