Skip to content

Commit

Permalink
Upgrade docusaurus
Browse files Browse the repository at this point in the history
  • Loading branch information
satya164 committed Nov 14, 2020
1 parent 0b5138a commit b35f43e
Show file tree
Hide file tree
Showing 97 changed files with 3,833 additions and 1,896 deletions.
30 changes: 30 additions & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
name: Build

on: [pull_request]

jobs:
deploy:
name: Build pages
runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v1

- name: Use Node.js 10
uses: actions/setup-node@v1
with:
node-version: 10

- name: Restore yarn cache
id: yarn-cache
uses: actions/cache@master
with:
path: '**/node_modules'
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}

- name: Install dependencies
if: steps.yarn-cache.outputs.cache-hit != 'true'
run: yarn install --frozen-lockfile

- name: Build pages
run: yarn build
4 changes: 2 additions & 2 deletions .github/workflows/main.yml
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
name: CI
name: Deploy

on:
push:
Expand All @@ -7,7 +7,7 @@ on:

jobs:
deploy:
name: Deploy
name: Deploy to Github Pages
runs-on: ubuntu-latest

steps:
Expand Down
4 changes: 2 additions & 2 deletions blog/2018-02-06-react-navigation-1.0.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,6 @@ As of today, React Navigation version 1.0 has been released! To see a list of re

This release isn’t meant to be interpreted as a signal that React Navigation is “finished" — work is already underway on a number of significant changes to the API that aim to make React Navigation easier to use and more powerful. These changes will be run through our [new RFC process](https://github.com/react-navigation/rfcs). For example, the [Navigator View API RFC](https://github.com/react-navigation/rfcs/blob/master/text/0002-navigator-view-api.md) outlines a plan to decouple views from the router in order to make it easier for other navigation APIs, such as [react-native-router-flux](https://github.com/aksonov/react-native-router-flux) and [react-router-native](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-native), to build on top of the same navigation views. We’re also very excited about a plan (no RFC is open yet, but keep an eye out for it) to use [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler) to run navigation gestures (sliding a drawer open, or swiping back on a stack, for example) on the UI thread using the Animated native driver.

