Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dooboolab-community/dooboo-native-ts
Complete boilerplate for react-native app. Contains, typescript, react-hook, context-api, ts-jest, localization, navigation and etc.
https://github.com/dooboolab-community/dooboo-native-ts
react react-hook react-native react-navigation typescript
Last synced: 3 months ago
JSON representation
Complete boilerplate for react-native app. Contains, typescript, react-hook, context-api, ts-jest, localization, navigation and etc.
- Host: GitHub
- URL: https://github.com/dooboolab-community/dooboo-native-ts
- Owner: dooboolab-community
- License: mit
- Archived: true
- Created: 2018-02-14T11:52:51.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2023-03-11T15:09:20.000Z (over 1 year ago)
- Last Synced: 2024-07-23T17:00:52.556Z (4 months ago)
- Topics: react, react-hook, react-native, react-navigation, typescript
- Language: TypeScript
- Homepage: https://medium.com/dooboolab/announcing-dooboo-cli-v3-5c9fceeb2ac4
- Size: 8.09 MB
- Stars: 81
- Watchers: 7
- Forks: 27
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - dooboo-native-ts - native app. Contains, typescript, react-hook, context-api, ts-jest, localization, navigation and etc. | dooboolab | 72 | (TypeScript)
README
### ANNOUNCEMENT
DO NOT MODIFY OR CHANGE THE CODE BEFORE CONFIRMED BY `DOOBOOLAB`. THIS REPOSITORY IS USED IN `DOOBOO-CLI`.
# React Native TS Boilerplate
[](https://github.com/dooboolab/dooboo-native-ts/actions/workflows/ci.yml)
[](https://codecov.io/gh/dooboolab/dooboo-native-ts)
> Specification
- [react-native](https://github.com/facebook/react-native)
- [react-navigation](https://github.com/react-navigation/react-navigation)
- [typescript](https://github.com/Microsoft/TypeScript)
- [react-i18n](https://react.i18next.com/)
- [emotion](https://emotion.sh)
- [dooboo-ui](https://github.com/dooboolab/dooboo-ui)
- [ts-jest](https://github.com/kulshekhar/ts-jest)
- [react-hook](https://reactjs.org/docs/hooks-intro.html)
- [@testing-library/react-native](https://github.com/callstack/react-native-testing-library)
- [@testing-library/react-hooks](https://github.com/testing-library/react-hooks-testing-library)
- [prettier](https://prettier.io)
### Gain points
```
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.
```
### INSTALL
```
npm install && npm start
// or
yarn && yarn start
```
### Structures
```text
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
Running the project is as simple as running
```sh
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.
## Post Installation - iOS
### step 1
If you get error about Flipper when your first build, Replace all `Podfile` code in `ios` to below.
Code
```
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
platform :ios, '11.0'
target '' do
config = use_native_modules!
use_react_native!(
:path => config[:reactNativePath],
# to enable hermes on iOS, change `false` to `true` and then install pods
:hermes_enabled => false
)
pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
target 'Tests' do
inherit! :complete
# Pods for testing
end
# Enables Flipper.
#
# Note that if you have use_frameworks! enabled, Flipper will not work and
# you should disable the next line.
use_flipper!({'Flipper' => '0.87.0'})
post_install do |installer|
react_native_post_install(installer)
installer.pods_project.targets.each do |target|
target.build_configurations.each do |config|
config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '11.0'
config.build_settings["ONLY_ACTIVE_ARCH"] = "YES"
config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"
end
end
end
end
```
After replace a code, remove Podfile.lock & Pods. then run `npx pod-install` to applying.
\*\* Note that you should replace a `` field to your real project name.
### step 2
To use [dooboo-ui](https://github.com/dooboolab/dooboo-ui) you have to follow the steps below
1. Create `fonts` folder in `ios`, then add `doobooui.ttf` in `node_modules/dooboo-ui/Icons/` to it.
2. Add folder reference with xcode.
Detail
Add files to ...
Select fonts folder you're added, then press Add
3. Add a following code to `info.plist` in `ios/project.xcassets`.
you can see `doobooui.ttf` on the bottom.
Code
```
UIAppFonts
AntDesign.ttf
Entypo.ttf
EvilIcons.ttf
Feather.ttf
FontAwesome.ttf
FontAwesome5_Brands.ttf
FontAwesome5_Regular.ttf
FontAwesome5_Solid.ttf
Fontisto.ttf
Foundation.ttf
Ionicons.ttf
MaterialCommunityIcons.ttf
MaterialIcons.ttf
Octicons.ttf
SimpleLineIcons.ttf
Zocial.ttf
doobooui.ttf
```
4. Add `doobooui.ttf` to `build pharses - copy bundle Resource`
Image
5. Run `npx pod-install` and Happy code!
## Testing the project
Testing is also just a command away:
```sh
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
```
### Writing tests with Jest
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.
### Vscode prettier and eslint setup
```
"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
```
### 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 RootProvider = ({
initialThemeType,
children,
}: Props): React.ReactElement => {
return (
{children}
);
};
```
The `RootProvider` 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('light') explicitly is encouraged in testing for avoiding unexpected snapshot test errors
### Localization
We migrate localize lib from [fbt](https://github.com/facebook/fbt) to [react-i18n](https://react.i18next.com/). If you interested in fbt usages refer this [blog](https://medium.com/dooboolab/localizing-react-app-with-fbt-instead-of-i18n-90822e0cb373).
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](https://react.i18next.com/latest/usetranslation-hook).