Refactor Input Component

[Monte9]

Major Breaking changes

Please see the /example app for the above implementation.

Really simple and useful API:

Input.propTypes = {
  containerStyle: ViewPropTypes.style,

  icon: PropTypes.object,
  iconContainerStyle: ViewPropTypes.style,

  inputStyle: PropTypes.object,

  displayError: PropTypes.bool,
  errorStyle: PropTypes.object,
  errorMessage: PropTypes.string,
};

Also handles 3 TextInput functions:

this.input.focus();
this.input.blur();
this.input.clear();

[Monte9]

/cc @binoy14 @iRoachie @nonotest

[Monte9]

this is the file that needs to be reviewed.

[Monte9]

Also here are some cool UI designs to port over using RNE: https://www.pinterest.com/timoa/mobile-ui-logins/

$50 🤑 for anyone wanting to contribute and create an entire screen

[iRoachie]

@Monte9 Maybe select some, out of the bunch?

[Monte9]

@iRoachie that's a good point. Here are the ones that I think look good/can be a bit challenging to implement.

1. https://dribbble.com/shots/2186079-Sign-In-Screen/attachments/403389
2. https://dribbble.com/shots/2782171-Mobile-App-SIGN-IN-screen-prototype/attachments/568100
3. https://dribbble.com/shots/2580030-Sign-up/attachments/512793
4. https://www.inspirationde.com/image/70204/
5. https://www.pinterest.com/pin/419327415279744828/

[iRoachie]

@Monte9 Is it only the text fields you're interested in?

[Monte9]

Ideally, the whole view. Any of those can easily be recreated with the refactored Button component, Input component, bg image, and flex.

For instance, here's one I created:

[iRoachie]

@Monte9 Oh so screens to put in the showcase? I can make them, just wondering what was reasoning behind it.

[Monte9]

@iRoachie exactly. The idea is to help developers bootstrap their RN app can by giving them an "unfair" advance as they can literally copy a screen from our showcase app and built on top of it.

And on the flip side, any dev that creates these screens and contributes back to RNE, will be getting paid $50/screen for it. So it's a win-win.

It would be awesome if you can create the first screen and kick this idea off. 😉

[iRoachie]

Will take a jab after release 0.14

[Monte9]

@xavier-villelegier @martinezguillaume is this something you guys would be interested in? ^^

[xavier-villelegier]

@Monte9 Sure, we'll try to look into it this week. It can be a good showcase of what can be done with RNE. On which branch should we be based to have those new components (input_v1/button_v1) ? The idea is to put these screens in the new example app ?

[Monte9]

Alright, the Input v1 API looks pretty solid to me. I was able to create a pretty nice looking input field with it for login. (see updated image above)

Also there are lots of opportunities to help out with this if anyone is interested. Please see this: https://github.com/react-native-training/react-native-elements/projects/4

Merging this PR into v1

[Monte9]

@xavier-villelegier all the latest changes are on the v1 branch. You can branch off of that as it has the new Button & Input components.

Also the idea is to basically create entire screens for the app (login view/sign up view/feed view/profile view) using RNE v1 so that anyone looking for UI ideas with RN can literally copy and paste the code to get started. Plus it will show them how useful the RNE library is and help them leverage the library the right way.

You can see all the available tasks here: https://github.com/react-native-training/react-native-elements/projects/4

/cc @iRoachie @martinezguillaume ^^

[iRoachie]

@Monte9 Gotcha will chip in after the release. Release notes are fun :D