React Native Data Management

📱 Works only on a smartphone.

🐛 This excercice is mandatory especially if you have Xiaomi|Huawei because you will encounter weird bugs.

What you will learn

  • Add offline feedback message
  • Use an advanced React Pattern: Context API

👾 Before we start the exercise

👨‍🚀 Exercise 2

Offline Example

  • Install the library
yarn add react-native-offline
import React from 'react';
import { Text, View } from 'react-native';
import AppLayout from './AppLayout';

const App = () => {
  // Query data with fetchAsync
  // const { status, error, data } = useQuery('starships', () =>
  //   fetchAsync(`https://swapi.dev/api/starships/`)
  // );

  return (
    <AppLayout title="Starships">
      <Text></Text>
    </AppLayout>
  );
};

export default App;
  • Go to AppLayout.tsx and add import { NetworkProvider } from 'react-native-offline';
  • Create a new file Offline.tsx and copy this component.
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { ActivityIndicator, Colors, Text } from 'react-native-paper';

const Offline = () => {
  return (
    <View>
      <Text>{/* Add a `NetworkConsumer` and `ActivityIndicator`  */}</Text>
    </View>
  );
};

export default Offline;

const styles = StyleSheet.create({
  container: {
    padding: 20,
    marginHorizontal: 20,
    position: 'absolute',
    top: 55,
    width: '90%',
    borderRadius: 10,
    backgroundColor: Colors.red100,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  message: {
    color: Colors.red800,
  },
});
  • On Offline.tsx Add a message when the user is not connected

Hint: You can use the test !isConnected to check if you are online.