react-native-really-awesome-button
react-native-really-awesome-button copied to clipboard
Problem with the colors?
Hi! Is there a bug with colors?
Because I cannot get the proper colors, despite I enter them correctly. My goal button is this:
However, I get this, I believe it is the use of the react-native-linear-gradient
that fails? Also the text "Play" is not centered.
This is my component:
<AwesomeButton
// size="small"
// type="primaryFlat"
activityColor="#FFFFFF"
activeOpacity={1}
// backgroundColor="red"
backgroundDarker="#143254"
backgroundShadow="#143254"
backgroundPlaceholder="#143254"
backgroundProgress="#C0C0C0"
borderColor="#143254"
borderRadius={5}
borderWidth={3}
height={50}
width={null}
paddingHorizontal={20}
paddingTop={0}
paddingBottom={0}
stretch={false}
disabled={false}
raiseLevel={3}
// ExtraContent={null}
springRelease={true}
onPress={null}
progress={false}
progressLoadingTime={3000}
textColor="#FFFFFF"
textLineHeight={20}
textSize={14}
textFontFamily="Proxima Nova Regular"
ExtraContent={<LinearGradient colors={['#143254', '#3D638E', '#3D638E']} />}
>
{text}
</AwesomeButton>
Thanks!
Note that I also tried your example that uses linear-gradient
and none of the colors appeared:
function Button() {
return (
<AwesomeButton
ExtraContent={
<LinearGradient
colors={["#4C63D2", "#BC3081", "#F47133", "#FED576"]}
/>
}
>
<Text>Instagram</Text>
</AwesomeButton>
);
}
I put it inside and didn't use ExtraContent. Did you find any solution?
<AwesomeButtonRick > <LinearGradient colors={["#4C63D2", "#BC3081", "#F47133", "#FED576"]}> <Text style={{ fontSize: 18, fontFamily: 'Gill Sans', textAlign: 'center', margin: 10, color: '#ffffff', backgroundColor: 'transparent', }}> Instragram </Text> </LinearGradient> </AwesomeButtonRick>
other :
style={{...StyleSheet.absoluteFillObject}} in LinearGradient
<LinearGradient style={{...StyleSheet.absoluteFillObject}} start={{ x: 0.0, y: 0.25 }} end={{ x: 0.5, y: 1.0 }} colors={["#4C63D2", "#BC3081", "#F47133", "#FED576"]} />