Research the navigation library

XifeiNi commented 3 years ago

Researching the navigation library--> the pros and cons of using each within this tutorial

StuffByLiang commented 3 years ago

Our needs

A simple navigation library that allows developers to easily add screens and navigate between screens

3 options I've researched:

https://github.com/react-navigation/react-navigation 19k stars

https://github.com/aksonov/react-native-router-flux 8.9k stars

https://github.com/wix/react-native-navigation 11.8k stars

Name	React Navigation	React Native Router Flux	React Native Navigation
Stars	19k	8.9k	11.8k
	linked by react native documentation		linked by react native documentation if you need a 'native' look and feel
	Javascript Based Navigator		Not implemented in Javascript, so supports native code, but adding integration with other plugins may be harder
Easy to implement functionalities
Performance Issues	Peformance is better than React navigation
Maintained by the community and some people from React Native Core team	Maintained by the community	Maintained by Wix, who uses it for their own app

Thoughts so far We should go with React Navigation because it seems like this has the largest community support and the most stars, and is officially recommended by Facebook. I also don't believe we will encounter any issues regarding limitations or performance within the scope of our tutorial

princiya commented 3 years ago

Let's discuss this during our next weekly call. Meanwhile you want to add the react-navigation package into the project and try and see how to use? you can also compare with react-native-navigation in terms of usage.

StuffByLiang commented 3 years ago

@princya Sounds good, i'll create two branches and set up both

StuffByLiang commented 3 years ago

The goal of this tutorial app is not to learn react navigation. Keep in mind to keep it simple

princiya commented 3 years ago

@PragatiVerma18 after your branch is ready, we can use this issue to discuss the pros and cons which can be discussed next week with Rick. cc @StuffByLiang

PragatiVerma18 commented 3 years ago

React Native Navigation Research Points

Pros:

RNN by default treats all your screens as individual React applications, which, as a result, makes your app more performant.
RNN allows you to set the root of navigation from any point in your app, mimicking the native API where you can start a new activity or fragment and clear the existing stack.
Animations are really smooth

Cons:

RNN may suffer from libraries that are tightly coupled with native platforms or need to be wrapped around the whole app ex- Redux.
Complex installation for non-native developers
It’s not yet customizable enough(depends a lot on the native environment)

Looking at our use case, React Navigation is the best navigation solution available right now.

princiya commented 3 years ago

Thank you @PragatiVerma18 for writing down your observations. @StuffByLiang can you open a PR for your react-navigation branch?

MLH-Fellowship / react-native-tutorial