Skip to content

Add LinearGradient from Expo to Button #557

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.

Sign up for GitHub

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

Jump to bottom
Merged
Monte9 merged 6 commits into from
Aug 26, 2017
Merged

Add LinearGradient from Expo to Button #557

Monte9 merged 6 commits into from
Aug 26, 2017

Conversation

@martinezguillaume
Copy link
Contributor

@martinezguillaume martinezguillaume commented Aug 18, 2017 •
edited
Loading

First implementation of a LinearGradient button for the v1.

LinearGradient from expo has different props like colors, start, end and locations to play with colors.
You can add this props to linearGradientProps prop.
Of course, this feature is only available for expo user to make it simple to have gradient button.

img_1568

@martinezguillaume martinezguillaume mentioned this pull request Aug 21, 2017
Merged
Monte9
Monte9 reviewed Aug 26, 2017
View reviewed changes
example/v1/buttons/Button.js
const Touchable =
Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
const ButtonContainer = linearGradientProps
? require('expo').LinearGradient
Copy link
Collaborator

@Monte9 Monte9 Aug 26, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd be curious to see what happens when I pass linearGradientProps when not using expo.

Since there is no fallback, I would think this would throw an error. But I am willing to merge it and try it out.

Monte9
Monte9 reviewed Aug 26, 2017
View reviewed changes
Copy link
Collaborator

@Monte9 Monte9 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

@Monte9
Copy link
Collaborator

Monte9 commented Aug 26, 2017

I am curious to try this out. Merging this into v1 and will add an demo to the /example app as well.

Also we need documentation for this. But since the Button component on v1 has a new API, we can write the docs for Button later on. Def a TODO.

Thanks for the PR @martinezguillaume! 💯

@Monte9 Monte9 merged commit 961a5e1 into react-native-elements:v1 Aug 26, 2017
@Monte9
Copy link
Collaborator

Monte9 commented Aug 26, 2017

Beautiful! 😍 I love it!

<Button
  buttonStyle={{ height: 55, width: SCREEN_WIDTH - 40, borderRadius: 30, justifyContent: 'center', alignItems: 'center' }}
  linearGradientProps = {{
    colors: ['rgba(214,116,112,1)', 'rgba(233,174,87,1)'],
    start: [1, 0],
    end: [0.2, 0]
  }}
  text="Message Theresa"
  textStyle={{ fontFamily: 'regular', fontSize: 20, color: 'white', textAlign: 'center' }}
/>

screen shot 2017-08-26 at 12 59 54 am

@Monte9
Copy link
Collaborator

Monte9 commented Aug 26, 2017

If someone can test it's behaviour on non-expo apps, that would be great.
/cc @iRoachie @xavier-villelegier

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Monte9 Monte9 Monte9 left review comments

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@martinezguillaume @Monte9