React Native Tutorials -3

RN

Welcome to the part-3 of the series. You can find part-2 here. We will start where we left.

First we will learn about Text Input. To enter Text Input in React Native, we use the TextInput component. In this component, we need to give the border and other styles or else, it doesn’t appears.

In the App.js file from the earlier part we have added a TextInput. We are also using the name state variable to store the name.

App.js

The TextInput will look like below on the simulator.

Now, we have many options in TextInput and we can get the complete list from here.

We are changing the keyboard input type, maxlength and also making it a password field.

App.js

Now, we can see a different keyboard and stars when we enter. Also, we can enter only four items.

Now, we will learn about Button, Touchables and Pressable.

In the App.js file, we will add a Button component. It is the most basic way to add a button in React Native.

We are also changing the title of the button depending on a submitted value.

App.js

On checking the button on both iOS simulator and Android emulator, we can see the problem.

It is not showing perfectly on iOS and also not much to style it.

We generally build buttons using TouchableOpacity or TouchableWithoutFeedback, because they have a onPress handler. After that we need to add a View, to style with outline and a Text inside it.

Now, our button is looking awesome at both platform.

React Native recently introduced Pressable component, which have a lot of in-built features to create button.

Here, we are using a hitSlop feature, which is used to have a layer of touch around the button on which click can be registered.

Also, we can have a ripple effect in Android.

Now, we have a nice looking button in both Android and iOS.

I have a very good post on Toast messages on Waldo site. Please refer that to create custom toast messages. You can find it here.

We need to also know to create Modal is React Native and we can learn the same from my blog here.

Now, we will learn to add images in our project. We have created an assests folder and added two images in it. Now, we have created a new code after the Pressable. Here, we showing what the user entered text, along with two images.

One image is been shown when nothing is entered, and the other one is been shown when the user pressed the button.

We are showing the images with the in-built Image tag.

Now, during initial load, we will see the below image.

After the user enters the OTP and presses the button, we will see below.

Now, we will learn to add a background image, in the whole app. Here, we can use the ImageBackground component. For image taken from the url, we need to give source and uri. We can do the same in Image tag also.

App.js

Now, we can see a nice background image in our app.

Lastly, we will learn to create a Custom component. We will take our Pressable button and put in in a seperate file CustomButton.js. We have created it inside a components folder in the root directory.

Here, we are passing the onPress and title as props.

CustomButton.js

Now, in App.js file we will show this component, instead of the Pressable code.

App.js

Our app will still show the button, with all functionalities.

This completes part-3 of the series. The code for the same can be found here.