Upgrade React Native to 0.72.3

.eslintignore

@@ -0,0 +1 @@
+.onedevice/storybook.requires.js

.eslintrc.js

@@ -1,4 +1,75 @@
 module.exports = {
   root: true,
-  extends: '@react-native-community',
+  extends: '@react-native',
+  plugins: ['import'],
+  rules: {
+    // this is for sorting WITHIN an import
+    'sort-imports': ['error', {ignoreCase: true, ignoreDeclarationSort: true}],
+    // this is for sorting imports
+    'import/order': [
+      'error',
+      {
+        groups: [
+          ['external', 'builtin'],
+          'internal',
+          ['sibling', 'parent'],
+          'index',
+        ],
+        pathGroups: [
+          {
+            pattern: '@(react|react-native)',
+            group: 'external',
+            position: 'before',
+          },
+          {
+            pattern: '@components/**',
+            group: 'internal',
+          },
+          {
+            pattern: '@assets/**',
+            group: 'internal',
+          },
+          {
+            pattern: '@contexts/**',
+            group: 'internal',
+          },
+          {
+            pattern: '@styles/**',
+            group: 'internal',
+          },
+          {
+            pattern: '@hooks/**',
+            group: 'internal',
+          },
+          {
+            pattern: '@modules/**',
+            group: 'internal',
+          },
+          {
+            pattern: '@navigators/**',
+            group: 'internal',
+          },
+          {
+            pattern: '@screens/**',
+            group: 'internal',
+          },
+          {
+            pattern: '@app-types/**',
+            group: 'internal',
+          },
+          {
+            pattern: '@utils/**',
+            group: 'internal',
+          },
+        ],
+        pathGroupsExcludedImportTypes: ['internal', 'react'],
+        'newlines-between': 'always',
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: true,
+        },
+      },
+    ],
+    'prettier/prettier': ['error', {endOfLine: 'auto'}],
+  },
 };

.gitignore

@@ -59,3 +59,9 @@ buck-out/
 # Ruby / CocoaPods
 /ios/Pods/
 /vendor/bundle/
+
+# testing
+/coverage
+
+#storybook
+storybook-static

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit 

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no-install lint-staged

.ondevice/main.js

@@ -1,9 +1,8 @@
 module.exports = {
-  stories: ['../components/**/*.stories.?(ts|tsx|js|jsx)'],
+  stories: ['../src/components/**/*.stories.?(ts|tsx|js|jsx)'],
   addons: [
     '@storybook/addon-ondevice-notes',
     '@storybook/addon-ondevice-controls',
     '@storybook/addon-ondevice-backgrounds',
-    '@storybook/addon-ondevice-actions',
   ],
 };

.ondevice/preview.js

@@ -1,5 +1,7 @@
 import {withBackgrounds} from '@storybook/addon-ondevice-backgrounds';
+
 export const decorators = [withBackgrounds];
+
 export const parameters = {
   actions: {argTypesRegex: '^on[A-Z].*'},
   controls: {
@@ -8,9 +10,4 @@ export const parameters = {
       date: /Date$/,
     },
   },
-  backgrounds: [
-    {name: 'plain', value: 'white', default: true},
-    {name: 'warm', value: 'hotpink'},
-    {name: 'cool', value: 'deepskyblue'},
-  ],
 };

.ondevice/storybook.requires.js

@@ -6,50 +6,43 @@ import {
   addParameters,
   addArgsEnhancer,
   clearDecorators,
-} from "@storybook/react-native";
+} from '@storybook/react-native';
 
 global.STORIES = [
   {
-    titlePrefix: "",
-    directory: "./components",
-    files: "**/*.stories.?(ts|tsx|js|jsx)",
+    titlePrefix: '',
+    directory: './src/components',
+    files: '**/*.stories.?(ts|tsx|js|jsx)',
     importPathMatcher:
-      "^\\.[\\\\/](?:components(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$",
+      '^\\.[\\\\/](?:src[\\\\/]components(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$',
   },
 ];
 
