Skip to content

Commit

Permalink
Add tab view and drawer to the docs
Browse files Browse the repository at this point in the history
  • Loading branch information
satya164 committed Mar 14, 2023
1 parent 91f0824 commit 6f2206e
Show file tree
Hide file tree
Showing 46 changed files with 2,032 additions and 234 deletions.
2 changes: 1 addition & 1 deletion blog/2018-04-06-react-navigation-2.0-rc.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ Exactly two months after the release of React Navigation 1.0, we are close to an

<!--truncate-->

```sh
```bash
yarn add react-navigation@^2.0.0-rc.1
```

Expand Down
2 changes: 1 addition & 1 deletion blog/2021-03-12-react-navigation-6.0-next.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ We'll share few highlights of the release in this blog post. If you're looking f

If you'd like to try it out, add `@^6.x` to the package, you're installing. For example:

```sh npm2yarn
```bash npm2yarn
npm install @react-navigation/native@^6.x @react-navigation/stack@^6.x
```

Expand Down
Binary file added static/assets/libraries/tab-view.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions versioned_docs/version-1.x/deep-linking.md
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ In Xcode, open the project at `SimpleApp/ios/SimpleApp.xcodeproj`. Select the pr

Now you can press play in Xcode, or re-build on the command line:

```sh
```bash
react-native run-ios
```

Expand Down Expand Up @@ -160,7 +160,7 @@ In `SimpleApp/android/app/src/main/AndroidManifest.xml`, do these followings adj

Now, re-install the app:

```sh
```bash
react-native run-android
```

Expand Down
4 changes: 2 additions & 2 deletions versioned_docs/version-2.x/deep-linking.md
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ In Xcode, open the project at `SimpleApp/ios/SimpleApp.xcodeproj`. Select the pr

Now you can press play in Xcode, or re-build on the command line:

```sh
```bash
react-native run-ios
```

Expand Down Expand Up @@ -160,7 +160,7 @@ In `SimpleApp/android/app/src/main/AndroidManifest.xml`, do these followings adj

Now, re-install the app:

```sh
```bash
react-native run-android
```

Expand Down
4 changes: 2 additions & 2 deletions versioned_docs/version-3.x/deep-linking.md
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ In Xcode, open the project at `SimpleApp/ios/SimpleApp.xcodeproj`. Select the pr

Now you can press play in Xcode, or re-build on the command line:

```sh
```bash
react-native run-ios
```

Expand Down Expand Up @@ -195,7 +195,7 @@ In `SimpleApp/android/app/src/main/AndroidManifest.xml`, do these followings adj

Now, re-install the app:

```sh
```bash
react-native run-android
```

Expand Down
4 changes: 2 additions & 2 deletions versioned_docs/version-3.x/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ Next, if you are not using the Expo managed workflow then you need to link these

