Skip to main content
Version: Next

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:

  1. You can contribute and test your changes using the playground provided.
  1. 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 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.

module.exports = {
project: {
ios: {},
android: {},
},
dependencies: {
'react-native-navigation': {
platforms: {
ios: null,
android: null
},
},
},
};

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:

pod 'ReactNativeNavigation', :path => '/path/to/cloned/react-native-navigation'

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.

Playground app Folder Structure#

FolderDescription
libThe project itself composed of:
lib/androidandroid sources and unit tests
lib/iosiOS sources and unit tests
lib/srcTypeScript sources and unit tests
lib/distcompiled javascript sources and unit tests
lib/dist/index.jsthe entry point for import Navigation from 'react-native-navigation'
e2edetox e2e tests on both Android and iOS
playgroundThe end-user project all e2e tests run against. Contains its own src, android and ios. Does not have its own package.json, depends on the local <root>/lib for faster local development (no need to npm install locally).
integrationmisc javascript integration tests, proving integration with other libraries like redux
scriptsall scripts

Scripts#

CommandDescription
npm installinstalls dependencies
npm run buildcompiles TypeScript sources ./lib/src into javascript ./lib/dist
npm run cleancleans all build directories, stops packager, fixes flakiness by removing watchman cache, etc.
npm run startstarts the react-native packager for local debugging
npm run xcodefor convenience, opens xcode in this project
npm run install-androidbuilds playground debug/release version and installs on running android devices/emulators.
Options: -- --release
npm run uninstall-androiduninstalls playground from running android devices/simulators
npm run test-jsruns javascript tests and coverage report
npm run test-unit-iosruns ios unit tests in debug/release
Options: -- --release
npm run test-unit-androidruns android unit tests in debug/release
Options: -- --release
npm run test-e2e-iosruns the ios e2e tests using detox in debug/release
Options: -- --release
npm run test-e2e-androidruns the android e2e tests using detox in debug/release
Options: -- --release
npm run test-allruns all tests in parallel