Build a React Native Selfie Camera Timer from Scratch

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:

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:

import React from 'react';
import { TouchableOpacity, Text } from 'react-native';

const Button = ({ title, onPress }) => (
{title}

);

export default Button;

Implementing the Timer

Create a new component Timer.js in the src/components directory:

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 (

Timer: {displayTimer}
<FlatList
data={[{ key: '1' }, { key: '2' }, { key: '3' }]}
renderItem={({ item }) => (
{item.key}

)}
/>

);
};

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:

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 (



<button title="Take Picture"></button>

);
};

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.