React Native — JavaScript Environment, Network, and Security

React Native is a mobile development that’s based on React that we can use to do mobile development.

In this article, we’ll look at how to use it to create an app with React Native.

JavaScript Environment

React Native runs in an environment that lets us use modern JavaScript features.

In most cases, React Native lets us run with JavaScriptCore, which also powers Safari.

We can use most modern features like for-of, object spread, template literals, spread and rest, modules, async and await, and more.

Also, we can use popular methods like console.log , array methods, object methods, and more.

Timers and InteractionManager

We can use the InteractionManager object to run timers on a separate thread.

This is better than the alternative of using JavaScript timer functions like setTimeout and setInterval in our React Native code.

For example, we can write:

InteractionManager.runAfterInteractions(() => {
  // ...long-running synchronous task...
});

We run runAfterInteractions method with a callback and we can run any long-running synchronous code in the callback.

Networking

We can make HTTP requests with the Fetch API in our React Native app.

For example, we can write:

import React, { useEffect, useState } from 'react';
import { View, StyleSheet, Text } from 'react-native';

export default function App() {
  const [answer, setAnswer] = useState('');

  const fetchData = async () => {
    const res = await fetch('https://yesno.wtf/api');
    const { answer } = await res.json();
    setAnswer(answer);
  }

  useEffect(() => {
    fetchData();
  }, [])

  return (
    <View style={styles.container}>
      <Text>{answer}</Text>
    </View >
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

to make an HTTP request to an API.

We make a request when we load the app with the useEffect callback and an empty array for the 2nd argument.

WebSocket Support

React Native has WebSocket support.

To connect to a socket and listen to the connection, we can write:

const ws = new WebSocket('ws://host.com/path');

ws.onopen = () => {
  ws.send('something');
};

ws.onmessage = (e) => {
  console.log(e.data);
};

ws.onerror = (e) => {
  console.log(e.message);
};

ws.onclose = (e) => {
  console.log(e.code, e.reason);
};

The onopen method is run when we open the connection.

The onmessage method is run when a message is received.

onerror is run when an error occurred.

onclose method is run when the connection is closed.

Security

Like any other kind of apps, we’ve to think about security when we create our React Native app.

We should think about ways to store sensitive data.

To store environment variables, we can use the react-native-dotenv or react-native-config libraries.

We can use them to read things like API keys and other secrets from environment variables.

Secure Storage

To store data securely, we can use the Android Keystore to store items securely.

Also, we can use Encrypted Shared Preferences to store data.

Conclusion

We should think about security when we’re writing React Native apps.

Also, we can use the Fetch API to make HTTP requests from our React Native app.