feat(store): use recoil

.eslintrc.js

@@ -1,7 +1,6 @@
 module.exports = {
   root: true,
-  extends: '@react-native-community',
+  extends: ['@react-native-community', 'plugin:jest/recommended'],
   parser: '@typescript-eslint/parser',
   plugins: ['@typescript-eslint'],
 };
-

.prettierrc.js

@@ -4,6 +4,6 @@ module.exports = {
   singleQuote: true,
   trailingComma: 'all',
   bracketSpacing: true,
-  semi: false
+  semi: true
 };
 

__tests__/Test.test.tsx

@@ -1,17 +1,15 @@
-import * as React from 'react';
-import * as ReactNative from 'react-native';
+import React from 'react';
 import renderer from 'react-test-renderer';
 
 import Test from '../src/components/Test';
-import App from '../App';
+// import App from '../App';
 
-import { ButtonIcon } from '../src/components/ButtonIcon';
-import IconOptions from 'src/assets/icons/icon-options.svg';
-
-import { shallow, mount } from 'enzyme'
-import 'jest-enzyme'
-import 'jest-styled-components'
+// import { ButtonIcon } from '../src/components/ButtonIcon';
+// import IconOptions from 'src/assets/icons/icon-options.svg';
 
+// import { shallow, mount } from 'enzyme';
+import 'jest-enzyme';
+import 'jest-styled-components';
 
 // const button = {
 //   type: 'options',
@@ -20,10 +18,9 @@ import 'jest-styled-components'
 //   accessibilityLabel: 'More Options'
 // }
 
-
 // it('icon button renders', () => {
 //   const { type, iconImage, accessibilityLabel, onPress } = button;
-//   const component = 
+//   const component =
 //     <ButtonIcon
 //       type={type}
 //       key={`${button + type}`}
@@ -35,9 +32,8 @@ import 'jest-styled-components'
 //   expect(tree).toMatchSnapshot()
 // });
 
-
 it('Test component renders', () => {
-  const component = <Test />
-  const tree = renderer.create(component).toJSON()
-  expect(tree).toMatchSnapshot()
-});
+  const component = <Test />;
+  const tree = renderer.create(component).toJSON();
+  expect(tree).toMatchSnapshot();
+});

__tests__/__snapshots__/Test.test.tsx.snap

@@ -1,15 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Test component renders 1`] = `
-<Text
+<View
   style={
     Array [
       Object {
-        "color": "red",
+        "backgroundColor": "rgba(255, 0, 0, 0.25)",
       },
     ]
   }
 >
