From 28e5ceb625380f8c836d065983becdd2544801a9 Mon Sep 17 00:00:00 2001 From: Dongmin Yu Date: Sun, 20 Aug 2023 03:28:00 +0900 Subject: [PATCH] =?UTF-8?q?test:=20=E2=9A=A1=EF=B8=8F=20example=20?= =?UTF-8?q?=EC=95=B1=20=EC=84=A4=EC=A0=95=20=EC=97=85=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=8A=B8,=20=EC=98=88=EC=A0=9C=20=EB=A6=AC=EB=93=9C=EB=AF=B8?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/.watchmanconfig | 2 +- example/Gemfile | 4 +- example/README.md | 77 ++++++++++++++++++++++++++++++++++ example/babel.config.js | 12 +----- example/jest.config.js | 3 ++ example/metro.config.js | 22 ++++++---- example/react-native.config.js | 5 ++- example/src/App.tsx | 30 +++++++------ example/src/LogCat.tsx | 6 +-- example/src/permission.ts | 29 +++++++------ 10 files changed, 135 insertions(+), 55 deletions(-) create mode 100644 example/README.md create mode 100644 example/jest.config.js diff --git a/example/.watchmanconfig b/example/.watchmanconfig index 9e26dfe..0967ef4 100644 --- a/example/.watchmanconfig +++ b/example/.watchmanconfig @@ -1 +1 @@ -{} \ No newline at end of file +{} diff --git a/example/Gemfile b/example/Gemfile index 567e598..1fa2c2e 100644 --- a/example/Gemfile +++ b/example/Gemfile @@ -1,6 +1,6 @@ source 'https://rubygems.org' # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version -ruby File.read(File.join(__dir__, '.ruby-version')).strip +ruby ">= 2.6.10" -gem 'cocoapods', '~> 1.11', '>= 1.11.3' +gem 'cocoapods', '~> 1.12' diff --git a/example/README.md b/example/README.md new file mode 100644 index 0000000..45a9cbb --- /dev/null +++ b/example/README.md @@ -0,0 +1,77 @@ +# Getting Started + +This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli). + +> **Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding. + +## Step 1: Start the Metro Server + +First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native. + +To start Metro, run the following command from the _root_ of your React Native project: + +```bash +# using npm +npm start + +# OR using Yarn +yarn start +``` + +## Step 2: Start your Application + +Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app: + +### For Android + +```bash +# using npm +npm run android + +# OR using Yarn +yarn android +``` + +### For iOS + +```bash +# using npm +npm run ios + +# OR using Yarn +yarn ios +``` + +If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly. + +This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively. + +## Step 3: Modifying your App + +Now that you have successfully run the app, let's modify it. + +1. Open `App.tsx` in your text editor of choice and edit some lines. +2. For **Android**: Press the R key twice or select **"Reload"** from the **Developer Menu** (Ctrl + M (on Window and Linux) or Cmd ⌘ + M (on macOS)) to see your changes! + + For **iOS**: Hit Cmd ⌘ + R in your iOS Simulator to reload the app and see your changes! + +You've successfully run and modified your React Native App. :partying_face: + +### Now what? + +- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps). +- If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started). + +### Troubleshooting + +If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page. + +### Learn More + +To learn more about React Native, take a look at the following resources: + +- [React Native Website](https://reactnative.dev) - learn more about React Native. +- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment. +- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**. +- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts. +- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native. diff --git a/example/babel.config.js b/example/babel.config.js index 0814aca..ec56a5e 100644 --- a/example/babel.config.js +++ b/example/babel.config.js @@ -13,22 +13,12 @@ module.exports = { }, }, ], + '@babel/plugin-proposal-export-namespace-from', [ 'react-native-reanimated/plugin', { relativeSourceLocation: true, }, ], - [ - 'module:react-native-dotenv', - { - envName: 'APP_ENV', - moduleName: '@env', - path: '.env', - safe: true, - allowUndefined: false, - verbose: false, - }, - ], ], }; diff --git a/example/jest.config.js b/example/jest.config.js new file mode 100644 index 0000000..8eb675e --- /dev/null +++ b/example/jest.config.js @@ -0,0 +1,3 @@ +module.exports = { + preset: 'react-native', +}; diff --git a/example/metro.config.js b/example/metro.config.js index 5d75053..650e533 100644 --- a/example/metro.config.js +++ b/example/metro.config.js @@ -1,22 +1,28 @@ +const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config'); const path = require('path'); const escape = require('escape-string-regexp'); const exclusionList = require('metro-config/src/defaults/exclusionList'); const pak = require('../package.json'); const root = path.resolve(__dirname, '..'); +const modules = Object.keys({ ...pak.peerDependencies }); -const modules = Object.keys({ - ...pak.peerDependencies, -}); - -module.exports = { - projectRoot: __dirname, +/** + * Metro configuration + * https://facebook.github.io/metro/docs/configuration + */ +const config = { watchFolders: [root], // We need to make sure that only one version is loaded for peerDependencies // So we block them at the root, and alias them to the versions in example's node_modules resolver: { - blacklistRE: exclusionList(modules.map((m) => new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`))), + blacklistRE: exclusionList( + modules.map( + (m) => + new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`) + ) + ), extraNodeModules: modules.reduce((acc, name) => { acc[name] = path.join(__dirname, 'node_modules', name); @@ -33,3 +39,5 @@ module.exports = { }), }, }; + +module.exports = mergeConfig(getDefaultConfig(__dirname), config); diff --git a/example/react-native.config.js b/example/react-native.config.js index 37995f2..95dd3e1 100644 --- a/example/react-native.config.js +++ b/example/react-native.config.js @@ -1,10 +1,11 @@ const path = require('path'); const pak = require('../package.json'); -/** @type {import('@react-native-community/cli-types').Config} */ module.exports = { dependencies: { - ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}), + ...(process.env.NO_FLIPPER + ? { 'react-native-flipper': { platforms: { ios: null } } } + : {}), [pak.name]: { root: path.join(__dirname, '..'), }, diff --git a/example/src/App.tsx b/example/src/App.tsx index a950b5b..916b4f0 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import * as React from 'react'; import { Button, Platform, SafeAreaView, StyleSheet, View } from 'react-native'; import { isSensorWorking, @@ -8,7 +8,10 @@ import { stopStepCounterUpdate, type ParsedStepCountData, } from '@dongminyu/react-native-step-counter'; -import { getBodySensorPermission, getStepCounterPermission } from './permission'; +import { + getBodySensorPermission, + getStepCounterPermission, +} from './permission'; import CircularProgress from 'react-native-circular-progress-indicator'; import LogCat from './LogCat'; @@ -31,7 +34,8 @@ const initState = { type AdditionalInfo = Partial; /** - * This module represents the root component of the app. + * @returns {React.ReactComponentElement} - Returns Application Component. + * @description This module represents the root component of the app. * 1. It imports the necessary components and libraries. * 2. It defines the initial state of the additionalInfo state. * 3. It defines the functions that will be used in the app. @@ -39,17 +43,6 @@ type AdditionalInfo = Partial; * 5. It uses the useEffect hook to run the isPedometerSupported function when the component mounts. * 6. It uses the useEffect hook to call the startStepCounter function when the component mounts. * 7. It returns the JSX code for the app. - * - * @module App - * @requires react - * @requires react-native - * @requires react-native-permissions - * @requires react-native-svg - * @requires react-native-reanimated - * @requires react-native-gesture-handler - * @requires react-native-circular-progress-indicator - * @returns {React.ReactComponentElement} - Returns Application Component. - * @example */ export default function App(): JSX.Element { const [loaded, setLoaded] = React.useState(false); @@ -57,7 +50,8 @@ export default function App(): JSX.Element { const [granted, setGranted] = React.useState(false); const [sensorType, setSensorType] = React.useState('NONE'); const [stepCount, setStepCount] = React.useState(0); - const [additionalInfo, setAdditionalInfo] = React.useState(initState); + const [additionalInfo, setAdditionalInfo] = + React.useState(initState); /** * Get user's motion permission and check pedometer is available. @@ -156,7 +150,11 @@ export default function App(): JSX.Element { inActiveStrokeColor="#4c6394" inActiveStrokeOpacity={0.5} inActiveStrokeWidth={40} - subtitle={additionalInfo.calories === '0 kCal' ? '' : additionalInfo.calories} + subtitle={ + additionalInfo.calories === '0 kCal' + ? '' + : additionalInfo.calories + } activeStrokeWidth={40} title="Step Count" titleColor="#555" diff --git a/example/src/LogCat.tsx b/example/src/LogCat.tsx index 991e6cf..d2b8f83 100644 --- a/example/src/LogCat.tsx +++ b/example/src/LogCat.tsx @@ -6,8 +6,7 @@ import { NativeEventEmitter, NativeModules } from 'react-native'; const eventEmitter = new NativeEventEmitter(NativeModules.RNStepCounter); /** - * A component that displays the logs from the native module. - * + * @description A component that displays the logs from the native module. * @param {object} props - View Component Props but only has one property. * @param {boolean} props.triggered - A boolean that indicates whether the native module is loaded. * @returns {React.ReactComponentElement} Logger Component. @@ -83,11 +82,10 @@ const formatLog = (logs: string) => { }; /** - * This function takes a JSON string and returns an array of React elements that + * @description This function takes a JSON string and returns an array of React elements that * display the key and value of each property in the JSON string. The key is * displayed in a dark gray color, and the value is displayed in a light gray * color. The value is also formatted as a string, boolean, or number. - * * @param {string} json - JSON formatted String. * @returns {React.ReactElement[]} - Formatted Console Text Element. * @example diff --git a/example/src/permission.ts b/example/src/permission.ts index 3c7594b..309cabf 100644 --- a/example/src/permission.ts +++ b/example/src/permission.ts @@ -1,4 +1,11 @@ -import { check, openSettings, type PermissionStatus, PERMISSIONS, request, RESULTS } from 'react-native-permissions'; +import { + check, + openSettings, + type PermissionStatus, + PERMISSIONS, + request, + RESULTS, +} from 'react-native-permissions'; import { Platform, type Rationale } from 'react-native'; import appInformation from '../package.json'; @@ -10,12 +17,14 @@ import appInformation from '../package.json'; const bodySensor = PERMISSIONS.ANDROID.BODY_SENSORS_BACKGROUND; const activityRecognition = PERMISSIONS.ANDROID.ACTIVITY_RECOGNITION; const motion = PERMISSIONS.IOS.MOTION; -type Permission = typeof bodySensor | typeof activityRecognition | typeof motion; +type Permission = + | typeof bodySensor + | typeof activityRecognition + | typeof motion; /** - * This function checks the result and returns true if the permission is granted + * @description This function checks the result and returns true if the permission is granted * It is used to check the result of the permission request - * * @param {PermissionStatus} result - Permission Request's Result. * @returns {boolean} - Returns if the permission is granted. */ @@ -47,11 +56,10 @@ const getRational = (permission: Permission): Rationale => { }; /** - * This function requests permission to access the user's location. + * @description This function requests permission to access the user's location. * If the user has already granted permission, it returns true. * If the user has not granted permission, it prompts the user to grant permission. * It uses the following parameters: - * * @param {Permission} permission - The permission to request. * @returns {boolean} - It returns a boolean value. */ @@ -61,10 +69,9 @@ const requestPermission = async (permission: Permission) => { }; /** - * This code checks for the permission passed in as an argument + * @description This code checks for the permission passed in as an argument * and returns a boolean that indicates whether or not the permission * is granted. - * * @param {Permission} permission - The Permission to check. * @returns {Promise} - Boolean value whether permission is granted or not. */ @@ -73,10 +80,9 @@ const checkPermission = async (permission: Permission) => { }; /** - * If permission has not been granted, the user is prompted to grant permission + * @description If permission has not been granted, the user is prompted to grant permission * If the user has denied permission, the user is redirected to the app's settings page * After that, check the permissions status and return. - * * @returns {Promise} - A boolean indicating whether the user has granted permission to access the device's step counter. */ export const getStepCounterPermission = async () => { @@ -89,8 +95,7 @@ export const getStepCounterPermission = async () => { }; /** - * This function ask a permission for the app to access the device's body sensor data. - * + * @description This function ask a permission for the app to access the device's body sensor data. * @returns {Promise} - Returns true if the user has granted permission for the body sensor data. Otherwise false. */ export async function getBodySensorPermission() {