Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem with the colors? #57

Open
afilp opened this issue Jan 12, 2021 · 2 comments
Open

Problem with the colors? #57

afilp opened this issue Jan 12, 2021 · 2 comments

Comments

@afilp
Copy link

afilp commented Jan 12, 2021

Hi! Is there a bug with colors?

Because I cannot get the proper colors, despite I enter them correctly. My goal button is this:

image

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.

image

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!

@afilp
Copy link
Author

afilp commented Jan 12, 2021

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>
  );
}

image

@SLAYER-CODE
Copy link

SLAYER-CODE commented Aug 16, 2021

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>
image

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"]} />
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants