Skip to content

CONTRIBUTING.md

Latest commit

 

History

History
121 lines (96 loc) · 9.16 KB

CONTRIBUTING.md

File metadata and controls

121 lines (96 loc) · 9.16 KB

Contributing

Thank you for your support to this library. This documentation will help you how to contribute to this library. There are some requirements and conventions that we and i must fill and follow.

Knowledges

To contribute to this project, we assummed that you know about app development with React Native including:

  • JavaScript or TypeScript language as the bridge for library users to consume native modules of platform and for the build user interface with React.js in the React Native app
  • Java or Kotlin for Android library development
  • Objective-C for iOS and macOS library development. Optionally, you can use Swift language. The library currently does not contain any Swift code due to the Swift bridging header performance, but it's not prohibited to use
  • Turbo Native Modules for React Native module development with new architecture. You can also refer to the reactwg documentation for additional information about React Native New Architecture
  • Legacy Native Modules for React Native module development with old/legacy architecture
  • A bit of react-native-builder-bob knowledges as the builder for React Native libraries for various targets

You don't have to know it all at advanced level. Feel free to learn and embrace it. Do the actual fix and any improvements. I encourage you.

Environments

Before you clone this repository, you need to add these in your machine

Clone

Clone this repository in your machine

git clone https://github.com/RakaDoank/ping-react-native.git

Setup

Make your environment is ready and the repository has been cloned. After that, do these next steps

1. NPM Dependencies Installation

Go to the repository's directory in your terminal or cmd and do the installation with your pnpm

pnpm install

This installation will install all the npm dependencies including the react-native example app.

2. Library Installation with Example App

In this project, the example app at the ping-react-native/examples/{expo,macos} directory is the app we will use as the library playground to use for the library development. The app was bootstrapped with @react-native-community/cli with some modificiations. To setup the React Native app and link the library (ping-react-native) itself are similar like the usual React Native CLI installation with autolinking of React Native libraries

Android

  1. Open the ping-react-native/examples/expo/android directory with Android Studio
  2. Sync project with gradle files
  3. You should see ping-react-native in the sidebar explorer of Android Studio with Android mode directory. This is where the library code lives you can actually do any fixes

iOS & macOS

Beforehand, make sure you are with Ruby >= 3.3.6 version

  1. Open your terminal
  2. Go to ping-react-native/examples/expo/ios directory for iOS, or go to ping-react-native/examples/macos directory for macOS
  3. Install the pods by run this command
bundle install && bundle exec pod install
  1. Open Xcode app, and open the ping-react-native/examples/expo/{ios,macos}/{projectName}.xcworkspace
  2. You should see RNPing folder in the Pods > Development Tools from the sidebar navigator. This is where the library code lives you can actually do any fixes
  3. (⚠️ For macOS only) you need to patch some files to make the app run properly because react-native scripts are pointing to the wrong node_modules path. See this README.md

Run the Example App

Android

For Android, you need to run with physical Android devices. See Emulator Networking. Connect your Android with USB or you can connect it over Wi-Fi. Run adb devices in your terminal or cmd, and make sure your devices are listed.

After that, you can run the app. Go to examples/expo directory, run npm run android. Alternatively, you can run the metro first by execute npm run start, and then run npm run android later.

iOS

For iOS, you need run your iPhone/iPad Simulator first.

After it's completely booted up, you can run the app. Go the examples/expo directory, run npm run ios. Alternatively, you can run the metro first by execute npm run start, and then run npm run ios later.

macOS

For macOS, go to examples/macos. In the directory, run the metro first by execute npm run start, and then run npm run macos.

Conventions

JavaScript/TypeScript

All the JavaScript/TypeScript has been lint-checked with ESLint, and type-checked with TypeScript. Please follow the rule that has been made e.g indentation with Tab. Do not modify the rule or add // eslint-disable mark to your code with no reasons.

While development, ensure that your ESLint Extension of your Visual Studio Code is running if you are using that IDE. Alternatively, you can run npm run code-check in the root of repository.

You can check the lint rules at ping-react-native/eslint.config.mjs and the compilerOptions of TypeScript at ping-react-native/tsconfig.base.json and other tsconfig.json files in the examples/* and package directory.

Java/Kotlin

The convention for the project for Java/Kotlin code is only indentatation with Tab

Objective-C

Please, follow the Google Objective-C Style Guide.

Directories

  • .github: You don't have to worry about this directory
  • examples: This is the actual of React Native app as the playground of the library development. For Android & iOS, it lives in examples/expo directory, and macOS in examples/macos
  • package: This is the actual ping-react-native library source code lives. This directory will be used as the actual ping-react-native library in the npm registry
  • package-builder: This directory is for the builder of the actual library with hard-coded path configuration to the package directory. You can read this documentation

About the Example Apps and the Library in Monorepo Setup

The app was actually bootstrapped with npx create-expo-app@latest, but since this project is a monorepo setup with PNPM to scaffold both app and actual library deployment. There are modifications that have been done in the example app to split between the app, the actual material-color-react-native library, and other development tools or the devDependencies

  • ping-react-native/examples/{expo,macos}/metro.config.js: The example app has to know where the node_modules and the actual ping-react-native directory lives without including the ping-react-native in the dependencies of the package.json example app
  • ping-react-native/examples/{expo,macos}/react-native.config.js: Since the actual ping-react-native library is not included as dependencies in the package.json file of example app, we have to tell React Native CLI where the ping-react-native directory lives to auto-linked the example app with ping-react-native library in development
  • @react-native/eslint-config development dependency (devDependencies) was moved out to the root of package.json (repository) from the example app