The Starter App, Part 2: Login screen UI
This tutorial is also available on GitHub (where you can find the source code) and on my personal website.
Please notice that on Medium the code will be posted as an image (created using carbon.now) because the code block and the gist embedding doesn’t work correctly on mobile.
If you’d like to copy & paste the code I’d suggest reading the article on GitHub or on my personal website instead.
See the The Starter App introduction for further info.
In the previous chapter we completed the setup of the development environment so we can finally focus on coding our app.
In this chapter we’ll create the UI of the login screen, starting from the following mockup:
The Button component
The button component is quite often the first component built in a new React-Native project.
We’re not aiming at doing anything fancy here, so let’s start with a simple button that accepts just a label and an onPress prop.
The FormTextInput component
Instead of using the raw React Native TextInput we’ll wrap it in our own component.
Creating your own custom version of the components offered by React Native is more often than not a good practice because it leads to an improved UI consistency and simplifies future refactorings.
The login form UI
Now that all our presentational components are ready we can use them to compose our login screen.
Neat!
That’s it
That’s all for this chapter. In the next one we’ll improve the keyboard support of our login form ⌨️!
