diff --git a/.gitignore b/.gitignore
index 52326e42..41f14643 100644
--- a/.gitignore
+++ b/.gitignore
@@ -62,3 +62,5 @@ coverage/
package-lock.json
ios/Pods/
+
+.vscode
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..8d59724c
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,38 @@
+{
+ //eslint extension options
+ "eslint.enable": true,
+ "eslint.validate": [
+ "javascript",
+ "javascriptreact",
+ "typescript",
+ "typescriptreact"
+ ],
+
+ // prettier extension setting
+ "editor.formatOnSave": true,
+ "[javascript]": {
+ "editor.defaultFormatter": "esbenp.prettier-vscode"
+ },
+ "[javascriptreact]": {
+ "editor.defaultFormatter": "esbenp.prettier-vscode"
+ },
+ "[typescript]": {
+ "editor.defaultFormatter": "esbenp.prettier-vscode"
+ },
+ "[typescriptreact]": {
+ "editor.defaultFormatter": "esbenp.prettier-vscode"
+ },
+ "prettier.singleQuote": true,
+ "prettier.trailingComma": "all",
+ "prettier.arrowParens": "always",
+ "prettier.jsxSingleQuote": true,
+ // relative path is preferred
+ "javascript.preferences.importModuleSpecifier": "relative",
+ "typescript.preferences.importModuleSpecifier": "relative",
+ "files.exclude": {
+ "**/.classpath": true,
+ "**/.project": true,
+ "**/.settings": true,
+ "**/.factorypath": true
+ }
+}
diff --git a/README.md b/README.md
index d292df9f..a06c75e0 100644
--- a/README.md
+++ b/README.md
@@ -53,7 +53,7 @@ app/
│ └─ navigations
│ └─ screen
│ └─ shared
-│ └─ contexts
+│ └─ providers
│ └─ utils
│ └─ App.tsx
├─ test/
@@ -144,6 +144,44 @@ We've created test examples with jest-ts in `src/components/screen/__tests__` an
"prettier.arrowParens": "always",
"prettier.jsxSingleQuote": true
```
+### Using Context Api
+Whenever you add your own Context provider you can add it to `providers/` and use it inside of `providers/index.tsx`
+- [Splitting provider is preferred](https://github.com/facebook/react/issues/15156#issuecomment-474590693)
+```tsx
+// Add providers here
+const AllProviders = ({ isTest, children }: Props): React.ReactElement => {
+ return (
+
+
+ {children}
+
+
+ );
+};
+```
+The `AllProviders` is being used at `App.tsx` and test files easily
+```tsx
+// App.tsx
+function App(): React.ReactElement {
+ return (
+
+
+
+ );
+}
+```
+```tsx
+// test files
+const component = (props): React.ReactElement => {
+ return (
+
+
+
+ );
+};
+```
+> using consistent theme(ThemeType.LIGHT as default) explicitly is encouraged in testing for avoiding unexpected snapshot test errors
+
### Localization
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 44614a6d..44ae20bd 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -351,6 +351,6 @@ SPEC CHECKSUMS:
RNReanimated: 6abbbae2e5e72609d85aabd92a982a94566885f1
Yoga: d8c572ddec8d05b7dba08e4e5f1924004a177078
-PODFILE CHECKSUM: fb138764701c547337419aaabee4fe89f2d68a64
+PODFILE CHECKSUM: e30dfdd1fd9e5d0ba3c848277e4d1c2e269ffbab
COCOAPODS: 1.7.5
diff --git a/src/App.tsx b/src/App.tsx
index 589efd30..f9c34f0d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,12 +1,12 @@
-import { AppProvider as Provider } from './providers';
+import AllProviders from './providers';
import React from 'react';
import SwitchNavigator from './components/navigation/SwitchNavigator';
function App(): React.ReactElement {
return (
-
+
-
+
);
}
diff --git a/src/components/navigation/SwitchNavigator.tsx b/src/components/navigation/SwitchNavigator.tsx
index ae115392..0685cf85 100644
--- a/src/components/navigation/SwitchNavigator.tsx
+++ b/src/components/navigation/SwitchNavigator.tsx
@@ -1,10 +1,9 @@
-import React, { useContext } from 'react';
-import { Theme, createTheme } from '../../theme';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
-import { AppContext } from '../../contexts';
+import React from 'react';
import RootNavigator from './RootStackNavigator';
-import { ThemeProvider } from 'styled-components';
+import { Theme } from '../../theme';
+import { useThemeContext } from '../../providers/ThemeProvider';
const SwitchNavigator = createSwitchNavigator(
{
@@ -22,12 +21,6 @@ export interface ScreenProps {
}
export default function Navigator(): React.ReactElement {
- const { state } = useContext(AppContext);
- const { theme } = state;
-
- return (
-
-
-
- );
+ const { theme } = useThemeContext();
+ return ;
}
diff --git a/src/components/screen/Intro.tsx b/src/components/screen/Intro.tsx
index 081ab117..5570947d 100644
--- a/src/components/screen/Intro.tsx
+++ b/src/components/screen/Intro.tsx
@@ -4,15 +4,15 @@ import {
NavigationState,
} from 'react-navigation';
-import { AppContext } from '../../providers';
import Button from '../shared/Button';
import { IC_MASK } from '../../utils/Icons';
import React from 'react';
-import { ThemeType } from '../../theme';
import { User } from '../../types';
import { View } from 'react-native';
import { getString } from '../../../STRINGS';
import styled from 'styled-components/native';
+import { useAppContext } from '../../providers/AppProvider';
+import { useThemeContext } from '../../providers/ThemeProvider';
const Container = styled.View`
flex: 1;
@@ -54,7 +54,8 @@ interface Props {
function Intro(props: Props): React.ReactElement {
let timer: number;
- const { state, dispatch } = React.useContext(AppContext);
+ const { state, setUser } = useAppContext();
+ const { changeThemeType } = useThemeContext();
const [isLoggingIn, setIsLoggingIn] = React.useState(false);
const onLogin = (): void => {
@@ -65,29 +66,13 @@ function Intro(props: Props): React.ReactElement {
age: 30,
job: 'developer',
};
- dispatch({ type: 'set-user', payload: { user: user } });
+ // dispatch({ type: 'set-user', payload: { user: user } });
+ setUser(user);
setIsLoggingIn(false);
clearTimeout(timer);
}, 1000);
};
- const changeTheme = (): void => {
- let payload: object;
- if (state.theme === ThemeType.LIGHT) {
- payload = {
- theme: ThemeType.DARK,
- };
- } else {
- payload = {
- theme: ThemeType.LIGHT,
- };
- }
- dispatch({
- type: 'change-theme-mode',
- payload,
- });
- };
-
return (
@@ -118,7 +103,7 @@ function Intro(props: Props): React.ReactElement {