On iOS, to complete the linking, make sure you have [Cocoapods](https://cocoapods.org/) installed. Then run:

```sh
```bash
cd ios
pod install
cd ..
Expand All @@ -56,7 +56,7 @@ Next, if you are not using the Expo managed workflow then you need to link these
If you're on an older React Native version, you need to manually link the dependencies. To do that, run:

```sh
```bash
react-native link react-native-reanimated
react-native link react-native-gesture-handler
```
Expand Down
16 changes: 8 additions & 8 deletions versioned_docs/version-4.x/deep-linking.md
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ The reason that is necessary to use `Linking.createURL` is that the scheme will

To test the URI on the simulator in the Expo client app, run the following:

```sh
```bash
xcrun simctl openurl booted [ put your URI prefix in here ]

// for example
Expand All @@ -113,7 +113,7 @@ xcrun simctl openurl booted exp://127.0.0.1:19000/--/chat/Eric

To test the intent handling in the Expo client app on Android, run the following:

```sh
```bash
adb shell am start -W -a android.intent.action.VIEW -d "[ put your URI prefix in here ]" host.exp.exponent

# for example
Expand Down Expand Up @@ -145,7 +145,7 @@ Let's configure the native iOS app to open based on the `mychat://` URI scheme.

In `SimpleApp/ios/SimpleApp/AppDelegate.m`:

```sh
```bash
// Add the header at the top of the file:
#import <React/RCTLinkingManager.h>

Expand All @@ -163,13 +163,13 @@ In Xcode, open the project at `SimpleApp/ios/SimpleApp.xcodeproj`. Select the pr

Now you can press play in Xcode, or re-build on the command line:

```sh
```bash
react-native run-ios
```

To test the URI on the simulator, run the following:

```sh
```bash
xcrun simctl openurl booted mychat://chat/Eric
```

Expand All @@ -184,7 +184,7 @@ In `SimpleApp/android/app/src/main/AndroidManifest.xml`, do these followings adj
1. Set `launchMode` of `MainActivity` to `singleTask` in order to receive intent on existing `MainActivity`. It is useful if you want to perform navigation using deep link you have been registered - [details](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters)
2. Add the new `intent-filter` inside the `MainActivity` entry with a `VIEW` type action:

```sh
```bash
<activity
android:name=".MainActivity"
android:launchMode="singleTask">
Expand All @@ -203,13 +203,13 @@ In `SimpleApp/android/app/src/main/AndroidManifest.xml`, do these followings adj

Now, re-install the app:

```sh
```bash
react-native run-android
```

To test the intent handling in Android, run the following:

```sh
```bash
adb shell am start -W -a android.intent.action.VIEW -d "mychat://chat/Eric" com.simpleapp
```

Expand Down
8 changes: 4 additions & 4 deletions versioned_docs/version-4.x/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ The libraries we will install now are [`react-native-gesture-handler`](https://g

In your project directory, run:

```sh
```bash
npx expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
```

Expand All @@ -66,15 +66,15 @@ Next, we need to link these libraries. The steps depends on your React Native ve

If you're on a Mac and developing for iOS, you need to install pods to complete the linking. Make sure you have [Cocoapods](https://cocoapods.org/) installed. Then run:

```sh
```bash
cd ios; pod install; cd ..
```

- **React Native 0.59 and lower**

If you're on an older React Native version, you need to manually link the dependencies. To do that, run:
```sh
```bash
react-native link react-native-reanimated
react-native link react-native-gesture-handler
react-native link react-native-screens
Expand All @@ -99,7 +99,7 @@ Next, we need to link these libraries. The steps depends on your React Native ve
Now, run the `postinstall` script manually:
```sh
```bash
npm run postinstall
```
Expand Down
16 changes: 8 additions & 8 deletions versioned_docs/version-4.x/troubleshooting.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,13 @@ If the module points to a local file (i.e. the name of the module starts with `.

If you're using Expo, run:

```sh
```bash
expo start -c
```

If you're not using Expo, run:

```sh
```bash
npx react-native start --reset-cache
```

Expand All @@ -43,21 +43,21 @@ This and some similar errors might occur if you didn't link the [`react-native-g

On newer versions of React Native, [linking is automatic](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md), so if you have linked the library manually, first unlink it:

```sh
```bash
react-native unlink react-native-gesture-handler
```

If you're testing on iOS and use Mac, make sure you have run `pod install` in the `ios/` folder:
```sh
```bash
cd ios; pod install; cd ..
```
- **React Native 0.59 and lower**
If you're on an older React Native version, you need to manually link the library. To do that, run:

```sh
```bash
react-native link react-native-gesture-handler
```

Expand All @@ -67,7 +67,7 @@ Now rebuild the app and test on your device or simulator.

This error can often happen if you have a Babel plugin that compiles the code in a non-spec compliant way. For example:

```sh
```bash
["@babel/plugin-proposal-class-properties", { "loose": true}]
```
Expand All @@ -91,13 +91,13 @@ If you have additional options configured here, try removing them to see if it f
If you're using Expo, run:
```sh
```bash
expo start -c
```
If you're not using Expo, run:
```sh
```bash
npx react-native start --reset-cache
```
Expand Down
6 changes: 3 additions & 3 deletions versioned_docs/version-4.x/upgrading-from-3.x.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ The latest drawer and tabs depend on [`react-native-gesture-handler`](https://gi

In your project directory, run the following:

```sh
```bash
npx expo install react-native-gesture-handler react-native-reanimated
```

Expand All @@ -94,7 +94,7 @@ Next, we need to link these libraries. The steps depends on your React Native ve

To complete the linking on iOS, make sure you have [Cocoapods](https://cocoapods.org/) installed. Then run:

```sh
```bash
cd ios
pod install
cd ..
Expand All @@ -104,7 +104,7 @@ Next, we need to link these libraries. The steps depends on your React Native ve

If you're on an older React Native version, you need to manually link the dependencies. To do that, run:
```sh
```bash
react-native link react-native-reanimated
react-native link react-native-gesture-handler
```
Expand Down
2 changes: 1 addition & 1 deletion versioned_docs/version-5.x/configuring-links.md
Original file line number Diff line number Diff line change
Expand Up @@ -688,7 +688,7 @@ In the example app, you will use the Expo managed workflow. The guide will focus

First, you need to decide the navigation structure of your app. To keep it simple, the main navigator will be bottom-tabs navigator with two screens. Its first screen will be a simple stack navigator, called `HomeStack`, with two screens: `Home` and `Profile`, and the second tabs screen will be just a simple one without any nested navigators, called `Settings`:

```sh
```bash
BottomTabs
├── Stack (HomeStack)
│   ├── Home
Expand Down
16 changes: 8 additions & 8 deletions versioned_docs/version-5.x/contributing.md
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ Much like the issue template, the [pull request template](https://github.com/rea
- Fork the [`repo`](https://github.com/react-navigation/react-navigation) on GitHub
- Run these commands in the terminal to download locally and install it:

```sh
```bash
git clone https://github.com/<USERNAME>/navigation-ex.git
cd navigation-ex
git remote add upstream https://github.com/react-navigation/react-navigation.git
Expand All @@ -124,25 +124,25 @@ The project uses a monorepo structure for the packages managed by [yarn workspac

Look around. Match the style of the rest of the codebase. This project uses ESLint to ensure consistency throughout the project. You can check your project by running:

```sh
```bash
yarn lint
```

If any errors occur you'll either have to manually fix them or you can attempt to automatically fix them by running:

```sh
```bash
yarn lint --fix
```

The codebase is written in TypeScript, and must pass typecheck. To typecheck files, run:

```sh
```bash
yarn typescript
```

It's useful to run typechecking in watch mode when working on the project. To do it, run:

```sh
```bash
yarn typescript --watch
```

Expand All @@ -152,21 +152,21 @@ The [example app](https://github.com/react-navigation/react-navigation/tree/main

While developing, you can run the [example app](https://github.com/react-navigation/react-navigation/tree/main/example) with [Expo](https://expo.io/) to test your changes:

```sh
```bash
yarn example start
```

### Run Tests

React Navigation has tests implemented in [Jest](https://facebook.github.io/jest/). To run either of these, from the React Navigation directory, run either of the following commands (after installing the `node_modules`) to run tests or type-checking.

```sh
```bash
yarn test
```

It's useful to run tests in watch mode when working on the project. To do it, run:

```sh
```bash
yarn test --watch
```

Expand Down
Loading

0 comments on commit 6f2206e

Please sign in to comment.