-import "@storybook/addon-ondevice-notes/register";
-import "@storybook/addon-ondevice-controls/register";
-import "@storybook/addon-ondevice-backgrounds/register";
-import "@storybook/addon-ondevice-actions/register";
+import '@storybook/addon-ondevice-notes/register';
+import '@storybook/addon-ondevice-controls/register';
+import '@storybook/addon-ondevice-backgrounds/register';
 
-import { argsEnhancers } from "@storybook/addon-actions/dist/modern/preset/addArgs";
-
-import { decorators, parameters } from "./preview";
+import {decorators, parameters} from './preview';
 
 if (decorators) {
   if (__DEV__) {
     // stops the warning from showing on every HMR
-    require("react-native").LogBox.ignoreLogs([
-      "`clearDecorators` is deprecated and will be removed in Storybook 7.0",
+    require('react-native').LogBox.ignoreLogs([
+      '`clearDecorators` is deprecated and will be removed in Storybook 7.0',
     ]);
   }
   // workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185
   clearDecorators();
-  decorators.forEach((decorator) => addDecorator(decorator));
+  decorators.forEach(decorator => addDecorator(decorator));
 }
 
 if (parameters) {
   addParameters(parameters);
 }
 
-try {
-  argsEnhancers.forEach((enhancer) => addArgsEnhancer(enhancer));
-} catch {}
-
 const getStories = () => {
   return {
-    "./components/Button/Button.stories.tsx": require("../components/Button/Button.stories.tsx"),
+    './src/components/Button/Button.stories.tsx': require('../src/components/Button/Button.stories.tsx'),
   };
 };
 

.prettierignore

@@ -0,0 +1 @@
+.onedevice/storybook.requires.js

.storybook/main.js

@@ -1,5 +1,7 @@
+const path = require('path');
+
 module.exports = {
-  stories: ['../components/**/*.stories.?(ts|tsx|js|jsx)'],
+  stories: ['../src/components/**/*.stories.?(ts|tsx|js|jsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
@@ -9,4 +11,24 @@ module.exports = {
   core: {
     builder: 'webpack5',
   },
+  webpackFinal: async config => {
+    config.module?.rules?.push({
+      test: /\.css$/,
+      use: [
+        {
+          loader: 'postcss-loader',
+          options: {
+            postcssOptions: {
+              plugins: [require('tailwindcss'), require('autoprefixer')],
+            },
+          },
+        },
+      ],
+      include: path.resolve(__dirname, '../'),
+    });
+
+    return {
+      ...config,
+    };
+  },
 };

.storybook/preview.js

@@ -1,9 +1,11 @@
+import '../src/styles/index.css';
+
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: {argTypesRegex: '^on[A-Z].*'},
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
-}
+};

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "editor.codeActionsOnSave": {
+        "source.fixAll": true
+    },
+    "editor.formatOnSave": false,
+}

App.tsx

@@ -1,27 +1,17 @@
 import React from 'react';
-import {View, Text, SafeAreaView, StyleSheet} from 'react-native';
+import {SafeAreaView, Text, View} from 'react-native';
+
 import {SafeAreaProvider} from 'react-native-safe-area-context';
-import {MyButton} from './components/Button/Button';
+
+import Button from '@components/Button/button';
 
 export default () => (
   <SafeAreaProvider>
-    <SafeAreaView style={styles.safeArea}>
-      <View style={styles.container}>
-        <Text>Application</Text>
-        <MyButton text="Hello world!" color="purple" onPress={() => {}} />
+    <SafeAreaView>
+      <View>
+        <Text className="text-primary">Application</Text>
+        <Button label="test" />
       </View>
     </SafeAreaView>
   </SafeAreaProvider>
 );
-
-const styles = StyleSheet.create({
-  safeArea: {
-    flex: 1,
-  },
-  container: {
-    flex: 1,
-    paddingTop: 16,
-    gap: 16,
-    alignItems: 'center',
-  },
-});

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'

__tests__/App.test.tsx

@@ -0,0 +1,11 @@
+/* eslint-disable import/order */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React from 'react';
+
+// Note: import explicitly to use the types shiped with jest.
+import {it} from '@jest/globals';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+import App from '../App';