All Projects → dooboolab → Dooboo Native Ts

dooboolab / Dooboo Native Ts

Licence: mit
Complete boilerplate for react-native app. Contains, typescript, react-hook, context-api, ts-jest, localization, navigation and etc.

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Dooboo Native Ts

React Native Messenger
Facebook Messenger Implementation using react-native
Stars: ✭ 351 (+475.41%)
Mutual labels:  react-navigation
Ignite Bowser
Bowser is now re-integrated into Ignite CLI! Head to https://github.com/infinitered/ignite to check it out.
Stars: ✭ 586 (+860.66%)
Mutual labels:  react-navigation
React Native Boilerplate
🚀 React Native Boilerplate Updated
Stars: ✭ 9 (-85.25%)
Mutual labels:  react-navigation
React Navigation
Routing and navigation for your React Native apps
Stars: ✭ 20,650 (+33752.46%)
Mutual labels:  react-navigation
React Navigation Header Buttons
Easily render header buttons for react-navigation.
Stars: ✭ 545 (+793.44%)
Mutual labels:  react-navigation
React Navigation Shared Element
React Navigation bindings for react-native-shared-element 💫
Stars: ✭ 694 (+1037.7%)
Mutual labels:  react-navigation
Duckduckgo
DuckDuckGo App built in React-Native (Unofficial)
Stars: ✭ 320 (+424.59%)
Mutual labels:  react-navigation
Bs React Navigation
A fast, declarative navigation for React Native, based on React Navigation
Stars: ✭ 55 (-9.84%)
Mutual labels:  react-navigation
Surmon.me.native
📱 My blog app, powered by react-native
Stars: ✭ 579 (+849.18%)
Mutual labels:  react-navigation
React Native Animated Tabbar
A 60FPS animated tab bar with a variety of cool animation presets 😎
Stars: ✭ 890 (+1359.02%)
Mutual labels:  react-navigation
React Native Template Rocketseat Basic
Template básica para aplicações React Native com a estrutura utilizada na Rocketseat 🚀
Stars: ✭ 431 (+606.56%)
Mutual labels:  react-navigation
Mozi
此项目致力于构建一套最基础,最精简,可维护的react-native项目,支持ios,android 🌹
Stars: ✭ 501 (+721.31%)
Mutual labels:  react-navigation
Expo Crossy Road
🐥🚙 Crossy Road game clone made in Expo (iOS, Android, web), THREE.js, Tween, React Native. 🐔
Stars: ✭ 701 (+1049.18%)
Mutual labels:  react-navigation
React Native Boilerplate
🚀 Type Based Architecture for developing React Native Apps using react, redux, sagas and hooks with auth flow
Stars: ✭ 375 (+514.75%)
Mutual labels:  react-navigation
React Native Workshop
Prototyping Airbnb with React Native
Stars: ✭ 21 (-65.57%)
Mutual labels:  react-navigation
Reading
iReading App Write In React-Native
Stars: ✭ 3,435 (+5531.15%)
Mutual labels:  react-navigation
React Native Dva Starter
a React Native starter powered by dva and react-navigation
Stars: ✭ 637 (+944.26%)
Mutual labels:  react-navigation
Mobile Boilerplate
React Native boilerplate (TypeScript, MobX-State-Tree, NativeBase, React Navigation, Enzyme) by Prominent Edge
Stars: ✭ 57 (-6.56%)
Mutual labels:  react-navigation
React Native Redux Navigation
A demo use react-navigation and redux。[Thx for your star !!!]
Stars: ✭ 40 (-34.43%)
Mutual labels:  react-navigation
Neteasecloudmusic
React Native 模仿网易云音乐手机客户端,兼容安卓和IOS两个平台。
Stars: ✭ 793 (+1200%)
Mutual labels:  react-navigation

ANNOUNCEMENT

DO NOT MODIFY OR CHANGE THE CODE BEFORE CONFIRMED BY DOOBOOLAB. THIS REPOSITORY IS USED IN DOOBOO-CLI.

React Native TS Boilerplate

codecov CircleCI Greenkeeper badge

Specification

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

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

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.

Testing the project

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

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

// Add providers here
const RootProvider = ({
  initialThemeType,
  children,
}: Props): React.ReactElement => {
  return (
    <AppProvider>
      <ThemeProvider
        initialThemeType={initialThemeType ? ThemeType.LIGHT : ThemeType.DARK}
      >
        {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(ThemeType.LIGHT as default) explicitly is encouraged in testing for avoiding unexpected snapshot test errors

Localization

Previously, we used i18n-j to localize our app and we decided to switch to fbt. If you want to understand why, you may see our blog for Localizing react app with FBT instead of src/utils/i18n.

We've defined localized strings in assets/translations/en.json for English and assets/translations/ko.json for Korean. Since the en is default locale setup in current project, you do not need to localize this file. However, you still should not delete this if you don't want to see missing localization warning messages when you are running jest.

We are using fbt to localize our app which is maintained by Facebook team. Simply running yarn fbt:all will generate i18n/fbt/translatedFbts.json which has all the localized strings.

If you find trouble using it, you may follow Integrate FBT into your React Native Application.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].