mirror of
https://github.com/zhigang1992/react-navigation.git
synced 2026-01-12 22:51:18 +08:00
chore: migrate to monorepo
This commit is contained in:
Satyajit Sahoo
@@ -38,7 +38,6 @@ jobs:
|
||||
at: ~/project
|
||||
- run: |
|
||||
yarn test --coverage
|
||||
cat ./coverage/lcov.info | ./node_modules/.bin/codecov
|
||||
- store_artifacts:
|
||||
path: coverage
|
||||
destination: coverage
|
||||
|
||||
@@ -5,9 +5,13 @@
|
||||
"import/core-modules": [
|
||||
"@react-navigation/core",
|
||||
"@react-navigation/native",
|
||||
"react-navigation",
|
||||
"react-navigation-animated-switch",
|
||||
"react-navigation-stack",
|
||||
"react-navigation-drawer",
|
||||
"react-navigation-tabs"
|
||||
"react-navigation-material-bottom-tabs",
|
||||
"react-navigation-tabs",
|
||||
"react-native-screens"
|
||||
]
|
||||
},
|
||||
"env": { "browser": true, "node": true }
|
||||
|
||||
1
.gitattributes
vendored
Normal file
1
.gitattributes
vendored
Normal file
@@ -0,0 +1 @@
|
||||
yarn-*.js binary
|
||||
38
.github/ISSUE_TEMPLATE/bug-report-bottom-tabs.md
vendored
38
.github/ISSUE_TEMPLATE/bug-report-bottom-tabs.md
vendored
@@ -1,38 +0,0 @@
|
||||
---
|
||||
name: Bottom Tab Navigator
|
||||
about: Report an issue with Bottom Tab Navigator (@react-navigation/bottom-tabs)
|
||||
title: ''
|
||||
labels: bug, package:bottom-tabs
|
||||
assignees: ''
|
||||
---
|
||||
|
||||
**Current Behavior**
|
||||
|
||||
- What code are you running and what is happening?
|
||||
- Include a screenshot or video if it makes sense.
|
||||
|
||||
**Expected Behavior**
|
||||
|
||||
- What do you expect should be happening?
|
||||
- Include a screenshot or video if it makes sense.
|
||||
|
||||
**How to reproduce**
|
||||
|
||||
- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
|
||||
- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
|
||||
- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
|
||||
- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
|
||||
- Before reporting an issue, make sure you are on latest version of the package.
|
||||
|
||||
**Your Environment**
|
||||
|
||||
| software | version |
|
||||
| ----------------------------- | ------- |
|
||||
| iOS or Android |
|
||||
| @react-navigation/native |
|
||||
| @react-navigation/bottom-tabs |
|
||||
| react-native-screens |
|
||||
| react-native |
|
||||
| expo |
|
||||
| node |
|
||||
| npm or yarn |
|
||||
41
.github/ISSUE_TEMPLATE/bug-report-drawer.md
vendored
41
.github/ISSUE_TEMPLATE/bug-report-drawer.md
vendored
@@ -1,41 +0,0 @@
|
||||
---
|
||||
name: Drawer Navigator
|
||||
about: Report an issue with Drawer Navigator (@react-navigation/drawer)
|
||||
title: ''
|
||||
labels: bug, package:drawer
|
||||
assignees: ''
|
||||
---
|
||||
|
||||
**Current Behavior**
|
||||
|
||||
- What code are you running and what is happening?
|
||||
- Include a screenshot or video if it makes sense.
|
||||
|
||||
**Expected Behavior**
|
||||
|
||||
- What do you expect should be happening?
|
||||
- Include a screenshot or video if it makes sense.
|
||||
|
||||
**How to reproduce**
|
||||
|
||||
- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
|
||||
- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
|
||||
- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
|
||||
- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
|
||||
- Before reporting an issue, make sure you are on latest version of the package.
|
||||
|
||||
**Your Environment**
|
||||
|
||||
| software | version |
|
||||
| ------------------------------ | ------- |
|
||||
| iOS or Android |
|
||||
| @react-navigation/native |
|
||||
| @react-navigation/drawer |
|
||||
| react-native-reanimated |
|
||||
| react-native-gesture-handler |
|
||||
| react-native-safe-area-context |
|
||||
| react-native-screens |
|
||||
| react-native |
|
||||
| expo |
|
||||
| node |
|
||||
| npm or yarn |
|
||||
@@ -1,38 +0,0 @@
|
||||
---
|
||||
name: Material Bottom Tab Navigator
|
||||
about: Report an issue with Material Bottom Tab Navigator (@react-navigation/material-bottom-tabs)
|
||||
title: ''
|
||||
labels: bug, package:material-bottom-tabs
|
||||
assignees: ''
|
||||
---
|
||||
|
||||
**Current Behavior**
|
||||
|
||||
- What code are you running and what is happening?
|
||||
- Include a screenshot or video if it makes sense.
|
||||
|
||||
**Expected Behavior**
|
||||
|
||||
- What do you expect should be happening?
|
||||
- Include a screenshot or video if it makes sense.
|
||||
|
||||
**How to reproduce**
|
||||
|
||||
- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
|
||||
- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
|
||||
- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
|
||||
- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
|
||||
- Before reporting an issue, make sure you are on latest version of the package.
|
||||
|
||||
**Your Environment**
|
||||
|
||||
| software | version |
|
||||
| -------------------------------------- | ------- |
|
||||
| iOS or Android |
|
||||
| @react-navigation/native |
|
||||
| @react-navigation/material-bottom-tabs |
|
||||
| react-native-paper |
|
||||
| react-native |
|
||||
| expo |
|
||||
| node |
|
||||
| npm or yarn |
|
||||
@@ -1,38 +0,0 @@
|
||||
---
|
||||
name: Material Top Tab Navigator
|
||||
about: Report an issue with Material Top Tab Navigator (@react-navigation/material-top-tabs)
|
||||
title: ''
|
||||
labels: bug, package:material-top-tabs
|
||||
assignees: ''
|
||||
---
|
||||
|
||||
**Current Behavior**
|
||||
|
||||
- What code are you running and what is happening?
|
||||
- Include a screenshot or video if it makes sense.
|
||||
|
||||
**Expected Behavior**
|
||||
|
||||
- What do you expect should be happening?
|
||||
- Include a screenshot or video if it makes sense.
|
||||
|
||||
**How to reproduce**
|
||||
|
||||
- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
|
||||
- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
|
||||
- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
|
||||
- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
|
||||
- Before reporting an issue, make sure you are on latest version of the package.
|
||||
|
||||
**Your Environment**
|
||||
|
||||
| software | version |
|
||||
| ----------------------------------- | ------- |
|
||||
| iOS or Android |
|
||||
| @react-navigation/native |
|
||||
| @react-navigation/material-top-tabs |
|
||||
| react-native-tab-view |
|
||||
| react-native |
|
||||
| expo |
|
||||
| node |
|
||||
| npm or yarn |
|
||||
@@ -1,38 +0,0 @@
|
||||
---
|
||||
name: Native Stack Navigator
|
||||
about: Report an issue with Native Stack Navigator (@react-navigation/native-stack)
|
||||
title: ''
|
||||
labels: bug, package:native-stack
|
||||
assignees: ''
|
||||
---
|
||||
|
||||
**Current Behavior**
|
||||
|
||||
- What code are you running and what is happening?
|
||||
- Include a screenshot or video if it makes sense.
|
||||
|
||||
**Expected Behavior**
|
||||
|
||||
- What do you expect should be happening?
|
||||
- Include a screenshot or video if it makes sense.
|
||||
|
||||
**How to reproduce**
|
||||
|
||||
- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
|
||||
- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
|
||||
- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
|
||||
- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
|
||||
- Before reporting an issue, make sure you are on latest version of the package.
|
||||
|
||||
**Your Environment**
|
||||
|
||||
| software | version |
|
||||
| ------------------------------ | ------- |
|
||||
| iOS or Android |
|
||||
| @react-navigation/native |
|
||||
| @react-navigation/native-stack |
|
||||
| react-native-screens |
|
||||
| react-native |
|
||||
| expo |
|
||||
| node |
|
||||
| npm or yarn |
|
||||
40
.github/ISSUE_TEMPLATE/bug-report-stack.md
vendored
40
.github/ISSUE_TEMPLATE/bug-report-stack.md
vendored
@@ -1,40 +0,0 @@
|
||||
---
|
||||
name: Stack Navigator
|
||||
about: Report an issue with Stack Navigator (@react-navigation/stack)
|
||||
title: ''
|
||||
labels: bug, package:stack
|
||||
assignees: ''
|
||||
---
|
||||
|
||||
**Current Behavior**
|
||||
|
||||
- What code are you running and what is happening?
|
||||
- Include a screenshot or video if it makes sense.
|
||||
|
||||
**Expected Behavior**
|
||||
|
||||
- What do you expect should be happening?
|
||||
- Include a screenshot or video if it makes sense.
|
||||
|
||||
**How to reproduce**
|
||||
|
||||
- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
|
||||
- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
|
||||
- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
|
||||
- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
|
||||
- Before reporting an issue, make sure you are on latest version of the package.
|
||||
|
||||
**Your Environment**
|
||||
|
||||
| software | version |
|
||||
| ------------------------------ | ------- |
|
||||
| iOS or Android |
|
||||
| @react-navigation/native |
|
||||
| @react-navigation/stack |
|
||||
| react-native-gesture-handler |
|
||||
| react-native-safe-area-context |
|
||||
| react-native-screens |
|
||||
| react-native |
|
||||
| expo |
|
||||
| node |
|
||||
| npm or yarn |
|
||||
43
.github/ISSUE_TEMPLATE/bug-report-version-4.md
vendored
43
.github/ISSUE_TEMPLATE/bug-report-version-4.md
vendored
@@ -1,43 +0,0 @@
|
||||
---
|
||||
name: React Navigation 4
|
||||
about: Report an issue with React Navigation 4
|
||||
title: ''
|
||||
labels: bug, version-4
|
||||
assignees: ''
|
||||
---
|
||||
|
||||
**Current Behavior**
|
||||
|
||||
- What code are you running and what is happening?
|
||||
- Include a screenshot or video if it makes sense.
|
||||
|
||||
**Expected Behavior**
|
||||
|
||||
- What do you expect should be happening?
|
||||
- Include a screenshot or video if it makes sense.
|
||||
|
||||
**How to reproduce**
|
||||
|
||||
- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
|
||||
- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
|
||||
- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
|
||||
- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
|
||||
- Before reporting an issue, make sure you are on latest version of the package.
|
||||
|
||||
**Your Environment**
|
||||
|
||||
| software | version |
|
||||
| ------------------------------ | ------- |
|
||||
| iOS or Android |
|
||||
| react-navigation |
|
||||
| react-navigation-stack |
|
||||
| react-navigation-tabs |
|
||||
| react-navigation-drawer |
|
||||
| react-native-reanimated |
|
||||
| react-native-gesture-handler |
|
||||
| react-native-safe-area-context |
|
||||
| react-native-screens |
|
||||
| react-native |
|
||||
| expo |
|
||||
| node |
|
||||
| npm or yarn |
|
||||
36
.github/ISSUE_TEMPLATE/bug-report.md
vendored
36
.github/ISSUE_TEMPLATE/bug-report.md
vendored
@@ -1,36 +0,0 @@
|
||||
---
|
||||
name: Other bugs
|
||||
about: Report an issue which is not about a specific navigator.
|
||||
title: ''
|
||||
labels: bug
|
||||
assignees: ''
|
||||
---
|
||||
|
||||
**Current Behavior**
|
||||
|
||||
- What code are you running and what is happening?
|
||||
- Include a screenshot or video if it makes sense.
|
||||
|
||||
**Expected Behavior**
|
||||
|
||||
- What do you expect should be happening?
|
||||
- Include a screenshot or video if it makes sense.
|
||||
|
||||
**How to reproduce**
|
||||
|
||||
- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
|
||||
- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
|
||||
- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
|
||||
- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
|
||||
- Before reporting an issue, make sure you are on latest version of the package.
|
||||
|
||||
**Your Environment**
|
||||
|
||||
| software | version |
|
||||
| ------------------------------ | ------- |
|
||||
| iOS or Android |
|
||||
| @react-navigation/native |
|
||||
| react-native |
|
||||
| expo |
|
||||
| node |
|
||||
| npm or yarn |
|
||||
20
.github/ISSUE_TEMPLATE/config.yml
vendored
20
.github/ISSUE_TEMPLATE/config.yml
vendored
@@ -1,20 +0,0 @@
|
||||
blank_issues_enabled: false
|
||||
contact_links:
|
||||
- name: Troubleshooting
|
||||
url: https://reactnavigation.org/docs/troubleshooting.html
|
||||
about: Read how to troubleshoot and fix common issues and mistakes.
|
||||
- name: Documentation
|
||||
url: https://reactnavigation.org
|
||||
about: Read the official documentation.
|
||||
- name: Feature requests
|
||||
url: https://react-navigation.canny.io/feature-requests
|
||||
about: Post a feature request on Canny.
|
||||
- name: StackOverflow
|
||||
url: https://stackoverflow.com/questions/tagged/react-navigation
|
||||
about: Ask and answer questions using the react-navigation label.
|
||||
- name: Reactiflux
|
||||
url: https://www.reactiflux.com/
|
||||
about: Chat with other community members in the react-navigation channel.
|
||||
- name: Write an RFC
|
||||
url: https://github.com/react-navigation/rfcs
|
||||
about: Write a RFC if you have ideas for how to implement a feature request.
|
||||
17
.github/PULL_REQUEST.md
vendored
17
.github/PULL_REQUEST.md
vendored
@@ -1,17 +0,0 @@
|
||||
Please provide enough information so that others can review your pull request:
|
||||
|
||||
**Motivation**
|
||||
|
||||
Explain the **motivation** for making this change. What existing problem does the pull request solve?
|
||||
|
||||
**Test plan**
|
||||
|
||||
Demonstrate the code is solid. Example: the exact commands you ran and their output, screenshots / videos if the pull request changes UI.
|
||||
|
||||
Make sure you test on both platforms if your change affects both platforms.
|
||||
|
||||
The code must pass tests.
|
||||
|
||||
**Code formatting**
|
||||
|
||||
Look around. Match the style of the rest of the codebase. Run `yarn lint --fix` before committing.
|
||||
54
.github/workflows/expo-preview.yml
vendored
54
.github/workflows/expo-preview.yml
vendored
@@ -1,54 +0,0 @@
|
||||
name: Expo Preview
|
||||
on: [pull_request]
|
||||
|
||||
jobs:
|
||||
publish:
|
||||
name: Install and publish
|
||||
runs-on: ubuntu-latest
|
||||
if: github.event.pull_request.head.repo.owner.login == 'react-navigation'
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v1
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 10.x
|
||||
|
||||
- name: Setup Expo
|
||||
uses: expo/expo-github-action@v5
|
||||
with:
|
||||
expo-version: 3.x
|
||||
expo-username: ${{ secrets.EXPO_CLI_USERNAME }}
|
||||
expo-password: ${{ secrets.EXPO_CLI_PASSWORD }}
|
||||
expo-cache: true
|
||||
|
||||
- name: Get yarn cache
|
||||
id: yarn-cache
|
||||
run: echo "::set-output name=dir::$(yarn cache dir)"
|
||||
|
||||
- name: Check yarn cache
|
||||
uses: actions/cache@v1
|
||||
with:
|
||||
path: ${{ steps.yarn-cache.outputs.dir }}
|
||||
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-yarn-
|
||||
|
||||
- name: Install dependencies
|
||||
run: yarn
|
||||
|
||||
- name: Publish Expo app
|
||||
working-directory: ./example
|
||||
run: expo publish --release-channel=pr-${{ github.event.number }}
|
||||
|
||||
- name: Get expo link
|
||||
id: expo
|
||||
run: echo "::set-output name=path::@react-navigation/react-react-navigationample?release-channel=pr-${{ github.event.number }}"
|
||||
|
||||
- name: Comment on PR
|
||||
uses: unsplash/comment-on-pr@master
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
with:
|
||||
msg: The Expo app for the example from this branch is ready!<br><br>[expo.io/${{ steps.expo.outputs.path }}](https://expo.io/${{ steps.expo.outputs.path }})<br><br><a href="https://exp.host/${{ steps.expo.outputs.path }}"><img src="https://api.qrserver.com/v1/create-qr-code/?size=400x400&data=exp://exp.host/${{ steps.expo.outputs.path }}" height="200px" width="200px"></a>.
|
||||
2
.github/workflows/expo.yml
vendored
2
.github/workflows/expo.yml
vendored
@@ -2,7 +2,7 @@ name: Expo Publish
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- master
|
||||
- 4.x
|
||||
|
||||
jobs:
|
||||
publish:
|
||||
|
||||
27
.github/workflows/rebase.yml
vendored
27
.github/workflows/rebase.yml
vendored
@@ -1,27 +0,0 @@
|
||||
name: Automatic Rebase
|
||||
on:
|
||||
issue_comment:
|
||||
types: [created]
|
||||
|
||||
jobs:
|
||||
rebase:
|
||||
name: Rebase
|
||||
if: github.event.issue.pull_request != '' && contains(github.event.comment.body, '/rebase')
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@master
|
||||
with:
|
||||
fetch-depth: 0
|
||||
|
||||
- name: Automatic Rebase
|
||||
uses: cirrus-actions/rebase@1.2
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
# https://github.community/t5/GitHub-Actions/Workflow-is-failing-if-no-job-can-be-ran-due-to-condition/m-p/38186#M3250
|
||||
always_job:
|
||||
name: Always run job
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Always run
|
||||
run: echo "This job is used to prevent the workflow to fail when all other jobs are skipped."
|
||||
20
.github/workflows/stale.yml
vendored
20
.github/workflows/stale.yml
vendored
@@ -1,20 +0,0 @@
|
||||
name: "Close stale issues and pull requests"
|
||||
on:
|
||||
schedule:
|
||||
- cron: "0 0 * * *"
|
||||
|
||||
jobs:
|
||||
stale:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/stale@v1
|
||||
with:
|
||||
repo-token: ${{ secrets.GITHUB_TOKEN }}
|
||||
stale-issue-message: 'Hello 👋, this issue has been open for more than 3 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.'
|
||||
stale-pr-message: 'Hello 👋, this pull request has been open for more than 3 months with no activity on it. If you think this is still necessary with the latest version, please comment and ping a maintainer to get this reviewed, otherwise it will be closed automatically in 7 days.'
|
||||
days-before-stale: 90
|
||||
days-before-close: 7
|
||||
stale-issue-label: 'stale'
|
||||
stale-pr-label: 'stale'
|
||||
exempt-issue-label: 'keep open'
|
||||
exempt-pr-label: 'keep open'
|
||||
147156
.yarn/releases/yarn-1.18.0.js
vendored
Executable file
147156
.yarn/releases/yarn-1.18.0.js
vendored
Executable file
File diff suppressed because one or more lines are too long
5
.yarnrc
Normal file
5
.yarnrc
Normal file
@@ -0,0 +1,5 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
|
||||
# yarn lockfile v1
|
||||
|
||||
|
||||
yarn-path ".yarn/releases/yarn-1.18.0.js"
|
||||
@@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import { registerRootComponent } from 'expo';
|
||||
import {
|
||||
Animated,
|
||||
Image,
|
||||
@@ -23,154 +24,209 @@ import {
|
||||
} from 'react-navigation';
|
||||
import { createStackNavigator } from 'react-navigation-stack';
|
||||
import { MaterialCommunityIcons } from '@expo/vector-icons';
|
||||
import AnimatedSwitch from './src/AnimatedSwitch';
|
||||
import BottomTabs from './src/BottomTabs';
|
||||
import CustomTabs from './src/CustomTabs';
|
||||
import CustomTabUI from './src/CustomTabUI';
|
||||
import Drawer from './src/Drawer';
|
||||
import ModalStack from './src/ModalStack';
|
||||
import SimpleStack from './src/SimpleStack';
|
||||
import SimpleTabs from './src/SimpleTabs';
|
||||
import StacksAndKeys from './src/StacksAndKeys';
|
||||
import StacksInTabs from './src/StacksInTabs';
|
||||
import StacksOverTabs from './src/StacksOverTabs';
|
||||
import StacksOverTopTabs from './src/StacksOverTopTabs';
|
||||
import StacksAndKeys from './src/StacksAndKeys';
|
||||
import StackWithCustomHeaderBackImage from './src/StackWithCustomHeaderBackImage';
|
||||
import StackWithHeaderPreset from './src/StackWithHeaderPreset';
|
||||
import StackWithTranslucentHeader from './src/StackWithTranslucentHeader';
|
||||
import SwitchWithStacks from './src/SwitchWithStacks';
|
||||
import TabsInDrawer from './src/TabsInDrawer';
|
||||
import DragLimitedToModal from './src/DragLimitedToModal';
|
||||
import EventsStack from './src/EventsStack';
|
||||
import FullScreen from './src/FullScreen';
|
||||
import GestureInteraction from './src/GestureInteraction';
|
||||
import {
|
||||
HeaderBackgroundDefault,
|
||||
HeaderBackgroundFade,
|
||||
} from './src/HeaderBackgrounds';
|
||||
import HeaderPreset from './src/HeaderPreset';
|
||||
import IconTabs from './src/IconTabs';
|
||||
import ImageStack from './src/ImageStack';
|
||||
import ImmediateTransition from './src/ImmediateTransition';
|
||||
import LifecycleInteraction from './src/LifecycleInteraction';
|
||||
import MaterialTopTabs from './src/MaterialTopTabs';
|
||||
import ModalPresentation from './src/ModalPresentation';
|
||||
import ParallaxDrawer from './src/ParallaxDrawer';
|
||||
import PerScreenTransitions from './src/PerScreenTransitions';
|
||||
import RevealStack from './src/RevealStack';
|
||||
import RTLDrawer from './src/RTLDrawer';
|
||||
import ShiftingTabs from './src/ShiftingTabs';
|
||||
import { SimpleDrawer, SimpleDrawerUnmountInactive } from './src/SimpleDrawer';
|
||||
import StackAnimationConsumerStack from './src/StackAnimationConsumerStack';
|
||||
import StackWithDrawer from './src/StackWithDrawer';
|
||||
import StyledDrawer from './src/StyledDrawer';
|
||||
import StackWithInput from './src/StackWithInput';
|
||||
import TransparentStack from './src/TransparentStack';
|
||||
|
||||
const ExampleInfo: any = {
|
||||
CustomTabUI: {
|
||||
description: 'Render additional views around a Tab navigator',
|
||||
name: 'Custom Tabs UI',
|
||||
const ExampleInfo = {
|
||||
SimpleStack: {
|
||||
name: 'Simple Stack',
|
||||
screen: SimpleStack,
|
||||
},
|
||||
CustomTabs: {
|
||||
description: 'Custom tabs with tab router',
|
||||
name: 'Custom Tabs',
|
||||
},
|
||||
CustomTransitioner: {
|
||||
description: 'Custom transitioner with stack router',
|
||||
name: 'Custom Transitioner',
|
||||
},
|
||||
Drawer: {
|
||||
description: 'Android-style drawer navigation',
|
||||
name: 'Drawer Example',
|
||||
},
|
||||
InactiveStack: {
|
||||
description:
|
||||
'An inactive route in a stack should be given the opportunity to handle actions',
|
||||
name: 'Navigate idempotently to stacks in inactive routes',
|
||||
},
|
||||
KeyboardHandlingExample: {
|
||||
description:
|
||||
'Demo automatic handling of keyboard showing/hiding inside StackNavigator',
|
||||
name: 'Keyboard Handling Example',
|
||||
},
|
||||
LinkStack: {
|
||||
description: 'Deep linking into a route in stack',
|
||||
name: 'Link in Stack',
|
||||
},
|
||||
LinkTabs: {
|
||||
description: 'Deep linking into a route in tab',
|
||||
name: 'Link to Settings Tab',
|
||||
BottomTabs: {
|
||||
name: 'Bottom Tabs Example',
|
||||
screen: BottomTabs,
|
||||
},
|
||||
ModalStack: {
|
||||
description:
|
||||
Platform.OS === 'ios'
|
||||
? 'Stack navigation with modals'
|
||||
: 'Dynamically showing and hiding the header',
|
||||
name:
|
||||
Platform.OS === 'ios'
|
||||
? 'Modal Stack Example'
|
||||
: 'Stack with Dynamic Header',
|
||||
},
|
||||
SimpleStack: {
|
||||
description: 'A card stack',
|
||||
name: 'Stack Example',
|
||||
},
|
||||
SimpleTabs: {
|
||||
description: 'Tabs following platform conventions',
|
||||
name: 'Tabs Example',
|
||||
: 'Stack with showing/hiding Header',
|
||||
screen: ModalStack,
|
||||
},
|
||||
StackWithCustomHeaderBackImage: {
|
||||
description: 'Stack with custom header back image',
|
||||
name: 'Custom header back image',
|
||||
name: 'Stack with custom header back image',
|
||||
screen: StackWithCustomHeaderBackImage,
|
||||
},
|
||||
StackWithHeaderPreset: {
|
||||
description: 'Masked back button and sliding header items. iOS only.',
|
||||
name: 'UIKit-style Header Transitions',
|
||||
screen: StackWithHeaderPreset,
|
||||
},
|
||||
StackWithTranslucentHeader: {
|
||||
description: 'Render arbitrary translucent content in header background.',
|
||||
name: 'Translucent Header',
|
||||
screen: StackWithTranslucentHeader,
|
||||
},
|
||||
StacksInTabs: {
|
||||
description: 'Nested stack navigation in tabs',
|
||||
name: 'Stacks in Tabs',
|
||||
screen: StacksInTabs,
|
||||
},
|
||||
StacksOverTabs: {
|
||||
description: 'Nested stack navigation that pushes on top of tabs',
|
||||
name: 'Stacks over Tabs',
|
||||
screen: StacksOverTabs,
|
||||
},
|
||||
StacksOverTopTabs: {
|
||||
description: 'Tab navigator in stack with custom header heights',
|
||||
name: 'Stacks with non-standard header height',
|
||||
screen: StacksOverTopTabs,
|
||||
},
|
||||
StacksAndKeys: {
|
||||
description: 'Use keys to link between screens',
|
||||
name: 'Link in Stack with keys',
|
||||
screen: StacksAndKeys,
|
||||
},
|
||||
SwitchWithStacks: {
|
||||
description: 'Jump between routes',
|
||||
name: 'Switch between routes',
|
||||
screen: SwitchWithStacks,
|
||||
},
|
||||
// MultipleDrawer: {
|
||||
// description: 'Add any drawer you need',
|
||||
// name: 'Multiple Drawer Example',
|
||||
// },
|
||||
TabsInDrawer: {
|
||||
description: 'A drawer combined with tabs',
|
||||
name: 'Drawer + Tabs Example',
|
||||
screen: TabsInDrawer,
|
||||
},
|
||||
TabsWithNavigationEvents: {
|
||||
description:
|
||||
'Declarative NavigationEvents component to subscribe to navigation events',
|
||||
name: 'NavigationEvents',
|
||||
Drawer: {
|
||||
name: 'Drawer Example',
|
||||
screen: Drawer,
|
||||
},
|
||||
TabsWithNavigationFocus: {
|
||||
description: 'Receive the focus prop to know when a screen is focused',
|
||||
name: 'withNavigationFocus',
|
||||
AnimatedSwitch: {
|
||||
name: 'AnimatedSwitch Example',
|
||||
screen: AnimatedSwitch,
|
||||
},
|
||||
CustomTabUI: {
|
||||
name: 'Additional views around Tab navigator',
|
||||
screen: CustomTabUI,
|
||||
},
|
||||
CustomTabs: {
|
||||
name: 'Custom Tabs with router',
|
||||
screen: CustomTabs,
|
||||
},
|
||||
};
|
||||
|
||||
const ExampleRoutes: any = {
|
||||
CustomTabUI,
|
||||
CustomTabs,
|
||||
Drawer,
|
||||
ModalStack,
|
||||
SimpleStack,
|
||||
SimpleTabs,
|
||||
StackWithCustomHeaderBackImage,
|
||||
StackWithTranslucentHeader,
|
||||
StacksAndKeys,
|
||||
StacksOverTabs,
|
||||
SwitchWithStacks,
|
||||
StacksOverTopTabs,
|
||||
StacksInTabs,
|
||||
...Platform.select({
|
||||
android: {},
|
||||
ios: {
|
||||
StackWithHeaderPreset,
|
||||
},
|
||||
}),
|
||||
TabsInDrawer,
|
||||
LinkStack: {
|
||||
name: 'Deep link in Stack',
|
||||
screen: SimpleStack,
|
||||
path: 'people/Jordan',
|
||||
},
|
||||
LinkTabs: {
|
||||
screen: SimpleTabs,
|
||||
path: 'settings',
|
||||
DragLimitedToModal: {
|
||||
name: 'Drag limited to modal',
|
||||
screen: DragLimitedToModal,
|
||||
},
|
||||
EventsStack: { name: 'Events Stack', screen: EventsStack },
|
||||
FullScreen: { name: 'Fullscreen Stack', screen: FullScreen },
|
||||
GestureInteraction: {
|
||||
name: 'Gesture interaction',
|
||||
screen: GestureInteraction,
|
||||
},
|
||||
HeaderBackgroundDefault: {
|
||||
name: 'Default preset for header background',
|
||||
screen: HeaderBackgroundDefault,
|
||||
},
|
||||
HeaderBackgroundFade: {
|
||||
name: 'Fade preset for header background',
|
||||
screen: HeaderBackgroundFade,
|
||||
},
|
||||
HeaderPreset: {
|
||||
name: 'Header presets',
|
||||
screen: HeaderPreset,
|
||||
},
|
||||
IconTabs: { name: 'Tabs with icons', screen: IconTabs },
|
||||
ImageStack: {
|
||||
name: 'Stack with images',
|
||||
screen: ImageStack,
|
||||
},
|
||||
ImmediateTransition: {
|
||||
name: 'Immediate transition',
|
||||
screen: ImmediateTransition,
|
||||
},
|
||||
LifecycleInteraction: {
|
||||
name: 'Lifecycle interaction',
|
||||
screen: LifecycleInteraction,
|
||||
},
|
||||
MaterialTopTabs: {
|
||||
name: 'Material top tabs',
|
||||
screen: MaterialTopTabs,
|
||||
},
|
||||
ModalPresentation: {
|
||||
name: 'Modal presentation Stack',
|
||||
screen: ModalPresentation,
|
||||
},
|
||||
ParallaxDrawer: {
|
||||
name: 'Parallax Drawer',
|
||||
screen: ParallaxDrawer,
|
||||
},
|
||||
PerScreenTransitions: {
|
||||
name: 'Per screen transitions',
|
||||
screen: PerScreenTransitions,
|
||||
},
|
||||
RevealStack: {
|
||||
name: 'Reveal animation Stack',
|
||||
screen: RevealStack,
|
||||
},
|
||||
RTLDrawer: { name: 'RTL Srawer', screen: RTLDrawer },
|
||||
ShiftingTabs: {
|
||||
name: 'Shifting tabs',
|
||||
screen: ShiftingTabs,
|
||||
},
|
||||
SimpleDrawer: {
|
||||
name: 'Simple drawer',
|
||||
screen: SimpleDrawer,
|
||||
},
|
||||
SimpleDrawerUnmountInactive: {
|
||||
name: 'Simple drawer (unmountInactive)',
|
||||
screen: SimpleDrawerUnmountInactive,
|
||||
},
|
||||
StackAnimationConsumerStack: {
|
||||
name: 'Stack animation consumer',
|
||||
screen: StackAnimationConsumerStack,
|
||||
},
|
||||
StackWithDrawer: {
|
||||
name: 'Stack with drawer',
|
||||
screen: StackWithDrawer,
|
||||
},
|
||||
StyledDrawer: {
|
||||
name: 'Styled drawer',
|
||||
screen: StyledDrawer,
|
||||
},
|
||||
StackWithInput: {
|
||||
name: 'Stack with input',
|
||||
screen: StackWithInput,
|
||||
},
|
||||
TransparentStack: {
|
||||
name: 'Transparent stack',
|
||||
screen: TransparentStack,
|
||||
},
|
||||
};
|
||||
|
||||
@@ -179,6 +235,7 @@ interface State {
|
||||
}
|
||||
|
||||
class MainScreen extends React.Component<any, State> {
|
||||
// eslint-disable-next-line react/sort-comp
|
||||
static contextType = ThemeContext;
|
||||
context!: React.ContextType<typeof ThemeContext>;
|
||||
|
||||
@@ -277,42 +334,43 @@ class MainScreen extends React.Component<any, State> {
|
||||
backgroundColor: ThemeColors[this.context].bodyContent,
|
||||
}}
|
||||
>
|
||||
{Object.keys(ExampleRoutes).map((routeName: string) => (
|
||||
<RectButton
|
||||
key={routeName}
|
||||
underlayColor="#ccc"
|
||||
activeOpacity={0.3}
|
||||
onPress={() => {
|
||||
const route = ExampleRoutes[routeName];
|
||||
if (route.screen || route.path || route.params) {
|
||||
const { path, params, screen } = route;
|
||||
const { router } = screen;
|
||||
const action =
|
||||
path &&
|
||||
router.getActionForPathAndParams(path, params);
|
||||
navigation.navigate(routeName, {}, action);
|
||||
} else {
|
||||
navigation.navigate(routeName);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={[
|
||||
styles.item,
|
||||
this.context === 'dark'
|
||||
? styles.itemDark
|
||||
: styles.itemLight,
|
||||
]}
|
||||
{(Object.keys(ExampleInfo) as (keyof typeof ExampleInfo)[]).map(
|
||||
routeName => (
|
||||
<RectButton
|
||||
key={routeName}
|
||||
underlayColor="#ccc"
|
||||
activeOpacity={0.3}
|
||||
onPress={() => {
|
||||
const route = ExampleInfo[routeName];
|
||||
// @ts-ignore
|
||||
if (route.screen || route.path || route.params) {
|
||||
// @ts-ignore
|
||||
const { path, params, screen } = route;
|
||||
const { router } = screen;
|
||||
const action =
|
||||
path &&
|
||||
router.getActionForPathAndParams(path, params);
|
||||
navigation.navigate(routeName, {}, action);
|
||||
} else {
|
||||
navigation.navigate(routeName);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Themed.Text style={styles.title}>
|
||||
{ExampleInfo[routeName].name}
|
||||
</Themed.Text>
|
||||
<Text style={styles.description}>
|
||||
{ExampleInfo[routeName].description}
|
||||
</Text>
|
||||
</View>
|
||||
</RectButton>
|
||||
))}
|
||||
<View
|
||||
style={[
|
||||
styles.item,
|
||||
this.context === 'dark'
|
||||
? styles.itemDark
|
||||
: styles.itemLight,
|
||||
]}
|
||||
>
|
||||
<Themed.Text style={styles.title}>
|
||||
{ExampleInfo[routeName].name}
|
||||
</Themed.Text>
|
||||
</View>
|
||||
</RectButton>
|
||||
)
|
||||
)}
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
</Animated.ScrollView>
|
||||
@@ -329,7 +387,7 @@ class MainScreen extends React.Component<any, State> {
|
||||
const Navigation = createAppContainer(
|
||||
createStackNavigator(
|
||||
{
|
||||
...ExampleRoutes,
|
||||
...ExampleInfo,
|
||||
Index: {
|
||||
screen: MainScreen,
|
||||
},
|
||||
@@ -347,7 +405,7 @@ const Navigation = createAppContainer(
|
||||
)
|
||||
);
|
||||
|
||||
export default () => {
|
||||
export default function App() {
|
||||
let [theme, setTheme] = React.useState<SupportedThemes>('light');
|
||||
|
||||
return (
|
||||
@@ -390,7 +448,9 @@ export default () => {
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
registerRootComponent(App);
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
backgroundUnderlay: {
|
||||
@@ -424,14 +484,9 @@ const styles = StyleSheet.create({
|
||||
marginRight: 5,
|
||||
marginVertical: 8,
|
||||
},
|
||||
description: {
|
||||
color: '#999',
|
||||
fontSize: 13,
|
||||
},
|
||||
item: {
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
padding: 16,
|
||||
},
|
||||
itemLight: {
|
||||
borderBottomColor: ThemeColors.light.bodyBorder,
|
||||
@@ -449,6 +504,5 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
title: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
});
|
||||
28
example/app.json
Normal file
28
example/app.json
Normal file
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "ReactNavigationExample",
|
||||
"displayName": "React Navigation Example",
|
||||
"expo": {
|
||||
"name": "react-navigation-example",
|
||||
"owner": "react-navigation",
|
||||
"slug": "react-navigation-4-example",
|
||||
"description": "Demo app to showcase various functionality of React Navigation",
|
||||
"privacy": "public",
|
||||
"sdkVersion": "36.0.0",
|
||||
"platforms": [
|
||||
"ios",
|
||||
"android",
|
||||
"web"
|
||||
],
|
||||
"version": "1.0.0",
|
||||
"updates": {
|
||||
"fallbackToCacheTimeout": 0
|
||||
},
|
||||
"assetBundlePatterns": [
|
||||
"**/*"
|
||||
],
|
||||
"ios": {
|
||||
"supportsTablet": true
|
||||
},
|
||||
"entryPoint": "App.tsx"
|
||||
}
|
||||
}
|
||||
26
example/babel.config.js
Normal file
26
example/babel.config.js
Normal file
@@ -0,0 +1,26 @@
|
||||
module.exports = function(api) {
|
||||
api.cache(true);
|
||||
return {
|
||||
presets: ['babel-preset-expo'],
|
||||
|
||||
plugins: [
|
||||
[
|
||||
'module-resolver',
|
||||
{
|
||||
alias: {
|
||||
'@react-navigation/core': '../packages/core/src',
|
||||
'@react-navigation/native': '../packages/native/src',
|
||||
'react-navigation': '../packages/react-navigation/src',
|
||||
'react-navigation-animated-switch':
|
||||
'../packages/animated-switch/src',
|
||||
'react-navigation-drawer': '../packages/drawer/src',
|
||||
'react-navigation-material-bottom-tabs':
|
||||
'../packages/material-bottom-tabs/src',
|
||||
'react-navigation-stack': '../packages/stack/src',
|
||||
'react-navigation-tabs': '../packages/tabs/src',
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
};
|
||||
79
example/metro.config.js
Normal file
79
example/metro.config.js
Normal file
@@ -0,0 +1,79 @@
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
|
||||
const root = path.resolve(__dirname, '..');
|
||||
const packages = path.resolve(root, 'packages');
|
||||
|
||||
// Get the list of dependencies for all packages in the monorepo
|
||||
const modules = ['@expo/vector-icons']
|
||||
.concat(
|
||||
...fs
|
||||
// List all packages under `packages/`
|
||||
.readdirSync(packages)
|
||||
// Ignore hidden files such as .DS_Store
|
||||
.filter(p => !p.startsWith('.'))
|
||||
.map(p => {
|
||||
const pak = JSON.parse(
|
||||
fs.readFileSync(path.join(packages, p, 'package.json'), 'utf8')
|
||||
);
|
||||
|
||||
// We need to collect list of deps that this package imports
|
||||
// Collecting both dependencies are peerDependencies should do it
|
||||
return Object.keys({
|
||||
...pak.dependencies,
|
||||
...pak.peerDependencies,
|
||||
});
|
||||
})
|
||||
)
|
||||
.sort()
|
||||
.filter(
|
||||
(m, i, self) =>
|
||||
// Remove duplicates
|
||||
self.lastIndexOf(m) === i
|
||||
);
|
||||
|
||||
module.exports = {
|
||||
projectRoot: __dirname,
|
||||
|
||||
// We need to watch the root of the monorepo
|
||||
// This lets Metro find the monorepo packages automatically using haste
|
||||
// This also lets us import modules from monorepo root
|
||||
watchFolders: [root],
|
||||
|
||||
resolver: {
|
||||
// When we import a package from the monorepo, metro won't be able to find their deps
|
||||
// We need to specify them in `extraNodeModules` to tell metro where to find them
|
||||
extraNodeModules: modules.reduce((acc, name) => {
|
||||
acc[name] = path.join(root, 'node_modules', name);
|
||||
return acc;
|
||||
}, {}),
|
||||
},
|
||||
|
||||
server: {
|
||||
enhanceMiddleware: middleware => {
|
||||
return (req, res, next) => {
|
||||
// When an asset is imported outside the project root, it has wrong path on Android
|
||||
// This happens for the back button in stack, so we fix the path to correct one
|
||||
const assets = '/packages/stack/src/views/assets';
|
||||
|
||||
if (req.url.startsWith(assets)) {
|
||||
req.url = req.url.replace(
|
||||
assets,
|
||||
'/assets/../packages/stack/src/views/assets'
|
||||
);
|
||||
}
|
||||
|
||||
return middleware(req, res, next);
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
transformer: {
|
||||
getTransformOptions: () => ({
|
||||
transform: {
|
||||
experimentalImportSupport: false,
|
||||
inlineRequires: true,
|
||||
},
|
||||
}),
|
||||
},
|
||||
};
|
||||
@@ -1,38 +1,36 @@
|
||||
{
|
||||
"name": "playground",
|
||||
"name": "react-navigation-playground",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"main": "node_modules/expo/AppEntry.js",
|
||||
"scripts": {
|
||||
"start": "expo start",
|
||||
"android": "expo start --android",
|
||||
"ios": "expo start --ios"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.8.4",
|
||||
"@expo/vector-icons": "^10.0.6",
|
||||
"@react-native-community/masked-view": "0.1.5",
|
||||
"@react-navigation/core": "^3.5.1",
|
||||
"@react-navigation/native": "^3.6.2",
|
||||
"@react-native-community/masked-view": "0.1.6",
|
||||
"expo": "^36.0.0",
|
||||
"expo-asset": "~8.0.0",
|
||||
"expo-barcode-scanner": "^8.0.0",
|
||||
"expo-blur": "~8.0.0",
|
||||
"expo-constants": "~8.0.0",
|
||||
"hoist-non-react-statics": "^3.3.1",
|
||||
"react": "16.9.0",
|
||||
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz",
|
||||
"react-native-gesture-handler": "~1.5.0",
|
||||
"react-native-gesture-handler": "~1.6.0",
|
||||
"react-native-iphone-x-helper": "^1.2.1",
|
||||
"react-native-maps": "0.26.1",
|
||||
"react-native-paper": "^3.4.0",
|
||||
"react-native-reanimated": "~1.4.0",
|
||||
"react-native-safe-area-context": "0.6.0",
|
||||
"react-native-screens": "2.0.0-alpha.12",
|
||||
"react-navigation-drawer": "^2.3.3",
|
||||
"react-navigation-header-buttons": "^3.0.4",
|
||||
"react-navigation-stack": "^2.0.4",
|
||||
"react-navigation-tabs": "^2.6.2"
|
||||
"react-native-reanimated": "~1.7.0",
|
||||
"react-native-safe-area-context": "0.7.3",
|
||||
"react-native-screens": "2.0.0-beta.10",
|
||||
"react-native-webview": "8.1.2",
|
||||
"react-navigation-header-buttons": "^3.0.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-plugin-module-resolver": "^4.0.0",
|
||||
"expo-cli": "^3.11.3"
|
||||
"expo-cli": "^3.13.1"
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import { Text, View, Button, StyleSheet } from 'react-native';
|
||||
import { createAppContainer } from 'react-navigation';
|
||||
import createAnimatedSwitchNavigator, {
|
||||
NavigationAnimatedSwitchProp,
|
||||
} from 'react-navigation-animated-switch';
|
||||
@@ -27,6 +26,10 @@ function Settings({
|
||||
<View style={styles.content}>
|
||||
<Text>Settings screen</Text>
|
||||
<Button title="Go to home" onPress={() => navigation.navigate('Home')} />
|
||||
<Button
|
||||
title="Go back to examples"
|
||||
onPress={() => navigation.navigate('Index')}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -58,4 +61,4 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
});
|
||||
|
||||
export default createAppContainer(MySwitch);
|
||||
export default MySwitch;
|
||||
@@ -20,7 +20,7 @@ import {
|
||||
createMaterialTopTabNavigator,
|
||||
MaterialTopTabBar,
|
||||
} from 'react-navigation-tabs';
|
||||
import { Button } from './commonComponents/ButtonWithMargin';
|
||||
import { Button } from './Shared/ButtonWithMargin';
|
||||
|
||||
interface Props {
|
||||
navigation: NavigationScreenProp<NavigationState>;
|
||||
@@ -161,6 +161,7 @@ const SimpleTabs = createMaterialTopTabNavigator(
|
||||
);
|
||||
|
||||
class TabNavigator extends React.Component<Props> {
|
||||
// eslint-disable-next-line react/sort-comp
|
||||
static contextType = ThemeContext;
|
||||
|
||||
static router = SimpleTabs.router;
|
||||
@@ -12,8 +12,8 @@ import {
|
||||
NavigationScreenProp,
|
||||
} from 'react-navigation';
|
||||
|
||||
import { Button } from './commonComponents/ButtonWithMargin';
|
||||
import SampleText from './SampleText';
|
||||
import { Button } from './Shared/ButtonWithMargin';
|
||||
import SampleText from './Shared/SampleText';
|
||||
|
||||
const MyNavScreen = ({
|
||||
navigation,
|
||||
@@ -15,8 +15,8 @@ import {
|
||||
createDrawerNavigator,
|
||||
NavigationDrawerScreenProps,
|
||||
} from 'react-navigation-drawer';
|
||||
import { Button } from './commonComponents/ButtonWithMargin';
|
||||
import SampleText from './SampleText';
|
||||
import { Button } from './Shared/ButtonWithMargin';
|
||||
import SampleText from './Shared/SampleText';
|
||||
|
||||
const MyNavScreen = ({
|
||||
navigation,
|
||||
@@ -1,10 +1,12 @@
|
||||
import React from 'react';
|
||||
import { Button, ScrollView, View, Text } from 'react-native';
|
||||
import { withNavigation } from '@react-navigation/core';
|
||||
import { Themed } from '@react-navigation/native';
|
||||
import { createStackNavigator } from 'react-navigation-stack';
|
||||
import {
|
||||
createStackNavigator,
|
||||
NavigationStackProp,
|
||||
NavigationStackScreenProps,
|
||||
} from 'react-navigation-stack';
|
||||
|
||||
const getColorOfEvent = evt => {
|
||||
const getColorOfEvent = (evt: string) => {
|
||||
switch (evt) {
|
||||
case 'willFocus':
|
||||
return 'purple';
|
||||
@@ -16,32 +18,34 @@ const getColorOfEvent = evt => {
|
||||
return 'black';
|
||||
}
|
||||
};
|
||||
class FocusTagWithNav extends React.Component {
|
||||
class FocusTag extends React.Component<NavigationStackScreenProps> {
|
||||
state = { mode: 'didBlur' };
|
||||
|
||||
componentDidMount() {
|
||||
this.props.navigation.addListener('willFocus', () => {
|
||||
this.setMode('willFocus');
|
||||
});
|
||||
|
||||
this.props.navigation.addListener('willBlur', () => {
|
||||
this.setMode('willBlur');
|
||||
});
|
||||
|
||||
this.props.navigation.addListener('didFocus', () => {
|
||||
this.setMode('didFocus');
|
||||
});
|
||||
|
||||
this.props.navigation.addListener('didBlur', () => {
|
||||
this.setMode('didBlur');
|
||||
});
|
||||
}
|
||||
setMode = mode => {
|
||||
if (!this._isUnmounted) {
|
||||
this.setState({ mode });
|
||||
}
|
||||
|
||||
setMode = (mode: string) => {
|
||||
this.setState({ mode });
|
||||
};
|
||||
componentWillUnmount() {
|
||||
this._isUnmounted = true;
|
||||
}
|
||||
|
||||
render() {
|
||||
const key = this.props.navigation.state.key;
|
||||
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
@@ -57,44 +61,45 @@ class FocusTagWithNav extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
const FocusTag = withNavigation(FocusTagWithNav);
|
||||
|
||||
class SampleScreen extends React.Component {
|
||||
static navigationOptions = ({ navigation }) => ({
|
||||
class SampleScreen extends React.Component<NavigationStackScreenProps> {
|
||||
static navigationOptions = ({
|
||||
navigation,
|
||||
}: {
|
||||
navigation: NavigationStackProp;
|
||||
}) => ({
|
||||
title: 'Lorem Ipsum',
|
||||
headerRight: navigation.getParam('nextPage') ? (
|
||||
<Button
|
||||
title="Next"
|
||||
onPress={() => navigation.navigate(navigation.getParam('nextPage'))}
|
||||
/>
|
||||
) : null,
|
||||
headerRight: navigation.getParam('nextPage')
|
||||
? () => (
|
||||
<Button
|
||||
title="Next"
|
||||
onPress={() => navigation.navigate(navigation.getParam('nextPage'))}
|
||||
/>
|
||||
)
|
||||
: undefined,
|
||||
});
|
||||
|
||||
componentDidMount() {
|
||||
this.props.navigation.addListener('refocus', () => {
|
||||
if (this.props.navigation.isFocused()) {
|
||||
this.scrollView.scrollTo({ x: 0, y: 0 });
|
||||
this.scrollView.current?.scrollTo({ x: 0, y: 0 });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private scrollView = React.createRef<ScrollView>();
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ScrollView
|
||||
ref={view => {
|
||||
this.scrollView = view;
|
||||
}}
|
||||
style={{ flex: 1 }}
|
||||
>
|
||||
<FocusTag />
|
||||
<Themed.Text
|
||||
<ScrollView ref={this.scrollView} style={{ flex: 1 }}>
|
||||
<FocusTag {...this.props} />
|
||||
<Button
|
||||
title="Push"
|
||||
onPress={() => {
|
||||
this.props.navigation.push('PageTwo');
|
||||
}}
|
||||
>
|
||||
Push
|
||||
</Themed.Text>
|
||||
<Themed.Text
|
||||
/>
|
||||
<Button
|
||||
title="Push and Pop Quickly"
|
||||
onPress={() => {
|
||||
const { push, goBack } = this.props.navigation;
|
||||
push('PageTwo');
|
||||
@@ -102,16 +107,13 @@ class SampleScreen extends React.Component {
|
||||
goBack(null);
|
||||
}, 150);
|
||||
}}
|
||||
>
|
||||
Push and Pop Quickly
|
||||
</Themed.Text>
|
||||
<Themed.Text
|
||||
/>
|
||||
<Button
|
||||
title="Back to Examples"
|
||||
onPress={() => {
|
||||
this.props.navigation.navigate('Home');
|
||||
this.props.navigation.navigate('Index');
|
||||
}}
|
||||
>
|
||||
Back to Examples
|
||||
</Themed.Text>
|
||||
/>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
@@ -35,7 +35,7 @@ const ContainerWithButtons = withNavigation(
|
||||
}}
|
||||
>
|
||||
<Button title="Open drawer" onPress={() => navigation.openDrawer()} />
|
||||
<Button title="Go back" onPress={() => navigation.navigate('Home')} />
|
||||
<Button title="Go back" onPress={() => navigation.navigate('Index')} />
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
@@ -3,8 +3,8 @@ import {
|
||||
createMaterialBottomTabNavigator,
|
||||
NavigationMaterialBottomTabOptions,
|
||||
} from 'react-navigation-material-bottom-tabs';
|
||||
import PhotoGrid from './shared/PhotoGrid';
|
||||
import tabBarIcon from './shared/tabBarIcon';
|
||||
import PhotoGrid from './Shared/PhotoGrid';
|
||||
import tabBarIcon from './Shared/tabBarIcon';
|
||||
|
||||
class Album extends React.Component {
|
||||
static navigationOptions: NavigationMaterialBottomTabOptions = {
|
||||
@@ -11,7 +11,7 @@ class ListScreen extends React.Component<NavigationStackScreenProps> {
|
||||
title: 'Image list',
|
||||
headerBackTitle: 'Back',
|
||||
headerLeft: () => (
|
||||
<Button title="Back" onPress={() => navigation.navigate('Home')} />
|
||||
<Button title="Back" onPress={() => navigation.navigate('Index')} />
|
||||
),
|
||||
});
|
||||
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
NavigationStackScreenProps,
|
||||
} from 'react-navigation-stack';
|
||||
|
||||
const IndexScreen: NavigationStackScreenComponent = ({ navigation }) => (
|
||||
const HomeScreen: NavigationStackScreenComponent = ({ navigation }) => (
|
||||
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
|
||||
<Button
|
||||
title="Go to BarCodeScanner"
|
||||
@@ -16,12 +16,12 @@ const IndexScreen: NavigationStackScreenComponent = ({ navigation }) => (
|
||||
/>
|
||||
<Button
|
||||
title="Return to other examples"
|
||||
onPress={() => navigation.navigate('Home')}
|
||||
onPress={() => navigation.navigate('Index')}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
|
||||
IndexScreen.navigationOptions = {
|
||||
HomeScreen.navigationOptions = {
|
||||
title: 'Lifecycle Interactions',
|
||||
};
|
||||
|
||||
@@ -65,11 +65,11 @@ InfoScreen.navigationOptions = {
|
||||
|
||||
export default createStackNavigator(
|
||||
{
|
||||
Index: IndexScreen,
|
||||
Home: HomeScreen,
|
||||
BarCode: BarCodeScreen,
|
||||
Info: InfoScreen,
|
||||
},
|
||||
{
|
||||
initialRouteName: 'Index',
|
||||
initialRouteName: 'Home',
|
||||
}
|
||||
);
|
||||
@@ -22,7 +22,7 @@ class ListScreen extends React.Component<NavigationStackScreenProps> {
|
||||
/>
|
||||
<Button
|
||||
title="Go back to all examples"
|
||||
onPress={() => this.props.navigation.navigate('Home')}
|
||||
onPress={() => this.props.navigation.navigate('Index')}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
@@ -52,7 +52,7 @@ class DetailsScreen extends React.Component<NavigationStackScreenProps> {
|
||||
/>
|
||||
<Button
|
||||
title="Go back to all examples"
|
||||
onPress={() => this.props.navigation.navigate('Home')}
|
||||
onPress={() => this.props.navigation.navigate('Index')}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
@@ -74,6 +74,7 @@ class ListScreen extends React.Component<
|
||||
NavigationStackScreenProps,
|
||||
{ isInverted: boolean }
|
||||
> {
|
||||
// eslint-disable-next-line react/sort-comp
|
||||
static navigationOptions = {
|
||||
title: 'My Modal',
|
||||
};
|
||||
@@ -94,7 +95,7 @@ class ListScreen extends React.Component<
|
||||
/>
|
||||
<Button
|
||||
title="Go back to all examples"
|
||||
onPress={() => this.props.navigation.navigate('Home')}
|
||||
onPress={() => this.props.navigation.navigate('Index')}
|
||||
/>
|
||||
<Text>Invert modal gesture direction:</Text>
|
||||
<Switch
|
||||
@@ -145,7 +146,7 @@ class DetailsScreen extends React.Component<NavigationStackScreenProps> {
|
||||
/>
|
||||
<Button
|
||||
title="Go back to all examples"
|
||||
onPress={() => this.props.navigation.navigate('Home')}
|
||||
onPress={() => this.props.navigation.navigate('Index')}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
@@ -14,16 +14,12 @@ import {
|
||||
SafeAreaView,
|
||||
NavigationRoute,
|
||||
} from 'react-navigation';
|
||||
import {
|
||||
createStackNavigator,
|
||||
NavigationStackScreenComponent,
|
||||
NavigationStackProp,
|
||||
} from 'react-navigation-stack';
|
||||
import {
|
||||
createDrawerNavigator,
|
||||
DrawerContentComponentProps,
|
||||
NavigationDrawerOptions,
|
||||
NavigationDrawerProp,
|
||||
NavigationDrawerScreenComponent,
|
||||
} from 'react-navigation-drawer';
|
||||
import Animated from 'react-native-reanimated';
|
||||
import { MaterialIcons } from '@expo/vector-icons';
|
||||
@@ -38,7 +34,7 @@ const MyNavScreen = ({
|
||||
navigation,
|
||||
banner,
|
||||
}: {
|
||||
navigation: NavigationStackProp<NavigationRoute, Params>;
|
||||
navigation: NavigationDrawerProp<NavigationRoute, Params>;
|
||||
banner: string;
|
||||
}) => {
|
||||
let theme = useTheme();
|
||||
@@ -97,7 +93,7 @@ const MyNavScreen = ({
|
||||
/>
|
||||
<Button onPress={() => navigation.goBack(null)} title="Go back" />
|
||||
<Button
|
||||
onPress={() => navigation.navigate('Home')}
|
||||
onPress={() => navigation.navigate('Index')}
|
||||
title="Go back to list"
|
||||
/>
|
||||
{
|
||||
@@ -134,74 +130,18 @@ const MyNavScreen = ({
|
||||
);
|
||||
};
|
||||
|
||||
const InboxScreen: NavigationStackScreenComponent<Params> = ({
|
||||
const InboxScreen: NavigationDrawerScreenComponent<Params> = ({
|
||||
navigation,
|
||||
}) => <MyNavScreen banner="Inbox Screen" navigation={navigation} />;
|
||||
|
||||
InboxScreen.navigationOptions = {
|
||||
headerTitle: 'Inbox',
|
||||
};
|
||||
|
||||
const EmailScreen: NavigationStackScreenComponent<Params> = ({
|
||||
const EmailScreen: NavigationDrawerScreenComponent<Params> = ({
|
||||
navigation,
|
||||
}) => <MyNavScreen banner="Email Screen" navigation={navigation} />;
|
||||
|
||||
const DraftsScreen: NavigationStackScreenComponent<Params> = ({
|
||||
const DraftsScreen: NavigationDrawerScreenComponent<Params> = ({
|
||||
navigation,
|
||||
}) => <MyNavScreen banner="Drafts Screen" navigation={navigation} />;
|
||||
|
||||
DraftsScreen.navigationOptions = {
|
||||
headerTitle: 'Drafts',
|
||||
};
|
||||
|
||||
const InboxStack = createStackNavigator(
|
||||
{
|
||||
Inbox: { screen: InboxScreen },
|
||||
Email: { screen: EmailScreen },
|
||||
},
|
||||
{
|
||||
navigationOptions: ({ navigation }) => {
|
||||
const options: NavigationDrawerOptions = {
|
||||
drawerLabel: 'Inbox',
|
||||
drawerLockMode: (
|
||||
navigation.state.routes[navigation.state.index].params || {}
|
||||
).drawerLockMode,
|
||||
drawerIcon: ({ tintColor }) => (
|
||||
<MaterialIcons
|
||||
name="move-to-inbox"
|
||||
size={24}
|
||||
style={{ color: tintColor }}
|
||||
/>
|
||||
),
|
||||
};
|
||||
|
||||
return options;
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const DraftsStack = createStackNavigator(
|
||||
{
|
||||
Drafts: { screen: DraftsScreen },
|
||||
Email: { screen: EmailScreen },
|
||||
},
|
||||
{
|
||||
navigationOptions: ({ navigation }) => {
|
||||
const options: NavigationDrawerOptions = {
|
||||
drawerLabel: 'Drafts',
|
||||
drawerLockMode: (
|
||||
navigation.state.routes[navigation.state.index].params || {}
|
||||
).drawerLockMode,
|
||||
drawerIcon: ({ tintColor }) => (
|
||||
<MaterialIcons name="drafts" size={24} style={{ color: tintColor }} />
|
||||
),
|
||||
};
|
||||
|
||||
return options;
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const DrawerContents = ({
|
||||
drawerOpenProgress,
|
||||
descriptors,
|
||||
@@ -249,11 +189,49 @@ function createDrawerExample(options = {}) {
|
||||
{
|
||||
Inbox: {
|
||||
path: '/',
|
||||
screen: InboxStack,
|
||||
screen: InboxScreen,
|
||||
navigationOptions: ({ navigation }) => {
|
||||
const options: NavigationDrawerOptions = {
|
||||
drawerLabel: 'Inbox',
|
||||
drawerLockMode: (
|
||||
navigation.state.routes[navigation.state.index].params || {}
|
||||
).drawerLockMode,
|
||||
drawerIcon: ({ tintColor }) => (
|
||||
<MaterialIcons
|
||||
name="move-to-inbox"
|
||||
size={24}
|
||||
style={{ color: tintColor }}
|
||||
/>
|
||||
),
|
||||
};
|
||||
|
||||
return options;
|
||||
},
|
||||
},
|
||||
Drafts: {
|
||||
path: '/sent',
|
||||
screen: DraftsStack,
|
||||
screen: DraftsScreen,
|
||||
navigationOptions: ({ navigation }) => {
|
||||
const options: NavigationDrawerOptions = {
|
||||
drawerLabel: 'Drafts',
|
||||
drawerLockMode: (
|
||||
navigation.state.routes[navigation.state.index].params || {}
|
||||
).drawerLockMode,
|
||||
drawerIcon: ({ tintColor }) => (
|
||||
<MaterialIcons
|
||||
name="drafts"
|
||||
size={24}
|
||||
style={{ color: tintColor }}
|
||||
/>
|
||||
),
|
||||
};
|
||||
|
||||
return options;
|
||||
},
|
||||
},
|
||||
Email: {
|
||||
path: '/sent',
|
||||
screen: EmailScreen,
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -272,7 +250,7 @@ function createDrawerExample(options = {}) {
|
||||
contentComponent: DrawerContents,
|
||||
drawerWidth: Dimensions.get('window').width * 0.8,
|
||||
navigationOptions: {
|
||||
header: null,
|
||||
headerShown: false,
|
||||
},
|
||||
contentOptions: {
|
||||
activeTintColor: '#e91e63',
|
||||
@@ -284,4 +262,4 @@ function createDrawerExample(options = {}) {
|
||||
return DrawerExample;
|
||||
}
|
||||
|
||||
export const ParallaxDrawer = createDrawerExample();
|
||||
export default createDrawerExample();
|
||||
@@ -19,7 +19,7 @@ function SlideScreen({ navigation }: NavigationStackScreenProps) {
|
||||
/>
|
||||
<Button
|
||||
title="Go back to all examples"
|
||||
onPress={() => navigation.navigate('Home')}
|
||||
onPress={() => navigation.navigate('Index')}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
@@ -37,7 +37,7 @@ function ModalScreen({ navigation }: NavigationStackScreenProps) {
|
||||
/>
|
||||
<Button
|
||||
title="Go back to all examples"
|
||||
onPress={() => navigation.navigate('Home')}
|
||||
onPress={() => navigation.navigate('Index')}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
@@ -55,7 +55,7 @@ function RevealScreen({ navigation }: NavigationStackScreenProps) {
|
||||
/>
|
||||
<Button
|
||||
title="Go back to all examples"
|
||||
onPress={() => navigation.navigate('Home')}
|
||||
onPress={() => navigation.navigate('Index')}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
@@ -89,7 +89,7 @@ function TransparentScreen({ navigation }: NavigationStackScreenProps) {
|
||||
/>
|
||||
<Button
|
||||
title="Go back to all examples"
|
||||
onPress={() => navigation.navigate('Home')}
|
||||
onPress={() => navigation.navigate('Index')}
|
||||
/>
|
||||
<Button title="Close" onPress={() => navigation.goBack()} />
|
||||
</View>
|
||||
@@ -20,7 +20,10 @@ import {
|
||||
|
||||
class RightDrawer extends Component<DrawerContentComponentProps> {
|
||||
state = {
|
||||
categories: [{ i: 'c1', n: 'name1' }, { i: 'c2', n: 'name2' }],
|
||||
categories: [
|
||||
{ i: 'c1', n: 'name1' },
|
||||
{ i: 'c2', n: 'name2' },
|
||||
],
|
||||
};
|
||||
|
||||
render() {
|
||||
@@ -39,7 +39,7 @@ const Buttons = withNavigation((props: { navigation: NavigationStackProp }) => (
|
||||
/>
|
||||
<Button
|
||||
title="Go back to all examples"
|
||||
onPress={() => props.navigation.navigate('Home')}
|
||||
onPress={() => props.navigation.navigate('Index')}
|
||||
/>
|
||||
</React.Fragment>
|
||||
));
|
||||
@@ -49,14 +49,6 @@ class ListScreen extends React.Component {
|
||||
title: 'List',
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
console.log('ListScreen didMount');
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
console.log('ListScreen willUnmount');
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View
|
||||
@@ -83,13 +75,11 @@ class DetailsScreen extends React.Component<NavigationStackScreenProps> {
|
||||
},
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
console.log('DetailsScreen didMount');
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
console.log('DetailsScreen willUnmount');
|
||||
}
|
||||
_goBackInTwoSeconds = () => {
|
||||
setTimeout(() => {
|
||||
this.props.navigation.goBack();
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
@@ -107,12 +97,6 @@ class DetailsScreen extends React.Component<NavigationStackScreenProps> {
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
_goBackInTwoSeconds = () => {
|
||||
setTimeout(() => {
|
||||
this.props.navigation.goBack();
|
||||
}, 2000);
|
||||
};
|
||||
}
|
||||
|
||||
class HeaderlessScreen extends React.Component {
|
||||
@@ -120,14 +104,6 @@ class HeaderlessScreen extends React.Component {
|
||||
headerShown: false,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
console.log('HeaderlessScreen didMount');
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
console.log('HeaderlessScreen willUnmount');
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View
|
||||
@@ -1,15 +1,17 @@
|
||||
/* eslint-disable import/no-commonjs */
|
||||
|
||||
import * as React from 'react';
|
||||
import { Image, Dimensions, ScrollView, StyleSheet } from 'react-native';
|
||||
|
||||
const COVERS = [
|
||||
require('../../assets/album-art-1.jpg'),
|
||||
require('../../assets/album-art-2.jpg'),
|
||||
require('../../assets/album-art-3.jpg'),
|
||||
require('../../assets/album-art-4.jpg'),
|
||||
require('../../assets/album-art-5.jpg'),
|
||||
require('../../assets/album-art-6.jpg'),
|
||||
require('../../assets/album-art-7.jpg'),
|
||||
require('../../assets/album-art-8.jpg'),
|
||||
require('../assets/album-art-1.jpg'),
|
||||
require('../assets/album-art-2.jpg'),
|
||||
require('../assets/album-art-3.jpg'),
|
||||
require('../assets/album-art-4.jpg'),
|
||||
require('../assets/album-art-5.jpg'),
|
||||
require('../assets/album-art-6.jpg'),
|
||||
require('../assets/album-art-7.jpg'),
|
||||
require('../assets/album-art-8.jpg'),
|
||||
];
|
||||
|
||||
export default class Albums extends React.Component {
|
||||
@@ -11,7 +11,7 @@ export default class Article extends React.Component {
|
||||
<View style={styles.author}>
|
||||
<Image
|
||||
style={styles.avatar}
|
||||
source={require('../../assets/avatar-1.png')}
|
||||
source={require('../assets/avatar-1.png')}
|
||||
/>
|
||||
<View style={styles.meta}>
|
||||
<Text style={styles.name}>Knowledge Bot</Text>
|
||||
@@ -24,7 +24,7 @@ export default class Article extends React.Component {
|
||||
has roots in a piece of classical Latin literature from 45 BC, making
|
||||
it over 2000 years old.
|
||||
</Text>
|
||||
<Image style={styles.image} source={require('../../assets/book.jpg')} />
|
||||
<Image style={styles.image} source={require('../assets/book.jpg')} />
|
||||
<Text style={styles.paragraph}>
|
||||
Richard McClintock, a Latin professor at Hampden-Sydney College in
|
||||
Virginia, looked up one of the more obscure Latin words, consectetur,
|
||||
@@ -115,7 +115,7 @@ export default class Button extends React.Component<ButtonProps> {
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
button: Platform.select({
|
||||
android: {
|
||||
default: {
|
||||
backgroundColor: '#2196F3',
|
||||
borderRadius: 2,
|
||||
elevation: 4,
|
||||
@@ -124,7 +124,7 @@ const styles = StyleSheet.create({
|
||||
ios: {},
|
||||
}),
|
||||
buttonDisabled: Platform.select({
|
||||
android: {
|
||||
default: {
|
||||
backgroundColor: '#dfdfdf',
|
||||
elevation: 0,
|
||||
},
|
||||
@@ -134,7 +134,7 @@ const styles = StyleSheet.create({
|
||||
padding: 8,
|
||||
textAlign: 'center',
|
||||
...Platform.select({
|
||||
android: {
|
||||
default: {
|
||||
color: 'white',
|
||||
fontWeight: '500',
|
||||
},
|
||||
@@ -146,7 +146,7 @@ const styles = StyleSheet.create({
|
||||
}),
|
||||
},
|
||||
textDisabled: Platform.select({
|
||||
android: {
|
||||
default: {
|
||||
color: '#a1a1a1',
|
||||
},
|
||||
ios: {
|
||||
@@ -29,8 +29,8 @@ export default class Albums extends React.Component {
|
||||
style={styles.avatar}
|
||||
source={
|
||||
odd
|
||||
? require('../../assets/avatar-2.png')
|
||||
: require('../../assets/avatar-1.png')
|
||||
? require('../assets/avatar-2.png')
|
||||
: require('../assets/avatar-1.png')
|
||||
}
|
||||
/>
|
||||
<View
|
||||
@@ -3,8 +3,8 @@ import {
|
||||
createMaterialBottomTabNavigator,
|
||||
NavigationMaterialBottomTabOptions,
|
||||
} from 'react-navigation-material-bottom-tabs';
|
||||
import PhotoGrid from './shared/PhotoGrid';
|
||||
import tabBarIcon from './shared/tabBarIcon';
|
||||
import PhotoGrid from './Shared/PhotoGrid';
|
||||
import tabBarIcon from './Shared/tabBarIcon';
|
||||
|
||||
class Album extends React.Component {
|
||||
static navigationOptions: NavigationMaterialBottomTabOptions = {
|
||||
@@ -1,10 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Button, ScrollView, StyleSheet, View } from 'react-native';
|
||||
import {
|
||||
createStackNavigator,
|
||||
NavigationStackProp,
|
||||
NavigationStackScreenComponent,
|
||||
} from 'react-navigation-stack';
|
||||
import {
|
||||
ThemeColors,
|
||||
useTheme,
|
||||
@@ -16,6 +11,8 @@ import {
|
||||
createDrawerNavigator,
|
||||
NavigationDrawerOptions,
|
||||
NavigationDrawerScreenProps,
|
||||
NavigationDrawerProp,
|
||||
NavigationDrawerScreenComponent,
|
||||
} from 'react-navigation-drawer';
|
||||
import { MaterialIcons } from '@expo/vector-icons';
|
||||
|
||||
@@ -29,7 +26,7 @@ const MyNavScreen = ({
|
||||
navigation,
|
||||
banner,
|
||||
}: {
|
||||
navigation: NavigationStackProp<NavigationRoute, Params>;
|
||||
navigation: NavigationDrawerProp<NavigationRoute, Params>;
|
||||
banner: string;
|
||||
}) => {
|
||||
let theme = useTheme();
|
||||
@@ -88,7 +85,7 @@ const MyNavScreen = ({
|
||||
/>
|
||||
<Button onPress={() => navigation.goBack(null)} title="Go back" />
|
||||
<Button
|
||||
onPress={() => navigation.navigate('Home')}
|
||||
onPress={() => navigation.navigate('Index')}
|
||||
title="Go back to list"
|
||||
/>
|
||||
{
|
||||
@@ -125,89 +122,68 @@ const MyNavScreen = ({
|
||||
);
|
||||
};
|
||||
|
||||
const InboxScreen: NavigationStackScreenComponent<Params> = ({
|
||||
const InboxScreen: NavigationDrawerScreenComponent<Params> = ({
|
||||
navigation,
|
||||
}) => <MyNavScreen banner="Inbox Screen" navigation={navigation} />;
|
||||
InboxScreen.navigationOptions = {
|
||||
headerTitle: 'Inbox',
|
||||
};
|
||||
|
||||
const EmailScreen: NavigationStackScreenComponent<Params> = ({
|
||||
const EmailScreen: NavigationDrawerScreenComponent<Params> = ({
|
||||
navigation,
|
||||
}) => <MyNavScreen banner="Email Screen" navigation={navigation} />;
|
||||
|
||||
const DraftsScreen: NavigationStackScreenComponent<Params> = ({
|
||||
const DraftsScreen: NavigationDrawerScreenComponent<Params> = ({
|
||||
navigation,
|
||||
}) => <MyNavScreen banner="Drafts Screen" navigation={navigation} />;
|
||||
DraftsScreen.navigationOptions = {
|
||||
headerTitle: 'Drafts',
|
||||
};
|
||||
|
||||
const InboxStack = createStackNavigator(
|
||||
{
|
||||
Inbox: { screen: InboxScreen },
|
||||
Email: { screen: EmailScreen },
|
||||
},
|
||||
{
|
||||
navigationOptions: ({ navigation }: NavigationDrawerScreenProps) => {
|
||||
const options: NavigationDrawerOptions = {
|
||||
drawerLabel: 'Inbox',
|
||||
drawerLockMode: (
|
||||
navigation.state.routes[navigation.state.index].params || {}
|
||||
).drawerLockMode,
|
||||
drawerIcon: ({ tintColor }) => (
|
||||
<MaterialIcons
|
||||
name="move-to-inbox"
|
||||
size={24}
|
||||
style={{ color: tintColor }}
|
||||
/>
|
||||
),
|
||||
};
|
||||
|
||||
return options;
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const DraftsStack = createStackNavigator(
|
||||
{
|
||||
Drafts: { screen: DraftsScreen },
|
||||
Email: { screen: EmailScreen },
|
||||
},
|
||||
{
|
||||
navigationOptions: ({ navigation }: NavigationDrawerScreenProps) => {
|
||||
const options: NavigationDrawerOptions = {
|
||||
drawerLabel: 'Drafts',
|
||||
drawerLockMode: (
|
||||
navigation.state.routes[navigation.state.index].params || {}
|
||||
).drawerLockMode,
|
||||
drawerIcon: ({ tintColor }) => (
|
||||
<MaterialIcons name="drafts" size={24} style={{ color: tintColor }} />
|
||||
),
|
||||
};
|
||||
|
||||
return options;
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
function createDrawerExample(options = {}) {
|
||||
let DrawerExample = createDrawerNavigator(
|
||||
{
|
||||
Inbox: {
|
||||
path: '/',
|
||||
screen: InboxStack,
|
||||
screen: InboxScreen,
|
||||
navigationOptions: ({ navigation }: NavigationDrawerScreenProps) => {
|
||||
const options: NavigationDrawerOptions = {
|
||||
drawerLabel: 'Inbox',
|
||||
drawerLockMode: navigation.state.params?.drawerLockMode,
|
||||
drawerIcon: ({ tintColor }) => (
|
||||
<MaterialIcons
|
||||
name="move-to-inbox"
|
||||
size={24}
|
||||
style={{ color: tintColor }}
|
||||
/>
|
||||
),
|
||||
};
|
||||
|
||||
return options;
|
||||
},
|
||||
},
|
||||
Drafts: {
|
||||
path: '/sent',
|
||||
screen: DraftsStack,
|
||||
screen: DraftsScreen,
|
||||
navigationOptions: ({ navigation }: NavigationDrawerScreenProps) => {
|
||||
const options: NavigationDrawerOptions = {
|
||||
drawerLabel: 'Drafts',
|
||||
drawerLockMode: navigation.state.params?.drawerLockMode,
|
||||
drawerIcon: ({ tintColor }) => (
|
||||
<MaterialIcons
|
||||
name="drafts"
|
||||
size={24}
|
||||
style={{ color: tintColor }}
|
||||
/>
|
||||
),
|
||||
};
|
||||
|
||||
return options;
|
||||
},
|
||||
},
|
||||
Email: {
|
||||
screen: EmailScreen,
|
||||
},
|
||||
},
|
||||
{
|
||||
initialRouteName: 'Drafts',
|
||||
drawerWidth: 210,
|
||||
navigationOptions: {
|
||||
header: null,
|
||||
headerShown: false,
|
||||
},
|
||||
contentOptions: {
|
||||
activeTintColor: '#e91e63',
|
||||
@@ -47,7 +47,7 @@ const Buttons = withNavigation((props: { navigation: NavigationStackProp }) => (
|
||||
/>
|
||||
<Button
|
||||
title="Go back to all examples"
|
||||
onPress={() => props.navigation.navigate('Home')}
|
||||
onPress={() => props.navigation.navigate('Index')}
|
||||
/>
|
||||
</React.Fragment>
|
||||
));
|
||||
@@ -57,14 +57,6 @@ class ListScreen extends React.Component {
|
||||
title: 'List',
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
console.log('ListScreen didMount');
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
console.log('ListScreen willUnmount');
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View
|
||||
@@ -91,13 +83,11 @@ class DetailsScreen extends React.Component<NavigationStackScreenProps> {
|
||||
},
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
console.log('DetailsScreen didMount');
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
console.log('DetailsScreen willUnmount');
|
||||
}
|
||||
_goBackInTwoSeconds = () => {
|
||||
setTimeout(() => {
|
||||
this.props.navigation.goBack();
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
@@ -115,12 +105,6 @@ class DetailsScreen extends React.Component<NavigationStackScreenProps> {
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
_goBackInTwoSeconds = () => {
|
||||
setTimeout(() => {
|
||||
this.props.navigation.goBack();
|
||||
}, 2000);
|
||||
};
|
||||
}
|
||||
|
||||
class HeaderlessScreen extends React.Component {
|
||||
@@ -128,14 +112,6 @@ class HeaderlessScreen extends React.Component {
|
||||
headerShown: false,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
console.log('HeaderlessScreen didMount');
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
console.log('HeaderlessScreen willUnmount');
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View
|
||||
@@ -4,8 +4,8 @@ import {
|
||||
createMaterialBottomTabNavigator,
|
||||
NavigationMaterialBottomTabOptions,
|
||||
} from 'react-navigation-material-bottom-tabs';
|
||||
import PhotoGrid from './shared/PhotoGrid';
|
||||
import tabBarIcon from './shared/tabBarIcon';
|
||||
import PhotoGrid from './Shared/PhotoGrid';
|
||||
import tabBarIcon from './Shared/tabBarIcon';
|
||||
|
||||
class Album extends React.Component {
|
||||
static navigationOptions: NavigationMaterialBottomTabOptions = {
|
||||
@@ -18,7 +18,7 @@ const ListScreen = (props: NavigationStackScreenProps) => (
|
||||
/>
|
||||
<Button
|
||||
title="Go back to all examples"
|
||||
onPress={() => props.navigation.navigate('Home')}
|
||||
onPress={() => props.navigation.navigate('Index')}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
createStackNavigator,
|
||||
NavigationStackScreenProps,
|
||||
} from 'react-navigation-stack';
|
||||
import SampleText from './SampleText';
|
||||
import SampleText from './Shared/SampleText';
|
||||
|
||||
interface MyNavScreenProps {
|
||||
navigation: NavigationScreenProp<NavigationState>;
|
||||
@@ -7,7 +7,7 @@ import {
|
||||
HeaderStyleInterpolators,
|
||||
} from 'react-navigation-stack';
|
||||
|
||||
import { Button } from './commonComponents/ButtonWithMargin';
|
||||
import { Button } from './Shared/ButtonWithMargin';
|
||||
|
||||
class HomeScreen extends React.Component<NavigationStackScreenProps> {
|
||||
static navigationOptions = {
|
||||
@@ -15,9 +15,9 @@ import {
|
||||
NavigationStackProp,
|
||||
TransitionPresets,
|
||||
} from 'react-navigation-stack';
|
||||
import { Button } from './commonComponents/ButtonWithMargin';
|
||||
import { HeaderButtons } from './commonComponents/HeaderButtons';
|
||||
import SampleText from './SampleText';
|
||||
import { Button } from './Shared/ButtonWithMargin';
|
||||
import { HeaderButtons } from './Shared/HeaderButtons';
|
||||
import SampleText from './Shared/SampleText';
|
||||
|
||||
interface MyNavScreenProps {
|
||||
navigation: NavigationStackProp;
|
||||
@@ -25,6 +25,27 @@ interface MyNavScreenProps {
|
||||
}
|
||||
|
||||
class MyNavScreen extends React.Component<MyNavScreenProps> {
|
||||
// Inset to compensate for navigation bar being transparent.
|
||||
// And improved abstraction for this will be built in to react-navigation
|
||||
// at some point.
|
||||
|
||||
getHeaderInset(): any {
|
||||
const HEADER_HEIGHT =
|
||||
getStatusBarHeight() + Platform.select({ ios: 44, default: 56 });
|
||||
|
||||
return Platform.select({
|
||||
android: {
|
||||
contentContainerStyle: {
|
||||
paddingTop: HEADER_HEIGHT,
|
||||
},
|
||||
},
|
||||
ios: {
|
||||
contentInset: { top: HEADER_HEIGHT },
|
||||
contentOffset: { y: -HEADER_HEIGHT },
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { navigation, banner } = this.props;
|
||||
const { push, replace, popToTop, pop } = navigation;
|
||||
@@ -50,27 +71,6 @@ class MyNavScreen extends React.Component<MyNavScreenProps> {
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
// Inset to compensate for navigation bar being transparent.
|
||||
// And improved abstraction for this will be built in to react-navigation
|
||||
// at some point.
|
||||
|
||||
getHeaderInset(): any {
|
||||
const HEADER_HEIGHT =
|
||||
getStatusBarHeight() + Platform.select({ ios: 44, default: 56 });
|
||||
|
||||
return Platform.select({
|
||||
android: {
|
||||
contentContainerStyle: {
|
||||
paddingTop: HEADER_HEIGHT,
|
||||
},
|
||||
},
|
||||
ios: {
|
||||
contentInset: { top: HEADER_HEIGHT },
|
||||
contentOffset: { y: -HEADER_HEIGHT },
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
interface MyHomeScreenProps {
|
||||
@@ -78,6 +78,7 @@ interface MyHomeScreenProps {
|
||||
}
|
||||
|
||||
class MyHomeScreen extends React.Component<MyHomeScreenProps> {
|
||||
// eslint-disable-next-line react/sort-comp
|
||||
static navigationOptions = {
|
||||
title: 'Welcome',
|
||||
};
|
||||
@@ -5,7 +5,7 @@ import {
|
||||
createStackNavigator,
|
||||
NavigationStackScreenProps,
|
||||
} from 'react-navigation-stack';
|
||||
import { Button } from './commonComponents/ButtonWithMargin';
|
||||
import { Button } from './Shared/ButtonWithMargin';
|
||||
|
||||
class HomeScreen extends React.Component<NavigationStackScreenProps> {
|
||||
render() {
|
||||
@@ -14,8 +14,8 @@ import {
|
||||
} from 'react-navigation-stack';
|
||||
import { createBottomTabNavigator } from 'react-navigation-tabs';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { Button } from './commonComponents/ButtonWithMargin';
|
||||
import SampleText from './SampleText';
|
||||
import { Button } from './Shared/ButtonWithMargin';
|
||||
import SampleText from './Shared/SampleText';
|
||||
|
||||
const TEXT = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a hendrerit dui, id consectetur nulla. Curabitur mattis sapien nunc, quis dignissim eros venenatis sit amet. Praesent rutrum dapibus diam quis eleifend. Donec vulputate quis purus sed vulputate. Fusce ipsum felis, cursus at congue vel, consectetur tincidunt purus. Pellentesque et fringilla lorem. In at augue malesuada, sollicitudin ex ut, convallis elit. Curabitur metus nibh, consequat vel libero sit amet, iaculis congue nisl. Maecenas eleifend sodales sapien, fringilla sagittis nisi ornare volutpat. Integer tellus enim, volutpat vitae nisl et, dignissim pharetra leo. Sed sit amet efficitur sapien, at tristique sapien. Aenean dignissim semper sagittis. Nullam sit amet volutpat mi.
|
||||
Curabitur auctor orci et justo molestie iaculis. Integer elementum tortor ac ipsum egestas pharetra. Etiam ultrices elementum pharetra. Maecenas lobortis ultrices risus dignissim luctus. Nunc malesuada cursus posuere. Vestibulum tristique lectus pretium pellentesque pellentesque. Nunc ac nisi lacus. Duis ultrices dui ac viverra ullamcorper. Morbi placerat laoreet lacus sit amet ullamcorper.
|
||||
@@ -12,8 +12,8 @@ import {
|
||||
NavigationStackScreenProps,
|
||||
} from 'react-navigation-stack';
|
||||
import { createBottomTabNavigator } from 'react-navigation-tabs';
|
||||
import { Button } from './commonComponents/ButtonWithMargin';
|
||||
import SampleText from './SampleText';
|
||||
import { Button } from './Shared/ButtonWithMargin';
|
||||
import SampleText from './Shared/SampleText';
|
||||
|
||||
const MyNavScreen = ({
|
||||
navigation,
|
||||
@@ -72,56 +72,49 @@ const MySettingsScreen = ({
|
||||
navigation: NavigationScreenProp<NavigationState>;
|
||||
}) => <MyNavScreen banner="Settings Screen" navigation={navigation} />;
|
||||
|
||||
const TabNav = createBottomTabNavigator(
|
||||
{
|
||||
MainTab: {
|
||||
navigationOptions: {
|
||||
tabBarIcon: ({
|
||||
tintColor,
|
||||
focused,
|
||||
}: {
|
||||
tintColor: string;
|
||||
focused: boolean;
|
||||
}) => (
|
||||
<Ionicons
|
||||
name={focused ? 'ios-home' : 'ios-home'}
|
||||
size={26}
|
||||
style={{ color: tintColor }}
|
||||
/>
|
||||
),
|
||||
tabBarLabel: 'Home',
|
||||
title: 'Welcome',
|
||||
},
|
||||
path: '/',
|
||||
screen: MyHomeScreen,
|
||||
},
|
||||
SettingsTab: {
|
||||
navigationOptions: {
|
||||
tabBarIcon: ({
|
||||
tintColor,
|
||||
focused,
|
||||
}: {
|
||||
tintColor: string;
|
||||
focused: boolean;
|
||||
}) => (
|
||||
<Ionicons
|
||||
name={focused ? 'ios-settings' : 'ios-settings'}
|
||||
size={26}
|
||||
style={{ color: tintColor }}
|
||||
/>
|
||||
),
|
||||
title: 'Settings',
|
||||
},
|
||||
path: '/settings',
|
||||
screen: MySettingsScreen,
|
||||
const TabNav = createBottomTabNavigator({
|
||||
MainTab: {
|
||||
navigationOptions: {
|
||||
tabBarIcon: ({
|
||||
tintColor,
|
||||
focused,
|
||||
}: {
|
||||
tintColor: string;
|
||||
focused: boolean;
|
||||
}) => (
|
||||
<Ionicons
|
||||
name={focused ? 'ios-home' : 'ios-home'}
|
||||
size={26}
|
||||
style={{ color: tintColor }}
|
||||
/>
|
||||
),
|
||||
tabBarLabel: 'Home',
|
||||
title: 'Welcome',
|
||||
},
|
||||
path: '/',
|
||||
screen: MyHomeScreen,
|
||||
},
|
||||
{
|
||||
animationEnabled: false,
|
||||
swipeEnabled: false,
|
||||
tabBarPosition: 'bottom',
|
||||
}
|
||||
);
|
||||
SettingsTab: {
|
||||
navigationOptions: {
|
||||
tabBarIcon: ({
|
||||
tintColor,
|
||||
focused,
|
||||
}: {
|
||||
tintColor: string;
|
||||
focused: boolean;
|
||||
}) => (
|
||||
<Ionicons
|
||||
name={focused ? 'ios-settings' : 'ios-settings'}
|
||||
size={26}
|
||||
style={{ color: tintColor }}
|
||||
/>
|
||||
),
|
||||
title: 'Settings',
|
||||
},
|
||||
path: '/settings',
|
||||
screen: MySettingsScreen,
|
||||
},
|
||||
});
|
||||
|
||||
TabNav.navigationOptions = ({
|
||||
navigation,
|
||||
@@ -20,8 +20,8 @@ import {
|
||||
MaterialTopTabBar,
|
||||
} from 'react-navigation-tabs';
|
||||
|
||||
import { Button } from './commonComponents/ButtonWithMargin';
|
||||
import SampleText from './SampleText';
|
||||
import { Button } from './Shared/ButtonWithMargin';
|
||||
import SampleText from './Shared/SampleText';
|
||||
|
||||
const HEADER_HEIGHT = 64;
|
||||
|
||||
@@ -1,14 +1,10 @@
|
||||
import React from 'react';
|
||||
import { Button, ScrollView } from 'react-native';
|
||||
import {
|
||||
createStackNavigator,
|
||||
NavigationStackScreenComponent,
|
||||
NavigationStackProp,
|
||||
} from 'react-navigation-stack';
|
||||
import { Themed, SafeAreaView } from 'react-navigation';
|
||||
import {
|
||||
createDrawerNavigator,
|
||||
NavigationDrawerScreenComponent,
|
||||
NavigationDrawerProp,
|
||||
} from 'react-navigation-drawer';
|
||||
import { MaterialIcons } from '@expo/vector-icons';
|
||||
|
||||
@@ -20,10 +16,10 @@ const MyNavScreen = ({
|
||||
navigation,
|
||||
banner,
|
||||
}: {
|
||||
navigation: NavigationStackProp;
|
||||
navigation: NavigationDrawerProp;
|
||||
banner: string;
|
||||
}) => (
|
||||
<ScrollView>
|
||||
<ScrollView style={{ backgroundColor: '#eee' }}>
|
||||
<SafeAreaView forceInset={{ top: 'always' }}>
|
||||
<SampleText>{banner}</SampleText>
|
||||
<Button onPress={() => navigation.openDrawer()} title="Open drawer" />
|
||||
@@ -31,68 +27,53 @@ const MyNavScreen = ({
|
||||
onPress={() => navigation.navigate('Email')}
|
||||
title="Open other screen"
|
||||
/>
|
||||
<Button onPress={() => navigation.navigate('Home')} title="Go back" />
|
||||
<Button onPress={() => navigation.navigate('Index')} title="Go back" />
|
||||
</SafeAreaView>
|
||||
<Themed.StatusBar />
|
||||
</ScrollView>
|
||||
);
|
||||
|
||||
const InboxScreen: NavigationStackScreenComponent = ({ navigation }) => (
|
||||
const InboxScreen: NavigationDrawerScreenComponent = ({ navigation }) => (
|
||||
<MyNavScreen banner="Inbox Screen" navigation={navigation} />
|
||||
);
|
||||
InboxScreen.navigationOptions = {
|
||||
headerTitle: 'Inbox',
|
||||
};
|
||||
|
||||
const EmailScreen: NavigationStackScreenComponent = ({ navigation }) => (
|
||||
const EmailScreen: NavigationDrawerScreenComponent = ({ navigation }) => (
|
||||
<MyNavScreen banner="Email Screen" navigation={navigation} />
|
||||
);
|
||||
|
||||
const DraftsScreen: NavigationStackScreenComponent = ({ navigation }) => (
|
||||
const DraftsScreen: NavigationDrawerScreenComponent = ({ navigation }) => (
|
||||
<MyNavScreen banner="Drafts Screen" navigation={navigation} />
|
||||
);
|
||||
|
||||
DraftsScreen.navigationOptions = {
|
||||
headerTitle: 'Drafts',
|
||||
};
|
||||
|
||||
const InboxStack: NavigationDrawerScreenComponent = createStackNavigator({
|
||||
Inbox: { screen: InboxScreen },
|
||||
Email: { screen: EmailScreen },
|
||||
});
|
||||
|
||||
InboxStack.navigationOptions = {
|
||||
drawerLabel: 'Inbox',
|
||||
drawerIcon: ({ tintColor }) => (
|
||||
<MaterialIcons
|
||||
name="move-to-inbox"
|
||||
size={24}
|
||||
style={{ color: tintColor }}
|
||||
/>
|
||||
),
|
||||
};
|
||||
|
||||
const DraftsStack: NavigationDrawerScreenComponent = createStackNavigator({
|
||||
Drafts: { screen: DraftsScreen },
|
||||
Email: { screen: EmailScreen },
|
||||
});
|
||||
|
||||
DraftsStack.navigationOptions = {
|
||||
drawerLabel: 'Drafts',
|
||||
drawerIcon: ({ tintColor }) => (
|
||||
<MaterialIcons name="drafts" size={24} style={{ color: tintColor }} />
|
||||
),
|
||||
};
|
||||
|
||||
const DrawerExample = createDrawerNavigator(
|
||||
{
|
||||
Inbox: {
|
||||
path: '/',
|
||||
screen: InboxStack,
|
||||
screen: InboxScreen,
|
||||
navigationOptions: {
|
||||
drawerLabel: 'Inbox',
|
||||
drawerIcon: ({ tintColor }) => (
|
||||
<MaterialIcons
|
||||
name="move-to-inbox"
|
||||
size={24}
|
||||
style={{ color: tintColor }}
|
||||
/>
|
||||
),
|
||||
},
|
||||
},
|
||||
Drafts: {
|
||||
path: '/sent',
|
||||
screen: DraftsStack,
|
||||
screen: DraftsScreen,
|
||||
navigationOptions: {
|
||||
drawerLabel: 'Drafts',
|
||||
drawerIcon: ({ tintColor }) => (
|
||||
<MaterialIcons name="drafts" size={24} style={{ color: tintColor }} />
|
||||
),
|
||||
},
|
||||
},
|
||||
Email: {
|
||||
path: '/sent',
|
||||
screen: EmailScreen,
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -111,7 +92,7 @@ const DrawerExample = createDrawerNavigator(
|
||||
);
|
||||
|
||||
DrawerExample.navigationOptions = {
|
||||
header: null,
|
||||
headerShown: false,
|
||||
};
|
||||
|
||||
export default DrawerExample;
|
||||
@@ -18,6 +18,11 @@ class SignInScreen extends React.Component<NavigationStackScreenProps> {
|
||||
title: 'Please sign in',
|
||||
};
|
||||
|
||||
_signInAsync = async () => {
|
||||
await AsyncStorage.setItem('userToken', 'abc');
|
||||
this.props.navigation.navigate('Index');
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
@@ -30,11 +35,6 @@ class SignInScreen extends React.Component<NavigationStackScreenProps> {
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
_signInAsync = async () => {
|
||||
await AsyncStorage.setItem('userToken', 'abc');
|
||||
this.props.navigation.navigate('Home');
|
||||
};
|
||||
}
|
||||
|
||||
class HomeScreen extends React.Component<NavigationStackScreenProps> {
|
||||
@@ -42,6 +42,15 @@ class HomeScreen extends React.Component<NavigationStackScreenProps> {
|
||||
title: 'Welcome to the app!',
|
||||
};
|
||||
|
||||
_showMoreApp = () => {
|
||||
this.props.navigation.navigate('Other');
|
||||
};
|
||||
|
||||
_signOutAsync = async () => {
|
||||
await AsyncStorage.clear();
|
||||
this.props.navigation.navigate('Auth');
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
@@ -51,15 +60,6 @@ class HomeScreen extends React.Component<NavigationStackScreenProps> {
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
_showMoreApp = () => {
|
||||
this.props.navigation.navigate('Other');
|
||||
};
|
||||
|
||||
_signOutAsync = async () => {
|
||||
await AsyncStorage.clear();
|
||||
this.props.navigation.navigate('Auth');
|
||||
};
|
||||
}
|
||||
|
||||
class OtherScreen extends React.Component<NavigationStackScreenProps> {
|
||||
@@ -67,6 +67,11 @@ class OtherScreen extends React.Component<NavigationStackScreenProps> {
|
||||
title: 'Lots of features here',
|
||||
};
|
||||
|
||||
_signOutAsync = async () => {
|
||||
await AsyncStorage.clear();
|
||||
this.props.navigation.navigate('Auth');
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
@@ -75,11 +80,6 @@ class OtherScreen extends React.Component<NavigationStackScreenProps> {
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
_signOutAsync = async () => {
|
||||
await AsyncStorage.clear();
|
||||
this.props.navigation.navigate('Auth');
|
||||
};
|
||||
}
|
||||
|
||||
class LoadingScreen extends React.Component<NavigationStackScreenProps> {
|
||||
@@ -23,7 +23,7 @@ const ListScreen: NavigationStackScreenComponent = function(props) {
|
||||
/>
|
||||
<Button
|
||||
title="Go back to all examples"
|
||||
onPress={() => props.navigation.navigate('Home')}
|
||||
onPress={() => props.navigation.navigate('Index')}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 115 KiB After Width: | Height: | Size: 115 KiB |
|
Before Width: | Height: | Size: 117 KiB After Width: | Height: | Size: 117 KiB |
|
Before Width: | Height: | Size: 118 KiB After Width: | Height: | Size: 118 KiB |
|
Before Width: | Height: | Size: 153 KiB After Width: | Height: | Size: 153 KiB |
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 119 KiB After Width: | Height: | Size: 119 KiB |
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 105 KiB After Width: | Height: | Size: 105 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 930 B After Width: | Height: | Size: 930 B |
|
Before Width: | Height: | Size: 115 KiB After Width: | Height: | Size: 115 KiB |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 75 KiB |
13
example/tsconfig.json
Normal file
13
example/tsconfig.json
Normal file
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"extends": "../tsconfig",
|
||||
"references": [
|
||||
{ "path": "../packages/animated-switch" },
|
||||
{ "path": "../packages/core" },
|
||||
{ "path": "../packages/drawer" },
|
||||
{ "path": "../packages/material-bottom-tabs" },
|
||||
{ "path": "../packages/native" },
|
||||
{ "path": "../packages/react-navigation" },
|
||||
{ "path": "../packages/stack" },
|
||||
{ "path": "../packages/tabs" }
|
||||
]
|
||||
}
|
||||
@@ -1,3 +1,6 @@
|
||||
/* eslint-env jest */
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
|
||||
const error = console.error;
|
||||
|
||||
console.error = (...args) =>
|
||||
@@ -7,3 +10,41 @@ console.error = (...args) =>
|
||||
)
|
||||
? void 0
|
||||
: error(...args);
|
||||
|
||||
jest.mock('@react-native-community/masked-view', () => () => null);
|
||||
|
||||
jest.mock('react-native-safe-area-context', () => {
|
||||
const React = require('react');
|
||||
|
||||
const SafeAreaContext = React.createContext({
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
});
|
||||
|
||||
return {
|
||||
__esModule: true,
|
||||
|
||||
SafeAreaContext,
|
||||
SafeAreaProvider: SafeAreaContext.Provider,
|
||||
SafeAreaConsumer: SafeAreaContext.Consumer,
|
||||
};
|
||||
});
|
||||
|
||||
jest.mock('react-native-gesture-handler', () => ({
|
||||
PanGestureHandler: 'PanGestureHandler',
|
||||
BaseButton: 'BaseButton',
|
||||
State: {
|
||||
UNDETERMINED: 0,
|
||||
FAILED: 1,
|
||||
BEGAN: 2,
|
||||
CANCELLED: 3,
|
||||
ACTIVE: 4,
|
||||
END: 5,
|
||||
},
|
||||
}));
|
||||
|
||||
jest.mock('react-native-reanimated', () =>
|
||||
require('react-native-reanimated/mock')
|
||||
);
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
{
|
||||
"packages": [
|
||||
"example",
|
||||
"packages/*"
|
||||
],
|
||||
"npmClient": "yarn",
|
||||
@@ -7,7 +8,7 @@
|
||||
"version": "independent",
|
||||
"command": {
|
||||
"publish": {
|
||||
"allowBranch": "master",
|
||||
"allowBranch": "4.x",
|
||||
"conventionalCommits": true,
|
||||
"createRelease": "github",
|
||||
"message": "chore: publish",
|
||||
|
||||
32
package.json
32
package.json
@@ -3,6 +3,7 @@
|
||||
"private": true,
|
||||
"workspaces": {
|
||||
"packages": [
|
||||
"example",
|
||||
"packages/*"
|
||||
]
|
||||
},
|
||||
@@ -19,28 +20,27 @@
|
||||
"lint": "eslint --ext '.js,.ts,.tsx' .",
|
||||
"typescript": "tsc --noEmit",
|
||||
"test": "jest",
|
||||
"release": "yarn lerna publish",
|
||||
"example": "yarn --cwd example"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/plugin-proposal-class-properties": "^7.7.0",
|
||||
"@babel/plugin-proposal-optional-chaining": "^7.7.5",
|
||||
"@babel/preset-env": "^7.7.7",
|
||||
"@babel/preset-react": "^7.7.0",
|
||||
"@babel/preset-typescript": "^7.7.7",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@babel/plugin-proposal-class-properties": "^7.8.3",
|
||||
"@babel/plugin-proposal-optional-chaining": "^7.8.3",
|
||||
"@babel/preset-env": "^7.8.4",
|
||||
"@babel/preset-react": "^7.8.3",
|
||||
"@babel/preset-typescript": "^7.8.3",
|
||||
"@babel/runtime": "^7.8.4",
|
||||
"@commitlint/config-conventional": "^8.3.4",
|
||||
"@types/jest": "^24.0.25",
|
||||
"codecov": "^3.6.1",
|
||||
"commitlint": "^8.3.4",
|
||||
"core-js": "^3.6.2",
|
||||
"detox": "^15.0.0",
|
||||
"@types/jest": "^25.1.2",
|
||||
"commitlint": "^8.3.5",
|
||||
"core-js": "^3.6.4",
|
||||
"eslint": "^6.8.0",
|
||||
"eslint-config-satya164": "^3.1.5",
|
||||
"husky": "^4.0.1",
|
||||
"jest": "^24.9.0",
|
||||
"husky": "^4.2.1",
|
||||
"jest": "^25.1.0",
|
||||
"lerna": "^3.20.2",
|
||||
"prettier": "^1.19.1",
|
||||
"typescript": "^3.7.4"
|
||||
"typescript": "~3.7.5"
|
||||
},
|
||||
"resolutions": {
|
||||
"react": "~16.9.0",
|
||||
@@ -62,8 +62,8 @@
|
||||
"<rootDir>/jest/setup.js"
|
||||
],
|
||||
"moduleNameMapper": {
|
||||
"@react-navigation/([^/]+)": "<rootDir>/packages/$1/src",
|
||||
"react-navigation-([^/]+)": "<rootDir>/packages/$1/src"
|
||||
"react-navigation-([^/]+)": "<rootDir>/packages/$1/src",
|
||||
"@react-navigation/([^/]+)": "<rootDir>/packages/$1/src"
|
||||
},
|
||||
"preset": "react-native"
|
||||
},
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
node_modules/
|
||||
coverage/
|
||||
lib/
|
||||
@@ -1,3 +0,0 @@
|
||||
{
|
||||
"extends": "eslint-config-satya164"
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user