{"id":57206,"date":"2018-12-18T02:33:51","date_gmt":"2018-12-18T09:33:51","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2018\/12\/build-cross-platform-apps-with-react-native\/"},"modified":"2018-12-18T02:33:51","modified_gmt":"2018-12-18T09:33:51","slug":"build-cross-platform-apps-with-react-native","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2018\/12\/build-cross-platform-apps-with-react-native\/","title":{"rendered":"Build cross-platform apps with React Native"},"content":{"rendered":"

There used to be a time when developers would need to learn Swift\/Objective C to build an iOS app, or Java if they wanted to build an Android app. We have now reached an exciting time where web developers can use their existing skills to build both websites and apps without having to learn a completely new language.<\/p>\n

React Native is a JavaScript library developed by Facebook. It was released back in 2013 and has helped shape apps like Skype, Bloomberg, Wix and many more<\/a>. Not only can you use your existing knowledge of JavaScript but you can also use the same codebase to build for both iOS and Android.<\/p>\n

Building an app in React Native with this tutorial is a great starting point for your own app, and it could easily be improved upon by adding more screens, displaying errors on the front end and much more. You can get the project files you need at Github<\/a>.<\/p>\n

Not quite what you’re looking for? See our post full of different tutorials on how to build an app<\/a>.<\/p>\n

01. Get started<\/h3>\n

To get started building your React Native project, you will need to make sure that you have Node.js<\/a> installed. You can then install the create-react-native-app<\/strong> command line utility by opening a new a terminal window and running the following command:<\/p>\n

You can then create your new project by running the following command:<\/p>\n

You will then need to navigate to your folder via the command line and start the development server.<\/p>\n

You can then begin working on your app by opening the App.js file using a code editor.<\/p>\n

02. Run your app<\/h3>\n
\n

\"QR<\/p>

\n

Since you used create-react-native-app via the command line, you can use the Expo client app to test your application<\/p>\n<\/figcaption><\/figure>\n

Since you used create-react-native-app<\/strong> via the command line to build your project, you can use the Expo client app to test your application. All you need to do is download the app from the iOS App Store or Google Play Store and then scan the QR code from inside the terminal. You will need to make sure your device is on the same Wi-Fi network as your computer. You can also use the iPhone or Android simulator, if you have Xcode<\/a> or Android Studio<\/a> installed.<\/p>\n

03. Create a basic login<\/h3>\n
\n

\"3<\/p>

\n

We\u2019re now going to create a fully functional login screen so users can login, register and sign out<\/p>\n<\/figcaption><\/figure>\n

Let\u2019s start by adding something very basic. To add some text to your application, you will need to type:<\/p>\n

Working with styles is very similar to CSS. If you wanted to add a style to the line of text that you just created, you would simply edit that line of text to:<\/p>\n

You can then add the text style under Stylesheet.create.<\/strong><\/p>\n

We are now going to create a fully functional login screen so that users can login, register for a new account, sign out and even reset their password. This is something you will see a lot in mobile apps, so it lays down a nice foundation for future projects.<\/p>\n

04. Set up Firebase and NativeBase<\/h3>\n
\n

\"Firebase<\/p>

\n

Firebase is what we will use for our user authentication. We will need to setup the Firebase config just underneath the import commands<\/p>\n<\/figcaption><\/figure>\n

We are going to start by installing three more libraries. The first is called Firebase<\/a>, which is what we will use for our user authentication, and the second is called NativeBase, which is a UI component library. The last one is called React Native Dialog Input, which enables us to display a dialogue box where users can enter text. Navigate to your project folder using the command line and enter the below:<\/p>\n

Make sure you import Firebase, NativeBase and React Native Dialog Input at the top of the App.js file.<\/p>\n

Next, we will need to setup the Firebase config just underneath the import commands. You will need to go and setup an account with Firebase to get your various settings. You can do this by registering at Firebase<\/a> and creating a new project. Remember that you will need to enable email and password authentication from the dashboard.<\/p>\n

05. Build the container<\/h3>\n
\n

\"Three<\/p>

\n

We will also create three buttons: one to login, one to sign up and the final button is for when a user wants to reset their password<\/p>\n<\/figcaption><\/figure>\n

The next step is to remove the <\/strong>section underneath render()<\/strong>, which was automatically placed there by React upon creating the project, and replace it with the following container to setup the login form. The form will contain a label and an input field for both an email address and password. We will also create three buttons: one to login, one to sign up and the final button is for when a user wants to reset their password. We will set a margin at the top of each button to 10 pixels and set the font colour to white.<\/p>\n

06. Set up the events<\/h3>\n

Firstly, we need to set up a constructor to set up the default state. The email<\/strong> and password<\/strong> default values will be set to empty. We will also set the value of isDialogVisible<\/strong> to false<\/strong>: this is going to be used for our password reset dialog box later on.<\/p>\n

We will now add onChangeText<\/strong> events to both of our text inputs, so that every time the user types something into the email or password fields, it will update the state of both email<\/strong> and password<\/strong> to that value.<\/p>\n

We also need to add onPress<\/strong> functions to our login, sign-up and forgotten password buttons. Each one will call a different function. The login button will call a function called loginUser<\/strong>, the sign-up button will call signUpUser<\/strong> and the forgotten password button will call forgotPassword<\/strong>.<\/p>\n

07. Make sign-up function<\/h3>\n

It\u2019s now time to begin building out our functions. We will begin with the sign-up function (signUpUser<\/strong>), which will attempt to create a new user inside Firebase; if it succeeds, then we will display an onscreen alert to inform the user that their account has been set up. However, if the user chooses a password that is less six characters in length, it will prompt them to enter something that is a minimum of six characters long. Finally, we need to add the catch error handler, so that if the sign-up attempt fails through Firebase, we will print the error message to the console.<\/p>\n

07. Add login function<\/h3>\n
\n

\"Sign<\/p>

\n

If the user successfully signs in, it will display an alert to say the sign in was successfully, along with a sign out button<\/p>\n<\/figcaption><\/figure>\n

Next, we will add the login (loginUser<\/strong>) function. This will try to log in the user with their email and password. If the user successfully signs in, it will display an alert to say that sign-in was successful, along with a sign out button. Once again, we will need to make sure we add a catch error handler in case there is an error with the login attempt.<\/p>\n

08. Add sign out function<\/h3>\n

It\u2019s now on to the sign-out function, which ensures that the user is signed out once they click the sign out button on the alert.<\/p>\n

09. Create forgot password function<\/h3>\n

To finish off our project, we are going to build out a function that will enable the user to easily reset their password in case they\u2019ve either forgotten it or want to change it for some other reason. First, we need to create the dialog box just outside of our <\/p>\n

<\/strong>tags.<\/p>\n

We now need to make the dialog box appear, so we will create the forgotPassword<\/strong> function, which will change the state of isDialogVisible<\/strong> to true.<\/p>\n

The dialog box will prompt the user to enter their email address. If the user clicks the cancel button, then the box will close, as it changes the state of the isDialogVisible<\/strong> back to false<\/strong>. If the user clicks the submit button then it will call a function called sendReset<\/strong> along with the email address.<\/p>\n

Inside our sendReset<\/strong>, we will use the email address to create the Firebase sendPasswordResetEmail<\/strong> request.<\/p>\n

This article was originally published in issue 312 of <\/em>net<\/em><\/a> magazine. Buy <\/em>issue 312<\/em><\/a> or <\/em>subscribe here<\/em><\/a>.<\/em><\/p>\n

Related articles:<\/strong><\/p>\n