Just another registration form with React-Native

Recently I wanted to create a registration form using the Greek locale, and this had to be done in React native. Also this endeavor needed to support a pre-filled state in case the user wanted to edit some of the values.

Don’t be that guy trying to create a form and ending up with a blank screen!

So let’s begin!
The fields I needed to use for the form were the following:

- Name -> (input)
- Surname -> (input)
- Email -> (input)
- Phone number -> (input)
- Date of birth -> (date picker native)
- Terms and Conditions approval -> (checkbox)
- Privacy policy approval -> (checkbox)
- Newsletter approval -> (checkbox)

The only two libraries I used here were momentjs and react-native-elements

If you are working with locales its best to use https://www.npmjs.com/package/moment-with-locales-es6 in order to avoid some pitfalls on Android.

React native elements can be found here: https://react-native-elements.github.io/react-native-elements/

The Language file looked like this (converted to English for ease):

export const Lang = {
RegisterForm: {
name: 'Name', nameError: 'Please add a valid name', surname: 'Surname', surnameError: 'Please add a valid surname', mobile: 'Mobile Phone', mobileError: 'Please add a valid mobile phone', date: 'Date of Birth', dateError: 'Please add a valid date of birth', email: 'Email', emailError: 'Please add a valid email address', terms: 'I accept the Terms and Conditions', GDPA: 'I accept the Privacy Policy', receiveNews: 'I want to receive news', send: 'Send', }}
Photo by Markus Spiske on Unsplash

Let’s dive into the code then.

Our state should look like this:

Initial values and no errors should display when we begin.

Now for the main structure of the JSX

This might look overly complicated and it also includes some conditional rendering code but we’ll see that in a moment.

So basically what we do here is to save each value as it is being typed, and set state, which in turn is being applied to the input.

Let us also add some utility functions (above render):

The main interesting functionality here is the validations function where we check each input value and if it is found to not validate, a specific error which is pulled from our language file is returned and set into state, and again in turn it is automatically set in the appropriate JSX element.

Keep in mind that error messages like this

errorMessage={this.state.emailError}

Will not display if the value is an empty string (which is very convenient)

But wait I did say something about a form initial state, let us see how we handle this. We assume that data are either fetched from async storage/API call or are passed from another view.

So first we need to initialize our view with some data.

Here we receive the type of the view (registration or edit) from the previous view via

navigation.getParam('type', 'registration')

On this state of the view let’s say we don’t want to display the checkboxes for terms, privacy or newsletter so we apply the following conditional code.

Using this and the initialize code above, it will or will not display the checkboxes inside the form depending on the state property type (register/edit)

Photo by Lance Grandahl on Unsplash

Yes I do have for you some complete code. Honestly I don’t envy you having to do so many configurations and scripts and do’s and dont’s with React native so this is the least I could do.

As a final note and having developed a complete App working on both platforms seamlessly, I can say that React Native needs to streamline build configurations, fix the so so many Yoga flex issues between iOS and Android, and either fully embrace some really awesome solutions provided by the community, offer assistance on their OpenSource projects or fully develop their own.
This trend of so many unmaintained projects -offering much needed functionality to RN- needs to somehow end.

Senior software engineer (7linternational.com) with a passion for games (playing and creating). I love the creative part of coding and things that are exciting!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store