Course Title: Building Mobile Applications with React Native Section Title: Local Storage and Device Features Topic: Create an app that utilizes local storage and accesses device features such as the camera or GPS.(Lab topic)

Objective: By the end of this topic, you will be able to create a React Native app that utilizes local storage and accesses device features such as the camera or GPS. You will learn how to use AsyncStorage for local storage and access device features like the camera and GPS.

Prerequisites:

• Basic understanding of React Native and its components
• Familiarity with state management using Redux or React Hooks
• Knowledge of navigation in React Native using React Navigation

Lab Overview: In this lab, you will create a React Native app that allows users to take a photo using the camera, save it to local storage, and display their current location using the GPS. You will use AsyncStorage for local storage and access device features like the camera and GPS.

Step 1: Setting up the Project

• Create a new React Native project using the command npx react-native init CameraApp
• Install the required packages: expo-camera for camera access and react-native-geolocation-service for GPS access
• Link the packages to your project using expo install expo-camera and expo install react-native-geolocation-service

Step Step 2: Accessing the Camera

• Import the Camera component from expo-camera and use it to take a photo
• Use the useCamera hook to access the camera and take a photo
• Save the taken photo to local storage using AsyncStorage

import React, { useState, useEffect } from 'react';
import { View, Button, Text } from 'react-native';
import { Camera } from 'expo-camera';
import * as FileSystem from 'expo-file-system';
import * as Storage from 'expo-storage';

const CameraApp = () => {
  const [hasPermission, setHasPermission] = useState(null);
  const [camera, setCamera] = useState(null);
  const [photo, setPhoto] = useState(null);

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  const takePhoto = async () => {
    if (camera) {
      const photo = await camera.takePictureAsync();
      setPhoto(photo);
      await Storage.saveAsync({
        key: 'photo',
        value: photo,
      });
    }
  };

  return (
    <View>
      {hasPermission === null ? (
        <Text>Requesting camera permission</Text>
      ) : hasPermission === false ? (
        <Text>No access to camera</Text>
      ) : (
        <View>
          <Camera
            style={{ flex: 1 }}
            type={Camera.Constants.Type.back}
            ref={(ref) => {
              setCamera(ref);
            }}
          />
          <Button title="Take Photo" onPress={takePhoto} />
          {photo && (
            <Button title="View Photo" onPress={() => console.log(photo)} />
          )}
        </View>
      )}
    </View>
  );
};

export default CameraApp;

Step 3: Accessing the GPS

• Import the Geolocation component from react-native-geolocation-service and use it to get the current location
• Use the useGeolocation hook to access the GPS and get the current location
• Save the current location to local storage using AsyncStorage

import React, { useState, useEffect } from 'react';
import { View, Button, Text } from 'react-native';
import { Geolocation } from 'react-native-geolocation-service';
import * as Storage from 'expo-storage';

const LocationApp = () => {
  const [location, setLocation] = useState(null);

  useEffect(() => {
    (async () => {
      const location = await Geolocation.getCurrentPosition();
      setLocation(location);
      await Storage.saveAsync({
        key: 'location',
        value: location,
      });
    })();
  }, []);

  return (
    <View>
      {location && (
        <Text>
          Latitude: {location.coords.latitude}, Longitude: {location.coords.longitude}
        </Text>
      )}
    </View>
  );
};

export default LocationApp;

Step 4: Displaying the Photo and Location

• Use the AsyncStorage to retrieve the saved photo and location
• Display the photo and location on the screen

import React, { useState, useEffect } from 'react';
import { View, Button, Text, Image } from 'react-native';
import * as Storage from 'expo-storage';

const DisplayApp = () => {
  const [photo, setPhoto] = useState(null);
  const [location, setLocation] = useState(null);

  useEffect(() => {
    (async () => {
      const photo = await Storage.loadAsync({
        key: 'photo',
      });
      setPhoto(photo);
      const location = await Storage.loadAsync({
        key: 'location',
      });
      setLocation(location);
    })();
  }, []);

  return (
    <View>
      {photo && (
        <Image source={{ uri: photo.uri }} style={{ width: 200, height: 200 }} />
      )}
      {location && (
        <Text>
          Latitude: {location.coords.latitude}, Longitude: {location.coords.longitude}
        </Text>
      )}
    </View>
  );
};

export default DisplayApp;

Conclusion: In this lab, you learned how to create a React Native app that utilizes local storage and accesses device features such as the camera and GPS. You used AsyncStorage for local storage and accessed device features like the camera and GPS using expo-camera and react-native-geolocation-service. You also learned how to display the saved photo and location on the screen.

Additional Resources:

• Expo Camera: <https://docs.expo.io/versions/latest/sdk/camera/&gt;
• React Native Geolocation Service: <https://github.com/askcodez/react-native-geolocation-service&gt;
• AsyncStorage: <https://docs.expo.io/versions/latest/sdk/async-storage/&gt;

Leave a comment or ask for help if you have any questions or need further clarification on any of the steps.