11/7/2023 0 Comments React stopwatch timerInside the src directory I created the usePermission.jsx file: // scr/usePermission. For this purpose, I created a custom Hook called usePermission in a newly created directory, src. The first thing we need to address is gaining access to both the device’s camera and the user’s media library. Accessing the device’s camera with expo-camera Then, run npx expo start to start the development server. Run npm i expo-media-library expo-camera in your terminal to install these dependencies. In stopwatch time starts from zero and runs until we stop it but Timer is the exact opposite. The expo-media-library takes care of saving the pictures. A Stopwatch is a special watch that can be used to count the time. With the help of expo-camera, we can access the device’s camera and take photos. Then, go to the newly created project with cd my-project.Īs a first step, let’s install some dependencies to help us develop this app: expo-camera and expo-media-library. Navigate to the place where you want to store this project and run expo init my-project to initialize the project. To install the Expo client on your machine, run the following command in your shell: npm i -global expo-cli Initializing the project This is an open source platform that aims to enhance React Native by providing all the JavaScript APIs needed for the most common use cases. In order to follow along with this tutorial, some basic knowledge of JavaScript and React Native would be helpful. Accessing the device’s camera with expo-camera.The source code of this project can be found on my GitHub. There are 10 other projects in the npm registry using react-native-timer. Start using react-native-timer in your project by running npm i react-native-timer. Latest version: 1.3.6, last published: 4 years ago. Here, you can find a link to a video that demonstrates the functionality and appearance of the demo app. something to manage timers in react native. For added complexity, the user is given the opportunity to create and save custom durations as their timers. In this article, we’re going to build a stopwatch in React Native and connect it to the device’s camera to create a selfie camera timer from scratch. Build a selfie camera timer: React Native stopwatch example I’m enthusiastic about everything concerning web, mobile, and full-stack development. Kevin Tomas Follow My name is Kevin Tomas, and I’m a 26-year-old Masters student and a part-time software developer at Axel Springer National Media & Tech GmbH & Co.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |