Contributing
Thank you for showing interest in contributing to React-Native-Navigation! This project is developed and maintained by Wix in collaboration with the community.
There are various ways in which you can contribute to this library, not all require knowledge or expertise in native development. Listed below is all you need to get started with your first contribution.
Stack Overflow#
Stack Overflow is used by developers to find answers and troubleshoot code. Users are encouraged to post questions on SO and tag them with the wix-react-native-navigation tag. Answering issues on SO is very helpful and beneficial to the community, only this time, there's a personal angle - you can boost your SO ranking and rack up points quickly.
Discord#
Another popular communication channel is our Discord channel where users post questions and consult with each other. You're welcome to join the discussions and answer questions. This is also a great place to meet other community members and project maintainers.
Contributing to React-Native-Navigation#
iOS#
There are 2 ways to test your contribution to this project on iOS:
- You can contribute and test your changes using the playground provided.
- You can install React-Native-Navigation in a new or existing project and set your project to use your local clone of React-Native-Navigation in the podfile. The following steps are required in order to make the project work with your local environment:
2.1#
Install React-Native-Navigation as you'll usually do in your project, using yarn add react-native-navigation or npm install --save react-native-navigation.
2.2#
Add the following configuration to the react-native.config.js file, at the root of your project.
2.3#
Clone the project using git clone https://github.com/wix/react-native-navigation at your desired location.
2.4#
Add the following line in the Podfile:
You're done. Happy coding!
GitHub Issues#
Open an issue#
Found a bug? Missing a feature? Go ahead and open an issue! Make sure to add all details mentioned in the issue template. If you're interested in suggesting a big change, please speak to one of the admins on Discord to coordinate your effort.
Respond to issues#
Although the issue tracker is used solely for bug reports, issues are frequently opened for questions or to request assistance. As the project grows in popularity, more issues remain unanswered for long periods of time.
Some issues can be trivial and easy to pinpoint - a missing import statement or apostrophe, wrong layout structure, etc. If you're an experienced user, helping out newcomers can be quite satisfying and allows maintainers to focus on features and bug fixes.
Some issues are tagged as "looking for contributors". These issues have been recognized by the team, but aren't prioritized by Wix developers due to lack of time or for some other reason. We leave these issues to our community and you're more than welcome to take a crack at them. If you'd like to submit a PR, see these instructions on how to run the project locally.
Provide reproductions#
Reproducing bugs takes time. Lots of time. Usually that's because an issue is lacking important information, which then causes lots of back and forth communication between maintainers and users. Help us address more bugs and issues by providing reproductions.
Providing reproductions improves the chances of an issue being prioritized by maintainers!
If an issue is reproduced with a specific combination of options, posting these options will usually suffice. If a specific layout structure is involved or specific actions need to be performed in a certain order - then we ask that you fork the project and push a branch with a reproduction to the Playground app.
Check out the list of issues requiring reproductions.
Submitting PRs#
So you've fixed a bug or added a feature and you're ready to submit a pull request 🎉🎊 Make sure the title is clear and describes the reason for the PR. Please include any information you can which will help us understand the reasons for the PR, what it fixes and what it changes. Please include before/after pictures/gifs when appropriate.
Workflow#
This project is driven by tests. Before implementing any feature or fixing any bug, a failing test (e2e or unit or both) should be added, depending on the environment of where the fix should be implemented. For example, for an API change, a failing e2e should be written. For a small bug fix in Android, for example, a unit test in Android should be added.
This will ensure good quality throughout the life of the project and will help avoid unexpected breakages.
No PR will be accepted without adequate test coverage.
If you need help running the project, have a look at the Playground app section. You can run the tests using the scripts below.
Tests and the Playground app#
Besides an overview of basic React Native Navigation functionality, the Playground app can (and rather should) be used for e2e tests and reproductions. If your change requires an e2e, add it to the playground app, to the appropriate screen. Again, quick setup instructions available in Playground app section of these docs.
tip
If a screen contains too many buttons, e2e tests might fail if the button is positioned out of screen bounds because Detox matchers detect it's invisible.
Enable linter#
The project uses ESLint with Prettier to ensure code style consistency across the codebase. Make sure to install these plugins in your IDE.
A pre-commit hook will verify that the linter passes when committing.
Project Folder Structure#
| Folder | Description |
|---|---|
src | TypeScript sources and unit tests |
android | Android sources and unit tests |
ios | iOS sources and unit tests |
lib | Compiled JavaScript and TypeScript definitions (generated by react-native-builder-bob) |
lib/module/index.js | The entry point for import Navigation from 'react-native-navigation' |
playground | The playground app workspace. Contains its own src, android, ios, and package.json. All e2e tests run against this app. |
playground/e2e | detox e2e tests on both Android and iOS |
integration | Misc JavaScript integration tests, proving integration with other libraries like redux |
scripts | All build and test scripts |
autolink | Autolinking scripts for React Native CLI |
Scripts#
This project uses Yarn workspaces. The root workspace contains the main library, and the playground workspace contains the playground app for testing.
| Command | Description |
|---|---|
yarn install | installs dependencies for all workspaces |
yarn prepare | compiles TypeScript sources ./src into JavaScript ./lib (runs automatically on install) |
yarn clean | cleans all build directories, stops packager, fixes flakiness by removing watchman cache, etc. |
yarn start | starts the react-native packager for local debugging |
yarn xcode | for convenience, opens xcode in this project |
yarn pod-install | installs iOS pods (runs yarn workspace react-native-navigation-playground pod-install) |
yarn install-android | builds playground debug/release version and installs on running android devices/emulators. Options: -- --release |
yarn uninstall-android | uninstalls playground from running android devices/simulators |
yarn test-js | runs javascript tests and coverage report |
yarn test-autolink | runs autolink tests |
yarn test-unit-ios | runs ios unit tests in debug/release Options: -- --release |
yarn test-unit-android | runs android unit tests in debug/release Options: -- --release |
yarn test-snapshot-ios | runs ios snapshot tests Options: -- --release |
yarn test-e2e-ios-ci | runs the ios e2e tests using detox in CI mode (release, multi-device) |
yarn test-e2e-android-ci | runs the android e2e tests using detox in CI mode (release, multi-device) |
yarn workspace react-native-navigation-playground test-e2e-ios | runs the ios e2e tests using detox in debug/release Options: -- --release |
yarn workspace react-native-navigation-playground test-e2e-android | runs the android e2e tests using detox in debug/release Options: -- --release |
yarn test-all | runs all tests in parallel (js, autolink, unit, snapshot, e2e) |