Building a Selfie Camera Timer with React Native
In this article, we’ll create a selfie camera timer from scratch using React Native. We’ll connect the timer to the device’s camera, allowing users to take photos with a delay. By the end of this tutorial, you’ll have a fully functional selfie camera timer app.
Prerequisites
To follow along, you’ll need basic knowledge of JavaScript and React Native. We’ll be using Expo, an open-source platform that simplifies React Native development.
Initializing the Project
First, install the Expo client on your machine by running the following command:
npm install -g expo-cli
Then, initialize a new project with:
expo init my-project
Navigate to the newly created project directory:
cd my-project
Install the required dependencies:
npm install expo-camera expo-media-library
Start the development server:
npx expo start
Accessing the Device’s Camera
Create a custom Hook called usePermission in a new file src/usePermission.js:
“`jsx
import { useEffect, useState } from ‘react’;
import { Camera, MediaLibrary } from ‘expo’;
const usePermission = () => {
const [hasCameraPermissions, setHasCameraPermissions] = useState(false);
useEffect(() => {
const requestPermissions = async () => {
const { status } = await MediaLibrary.requestPermissionsAsync();
if (status === ‘granted’) {
const { status: cameraStatus } = await Camera.requestCameraPermissionsAsync();
if (cameraStatus === ‘granted’) {
setHasCameraPermissions(true);
}
}
};
requestPermissions();
}, []);
return hasCameraPermissions;
};
export default usePermission;
“`
Taking and Saving Pictures
Create a new component Button.js in the src/components directory:
“`jsx
import React from ‘react’;
import { TouchableOpacity, Text } from ‘react-native’;
const Button = ({ title, onPress }) => (
);
export default Button;
“`
Implementing the Timer
Create a new component Timer.js in the src/components directory:
“`jsx
import React, { useState, useEffect } from ‘react’;
import { View, Text, FlatList } from ‘react-native’;
const Timer = () => {
const [timer, setTimer] = useState(0);
const [displayTimer, setDisplayTimer] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setDisplayTimer(displayTimer – 1);
if (displayTimer === 0) {
clearInterval(interval);
}
}, 1000);
return () => clearInterval(interval);
}, [displayTimer]);
const handleTimerPress = () => {
setTimer(timer + 1);
};
return (
)}
/>
);
};
export default Timer;
“`
Connecting the Timer to the Camera
In the App.js file, import the Timer component and add it to the camera view:
“`jsx
import React from ‘react’;
import { View, Text } from ‘react-native’;
import Camera from ‘./src/Camera’;
import Timer from ‘./src/components/Timer’;
const App = () => {
const [hasCameraPermissions, setHasCameraPermissions] = useState(false);
const [timer, setTimer] = useState(0);
const handleTakePicture = async () => {
if (hasCameraPermissions) {
const photo = await Camera.takePictureAsync();
console.log(photo);
}
};
return (
);
};
export default App;
“`
This is just a basic implementation of a selfie camera timer using React Native. You can customize the app to fit your needs and add more features as required.