DO NOT MODIFY OR CHANGE THE CODE BEFORE CONFIRMED BY DOOBOOLAB
. THIS REPOSITORY IS USED IN DOOBOO-CLI
.
Specification
1. Sample of context-api with `react-hook` (`useContext`).
2. Know how to structure react native app with typescript.
3. Know how to navigate between screens with `react-navigation`.
4. Know how to write test code with `testing-library`.
5. Know how to `lint` your project with `eslint` for both `ts` and maybe some `js`.
6. Know how to localize your project.
npm install && npm start
// or
yarn && yarn start
app/
├─ .doobooo // necessary if using dooboo-cli
├─ assets
│ └─ icons // app icons
│ └─ images // app images like background images
├─ node_modules/
├─ src/
│ └─ apis
│ └─ components
│ └─ navigations
│ └─ screen
│ └─ shared
│ └─ providers
│ └─ utils
│ └─ App.tsx
├─ test/
├─ .buckconfig
├─ .flowconfig
├─ .gitattributes
├─ .gitignore
├─ .watchmanconfig
├─ app.json
├─ babel.config.js
├─ index.js
├─ jest.config.js
├─ package.json
├─ README.md
├─ STRINGS.js
├─ tsconfig.json
└─ eslint.json
Running the project is as simple as running
npm run start
This runs the start
script specified in our package.json
, and will spawn off a server which reloads the page as we save our files.
Typically the server runs at http://localhost:8080
, but should be automatically opened for you.
If you get error about Flipper when your first build, Replace all Podfile
code in ios
to below.
After replace a code, remove Podfile.lock & Pods. then run npx pod-install
to applying.
** Note that you should replace a <Your projectName>
field to your real project name.
To use dooboo-ui you have to follow the steps below
Create fonts
folder in ios
, then add doobooui.ttf
in node_modules/dooboo-ui/Icons/
to it.
Add folder reference with xcode.
Add a following code to info.plist
in ios/project.xcassets
.
you can see doobooui.ttf
on the bottom.
Add doobooui.ttf
to build pharses - copy bundle Resource
Run npx pod-install
and Happy code!
Testing is also just a command away:
npm test
Result
> jest -u
PASS src/components/shared/__tests__/Button.test.tsx
PASS src/components/screen/__tests__/Intro.test.tsx
› 2 snapshots written.
Snapshot Summary
› 2 snapshots written in 1 test suite.
Test Suites: 2 passed, 2 total
Tests: 5 passed, 5 total
Snapshots: 2 added, 4 passed, 6 total
Time: 3.055s, estimated 6s
Ran all test suites
We've created test examples with jest-ts in src/components/screen/__tests__
and src/components/shared/__tests__
. Since react is component oriented, we've designed to focus on writing test in same level of directory with component. You can simply run npm test
to test if it succeeds and look more closer opening the source.
"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
Whenever you add your own Context provider you can add it to providers/
and use it inside of providers/index.tsx
// Add providers here
const RootProvider = ({
initialThemeType,
children,
}: Props): React.ReactElement => {
return (
<AppProvider>
<ThemeProvider initialThemeType={initialThemeType}>
{children}
</ThemeProvider>
</AppProvider>
);
};
The RootProvider
is being used at App.tsx
and test files easily
// App.tsx
function App(): React.ReactElement {
return (
<RootProvider>
<SwitchNavigator />
</RootProvider>
);
}
// test files
const component = (props): React.ReactElement => {
return (
<RootProvider initialThemeType>
<Intro {...props} />
</RootProvider>
);
};
using consistent theme('light') explicitly is encouraged in testing for avoiding unexpected snapshot test errors
We migrate localize lib from fbt to react-i18n. If you interested in fbt usages refer this blog.
We've defined localized strings in src/translates/en/translate.json
for English and src/translates/ko/translate.json
for Korean. You can add more language code just by creating [language code]/translation.json file in src/translates/
folder. Then pass that language code to init functions in i18n.ts
. For further information about usages, Refer this.