test: ⚡️ example 앱 설정 업데이트, 예제 리드미 추가

example/.watchmanconfig

@@ -1 +1 @@
-{}
+{}

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'

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 <kbd>R</kbd> key twice or select **"Reload"** from the **Developer Menu** (<kbd>Ctrl</kbd> + <kbd>M</kbd> (on Window and Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (on macOS)) to see your changes!
+
+   For **iOS**: Hit <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> 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.

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,
-      },
-    ],
   ],
 };

example/jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  preset: 'react-native',
+};

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);

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, '..'),
     },

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,33 +34,24 @@ const initState = {
 type AdditionalInfo = Partial<ParsedStepCountData>;
 
 /**
- * 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.
  * 4. It uses the useState hook to define the states that will be used in the app.
  * 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);
   const [supported, setSupported] = React.useState(false);
   const [granted, setGranted] = React.useState(false);
   const [sensorType, setSensorType] = React.useState<SensorName>('NONE');
   const [stepCount, setStepCount] = React.useState(0);
-  const [additionalInfo, setAdditionalInfo] = React.useState<AdditionalInfo>(initState);
+  const [additionalInfo, setAdditionalInfo] =
+    React.useState<AdditionalInfo>(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"

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

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>} - 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<boolean>} - 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<boolean>} - Returns true if the user has granted permission for the body sensor data. Otherwise false.
  */
 export async function getBodySensorPermission() {