How to create a React Native app (4)?

How to use env file?

How to control network communication?

Setup react-query

yarn add react-query

import React from 'react'
import Home from './src/screens/Home'
import { QueryClient, QueryClientProvider } from 'react-query'

export default function App() {
  const queryClient = new QueryClient()
  return <QueryClientProvider client={queryClient}><Home /></QueryClientProvider>
}

Rest with axios

• Create axios instance

const axiosInstance = axios.create({
  baseURL: API_BASE_URL,
  timeout: 10000,
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json; charset=utf-8',
  },
});

• Create api request with Promise or Await
  reference:

export const fetchData = (authApiUrl) => {
  const promise = new Promise((resolve, reject) => {
    const success = (response) => {
      resolve(response);
    };

    const fail = (error) => {
      reject(error);
    };

    axiosInstance.get(authApiUrl)
      .then(success)
      .catch(fail);
  });

  return promise;
};

export const fetchData = async (authApiUrl) => {
  const response = await axiosInstance.get(authApiUrl)
  return response
};

Usage

import React from 'react'
import { fetchData } from '../../network'
import { useQuery } from 'react-query'

export default function Home() {

  let test
  const { data, isLoading } = useQuery(
    ['fetchData', 'dataType'],
    () => fetchData(dataType)
  )

  if (isLoading) {
    test = 'Loading...'
  }

  if (data) {
    test = data[0].name
  }

  return (
    <Text>{test}</Text>
  );
}

Debug with Flipper

• Open Setup Doctor to see if configuration is correct
• Open File > Preferences to setup Android SDK location if it’s invalid
  • Path needs to be abosulte path
    ~/Library/Android/sdk Wrong
    /Users/hung/Library/Android/sdk Right
• Then, add Network plugin

How to control navigation?

Use react-navigation

Setup

yarn add @react-navigation/native

yarn add @react-navigation/native-stack

Expo

expo install react-native-screens react-native-safe-area-context

Usage

routing/index.js

import React from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { MainStack } from './components/MainStack'

const Routing = () => {
    return (
        <NavigationContainer>
            <MainStack />
        </NavigationContainer>
    )
}

export default Routing

routing/components/MainStack.js

import React from 'react'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import Home from '../../screens/Home'

const Stack = createNativeStackNavigator();

const MainStack = () => {
    return <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
    </Stack.Navigator>
}

export default MainStack

react-native-screens

• This package is installed with react-navigation v5, v6
• This helps to improve performance of the app, if there is bug relating to this, you can turn it off in root file

import { enableScreens } from 'react-native-screens'

if (!IS_ANDROID) {
  enableScreens(false)
}

How to manage app state?

Use redux and redux-toolkits