Category: React Native

Alert confirmation message for sensible actions

19/06/2019 Nicolas Baptista React Native 0 Comments

Hello everyone,

In your application, is it possible that you made a settings page where the user can edit and remove things inside your app. For example, let’s say there is a button to remove definitely the user account and all his data. We can say that this type of operation is sensible and should be verified.

When the user click on the button “Delete my account”, we will display a message of confirmation “Do you really want to remove your account ?”. If he click DELETE, we will remove it, if not, we will close the message. Simple as that.

In our code, we will first import alert :

 import { ... , Alert } from 'react-native';

Then, you we create a function “deleteAccount” called when the “Delete my account” button is pressed :

  <Button onPress={ () => { this.deleteAccount(); } } title="DELETE MY ACCOUNT"/>

Inside deleteAccount, we will put our Alert message :

How to use WebSockets • React Native

02/04/2019 Nicolas Baptista Perl, React Native 0 Comments

It can be very simple to do GET, POST, PUT and DELETE requests with React Native (see the official Expo documentation https://docs.expo.io/versions/latest/react-native/network/), therefore, those requests are not interesting when we want to do a chat for example (we can talk about “real time events”).

To do it, you need first to create a WebSocket server. It won’t be on the phone, because usually the phone is only the client.

You can create a simple WebSocket server with this Perl library : https://metacpan.org/pod/Net::WebSocket::Server
Only few lines are necessary to make your WebSocket server running.


In your App.js, you can add the IP of your server in a global variable at the top of your file :

Then in your constructor you can add the WebSocket( WS_ADRESS_SERVER_STRING ) Javascript object, so the websockets will be listen when the application is starting.
You can add the 4 events onopen, onmessage, onerror, onclose :

Now you should add ws.send() to send data inside your code or inside your UI with onPress.

Hide and show blocks of content • React Native

01/04/2019 Nicolas Baptista React Native 0 Comments

While creating single page application or making dynamic forms, is it important to show or hide parts that we want the user to see or not.
We simply do this by adding variables in the constructor of the class :

this.level and this.status

Inside functions of the class we will modify the variables this.level and this.status.
We will display content by testing the value of those variables.
To do it, we will add { this.VARIABLE == VALUE && before the content we want and } at the end. For example :

How to get input text • React Native

31/03/2019 Nicolas Baptista React Native 0 Comments

In this article we will see how to get the user input text inside the <TextInput>, very simply.
In this example, we will be using a login page :

Login page

Add the reference for each TextInput at the top of your login class, inside the constructor :

Add references with React.createRef()

Then, put the ref tag inside the each TextInput.
Attribute this ref tag to each variable that have been referenced. Here is the example with this.logInput :

add the ref tag

Now you can get the value by using this.logInput.current._lastNativeText inside our code.

Nicolas BAPTISTA