Need help with typescript-react-native-starter?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

NewBieBR
136 Stars 35 Forks 118 Commits 2 Opened issues

Description

A highly scalable foundation with a focus on best pratices and simplicity to start your React Native project in seconds.

Services available

!
?

Need anything else?

Contributors list

Typescript React Native Starter


A highly scalable foundation with a focus on best pratices and simplicity to start your React Native project in seconds.

Quick Start

yarn global add trnc
trnc init 

Features

  • Typescript

    • Typescript based: enhance code quality, understandability and scability with
      Interface oriented development
  • Flux State management

      import { createAction } from 'typesafe-actions';
    
    

    export const myAction = createAction('MY_ACTION', (payload) => payload)();

  • Navigation

  • Unit testing

  • Linting

    • Eslint configured for React Native
    • VSCode Prettier compatible
    • Useful plugins installed (see
      .eslintrc.js
      )
  • Internationalization and localization

  • Others

    • Absolute import from
      src
      : Before:
      JSX
      import HomePage from '../../../../containers/HomePage'
      

    After:

    JSX
     import HomePage from 'src/containers/HomePage'
    
    - react-native-normalize: make your app responsive easily - react-native-easy-icon: wrapper component of react-native-vector-icons for easier usage: Before: ```JSX import AntDesignIcon from 'react-native-vector-icons/AntDesign';

    After:
    ```JSX
    import Icon from 'react-native-easy-icon';
    
    
    

Project Structure

├── android
├── app.json
├── assets                               // All assets: images, videos, ...
├── credentials                          // Private informations: API keys,...
├── index.js
├── ios
├── publishing                           // Icon, screenshots, preview,... for App Store & Play Store
└── src
    ├── __tests__                        // Unit tests
    │   ├── App.test.tsx                 // App component's tests
    │   ├── components
    │   │   └── MyComponent.test.txs
    │   └── ...
    ├── App.tsx
    ├── actions                          // Actions
    │   ├── actionTypes.ts               // Action types
    │   └── app.ts                       // appReducer's actions
    ├── components                       // Components
    │   └── MyComponent.tsx
    ├── constants                        // Colors, sizes, routes,...
    │   └── strings.ts                   // i18n
    ├── containers                       // Screens, pages,...
    ├── lib                              // Libraries, services,...
    ├── index.tsx                        // Root component
    ├── reducers                         // Reducers
    │   └── app.ts                       // appReducer
    ├── sagas                            // Redux sagas
    ├── store.ts
    ├── types                            // Type declarations
    │   └── index.d.ts
    └── utils                            // Utilities

Manual Installation

  • Clone this repo
  git clone [email protected]:NewBieBR/typescript-react-native-starter.git 
  cd 
  • Install dependencies
    yarn
    
  • Rename the project
  yarn run rename 
  yarn jetify
  • Update pods
  cd ios && pod install
  • Remove .git
  rm -rf .git

Recommended configurations

Useful Tips & Notes

Apple Store Connect's missing compliance

This is added to your

Info.plist
in order to avoid Apple Store Connect's missing compliance warning.
ITSAppUsesNonExemptEncryption

So you don't have to Provide Export Compliance Information at every push,

Note that you might have to set that to

 if your app uses encryption

Responsiveness with react-native-normalize

Use the normalize functio from react-native-normalize whenever you have to use a hard value (100, 200, 1000,...). This function will adapt your value accordingly to different screen sizes

Without
normalize

With
normalize

Patch Package

When developing with React Native, sometimes I found bugs in the packages that I use so I fix them directly in the node_modules/package-with-bug. However, when I install a new package with npm install, the changes I made got override.

To prevent this, I use patch-package which allows me to modify and keep the changes I made.

So no more waiting around for pull requests to be merged and published. No more forking repos just to fix that one tiny thing preventing your app from working.

Example:

# fix a bug in one of your dependencies
vim node_modules/some-package/brokenFile.js

run patch-package to create a .patch file

npx patch-package some-package

commit the patch file to share the fix with your team

git add patches/some-package+3.14.15.patch git commit -m "fix brokenFile.js in some-package"

Beta distribution with Fastlane

  • Install fastlane ```bash # Using RubyGems sudo gem install fastlane -NV

# Alternatively using Homebrew brew cask install fastlane ```

If you have issue installing or using fastlane on macos, check this solution: https://github.com/fastlane/fastlane/issues/15467#issuecomment-543093498

iOS

  • Open your project Xcode workspace and update your app's
    Bundle Identifier
    and
    Team
  • Initialize fastlane
    bash
    cd /ios
    fastlane init
    
  • Distribute your app
    bash
    fastlane beta
    

Android

  • Collect your Google Credentials
  • Open your project with Android Studio and update your app's
    applicationId
    in
    build.gradle (Module: app)
    file
  • Select
    Generated Signed Bundle / APK...
    from the
    Build
    menu
  • Next
    then
    Create new...
    under
    Key store path
    then
    Next
    and
    Finish
  • The first time you deploy your application, you MUST upload it into Google Play Console manually. Google don't allow to use theirs APIs for the first upload.
  • Create your application in the Google Play Console (unlike for iOS Fastlane cannot do that for you)
  • Make sure that these 4 checkmark icons are green

    Recommended order:

    Pricing & distribution
    ,
    Content rating
    ,
    Store listing
    and
    App releases

    You can find the required assets for

    Store listing
    in the
    publishing/android
    folder

  • Initialize fastlane

    bash
    cd /android
    fastlane init
    
  • Use the Fastfile from

    publishing
    bash
    cp publishing/android/fastlane/Fastfile android/fastlane
    
  • Distribute your app

    bash
    fastlane beta
    

    There is no official plugin to automatically upgrade android version code (unlike the iOS lane). Before each deployment, be sure to manually upgrade the

    versionCode
    value inside
    android/app/build.gradle
    .

More

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.