From bce5fde5cb72b28a04e32db8abdc4298fc184f48 Mon Sep 17 00:00:00 2001 From: Brent Vatne Date: Sat, 3 Feb 2018 10:53:38 -0800 Subject: [PATCH] Update README --- COMMUNITY_RESOURCES.md | 43 +++++++++++++ README.md | 140 +++++++---------------------------------- 2 files changed, 67 insertions(+), 116 deletions(-) create mode 100644 COMMUNITY_RESOURCES.md diff --git a/COMMUNITY_RESOURCES.md b/COMMUNITY_RESOURCES.md new file mode 100644 index 00000000..40007664 --- /dev/null +++ b/COMMUNITY_RESOURCES.md @@ -0,0 +1,43 @@ +## Community resources + +A lot of developers poured their knowledge in blog posts, and other repos - we will try to keep here a list of resources to help someone who wants to learn about React Navigation and techniques to handle navigation effectively. + +#### Introduction to the library + +* [Getting Started with React Navigation](https://hackernoon.com/getting-started-with-react-navigation-the-navigation-solution-for-react-native-ea3f4bd786a4) + +#### Basic Tutorials + +* [Basic ReactNavigation Example App and Tutorial](http://docs.nativebase.io/docs/examples/navigation/StackNavigationExample.html) +* [Understanding Navigation in React Native](https://www.codementor.io/blessingoraz/understanding-navigation-in-react-native-a3wlcxmzu?published=1#.WXfDlvk_ooE.twitter) +* [Comprehensive routing and navigation in React Native made easy](https://medium.com/@kevinle/comprehensive-routing-and-navigation-in-react-native-made-easy-6383e6cdc293) +* [Replace a Screen Using React Navigation](https://medium.com/handlebar-labs/replace-a-screen-using-react-navigation-a503eab207eb) + +#### Intermediate Concepts + +* [Integrating React-Navigation and Redux with authentication flow](https://medium.com/@shubhnik/a-comprehensive-guide-for-integrating-react-navigation-with-redux-including-authentication-flow-cb7b90611adf) +* [Using React Navigation and Redux in your React Native Application](https://medium.com/modus-create-front-end-development/using-react-navigation-and-redux-in-your-react-native-application-efac33265138) +* [React-Navigation, complete Redux state management, tab-bar, and multiple navigators](https://medium.com/@parkerdan/react-navigation-with-complete-redux-state-management-tab-bar-and-multiple-navigators-ed30a69d9a4d) +* [Custom Drawer with React-Navigation in React-Native](http://www.skywardsoftwares.co.in/react-native/custom-drawer-with-react-navigation-in-react-native/) +* [React Navigation Drawer - a tutorial series](https://shift.infinite.red/react-navigation-drawer-tutorial-a802fc3ee6dc) + +#### Advanced Topics + +* [Full Stack React Native Development using GraphCool and Apollo Subscriptions + React Navigation](https://medium.com/react-native-training/full-stack-react-native-development-using-graphcool-and-apollo-subscriptions-react-navigation-cdb3e1374c05) + +#### Comparisons and Discussion + +* [Migrate from ExNavigation to React Navigation](https://hackernoon.com/migrate-from-exnavigation-to-react-navigation-1af661ec5082) +* [Playing with React Navigation and Airbnb's Native Navigation](https://medium.com/@ericvicenti/playing-with-react-navigation-and-airbnbs-native-navigation-4e49fc765489) +* [How we restructured our app with React Navigation](https://m.oursky.com/how-we-restructured-our-app-with-react-navigation-98a89e219c26) +* [What’s Happening with Navigation in React Native?](https://blog.revisify.com/whats-happening-with-navigation-in-react-native-c193535888c3) + +#### Example Projects + +* [Yaba-Social](https://github.com/allpwrfulroot/yaba-social) +* [React Native Boilerplate with React Navigation and Redux integration](https://github.com/verybluebot/react-native-boilerplate) + +#### Libraries + +* [react-navigation-addons](https://github.com/satya164/react-navigation-addons) +* [react-navigation-props-mapper](https://github.com/vonovak/react-navigation-props-mapper) diff --git a/README.md b/README.md index 318bc255..a8ee3060 100644 --- a/README.md +++ b/README.md @@ -2,151 +2,59 @@ [![npm version](https://badge.fury.io/js/react-navigation.svg)](https://badge.fury.io/js/react-navigation) [![codecov](https://codecov.io/gh/react-community/react-navigation/branch/master/graph/badge.svg)](https://codecov.io/gh/react-community/react-navigation) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactnavigation.org/docs/guides/contributors) -*Learn once, navigate anywhere.* - React Navigation is born from the React Native community's need for an extensible yet easy-to-use navigation solution based on Javascript. -React Navigation is the result of a collaboration between developers from Facebook, Expo and the React community at large: it replaces and improves upon several navigation libraries in the ecosystem, including Ex-Navigation, React Native's Navigator and NavigationExperimental components. - -* [Installation](#installation) -* [Community contributions](#community-contributions) - * [Introduction to the library](#introduction-to-the-library) - * [Basic Tutorials](#basic-tutorials) - * [Intermediate Concepts](#intermediate-concepts) - * [Advanced Topics](#advanced-topics) - * [Comparisons and Discussion](#comparisons-and-discussion) - * [Example Projects](#example-projects) - * [Libraries](#libraries) -* [FAQs](#faqs) - * [When is version 1.0.0 going to be released?](#when-is-version-100-going-to-be-released) - * [I'm having troubles using the library, what can I do?](#im-having-troubles-using-the-library-what-can-i-do) - * [My app is really slow!](#my-app-is-really-slow) - * [How can I help?](#how-can-i-help) - * [Is this the only library available for navigation?](#is-this-the-only-library-available-for-navigation) - * [Can I use this library for web?](#can-i-use-this-library-for-web) -* [Code of conduct](#code-of-conduct) -* [License](#license) - ## Installation Since the library is a JS-based solution, to install the latest version of react-navigation you only need to run: - ```bash - yarn add react-navigation - ``` +```bash +yarn add react-navigation +``` - or +or - ```bash - npm install --save react-navigation - ``` +```bash +npm install --save react-navigation +``` -## Get Started +## Documentation -To learn how the library work, head to the [introduction](https://reactnavigation.org/docs/intro/) on the website for a quick tutorial that will cover all the basics - or try it out [our expo demo](https://exp.host/@react-navigation/NavigationPlayground). +* The best way to learn is to follow the [Getting started guide](https://reactnavigation.org/docs/getting-started.html) on the website for a quick tutorial that will cover all the fundamentals. +* The documentation explains common use cases in the "How do I do ...?" section, such as [tab navigation](https://reactnavigation.org/docs/tab-based-navigation.html) and [Redux integration](https://reactnavigation.org/docs/redux-integration.html). +* If you need to build your own navigator, [there's a section for that](https://reactnavigation.org/docs/custom-navigator-overview.html). +* The [API reference](https://reactnavigation.org/docs/api-reference.html) lists all public APIs. +* The [Community Resources](https://github.com/react-navigation/react-navigation/blob/master/COMMUNITY_RESOURCES.md) document lists some other resources submitted to us by people who use React Navigation. Feel free to open a pull request to add your resource to the list. -#### Advanced guides +## Try it out -* [Redux integration](https://reactnavigation.org/docs/guides/redux) -* [Deep linking](https://reactnavigation.org/docs/guides/linking) - -#### React Navigation API - -* [Navigators](https://reactnavigation.org/docs/navigators/) -* [Routers](https://reactnavigation.org/docs/routers/) -* [Views](https://reactnavigation.org/docs/views/) - -## Community contributions - -A lot of developers poured their knowledge in blog posts, and other repos - we will try to keep here a list of tutorials and resources to help someone who wants to learn about React Navigation and techniques to handle navigation effectively. - -#### Introduction to the library - -* [Getting Started with React Navigation](https://hackernoon.com/getting-started-with-react-navigation-the-navigation-solution-for-react-native-ea3f4bd786a4) - -#### Basic Tutorials - -* [Basic ReactNavigation Example App and Tutorial](http://docs.nativebase.io/docs/examples/navigation/StackNavigationExample.html) -* [Understanding Navigation in React Native](https://www.codementor.io/blessingoraz/understanding-navigation-in-react-native-a3wlcxmzu?published=1#.WXfDlvk_ooE.twitter) -* [Comprehensive routing and navigation in React Native made easy](https://medium.com/@kevinle/comprehensive-routing-and-navigation-in-react-native-made-easy-6383e6cdc293) -* [Replace a Screen Using React Navigation](https://medium.com/handlebar-labs/replace-a-screen-using-react-navigation-a503eab207eb) - -#### Intermediate Concepts - -* [Integrating React-Navigation and Redux with authentication flow](https://medium.com/@shubhnik/a-comprehensive-guide-for-integrating-react-navigation-with-redux-including-authentication-flow-cb7b90611adf) -* [Using React Navigation and Redux in your React Native Application](https://medium.com/modus-create-front-end-development/using-react-navigation-and-redux-in-your-react-native-application-efac33265138) -* [React-Navigation, complete Redux state management, tab-bar, and multiple navigators](https://medium.com/@parkerdan/react-navigation-with-complete-redux-state-management-tab-bar-and-multiple-navigators-ed30a69d9a4d) -* [Custom Drawer with React-Navigation in React-Native](http://www.skywardsoftwares.co.in/react-native/custom-drawer-with-react-navigation-in-react-native/) -* [React Navigation Drawer - a tutorial series](https://shift.infinite.red/react-navigation-drawer-tutorial-a802fc3ee6dc) - -#### Advanced Topics - -* [Full Stack React Native Development using GraphCool and Apollo Subscriptions + React Navigation](https://medium.com/react-native-training/full-stack-react-native-development-using-graphcool-and-apollo-subscriptions-react-navigation-cdb3e1374c05) - -#### Comparisons and Discussion - -* [Migrate from ExNavigation to React Navigation](https://hackernoon.com/migrate-from-exnavigation-to-react-navigation-1af661ec5082) -* [Playing with React Navigation and Airbnb's Native Navigation](https://medium.com/@ericvicenti/playing-with-react-navigation-and-airbnbs-native-navigation-4e49fc765489) -* [How we restructured our app with React Navigation](https://m.oursky.com/how-we-restructured-our-app-with-react-navigation-98a89e219c26) -* [What’s Happening with Navigation in React Native?](https://blog.revisify.com/whats-happening-with-navigation-in-react-native-c193535888c3) - -#### Example Projects - -* [Yaba-Social](https://github.com/allpwrfulroot/yaba-social) -* [React Native Boilerplate with React Navigation and Redux integration](https://github.com/verybluebot/react-native-boilerplate) - -#### Libraries - -* [react-navigation-addons](https://github.com/satya164/react-navigation-addons) -* [react-navigation-props-mapper](https://github.com/vonovak/react-navigation-props-mapper) +You can also try out the [Navigation Playground app](https://exp.host/@react-navigation/NavigationPlayground) to get a sense for some of the tools built in to React Navigation. The "Fundamentals" in the documentation also include examples you can play with. ## FAQs -#### When is version 1.0.0 going to be released? - -As soon as all the tasks [here](https://github.com/react-community/react-navigation/issues/2585) have been completed. You can read more about it in the [blog](https://reactnavigation.org/blog/2017/9/Renewed-v1). - -(in the meantime, you can find the changelog for every release [here](https://github.com/react-community/react-navigation/releases)) - #### I'm having troubles using the library, what can I do? -Head to the [issues](https://github.com/react-community/react-navigation/issues) and do a quick search: if you think you are experiencing a bug chances are somebody already opened an issue for it. If instead you are having more general problems, use [Stack Overflow](https://stackoverflow.com/search?q=react-navigation) - which is better suited and helps keeping the Issues section of the repo clean. Alternatively you could join the [Reactiflux](https://www.reactiflux.com/) community on Discord where there are React Native and React Navigation channels with helpful people who might be able to answer you. - -You should **only** open a new issue if you believe that you are experiencing a bug or have a feature request, and please **follow** the dedicated template - it will help everyone helping you (and may get closed if it doesn't). - -#### My app is really slow! - -We are aware that the performances can be improved - we will work on this (keep an eye on the roadmap linked above). In the meantime, please refer to these few issues for specific information regarding: - -* [Tab Navigators](https://github.com/react-community/react-navigation/issues/739) - -* [Stack Navigators](https://github.com/react-community/react-navigation/issues/608) - -In particular, refer to [this comment](https://github.com/react-community/react-navigation/issues/608#issuecomment-328635042) (and the [one after](https://github.com/react-community/react-navigation/issues/608#issuecomment-333386346) that) to learn more about how you can try improving the performance of your code. +See [the help page](https://reactnavigation.org/en/help.html). #### How can I help? Glad you ask! This library is a community effort: it can only be great if we all help out in one way or another 😄 . If you feel like you aren't experienced enough using react navigation to contribute, you can still make an impact by: -1. Responding to one of the open [issues](https://github.com/react-community/react-navigation/issues). Even if you can't resolve or fully answer a question, asking for more information or clarity on an issue is extremely beneficial for someone to come after you to resolve the issue. +* Responding to one of the open [issues](https://github.com/react-community/react-navigation/issues). Even if you can't resolve or fully answer a question, asking for more information or clarity on an issue is extremely beneficial for someone to come after you to resolve the issue. +* Creating public example repos of navigation problems you have solved. +* Answering questions on [Stack Overflow](https://stackoverflow.com/search?q=react-navigation). Alternatively, asking questions on Stack Overflow instead of opening an issue. +* Answering questions in our [Reactiflux](https://www.reactiflux.com/) channel. +* Providing feedback on the open [PRs](https://github.com/react-community/react-navigation/pulls). -1. Creating public example repos of navigation problems you have solved. - -1. Answering questions on [Stack Overflow](https://stackoverflow.com/search?q=react-navigation). Alternatively, asking questions on Stack Overflow instead of opening an issue. - -1. Answering questions in our [Reactiflux](https://www.reactiflux.com/) channel. - -1. Providing feedback on the open [PRs](https://github.com/react-community/react-navigation/pulls). - -If you feel brave enough you can submit a PR: follow the [Contributors guide](https://reactnavigation.org/docs/guides/contributors) to find out how. If you don't know where to start, check the ones with the label [`good first issue`](https://github.com/react-community/react-navigation/labels/good%20first%20issue) - even [fixing a typo in the documentation](https://github.com/react-community/react-navigation/pull/2727) is a worthy contribution! +If you would like to submit a pull request, please follow the [Contributors guide](https://reactnavigation.org/docs/contributing.html) to find out how. If you don't know where to start, check the ones with the label [`good first issue`](https://github.com/react-community/react-navigation/labels/good%20first%20issue) - even [fixing a typo in the documentation](https://github.com/react-community/react-navigation/pull/2727) is a worthy contribution! #### Is this the only library available for navigation? -No: there are some other libraries - which, depending on your project, can be better or worse suited for your project. They differ in the approach and implementation from `react-navigation`, but share the common goal of helping you create a good React Native application; you can find a general round up in the [React Native docs](http://facebook.github.io/react-native/docs/navigation.html). +No: there are some other libraries - which, depending on your project, can be better or worse suited for your project. Read more in the [alternative libraries](https://reactnavigation.org/docs/alternatives.html) documentation, and read React Navigation's [pitch & anti-pitch](https://reactnavigation.org/docs/pitch.html) to understand the tradeoffs. #### Can I use this library for web? -This library originally planned to support web too - but at the moment [it is not a priority](https://github.com/react-community/react-navigation/issues/2585#issuecomment-330338793) for v1.0; a lot of work is necessary to reach it as-is and we had to freeze this support (consider it ["experimental"](https://reactnavigation.org/docs/guides/web)). +This library originally planned to support web too - but at the moment [it is not a priority](https://github.com/react-community/react-navigation/issues/2585#issuecomment-330338793) for v1.0; a lot of work is necessary to reach it as-is and we had to freeze this support (consider it "experimental"). ## Code of conduct