Last week we released an updated version of our [documentation website](https://reactnavigation.org/docs/getting-started.html), built using [Docusaurus](https://docusaurus.io/). We hope that the new documentation will help newcomers get onboarded with the fundamentals of React Navigation, and serve as an ongoing resource to handle specific use cases as you come across them (under the “How do I do..?” section). [Contributions to the documentation are very welcome](https://github.com/react-navigation/react-navigation.github.io).
Last week we released an updated version of our [documentation website](/docs/1.x/getting-started), built using [Docusaurus](https://docusaurus.io/). We hope that the new documentation will help newcomers get onboarded with the fundamentals of React Navigation, and serve as an ongoing resource to handle specific use cases as you come across them (under the “How do I do..?” section). [Contributions to the documentation are very welcome](https://github.com/react-navigation/react-navigation.github.io).

[Give React Navigation 1.0 a try](https://reactnavigation.org/docs/getting-started.html), [post a feature request](https://react-navigation.canny.io/feature-requests) if you think something is missing, [open a RFC](https://github.com/react-navigation/rfcs) if you have an idea of how to implement it, [file a detailed bug report](https://github.com/react-navigation/react-navigation/issues) when you encounter problems (or [open a pull request](https://github.com/react-navigation/react-navigation/pulls) if you know how to fix them)! Updating your existing installation should be easy if you have tracked releases over recent months — [read the brief release notes](https://github.com/react-navigation/react-navigation/releases/tag/1.0.0) for more information.
[Give React Navigation 1.0 a try](/docs/1.x/getting-started), [post a feature request](https://react-navigation.canny.io/feature-requests) if you think something is missing, [open a RFC](https://github.com/react-navigation/rfcs) if you have an idea of how to implement it, [file a detailed bug report](https://github.com/react-navigation/react-navigation/issues) when you encounter problems (or [open a pull request](https://github.com/react-navigation/react-navigation/pulls) if you know how to fix them)! Updating your existing installation should be easy if you have tracked releases over recent months — [read the brief release notes](https://github.com/react-navigation/react-navigation/releases/tag/1.0.0) for more information.
6 changes: 3 additions & 3 deletions blog/2018-04-06-react-navigation-2.0-rc.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ This blog post is not a comprehensive changelog - that will come with the 2.0 pr

In 1.x, `navigate(routeName)` and `push(routeName)` were very similar: every time you called `navigate(routeName)` it would push a new route to the stack, regardless. Now `navigate(routeName)` will first try to find an existing instance of the route and jump to that if it exists, otherwise it will push the route to the stack.

To update your app for this change you may need to change `navigate` to `push` in places where you would like to push a new route every time. Alternatively, you could consider using a `key`: `navigate({routeName: ‘MyRoute’, key: data.uniqueId, params: data})`. [Read more about navigation with keys](/docs/en/navigation-key.html).
To update your app for this change you may need to change `navigate` to `push` in places where you would like to push a new route every time. Alternatively, you could consider using a `key`: `navigate({routeName: ‘MyRoute’, key: data.uniqueId, params: data})`. [Read more about navigation with keys](/docs/2.x/navigation-key).

Read more about this in [RFC 4](https://github.com/react-navigation/rfcs/blob/master/text/0004-less-pushy-navigate.md).

Expand All @@ -43,7 +43,7 @@ A common source of confusion for developers working with React Navigation has be

### New API for creating navigators

This does not impact most users, but if you have any custom navigators in your app, read on. Read more about the changes in [RFC 2](https://github.com/react-navigation/rfcs/blob/master/text/0002-navigator-view-api.md). Also read the [custom navigators documentation](https://reactnavigation.org/docs/en/custom-navigators.html).
This does not impact most users, but if you have any custom navigators in your app, read on. Read more about the changes in [RFC 2](https://github.com/react-navigation/rfcs/blob/master/text/0002-navigator-view-api.md). Also read the [custom navigators documentation](/docs/2.x/custom-navigators).

### Drawer routes have been replaced with actions

Expand Down Expand Up @@ -76,6 +76,6 @@ This change was made to improve the ease of learning and understanding the libra

## New feature highlights

- State persistence - automatically save state and reload it when the app restarts. See https://reactnavigation.org/docs/en/state-persistence.html
- State persistence - automatically save state and reload it when the app restarts. See [state persistence docs](docs/state-persistence)
- Transitions between screens in stack with headers and without headers now animates as expected on iOS. https://github.com/react-navigation/react-navigation/pull/3821. Thanks [skevy](https://github.com/skevy)!
- As mentioned above, `createMaterialBottomNavigator` is a new navigator type that provides the material design bottom tab bar pattern.
8 changes: 4 additions & 4 deletions blog/2018-05-07-react-navigation-2.0.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ author_image_url: https://avatars0.githubusercontent.com/u/90494?s=200&v=4
tags: [release, announcement]
---

The documentation is now live at https://reactnavigation.org, and v1 lives [here](/docs/en/1.x/getting-started.html).
The documentation is now live at https://reactnavigation.org, and v1 lives [here](/docs/1.x/getting-started).

<!--truncate-->

Expand All @@ -19,7 +19,7 @@ The following changes are considered “significant” because they can’t be f

In 1.x, `navigate(routeName)` and `push(routeName)` were very similar: every time you called `navigate(routeName)` it would push a new route to the stack. Now `navigate(routeName)` will first try to find an existing instance of the route and jump to that if it exists, otherwise it will push the route to the stack.

To update your app for this change you may need to change `navigate` to `push` in places where you would like to push a new route every time. Alternatively, you could consider using a `key`: `navigate({routeName: ‘MyRoute’, key: data.uniqueId, params: data})`. [Read more about navigation with keys](/docs/en/navigation-key.html).
To update your app for this change you may need to change `navigate` to `push` in places where you would like to push a new route every time. Alternatively, you could consider using a `key`: `navigate({routeName: ‘MyRoute’, key: data.uniqueId, params: data})`. [Read more about navigation with keys](/docs/2.x/navigation-key).

Read more about this in [RFC 4](https://github.com/react-navigation/rfcs/blob/master/text/0004-less-pushy-navigate.md) and [commit 7a978b1](https://github.com/react-navigation/react-navigation/commit/7a978b1087ff3acc7dd71267bd900d15c932d7cc).

Expand All @@ -35,15 +35,15 @@ Read about this in [RFC 4](https://github.com/react-navigation/rfcs/blob/master/

A common source of confusion for developers working with React Navigation has been around `navigationOptions` resolution. For example, if you have a stack navigator with a header, and a drawer inside of that stack, then in some circumstances the title of the stack would change every time you change screens in the drawer. This is because the stack navigator would crawl into child navigators and pull `navigationOptions` off of the deepest active screen. As of 2.0, this no longer happens: navigators will only look at their direct children for `navigationOptions`.

Read more about the justification for this in [RFC 5](https://github.com/react-navigation/rfcs/blob/master/text/0005-shallow-navigation-options.md). Also see the new documentation page [Navigation options resolution](https://reactnavigation.org/docs/en/navigation-options-resolution.html) to learn more.
Read more about the justification for this in [RFC 5](https://github.com/react-navigation/rfcs/blob/master/text/0005-shallow-navigation-options.md). Also see the new documentation page [Navigation options resolution](/docs/2.x/navigation-options-resolution) to learn more.

### New API for creating navigators

It is now easier to create and maintain custom navigators. The new `createNavigator` API fully decouples the navigation view from the router. Information about each screen is available on a single "descriptor", including the pre-computed child navigation prop, allowing you to focus on custom navigation views.

Custom navigators can now provide actions helpers for their screens. For example, the new drawer navigator now allows `props.navigation.openDrawer()` within its screen components.

This does not impact most users - you won't need to make any changes for this unless you use custom navigators in your app. Read more about the changes in [RFC 2](https://github.com/react-navigation/rfcs/blob/master/text/0002-navigator-view-api.md). Also read the [custom navigators documentation](/docs/en/custom-navigators.html). You can also watch the ["Creating a navigator" section in this talk](https://youtu.be/wJJZ9Od8MjM?t=1215) to learn more.
This does not impact most users - you won't need to make any changes for this unless you use custom navigators in your app. Read more about the changes in [RFC 2](https://github.com/react-navigation/rfcs/blob/master/text/0002-navigator-view-api.md). Also read the [custom navigators documentation](/docs/2.x/custom-navigators). You can also watch the ["Creating a navigator" section in this talk](https://youtu.be/wJJZ9Od8MjM?t=1215) to learn more.

## Trivial breaking changes

Expand Down
2 changes: 1 addition & 1 deletion blog/2018-11-17-react-navigation-3.0.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ author_image_url: https://avatars0.githubusercontent.com/u/90494?s=200&v=4
tags: [release, announcement]
---

The documentation is now live at https://reactnavigation.org, and v2 lives [here](/docs/en/2.x/getting-started.html).
The documentation is now live at https://reactnavigation.org, and v2 lives [here](/docs/2.x/getting-started).

This is the first release where React Navigation depends on a native module outside of React Native core: it now depends on react-native-gesture-handler. This library provides an excellent set of primitives for leveraging the operating systems’ native gesture APIs and has enabled us to fix a variety of issues with stack and drawer navigators. React Navigation also depends on react-native-screens, but you don’t need to install the native module if you prefer not to use it (we have a blog post coming soon that will explain what react-native-screens is and why you may want to use it, or you can watch [this talk](https://www.youtube.com/watch?v=Z0Jl1KCWiag) by the author of the library).

Expand Down
2 changes: 1 addition & 1 deletion blog/2019-09-16-react-navigation-4.0.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ author_image_url: https://avatars2.githubusercontent.com/u/1174278?s=200&v=4
tags: [release, announcement]
---

The documentation is now live at https://reactnavigation.org, and v3 lives [here](/docs/en/3.x/getting-started.html).
The documentation is now live at https://reactnavigation.org, and v3 lives [here](/docs/3.x/getting-started).

In this release, we have removed the navigators from the react-navigation package. The navigators have lived in separate packages for quite a while and you could already use those packages manually, but we still bundled them in the react-navigation package. This made it difficult for us to release significant updates to navigators, because we had to then do a major version release of react-navigation too. By separating the navigator packages there is more freedom to update and improve navigators without any impact on folks that don't use them.

Expand Down
2 changes: 1 addition & 1 deletion blog/2019-11-04-using-react-navigation-5-with-ui-kitten.md
Original file line number Diff line number Diff line change
Expand Up @@ -471,7 +471,7 @@ export interface ResetPasswordScreenProps {
}
```

Now you can modify props of Auth screens props by adding types to make your autocomplete and IntelliSense work. For more complex examples, consider reading [type-checking](https://reactnavigation.org/docs/en/typescript.html) doc or reviewing [complete demo application sources](https://github.com/artyorsh/react-navigation-ex-demo/tree/complete-exmaples).
Now you can modify props of Auth screens props by adding types to make your autocomplete and IntelliSense work. For more complex examples, consider reading [type-checking](/docs/typescript) doc or reviewing [complete demo application sources](https://github.com/artyorsh/react-navigation-ex-demo/tree/complete-exmaples).

<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/typescript.gif" />

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export default function App() {

The **PaperProvider** provides the theme to all the components in the framework. It also acts as a portal to components that need to be rendered at the top level. Check the full [Getting-Started](https://callstack.github.io/react-native-paper/getting-started.html) page for more information.

React Navigation setup looks similar. There is a component called **NavigationContainer** which manages our navigation tree and contains the navigation state. It must wrap all navigator structure. We will render this component in **App.tsx** inside a **PaperProvider**. More information can be found in the official [documentation](https://reactnavigation.org/docs/en/hello-react-navigation.html).
React Navigation setup looks similar. There is a component called **NavigationContainer** which manages our navigation tree and contains the navigation state. It must wrap all navigator structure. We will render this component in **App.tsx** inside a **PaperProvider**. More information can be found in the official [documentation](/docs/hello-react-navigation).

```jsx
import React from 'react';
Expand Down Expand Up @@ -456,7 +456,7 @@ function onTweetPress() {

The implementation of `Feed` and `Details` components is quite big and complex, that's why I am not gonna post it here. Please make sure to check it out on [github repo](https://github.com/Trancever/twitterClone)

We have covered only the basics of navigating between screens. If you want to learn more details check the official [documentation](https://reactnavigation.org/docs/en/navigating.html).
We have covered only the basics of navigating between screens. If you want to learn more details check the official [documentation](/docs/navigating).

Now, let's see what does the app looks like with Stack Navigator and Paper's Appbar.

Expand Down Expand Up @@ -673,7 +673,7 @@ export const BottomTabs = () => {

In the last step we will add ability to show different icon depending on the active tab.

We will take an advantage of our `BottomTabs` component being one of a Stack's screen. It means it has an access to the `route` object that is passed to each screen as a prop. This object contains an information about current screen which means we can access it and conditionally render proper icon. This is not a very common pattern and it can be confusing at first, so make sure to read the whole [guide](https://reactnavigation.org/docs/en/screen-options-resolution.html) on how to use it and what can be achieved by using it.
We will take an advantage of our `BottomTabs` component being one of a Stack's screen. It means it has an access to the `route` object that is passed to each screen as a prop. This object contains an information about current screen which means we can access it and conditionally render proper icon. This is not a very common pattern and it can be confusing at first, so make sure to read the whole [guide](/docs/screen-options-resolution) on how to use it and what can be achieved by using it.

```jsx
import React from 'react';
Expand Down Expand Up @@ -842,7 +842,7 @@ If code for themes merging looks complex, you can use a [deepmerge](https://www.
#### Custom themes
Of course, the built-in themes are not the only themes we can apply. Both libraries allow full customization and you can learn about it in the official documentation ([React Navigation](https://reactnavigation.org/docs/en/themes.html), [React Native Paper](https://callstack.github.io/react-native-paper/theming.html))
Of course, the built-in themes are not the only themes we can apply. Both libraries allow full customization and you can learn about it in the official documentation ([React Navigation](/docs/themes), [React Native Paper](https://callstack.github.io/react-native-paper/theming.html))
In the last step, I want to show you how to change the theme dynamically. We will implement a switch in a drawer that will allow users choosing light or dark theme.
Expand Down
Loading

0 comments on commit b35f43e

Please sign in to comment.