-  Testing, testing, 1, 2, 3
-</Text>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "red",
+        },
+      ]
+    }
+  >
+    Testing, testing, 1, 2, 3
+  </Text>
+</View>
 `;

commitlint.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-	extends: ['@commitlint/config-conventional']
-};
+  extends: ['@commitlint/config-conventional'],
+};

declarations.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 declare module '*.svg' {
-  import { SvgProps } from 'react-native-svg'
-  const content: React.FC<SvgProps>
-  export default content
+	import { SvgProps } from 'react-native-svg';
+	const content: React.FC<SvgProps>;
+	export default content;
 }

index.js

@@ -1,4 +1,4 @@
-import 'react-native-get-random-values'
+import 'react-native-get-random-values';
 
 import { AppRegistry } from 'react-native';
 import App from './src/App';

jest.config.js

@@ -1,20 +1,20 @@
 module.exports = {
-	preset: 'react-native',
-	moduleNameMapper: {
-		'^@/(.*)$': '<rootDir>/$1',
-	},
-	moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
-	testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$',
-	testPathIgnorePatterns: ['\\.snap$', '<rootDir>/node_modules/'],
-	transformIgnorePatterns: ['node_modules/?!(static-container)'],
-	cacheDirectory: '.jest/cache',
-	globals: {
-		'ts-jest': {
-			isolatedModules: true,
-		},
-	},
-	clearMocks: true,
-	// setupFiles: ["<rootDir>/jest.setup.js"],	
-	setupFilesAfterEnv: ['./jest.setup.js'],
-	collectCoverageFrom: ['src/**/*.{ts,tsx}', '!**/node_modules/**'],
-};
+  preset: 'react-native',
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/$1',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$',
+  testPathIgnorePatterns: ['\\.snap$', '<rootDir>/node_modules/'],
+  transformIgnorePatterns: ['node_modules/?!(static-container)'],
+  cacheDirectory: '.jest/cache',
+  globals: {
+    'ts-jest': {
+      isolatedModules: true,
+    },
+  },
+  clearMocks: true,
+  // setupFiles: ["<rootDir>/jest.setup.js"],
+  setupFilesAfterEnv: ['./jest.setup.js'],
+  collectCoverageFrom: ['src/**/*.{ts,tsx}', '!**/node_modules/**'],
+};

jest.setup.js

@@ -16,4 +16,4 @@ jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
 // React Native Share
 jest.mock('react-native-share', () => ({
   default: jest.fn(),
-}));
+}));

metro.config.js

@@ -1,4 +1,4 @@
-const { getDefaultConfig } = require('metro-config')
+const { getDefaultConfig } = require('metro-config');
 
 module.exports = (async () => {
   const {
@@ -9,8 +9,8 @@ module.exports = (async () => {
       babelTransformerPath: require.resolve('react-native-svg-transformer'),
     },
     resolver: {
-      assetExts: assetExts.filter(ext => ext !== 'svg'),
+      assetExts: assetExts.filter((ext) => ext !== 'svg'),
       sourceExts: [...sourceExts, 'svg'],
     },
-  }
-})()
+  };
+})();

package.json

@@ -57,6 +57,7 @@
     "babel-plugin-transform-inline-environment-variables": "^0.4.3",
     "enzyme": "^3.11.0",
     "eslint": "^7.22.0",
+    "eslint-plugin-jest": "^24.3.6",
     "husky": "^6.0.0",
     "jest": "^27.0.4",
     "jest-enzyme": "^7.1.2",

rn-cli.config.js

@@ -1,8 +1,8 @@
 module.exports = {
-	getTransformModulePath() {
-		return require.resolve('react-native-typescript-transformer');
-	},
-	getSourceExts() {
-		return ['ts', 'tsx'];
-	}
-};
+  getTransformModulePath() {
+    return require.resolve('react-native-typescript-transformer');
+  },
+  getSourceExts() {
+    return ['ts', 'tsx'];
+  },
+};

src/@types/bookmarks.d.ts

@@ -1,7 +1,7 @@
 export type Bookmark = {
-	"displayName": String
-	"description": String
-	"protocol": "http" | "https" | "ipfs" | "hyper" | "dat"
-	"location": String
-	"tags": String[]
-}
+	displayName: String;
+	description: String;
+	protocol: 'http' | 'https' | 'ipfs' | 'hyper' | 'dat';
+	location: String;
+	tags: String[];
+};

src/@types/env.d.ts

@@ -4,4 +4,4 @@ export type EnvType = {
 	ETH_WALLET_ADDRESS: String;
 	ETH_WALLET_SECRET_SEED_PHRASE: String;
 	ETH_WALLET_SECRET_PRIVATE_KEY: String;
-}
+};

src/@types/styled.d.ts

@@ -1,21 +1,21 @@
-import 'styled-components/native'
+import 'styled-components/native';
 
 declare module 'styled-components/native' {
-  export interface DefaultTheme {
-    colors: {
-      scheme: string
-      text: string
-      background: string
-      debug: string
-    },
-    ui: {
-      background: string
-			foreground: string
-      icon: string
-    },
-    addressBar: {
-      background: string
-      color: string
-    }
-  }
-}
+	export interface DefaultTheme {
+		colors: {
+			scheme: string;
+			text: string;
+			background: string;
+			debug: string;
+		};
+		ui: {
+			background: string;
+			foreground: string;
+			icon: string;
+		};
+		addressBar: {
+			background: string;
+			color: string;
+		};
+	}
+}

src/App.tsx

@@ -1,24 +1,22 @@
-import React from 'react'
-import { Provider } from 'react-redux'
-import { ThemeProvider } from 'styled-components/native'
+import React from 'react';
+import { RecoilRoot } from 'recoil';
+import { ThemeProvider } from 'styled-components/native';
 
-import store from 'src/store/index'
+import AppNavigator from 'src/AppNavigator';
 
-import AppNavigator from 'src/AppNavigator'
+import lightTheme from 'src/themes/light';
+import darkTheme from 'src/themes/dark';
 
-import lightTheme from 'src/themes/light'
-import darkTheme from 'src/themes/dark'
-
-import { isDarkMode } from 'src/utils/appearance'
+import { IsDarkMode } from 'src/utils/appearance';
 
 export default function App() {
   return (
     <>
-      <ThemeProvider theme={isDarkMode() ? darkTheme : lightTheme}>
-        <Provider store={store}>
+      <ThemeProvider theme={IsDarkMode() ? darkTheme : lightTheme}>
+        <RecoilRoot>
           <AppNavigator />
-        </Provider>
+        </RecoilRoot>
       </ThemeProvider>
     </>
-  )
+  );
 }