├── .circleci └── config.yml ├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .flowconfig ├── .github ├── ISSUE_TEMPLATE.md ├── PULL_REQUEST_TEMPLATE.md └── workflows │ └── stale.yml ├── .gitignore ├── .release-it.json ├── LICENSE.md ├── README.md ├── __setup__ └── enzyme.js ├── commitlint.config.js ├── example ├── .babelrc ├── .buckconfig ├── .eslintrc ├── .watchmanconfig ├── App.tsx ├── README.md ├── app.json ├── assets │ ├── album-art-1.jpg │ ├── album-art-2.jpg │ ├── album-art-3.jpg │ ├── album-art-4.jpg │ ├── album-art-5.jpg │ ├── album-art-6.jpg │ ├── album-art-7.jpg │ ├── album-art-8.jpg │ ├── avatar-1.png │ ├── avatar-2.png │ ├── book.jpg │ └── icon.png ├── metro.config.js ├── package.json ├── src │ ├── BottomTabs.tsx │ ├── MaterialTopTabs.tsx │ └── Shared │ │ ├── Albums.tsx │ │ ├── Article.tsx │ │ ├── Chat.tsx │ │ ├── Contacts.tsx │ │ └── PhotoGrid.tsx └── yarn.lock ├── flow-typed └── npm │ ├── @expo │ └── vector-icons_vx.x.x.js │ ├── babel-cli_vx.x.x.js │ ├── babel-jest_vx.x.x.js │ ├── babel-plugin-syntax-class-properties_vx.x.x.js │ ├── babel-plugin-syntax-jsx_vx.x.x.js │ ├── babel-plugin-syntax-object-rest-spread_vx.x.x.js │ ├── babel-plugin-transform-flow-strip-types_vx.x.x.js │ ├── babel-preset-react-native_vx.x.x.js │ ├── enzyme-adapter-react-16_vx.x.x.js │ ├── enzyme-to-json_vx.x.x.js │ ├── enzyme_v3.x.x.js │ ├── eslint-config-satya164_vx.x.x.js │ ├── eslint-plugin-react-native-globals_vx.x.x.js │ ├── eslint_vx.x.x.js │ ├── flow-bin_v0.x.x.js │ ├── hoist-non-react-statics_v2.x.x.js │ ├── jest_v21.x.x.js │ ├── prettier_v1.x.x.js │ ├── prop-types_v15.x.x.js │ ├── react-lifecycles-compat_vx.x.x.js │ ├── react-native-paper_vx.x.x.js │ ├── react-native-safe-area-view_vx.x.x.js │ ├── react-native-screens_vx.x.x.js │ ├── react-native-tab-view_vx.x.x.js │ ├── react-navigation_vx.x.x.js │ └── react-test-renderer_v16.x.x.js ├── package.json ├── src ├── index.tsx ├── navigators │ ├── createBottomTabNavigator.tsx │ └── createMaterialTopTabNavigator.tsx ├── types.tsx ├── utils │ ├── createTabNavigator.tsx │ └── withDimensions.tsx └── views │ ├── BottomTabBar.tsx │ ├── CrossFadeIcon.tsx │ ├── MaterialTopTabBar.tsx │ └── ResourceSavingScene.tsx ├── tsconfig.json └── yarn.lock /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | 3 | defaults: &defaults 4 | docker: 5 | - image: circleci/node:10 6 | working_directory: ~/project 7 | 8 | jobs: 9 | install-dependencies: 10 | <<: *defaults 11 | steps: 12 | - checkout 13 | - attach_workspace: 14 | at: ~/project 15 | - restore_cache: 16 | keys: 17 | - v1-dependencies-{{ checksum "package.json" }} 18 | - v1-dependencies- 19 | - restore_cache: 20 | keys: 21 | - v1-dependencies-example-{{ checksum "example/package.json" }} 22 | - v1-dependencies-example- 23 | - run: | 24 | yarn install --frozen-lockfile --cwd example 25 | yarn install --frozen-lockfile 26 | - save_cache: 27 | key: v1-dependencies-{{ checksum "package.json" }} 28 | paths: node_modules 29 | - save_cache: 30 | key: v1-dependencies-example-{{ checksum "example/package.json" }} 31 | paths: example/node_modules 32 | - persist_to_workspace: 33 | root: . 34 | paths: . 35 | lint-and-typecheck: 36 | <<: *defaults 37 | steps: 38 | - attach_workspace: 39 | at: ~/project 40 | - run: | 41 | yarn lint 42 | yarn typescript 43 | unit-tests: 44 | <<: *defaults 45 | steps: 46 | - attach_workspace: 47 | at: ~/project 48 | - run: yarn test -- --coverage 49 | - store_artifacts: 50 | path: coverage 51 | destination: coverage 52 | 53 | workflows: 54 | version: 2 55 | build-and-test: 56 | jobs: 57 | - install-dependencies 58 | - lint-and-typecheck: 59 | requires: 60 | - install-dependencies 61 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | 10 | # change these settings to your own preference 11 | indent_style = space 12 | indent_size = 2 13 | 14 | # we recommend you to keep these unchanged 15 | end_of_line = lf 16 | charset = utf-8 17 | trim_trailing_whitespace = true 18 | insert_final_newline = true 19 | 20 | [*.md] 21 | trim_trailing_whitespace = false 22 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | flow-typed/ 3 | dist/ 4 | 5 | # generated by bob 6 | lib/ 7 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint-config-satya164", 3 | 4 | "plugins": ["react-native-globals"], 5 | 6 | "settings": { 7 | "react": { 8 | "version": "detect" 9 | } 10 | }, 11 | 12 | "env": { 13 | "es6": true, 14 | "react-native-globals/all": true, 15 | }, 16 | 17 | "rules": { 18 | "import/named": "off", 19 | "import/default": "off", 20 | "import/namespace": "off", 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | ; We fork some components by platform 3 | .*/*[.]android.js 4 | 5 | ; Ignore templates for 'react-native init' 6 | .*/local-cli/templates/.* 7 | 8 | ; Ignore the Dangerfile 9 | /bots/dangerfile.js 10 | 11 | ; Ignore "BUCK" generated dirs 12 | /\.buckd/ 13 | 14 | ; Ignore unexpected extra "@providesModule" 15 | .*/node_modules/.*/node_modules/fbjs/.* 16 | 17 | ; Ignore duplicate module providers 18 | ; For RN Apps installed via npm, "Libraries" folder is inside 19 | ; "node_modules/react-native" but in the source repo it is in the root 20 | .*/Libraries/react-native/React.js 21 | 22 | ; Ignore polyfills 23 | .*/Libraries/polyfills/.* 24 | 25 | ; Ignore metro 26 | .*/node_modules/metro/.* 27 | .*/node_modules/metro-config/.* 28 | 29 | ; These should not be required directly 30 | ; require from fbjs/lib instead: require('fbjs/lib/invariant') 31 | .*/node_modules/invariant/.* 32 | .*/node_modules/warning/.* 33 | 34 | ; Ignore duplicate modules under example/ 35 | .*/example/node_modules/fbjs/.* 36 | .*/example/node_modules/fbemitter/.* 37 | .*/example/node_modules/react/.* 38 | .*/example/node_modules/react-native/.* 39 | .*/example/\.buckd/ 40 | 41 | ; Ignore duplicate modules under docs/ 42 | .*/docs/node_modules/fbjs/.* 43 | .*/docs/node_modules/react/.* 44 | 45 | ; Ignore some modules we don't need to parse 46 | .*/node_modules/prettier/.* 47 | .*/node_modules/eslint.* 48 | 49 | ; Ignore modules with errors 50 | .*/node_modules/@expo/.* 51 | 52 | [untyped] 53 | .*/node_modules/expo/.* 54 | .*/node_modules/xdl/.* 55 | .*/node_modules/react-native-view-shot/.* 56 | 57 | [include] 58 | 59 | [libs] 60 | node_modules/react-native/Libraries/react-native/react-native-interface.js 61 | node_modules/react-native/flow-github 62 | node_modules/react-native/flow 63 | 64 | [options] 65 | emoji=true 66 | 67 | esproposal.optional_chaining=enable 68 | esproposal.nullish_coalescing=enable 69 | 70 | module.system=haste 71 | module.system.haste.use_name_reducers=true 72 | # keep the following in sync with server/haste/hasteImpl.js 73 | # get basename 74 | module.system.haste.name_reducers='^.*/\([a-zA-Z0-9$_.-]+\.js\(\.flow\)?\)$' -> '\1' 75 | # strip .js or .js.flow suffix 76 | module.system.haste.name_reducers='^\(.*\)\.js\(\.flow\)?$' -> '\1' 77 | # strip .ios suffix 78 | module.system.haste.name_reducers='^\(.*\)\.ios$' -> '\1' 79 | module.system.haste.name_reducers='^\(.*\)\.android$' -> '\1' 80 | module.system.haste.name_reducers='^\(.*\)\.native$' -> '\1' 81 | module.system.haste.paths.blacklist=.*/__tests__/.* 82 | module.system.haste.paths.blacklist=.*/__mocks__/.* 83 | module.system.haste.paths.whitelist=/node_modules/react-native/Libraries/.* 84 | module.system.haste.paths.whitelist=/node_modules/react-native/RNTester/.* 85 | module.system.haste.paths.whitelist=/node_modules/react-native/IntegrationTests/.* 86 | module.system.haste.paths.blacklist=/node_modules/react-native/Libraries/Animated/src/polyfills/.* 87 | 88 | munge_underscores=true 89 | 90 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub' 91 | 92 | suppress_type=$FlowIssue 93 | suppress_type=$FlowFixMe 94 | suppress_type=$FlowFixMeProps 95 | suppress_type=$FlowFixMeState 96 | 97 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(\\)? *\\(site=[a-z,_]*[react_native\\(_ios\\)?_oss|react_native\\(_ios\\)?_fb][a-z,_]*\\)?)\\) 98 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(\\)? *\\(site=[a-z,_]*[react_native\\(_ios\\)?_oss|react_native\\(_ios\\)?_fb][a-z,_]*\\)?)\\)?:? #[0-9]+ 99 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 100 | suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError 101 | 102 | [lints] 103 | all=warn 104 | unnecessary-optional-chain=off 105 | 106 | # There is an ESLint rule for this 107 | unclear-type=off 108 | 109 | sketchy-null=off 110 | sketchy-null-number=warn 111 | sketchy-null-mixed=warn 112 | 113 | # This is noisy for now. We *do* still want to warn on importing types 114 | # from untyped files, which is covered by untyped-type-import 115 | untyped-import=off 116 | 117 | [strict] 118 | deprecated-type 119 | nonstrict-import 120 | sketchy-null 121 | unclear-type 122 | unsafe-getters-setters 123 | untyped-import 124 | untyped-type-import 125 | 126 | [version] 127 | ^0.78.0 128 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | **Current Behavior** 2 | 3 | - What code are you running and what is happening? 4 | - Include a screenshot or video if it makes sense. 5 | 6 | **Expected Behavior** 7 | 8 | - What do you expect should be happening? 9 | - Include a screenshot or video if it makes sense. 10 | 11 | **How to reproduce** 12 | 13 | - 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. 14 | - Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug. 15 | - Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app. 16 | - Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue. 17 | - Before reporting an issue, make sure you are on latest version of the package. 18 | 19 | **Your Environment** 20 | 21 | | software | version | 22 | | ---------------------------- | ------- | 23 | | iOS or Android | 24 | | react-navigation | 25 | | react-navigation-tabs | 26 | | react-native-reanimated | 27 | | react-native-gesture-handler | 28 | | react-native-screens | 29 | | react-native | 30 | | expo | 31 | | node | 32 | | npm or yarn | 33 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | Please provide enough information so that others can review your pull request: 2 | 3 | **Motivation** 4 | 5 | Explain the **motivation** for making this change. What existing problem does the pull request solve? 6 | 7 | **Test plan** 8 | 9 | Demonstrate the code is solid. Example: the exact commands you ran and their output, screenshots / videos if the pull request changes UI. 10 | 11 | Make sure you test on both platforms if your change affects both platforms. 12 | 13 | The code must pass tests. 14 | 15 | **Code formatting** 16 | 17 | Look around. Match the style of the rest of the codebase. Run `yarn lint --fix` before committing. 18 | -------------------------------------------------------------------------------- /.github/workflows/stale.yml: -------------------------------------------------------------------------------- 1 | name: "Close stale issues and pull requests" 2 | on: 3 | schedule: 4 | - cron: "0 0 * * *" 5 | 6 | jobs: 7 | stale: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - uses: actions/stale@v1 11 | with: 12 | repo-token: ${{ secrets.GITHUB_TOKEN }} 13 | stale-issue-message: 'Hello 👋, this issue has been open for more than 2 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.' 14 | stale-pr-message: 'Hello 👋, this pull request has been open for more than 2 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.' 15 | exempt-issue-label: 'Keep opened' 16 | exempt-pr-label: 'Keep opened' 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # XDE 6 | .expo/ 7 | 8 | # VSCode 9 | .vscode/ 10 | jsconfig.json 11 | 12 | # Xcode 13 | # 14 | build/ 15 | *.pbxuser 16 | !default.pbxuser 17 | *.mode1v3 18 | !default.mode1v3 19 | *.mode2v3 20 | !default.mode2v3 21 | *.perspectivev3 22 | !default.perspectivev3 23 | xcuserdata 24 | *.xccheckout 25 | *.moved-aside 26 | DerivedData 27 | *.hmap 28 | *.ipa 29 | *.xcuserstate 30 | project.xcworkspace 31 | 32 | # Android/IJ 33 | # 34 | .idea 35 | .gradle 36 | local.properties 37 | 38 | # node.js 39 | # 40 | node_modules/ 41 | npm-debug.log 42 | yarn-debug.log 43 | yarn-error.log 44 | 45 | # BUCK 46 | buck-out/ 47 | \.buckd/ 48 | android/app/libs 49 | android/keystores/debug.keystore 50 | 51 | # Build 52 | dist/ 53 | 54 | # generated by bob 55 | lib/ 56 | -------------------------------------------------------------------------------- /.release-it.json: -------------------------------------------------------------------------------- 1 | { 2 | "increment": "conventional:angular", 3 | "scripts": { 4 | "changelog": "conventional-changelog -p angular | tail -n +3" 5 | }, 6 | "git": { 7 | "commitMessage": "chore: release %s", 8 | "tagName": "v%s" 9 | }, 10 | "npm": { 11 | "publish": true 12 | }, 13 | "github": { 14 | "release": true 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 React Native Community 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This package has been moved to https://github.com/react-navigation/react-navigation/tree/4.x 2 | 3 | --- 4 | 5 | # React Navigation Tabs 6 | 7 | [![Build Status][build-badge]][build] 8 | [![Version][version-badge]][package] 9 | [![MIT License][license-badge]][license] 10 | 11 | Tab navigators for React Navigation. 12 | 13 | ## Installation 14 | 15 | Follow the instructions on the [the React Navigation "Getting Started" guide](https://reactnavigation.org/docs/en/getting-started.html), and then add the `react-navigation-tabs` package to your project. 16 | 17 | ## Usage 18 | 19 | The package exports two different navigators: 20 | 21 | - `createBottomTabNavigator`: iOS like bottom tabs. 22 | - `createMaterialTopTabNavigator`: Material design themed top tabs with swipe gesture, from [react-native-tab-view](https://github.com/react-native-community/react-native-tab-view). 23 | 24 | You can import individual navigators and use them: 25 | 26 | ```js 27 | import { createBottomTabNavigator } from 'react-navigation-tabs'; 28 | 29 | export default createBottomTabNavigator({ 30 | Album: { screen: Album }, 31 | Library: { screen: Library }, 32 | History: { screen: History }, 33 | Cart: { screen: Cart }, 34 | }); 35 | ``` 36 | 37 | You can install another package, [`react-navigation-material-bottom-tabs`](https://github.com/react-navigation/material-bottom-tabs), to use a third type of tab navigator: 38 | 39 | - `createMaterialBottomTabNavigator`: Material design themed animated bottom tabs, from [react-native-paper](https://callstack.github.io/react-native-paper/bottom-navigation.html). 40 | 41 | ```js 42 | import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs'; 43 | 44 | export default createMaterialBottomTabNavigator( 45 | { 46 | Album: { screen: Album }, 47 | Library: { screen: Library }, 48 | History: { screen: History }, 49 | Cart: { screen: Cart }, 50 | }, 51 | { 52 | initialRouteName: 'Album', 53 | activeTintColor: '#F44336', 54 | }, 55 | ); 56 | ``` 57 | 58 | ## Development workflow 59 | 60 | To setup the development environment, open a Terminal in the repo directory and run the following: 61 | 62 | ```sh 63 | yarn bootstrap 64 | ``` 65 | 66 | While developing, you can run the example app with [Expo](https://expo.io/) to test your changes: 67 | 68 | ```sh 69 | yarn example start 70 | ``` 71 | 72 | Make sure your code passes TypeScript and ESLint. Run the following to verify: 73 | 74 | ```sh 75 | yarn typescript 76 | yarn lint 77 | ``` 78 | 79 | To fix formatting errors, run the following: 80 | 81 | ```sh 82 | yarn lint --fix 83 | ``` 84 | 85 | ## Docs 86 | 87 | - [`createBottomTabNavigator`](https://reactnavigation.org/docs/en/bottom-tab-navigator.html) 88 | - [`createMaterialTopTabNavigator`](https://reactnavigation.org/docs/en/material-top-tab-navigator.html) 89 | 90 | 91 | [build-badge]: https://img.shields.io/circleci/project/github/react-navigation/tabs/master.svg?style=flat-square 92 | [build]: https://circleci.com/gh/react-navigation/tabs 93 | [version-badge]: https://img.shields.io/npm/v/react-navigation-tabs.svg?style=flat-square 94 | [package]: https://www.npmjs.com/package/react-navigation-tabs 95 | [license-badge]: https://img.shields.io/npm/l/react-navigation-tabs.svg?style=flat-square 96 | [license]: https://opensource.org/licenses/MIT 97 | -------------------------------------------------------------------------------- /__setup__/enzyme.js: -------------------------------------------------------------------------------- 1 | import Enzyme from 'enzyme'; 2 | import Adapter from 'enzyme-adapter-react-16'; 3 | 4 | Enzyme.configure({ adapter: new Adapter() }); 5 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['@commitlint/config-conventional'], 3 | }; 4 | -------------------------------------------------------------------------------- /example/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "expo" 4 | ], 5 | "plugins": [ 6 | ["module-resolver", { 7 | "alias": { 8 | "react-navigation-tabs": "../src/index" 9 | } 10 | }] 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /example/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /example/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": '../.eslintrc', 3 | 4 | "settings": { 5 | "import/core-modules": [ "expo", "react-navigation-tabs", "react-navigation-tabs/types" ] 6 | }, 7 | 8 | "rules": { 9 | "react/prop-types": "off", 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /example/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /example/App.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { registerRootComponent } from 'expo'; 3 | import { View, TouchableOpacity, StyleSheet } from 'react-native'; 4 | import { 5 | Assets as StackAssets, 6 | createStackNavigator, 7 | NavigationStackScreenProps, 8 | } from 'react-navigation-stack'; 9 | import { 10 | Themed, 11 | createAppContainer, 12 | ThemeColors, 13 | useTheme, 14 | } from 'react-navigation'; 15 | import { MaterialCommunityIcons } from '@expo/vector-icons'; 16 | import { Asset } from 'expo-asset'; 17 | 18 | import BottomTabs from './src/BottomTabs'; 19 | import MaterialTopTabs from './src/MaterialTopTabs'; 20 | 21 | // Load the back button etc 22 | Asset.loadAsync(StackAssets); 23 | 24 | const Home = (props: NavigationStackScreenProps) => { 25 | const theme = useTheme(); 26 | 27 | return ( 28 | 29 | props.navigation.push('BottomTabs')} 33 | > 34 | Bottom tabs 35 | 36 | props.navigation.push('MaterialTopTabs')} 40 | > 41 | Material top tabs 42 | 43 | 44 | 45 | ); 46 | }; 47 | 48 | const List = createStackNavigator({ 49 | Home: { 50 | screen: Home, 51 | navigationOptions: { title: 'Examples' }, 52 | }, 53 | BottomTabs: { 54 | screen: BottomTabs, 55 | navigationOptions: { title: 'Bottom tabs' }, 56 | }, 57 | MaterialTopTabs: { 58 | screen: MaterialTopTabs, 59 | navigationOptions: { title: 'Material top tabs' }, 60 | }, 61 | }); 62 | 63 | const Navigation = createAppContainer(List); 64 | 65 | const App = () => { 66 | let [theme, setTheme] = React.useState<'light' | 'dark'>('light'); 67 | 68 | return ( 69 | 70 | 71 | 72 | { 82 | setTheme(theme === 'light' ? 'dark' : 'light'); 83 | }} 84 | > 85 | 90 | 91 | 92 | 93 | ); 94 | }; 95 | 96 | const styles = { 97 | container: { 98 | flex: 1, 99 | }, 100 | buttonContainer: { 101 | position: 'absolute' as const, 102 | bottom: 60, 103 | right: 20, 104 | }, 105 | button: { 106 | shadowOffset: { 107 | width: 0, 108 | height: 2, 109 | }, 110 | shadowOpacity: 0.4, 111 | shadowRadius: 2, 112 | borderRadius: 25, 113 | width: 50, 114 | height: 50, 115 | alignItems: 'center' as const, 116 | justifyContent: 'center' as const, 117 | elevation: 5, 118 | borderWidth: 1, 119 | }, 120 | itemLight: { 121 | padding: 16, 122 | backgroundColor: '#fff', 123 | borderBottomWidth: StyleSheet.hairlineWidth, 124 | borderBottomColor: '#eee', 125 | }, 126 | itemDark: { 127 | padding: 16, 128 | backgroundColor: ThemeColors.dark.bodyContent, 129 | borderBottomWidth: StyleSheet.hairlineWidth, 130 | borderBottomColor: ThemeColors.dark.bodyBorder, 131 | }, 132 | }; 133 | 134 | // @ts-ignore 135 | registerRootComponent(App); 136 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | ## Run the example 2 | 3 | - [View it with Expo](https://expo.io/@satya164/react-navigation-tabs-demos) 4 | - Run the example locally 5 | + Clone the repository and `cd` to this directory 6 | + Run `yarn` to install the dependencies 7 | + Run `yarn start` to start the packager 8 | + Scan the QR Code with the Expo app 9 | -------------------------------------------------------------------------------- /example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "React Navigation Tabs Example", 4 | "description": "Demonstrates the various capabilities of react-navigation-tabs: https://github.com/react-navigation/tabs", 5 | "slug": "react-navigation-tabs-demos", 6 | "sdkVersion": "33.0.0", 7 | "version": "1.0.0", 8 | "primaryColor": "#2196f3", 9 | "packagerOpts": { 10 | "assetExts": ["ttf"], 11 | "config": "./metro.config.js", 12 | "projectRoots": "" 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /example/assets/album-art-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-navigation/tabs/9a7ff608d12bd769d6a61a666d7a54bc32585a69/example/assets/album-art-1.jpg -------------------------------------------------------------------------------- /example/assets/album-art-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-navigation/tabs/9a7ff608d12bd769d6a61a666d7a54bc32585a69/example/assets/album-art-2.jpg -------------------------------------------------------------------------------- /example/assets/album-art-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-navigation/tabs/9a7ff608d12bd769d6a61a666d7a54bc32585a69/example/assets/album-art-3.jpg -------------------------------------------------------------------------------- /example/assets/album-art-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-navigation/tabs/9a7ff608d12bd769d6a61a666d7a54bc32585a69/example/assets/album-art-4.jpg -------------------------------------------------------------------------------- /example/assets/album-art-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-navigation/tabs/9a7ff608d12bd769d6a61a666d7a54bc32585a69/example/assets/album-art-5.jpg -------------------------------------------------------------------------------- /example/assets/album-art-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-navigation/tabs/9a7ff608d12bd769d6a61a666d7a54bc32585a69/example/assets/album-art-6.jpg -------------------------------------------------------------------------------- /example/assets/album-art-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-navigation/tabs/9a7ff608d12bd769d6a61a666d7a54bc32585a69/example/assets/album-art-7.jpg -------------------------------------------------------------------------------- /example/assets/album-art-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-navigation/tabs/9a7ff608d12bd769d6a61a666d7a54bc32585a69/example/assets/album-art-8.jpg -------------------------------------------------------------------------------- /example/assets/avatar-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-navigation/tabs/9a7ff608d12bd769d6a61a666d7a54bc32585a69/example/assets/avatar-1.png -------------------------------------------------------------------------------- /example/assets/avatar-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-navigation/tabs/9a7ff608d12bd769d6a61a666d7a54bc32585a69/example/assets/avatar-2.png -------------------------------------------------------------------------------- /example/assets/book.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-navigation/tabs/9a7ff608d12bd769d6a61a666d7a54bc32585a69/example/assets/book.jpg -------------------------------------------------------------------------------- /example/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-navigation/tabs/9a7ff608d12bd769d6a61a666d7a54bc32585a69/example/assets/icon.png -------------------------------------------------------------------------------- /example/metro.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies */ 2 | 3 | const path = require('path'); 4 | const blacklist = require('metro-config/src/defaults/blacklist'); 5 | const pak = require('../package.json'); 6 | const escape = require('escape-string-regexp'); 7 | 8 | const dependencies = Object.keys(pak.dependencies); 9 | const peerDependencies = Object.keys(pak.peerDependencies); 10 | 11 | module.exports = { 12 | projectRoot: __dirname, 13 | watchFolders: [path.resolve(__dirname, '..')], 14 | 15 | resolver: { 16 | blacklistRE: blacklist([ 17 | new RegExp( 18 | `^${escape(path.resolve(__dirname, '..', 'node_modules'))}\\/.*$` 19 | ), 20 | ]), 21 | 22 | providesModuleNodeModules: [ 23 | '@expo/vector-icons', 24 | '@babel/runtime', 25 | 'react-navigation', 26 | ...dependencies, 27 | ...peerDependencies, 28 | ], 29 | }, 30 | }; 31 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tabviewexample", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "expo start", 7 | "android": "expo android", 8 | "ios": "expo ios" 9 | }, 10 | "main": "App.js", 11 | "dependencies": { 12 | "@expo/vector-icons": "^10.0.0", 13 | "expo": "^33.0.7", 14 | "expo-asset": "^6.0.0", 15 | "expo-constants": "~5.0.1", 16 | "react": "16.8.3", 17 | "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz", 18 | "react-native-safe-area-view": "0.13.1", 19 | "react-native-screens": "1.0.0-alpha.22", 20 | "react-native-tab-view": "^2.10.0", 21 | "react-navigation": "^4.0.7", 22 | "react-navigation-stack": "^1.7.3" 23 | }, 24 | "devDependencies": { 25 | "babel-plugin-module-resolver": "^3.2.0", 26 | "babel-preset-expo": "^5.0.0", 27 | "glob-to-regexp": "^0.4.0" 28 | }, 29 | "resolutions": { 30 | "**/react-native-screens": "1.0.0-alpha.22", 31 | "**/react-native-safe-area-view": "0.13.1", 32 | "**/hoist-non-react-statics": "2.5.0", 33 | "**/react-native-tab-view": "2.10.0", 34 | "**/prop-types": "15.6.1" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /example/src/BottomTabs.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { createBottomTabNavigator } from 'react-navigation-tabs'; 3 | import { MaterialIcons } from '@expo/vector-icons'; 4 | import Albums from './Shared/Albums'; 5 | import Article from './Shared/Article'; 6 | import Chat from './Shared/Chat'; 7 | import Contacts from './Shared/Contacts'; 8 | 9 | // @ts-ignore 10 | import TouchableBounce from 'react-native/Libraries/Components/Touchable/TouchableBounce'; 11 | 12 | const tabBarIcon = (name: string) => ({ 13 | tintColor, 14 | horizontal, 15 | }: { 16 | tintColor: string; 17 | horizontal: boolean; 18 | }) => ( 19 | 20 | ); 21 | 22 | class AlbumsScreen extends React.Component { 23 | static navigationOptions = { 24 | tabBarLabel: 'Albums', 25 | tabBarIcon: tabBarIcon('photo-album'), 26 | tabBarButtonComponent: TouchableBounce, 27 | }; 28 | 29 | render() { 30 | return ; 31 | } 32 | } 33 | 34 | class ArticleScreen extends React.Component { 35 | static navigationOptions = { 36 | tabBarLabel: 'Article', 37 | tabBarIcon: tabBarIcon('chrome-reader-mode'), 38 | tabBarButtonComponent: TouchableBounce, 39 | }; 40 | 41 | render() { 42 | return
; 43 | } 44 | } 45 | 46 | class ChatScreen extends React.Component { 47 | static navigationOptions = { 48 | tabBarLabel: 'Chat', 49 | tabBarIcon: tabBarIcon('chat-bubble'), 50 | tabBarButtonComponent: TouchableBounce, 51 | }; 52 | 53 | render() { 54 | return ; 55 | } 56 | } 57 | 58 | class ContactsScreen extends React.Component { 59 | static navigationOptions = { 60 | tabBarLabel: 'Contacts', 61 | tabBarIcon: tabBarIcon('contacts'), 62 | tabBarButtonComponent: TouchableBounce, 63 | }; 64 | 65 | render() { 66 | return ; 67 | } 68 | } 69 | 70 | export default createBottomTabNavigator( 71 | { 72 | AlbumsScreen, 73 | ArticleScreen, 74 | ChatScreen, 75 | ContactsScreen, 76 | }, 77 | { 78 | initialRouteName: 'AlbumsScreen', 79 | } 80 | ); 81 | -------------------------------------------------------------------------------- /example/src/MaterialTopTabs.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { createMaterialTopTabNavigator } from 'react-navigation-tabs'; 3 | import Albums from './Shared/Albums'; 4 | import Article from './Shared/Article'; 5 | import Contacts from './Shared/Contacts'; 6 | 7 | class AlbumsScreen extends React.Component { 8 | static navigationOptions = { 9 | tabBarLabel: 'Albums', 10 | }; 11 | 12 | render() { 13 | return ; 14 | } 15 | } 16 | 17 | class ArticleScreen extends React.Component { 18 | static navigationOptions = { 19 | tabBarLabel: 'Article', 20 | }; 21 | 22 | render() { 23 | return
; 24 | } 25 | } 26 | 27 | class ContactsScreen extends React.Component { 28 | static navigationOptions = { 29 | tabBarLabel: 'Contacts', 30 | }; 31 | 32 | render() { 33 | return ; 34 | } 35 | } 36 | 37 | export default createMaterialTopTabNavigator( 38 | { 39 | AlbumsScreen, 40 | ArticleScreen, 41 | ContactsScreen, 42 | }, 43 | { 44 | lazy: true, 45 | tabBarOptions: { 46 | style: { backgroundColor: '#5620E4' }, 47 | }, 48 | } 49 | ); 50 | -------------------------------------------------------------------------------- /example/src/Shared/Albums.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Image, Dimensions, ScrollView, StyleSheet } from 'react-native'; 3 | 4 | const COVERS = [ 5 | require('../../assets/album-art-1.jpg'), 6 | require('../../assets/album-art-2.jpg'), 7 | require('../../assets/album-art-3.jpg'), 8 | require('../../assets/album-art-4.jpg'), 9 | require('../../assets/album-art-5.jpg'), 10 | require('../../assets/album-art-6.jpg'), 11 | require('../../assets/album-art-7.jpg'), 12 | require('../../assets/album-art-8.jpg'), 13 | ]; 14 | 15 | export default class Albums extends React.Component { 16 | render() { 17 | return ( 18 | 22 | {COVERS.map((source, i) => ( 23 | // eslint-disable-next-line react/no-array-index-key 24 | 25 | ))} 26 | 27 | ); 28 | } 29 | } 30 | 31 | const styles = StyleSheet.create({ 32 | container: { 33 | backgroundColor: '#343C46', 34 | }, 35 | content: { 36 | flexDirection: 'row', 37 | flexWrap: 'wrap', 38 | }, 39 | cover: { 40 | width: '50%', 41 | height: Dimensions.get('window').width / 2, 42 | }, 43 | }); 44 | -------------------------------------------------------------------------------- /example/src/Shared/Article.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { View, Text, Image, ScrollView, StyleSheet } from 'react-native'; 3 | 4 | export default class Article extends React.Component { 5 | render() { 6 | return ( 7 | 11 | 12 | 16 | 17 | Knowledge Bot 18 | 1st Jan 2025 19 | 20 | 21 | Lorem Ipsum 22 | 23 | Contrary to popular belief, Lorem Ipsum is not simply random text. It 24 | has roots in a piece of classical Latin literature from 45 BC, making 25 | it over 2000 years old. 26 | 27 | 28 | 29 | Richard McClintock, a Latin professor at Hampden-Sydney College in 30 | Virginia, looked up one of the more obscure Latin words, consectetur, 31 | from a Lorem Ipsum passage, and going through the cites of the word in 32 | classical literature, discovered the undoubtable source. 33 | 34 | 35 | Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de 36 | Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by 37 | Cicero, written in 45 BC. This book is a treatise on the theory of 38 | ethics, very popular during the Renaissance. The first line of Lorem 39 | Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in 40 | section 1.10.32. 41 | 42 | 43 | ); 44 | } 45 | } 46 | 47 | const styles = StyleSheet.create({ 48 | container: { 49 | backgroundColor: 'white', 50 | }, 51 | content: { 52 | paddingVertical: 16, 53 | }, 54 | author: { 55 | flexDirection: 'row', 56 | marginVertical: 8, 57 | marginHorizontal: 16, 58 | }, 59 | meta: { 60 | marginHorizontal: 8, 61 | justifyContent: 'center', 62 | }, 63 | name: { 64 | color: '#000', 65 | fontWeight: 'bold', 66 | fontSize: 16, 67 | lineHeight: 24, 68 | }, 69 | timestamp: { 70 | color: '#999', 71 | fontSize: 14, 72 | lineHeight: 21, 73 | }, 74 | avatar: { 75 | height: 48, 76 | width: 48, 77 | borderRadius: 24, 78 | }, 79 | title: { 80 | color: '#000', 81 | fontWeight: 'bold', 82 | fontSize: 36, 83 | marginVertical: 8, 84 | marginHorizontal: 16, 85 | }, 86 | paragraph: { 87 | color: '#000', 88 | fontSize: 16, 89 | lineHeight: 24, 90 | marginVertical: 8, 91 | marginHorizontal: 16, 92 | }, 93 | image: { 94 | width: '100%', 95 | height: 200, 96 | resizeMode: 'cover', 97 | marginVertical: 8, 98 | }, 99 | }); 100 | -------------------------------------------------------------------------------- /example/src/Shared/Chat.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { View, Image, Text, ScrollView, StyleSheet } from 'react-native'; 3 | 4 | const MESSAGES = [ 5 | 'okay', 6 | 'sudo make me a sandwich', 7 | 'what? make it yourself', 8 | 'make me a sandwich', 9 | ]; 10 | 11 | export default class Chat extends React.Component { 12 | render() { 13 | return ( 14 | 15 | 19 | {MESSAGES.map((text, i) => { 20 | const odd = i % 2; 21 | 22 | return ( 23 | 28 | 36 | 39 | 40 | {text} 41 | 42 | 43 | 44 | ); 45 | })} 46 | 47 | 48 | ); 49 | } 50 | } 51 | 52 | const styles = StyleSheet.create({ 53 | container: { 54 | flex: 1, 55 | backgroundColor: '#eceff1', 56 | }, 57 | inverted: { 58 | transform: [{ scaleY: -1 }], 59 | }, 60 | content: { 61 | padding: 16, 62 | }, 63 | even: { 64 | flexDirection: 'row', 65 | }, 66 | odd: { 67 | flexDirection: 'row-reverse', 68 | }, 69 | avatar: { 70 | marginVertical: 8, 71 | marginHorizontal: 6, 72 | height: 40, 73 | width: 40, 74 | borderRadius: 20, 75 | borderColor: 'rgba(0, 0, 0, .16)', 76 | borderWidth: StyleSheet.hairlineWidth, 77 | }, 78 | bubble: { 79 | marginVertical: 8, 80 | marginHorizontal: 6, 81 | paddingVertical: 12, 82 | paddingHorizontal: 16, 83 | borderRadius: 20, 84 | }, 85 | sent: { 86 | backgroundColor: '#cfd8dc', 87 | }, 88 | received: { 89 | backgroundColor: '#2196F3', 90 | }, 91 | sentText: { 92 | color: 'black', 93 | }, 94 | receivedText: { 95 | color: 'white', 96 | }, 97 | }); 98 | -------------------------------------------------------------------------------- /example/src/Shared/Contacts.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { View, Text, StyleSheet, FlatList, TextInput } from 'react-native'; 3 | 4 | type Item = { name: string; number: number }; 5 | 6 | const CONTACTS: Item[] = [ 7 | { name: 'Marissa Castillo', number: 7766398169 }, 8 | { name: 'Denzel Curry', number: 9394378449 }, 9 | { name: 'Miles Ferguson', number: 8966872888 }, 10 | { name: 'Desiree Webster', number: 6818656371 }, 11 | { name: 'Samantha Young', number: 6538288534 }, 12 | { name: 'Irene Hunter', number: 2932176249 }, 13 | { name: 'Annie Ryan', number: 4718456627 }, 14 | { name: 'Sasha Oliver', number: 9743195919 }, 15 | { name: 'Jarrod Avila', number: 8339212305 }, 16 | { name: 'Griffin Weaver', number: 6059349721 }, 17 | { name: 'Emilee Moss', number: 7382905180 }, 18 | { name: 'Angelique Oliver', number: 9689298436 }, 19 | { name: 'Emanuel Little', number: 6673376805 }, 20 | { name: 'Wayne Day', number: 6918839582 }, 21 | { name: 'Lauren Reese', number: 4652613201 }, 22 | { name: 'Kailey Ward', number: 2232609512 }, 23 | { name: 'Gabrielle Newman', number: 2837997127 }, 24 | { name: 'Luke Strickland', number: 8404732322 }, 25 | { name: 'Payton Garza', number: 7916140875 }, 26 | { name: 'Anna Moss', number: 3504954657 }, 27 | { name: 'Kailey Vazquez', number: 3002136330 }, 28 | { name: 'Jennifer Coleman', number: 5469629753 }, 29 | { name: 'Cindy Casey', number: 8446175026 }, 30 | { name: 'Dillon Doyle', number: 5614510703 }, 31 | { name: 'Savannah Garcia', number: 5634775094 }, 32 | { name: 'Kailey Hudson', number: 3289239675 }, 33 | { name: 'Ariel Green', number: 2103492196 }, 34 | { name: 'Weston Perez', number: 2984221823 }, 35 | { name: 'Kari Juarez', number: 9502125065 }, 36 | { name: 'Sara Sanders', number: 7696668206 }, 37 | { name: 'Griffin Le', number: 3396937040 }, 38 | { name: 'Fernando Valdez', number: 9124257306 }, 39 | { name: 'Taylor Marshall', number: 9656072372 }, 40 | { name: 'Elias Dunn', number: 9738536473 }, 41 | { name: 'Diane Barrett', number: 6886824829 }, 42 | { name: 'Samuel Freeman', number: 5523948094 }, 43 | { name: 'Irene Garza', number: 2077694008 }, 44 | { name: 'Devante Alvarez', number: 9897002645 }, 45 | { name: 'Sydney Floyd', number: 6462897254 }, 46 | { name: 'Toni Dixon', number: 3775448213 }, 47 | { name: 'Anastasia Spencer', number: 4548212752 }, 48 | { name: 'Reid Cortez', number: 6668056507 }, 49 | { name: 'Ramon Duncan', number: 8889157751 }, 50 | { name: 'Kenny Moreno', number: 5748219540 }, 51 | { name: 'Shelby Craig', number: 9473708675 }, 52 | { name: 'Jordyn Brewer', number: 7552277991 }, 53 | { name: 'Tanya Walker', number: 4308189657 }, 54 | { name: 'Nolan Figueroa', number: 9173443776 }, 55 | { name: 'Sophia Gibbs', number: 6435942770 }, 56 | { name: 'Vincent Sandoval', number: 2606111495 }, 57 | ]; 58 | 59 | class ContactItem extends React.PureComponent<{ 60 | item: Item; 61 | }> { 62 | render() { 63 | const { item } = this.props; 64 | 65 | return ( 66 | 67 | 68 | 69 | {item.name.slice(0, 1).toUpperCase()} 70 | 71 | 72 | 73 | {item.name} 74 | {item.number} 75 | 76 | 77 | ); 78 | } 79 | } 80 | 81 | export default class Contacts extends React.Component { 82 | _renderItem = ({ item }: { item: Item }) => ; 83 | 84 | _ItemSeparator = () => ; 85 | 86 | render() { 87 | return ( 88 | <> 89 | 93 | String(i)} 96 | renderItem={this._renderItem} 97 | ItemSeparatorComponent={this._ItemSeparator} 98 | /> 99 | 100 | ); 101 | } 102 | } 103 | 104 | const styles = StyleSheet.create({ 105 | item: { 106 | backgroundColor: 'white', 107 | flexDirection: 'row', 108 | alignItems: 'center', 109 | padding: 8, 110 | }, 111 | avatar: { 112 | height: 36, 113 | width: 36, 114 | borderRadius: 18, 115 | backgroundColor: '#e91e63', 116 | alignItems: 'center', 117 | justifyContent: 'center', 118 | }, 119 | letter: { 120 | color: 'white', 121 | fontWeight: 'bold', 122 | }, 123 | details: { 124 | margin: 8, 125 | }, 126 | name: { 127 | fontWeight: 'bold', 128 | fontSize: 14, 129 | color: 'black', 130 | }, 131 | number: { 132 | fontSize: 12, 133 | color: '#999', 134 | }, 135 | separator: { 136 | height: StyleSheet.hairlineWidth, 137 | backgroundColor: 'rgba(0, 0, 0, .08)', 138 | }, 139 | textInput: { 140 | height: 50, 141 | }, 142 | }); 143 | -------------------------------------------------------------------------------- /example/src/Shared/PhotoGrid.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { 3 | View, 4 | Image, 5 | ScrollView, 6 | Dimensions, 7 | StyleSheet, 8 | StyleProp, 9 | ViewStyle, 10 | ScrollViewProperties, 11 | } from 'react-native'; 12 | import { 13 | withNavigation, 14 | NavigationScreenProp, 15 | NavigationRoute, 16 | NavigationEventSubscription, 17 | } from 'react-navigation'; 18 | 19 | class NavigationAwareScrollViewBase extends React.Component<{ 20 | navigation: NavigationScreenProp; 21 | contentContainerStyle: StyleProp; 22 | }> { 23 | componentDidMount() { 24 | this.subscription = this.props.navigation.addListener('refocus', () => { 25 | if (this.props.navigation.isFocused()) { 26 | this.root.current && this.root.current.scrollTo({ x: 0, y: 0 }); 27 | } 28 | }); 29 | } 30 | 31 | componentWillUnmount() { 32 | this.subscription && this.subscription.remove(); 33 | } 34 | 35 | setNativeProps(props: ScrollViewProperties) { 36 | // @ts-ignore 37 | this.root.current.setNativeProps(props); 38 | } 39 | 40 | getNode() { 41 | return this.root.current; 42 | } 43 | 44 | private subscription: NavigationEventSubscription | undefined; 45 | 46 | private root = React.createRef(); 47 | 48 | render() { 49 | return ; 50 | } 51 | } 52 | 53 | const NavigationAwareScrollView = withNavigation(NavigationAwareScrollViewBase); 54 | 55 | export default function PhotoGrid({ id }: { id: string }) { 56 | const PHOTOS = Array.from({ length: 24 }).map( 57 | (_, i) => `https://unsplash.it/300/300/?random&__id=${id}${i}` 58 | ); 59 | 60 | return ( 61 | 62 | {PHOTOS.map(uri => ( 63 | 64 | 65 | 66 | ))} 67 | 68 | ); 69 | } 70 | 71 | const styles = StyleSheet.create({ 72 | content: { 73 | flexDirection: 'row', 74 | flexWrap: 'wrap', 75 | padding: 4, 76 | }, 77 | item: { 78 | height: Dimensions.get('window').width / 2, 79 | width: '50%', 80 | padding: 4, 81 | }, 82 | photo: { 83 | flex: 1, 84 | resizeMode: 'cover', 85 | }, 86 | }); 87 | -------------------------------------------------------------------------------- /flow-typed/npm/@expo/vector-icons_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: c7c91558bdd879554405af715286a9e4 2 | // flow-typed version: <>/@expo/vector-icons_v^6.2.0/flow_v0.56.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * '@expo/vector-icons' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module '@expo/vector-icons' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module '@expo/vector-icons/createIconSet' { 26 | declare module.exports: any; 27 | } 28 | 29 | declare module '@expo/vector-icons/createIconSetFromFontello' { 30 | declare module.exports: any; 31 | } 32 | 33 | declare module '@expo/vector-icons/createIconSetFromIcoMoon' { 34 | declare module.exports: any; 35 | } 36 | 37 | declare module '@expo/vector-icons/Entypo' { 38 | declare module.exports: any; 39 | } 40 | 41 | declare module '@expo/vector-icons/EvilIcons' { 42 | declare module.exports: any; 43 | } 44 | 45 | declare module '@expo/vector-icons/Feather' { 46 | declare module.exports: any; 47 | } 48 | 49 | declare module '@expo/vector-icons/FontAwesome' { 50 | declare module.exports: any; 51 | } 52 | 53 | declare module '@expo/vector-icons/Foundation' { 54 | declare module.exports: any; 55 | } 56 | 57 | declare module '@expo/vector-icons/iconFontSources' { 58 | declare module.exports: any; 59 | } 60 | 61 | declare module '@expo/vector-icons/Ionicons' { 62 | declare module.exports: any; 63 | } 64 | 65 | declare module '@expo/vector-icons/MaterialCommunityIcons' { 66 | declare module.exports: any; 67 | } 68 | 69 | declare module '@expo/vector-icons/MaterialIcons' { 70 | declare module.exports: any; 71 | } 72 | 73 | declare module '@expo/vector-icons/Octicons' { 74 | declare module.exports: any; 75 | } 76 | 77 | declare module '@expo/vector-icons/SimpleLineIcons' { 78 | declare module.exports: any; 79 | } 80 | 81 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/Entypo' { 82 | declare module.exports: any; 83 | } 84 | 85 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/EvilIcons' { 86 | declare module.exports: any; 87 | } 88 | 89 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/Feather' { 90 | declare module.exports: any; 91 | } 92 | 93 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/FontAwesome' { 94 | declare module.exports: any; 95 | } 96 | 97 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/Foundation' { 98 | declare module.exports: any; 99 | } 100 | 101 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/generate-icon' { 102 | declare module.exports: any; 103 | } 104 | 105 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/generate-material-icons' { 106 | declare module.exports: any; 107 | } 108 | 109 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/index' { 110 | declare module.exports: any; 111 | } 112 | 113 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/Ionicons' { 114 | declare module.exports: any; 115 | } 116 | 117 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/create-icon-set-from-fontello' { 118 | declare module.exports: any; 119 | } 120 | 121 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/create-icon-set-from-icomoon' { 122 | declare module.exports: any; 123 | } 124 | 125 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/create-icon-set' { 126 | declare module.exports: any; 127 | } 128 | 129 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/generate-icon-set-from-css' { 130 | declare module.exports: any; 131 | } 132 | 133 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/icon-button' { 134 | declare module.exports: any; 135 | } 136 | 137 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/react-native' { 138 | declare module.exports: any; 139 | } 140 | 141 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/react-native.osx' { 142 | declare module.exports: any; 143 | } 144 | 145 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/tab-bar-item-ios' { 146 | declare module.exports: any; 147 | } 148 | 149 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/toolbar-android' { 150 | declare module.exports: any; 151 | } 152 | 153 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/MaterialCommunityIcons' { 154 | declare module.exports: any; 155 | } 156 | 157 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/MaterialIcons' { 158 | declare module.exports: any; 159 | } 160 | 161 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/Octicons' { 162 | declare module.exports: any; 163 | } 164 | 165 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/RNIMigration' { 166 | declare module.exports: any; 167 | } 168 | 169 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/SimpleLineIcons' { 170 | declare module.exports: any; 171 | } 172 | 173 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/Zocial' { 174 | declare module.exports: any; 175 | } 176 | 177 | declare module '@expo/vector-icons/website/err-if-inside-universe' { 178 | declare module.exports: any; 179 | } 180 | 181 | declare module '@expo/vector-icons/website/src/App' { 182 | declare module.exports: any; 183 | } 184 | 185 | declare module '@expo/vector-icons/website/src/Icon' { 186 | declare module.exports: any; 187 | } 188 | 189 | declare module '@expo/vector-icons/website/src/IconConstants' { 190 | declare module.exports: any; 191 | } 192 | 193 | declare module '@expo/vector-icons/website/src/IconList' { 194 | declare module.exports: any; 195 | } 196 | 197 | declare module '@expo/vector-icons/website/src/index' { 198 | declare module.exports: any; 199 | } 200 | 201 | declare module '@expo/vector-icons/Zocial' { 202 | declare module.exports: any; 203 | } 204 | 205 | // Filename aliases 206 | declare module '@expo/vector-icons/createIconSet.js' { 207 | declare module.exports: $Exports<'@expo/vector-icons/createIconSet'>; 208 | } 209 | declare module '@expo/vector-icons/createIconSetFromFontello.js' { 210 | declare module.exports: $Exports<'@expo/vector-icons/createIconSetFromFontello'>; 211 | } 212 | declare module '@expo/vector-icons/createIconSetFromIcoMoon.js' { 213 | declare module.exports: $Exports<'@expo/vector-icons/createIconSetFromIcoMoon'>; 214 | } 215 | declare module '@expo/vector-icons/Entypo.js' { 216 | declare module.exports: $Exports<'@expo/vector-icons/Entypo'>; 217 | } 218 | declare module '@expo/vector-icons/EvilIcons.js' { 219 | declare module.exports: $Exports<'@expo/vector-icons/EvilIcons'>; 220 | } 221 | declare module '@expo/vector-icons/Feather.js' { 222 | declare module.exports: $Exports<'@expo/vector-icons/Feather'>; 223 | } 224 | declare module '@expo/vector-icons/FontAwesome.js' { 225 | declare module.exports: $Exports<'@expo/vector-icons/FontAwesome'>; 226 | } 227 | declare module '@expo/vector-icons/Foundation.js' { 228 | declare module.exports: $Exports<'@expo/vector-icons/Foundation'>; 229 | } 230 | declare module '@expo/vector-icons/iconFontSources.js' { 231 | declare module.exports: $Exports<'@expo/vector-icons/iconFontSources'>; 232 | } 233 | declare module '@expo/vector-icons/index' { 234 | declare module.exports: $Exports<'@expo/vector-icons'>; 235 | } 236 | declare module '@expo/vector-icons/index.js' { 237 | declare module.exports: $Exports<'@expo/vector-icons'>; 238 | } 239 | declare module '@expo/vector-icons/Ionicons.js' { 240 | declare module.exports: $Exports<'@expo/vector-icons/Ionicons'>; 241 | } 242 | declare module '@expo/vector-icons/MaterialCommunityIcons.js' { 243 | declare module.exports: $Exports<'@expo/vector-icons/MaterialCommunityIcons'>; 244 | } 245 | declare module '@expo/vector-icons/MaterialIcons.js' { 246 | declare module.exports: $Exports<'@expo/vector-icons/MaterialIcons'>; 247 | } 248 | declare module '@expo/vector-icons/Octicons.js' { 249 | declare module.exports: $Exports<'@expo/vector-icons/Octicons'>; 250 | } 251 | declare module '@expo/vector-icons/SimpleLineIcons.js' { 252 | declare module.exports: $Exports<'@expo/vector-icons/SimpleLineIcons'>; 253 | } 254 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/Entypo.js' { 255 | declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/Entypo'>; 256 | } 257 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/EvilIcons.js' { 258 | declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/EvilIcons'>; 259 | } 260 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/Feather.js' { 261 | declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/Feather'>; 262 | } 263 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/FontAwesome.js' { 264 | declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/FontAwesome'>; 265 | } 266 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/Foundation.js' { 267 | declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/Foundation'>; 268 | } 269 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/generate-icon.js' { 270 | declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/generate-icon'>; 271 | } 272 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/generate-material-icons.js' { 273 | declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/generate-material-icons'>; 274 | } 275 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/index.js' { 276 | declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/index'>; 277 | } 278 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/Ionicons.js' { 279 | declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/Ionicons'>; 280 | } 281 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/create-icon-set-from-fontello.js' { 282 | declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/lib/create-icon-set-from-fontello'>; 283 | } 284 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/create-icon-set-from-icomoon.js' { 285 | declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/lib/create-icon-set-from-icomoon'>; 286 | } 287 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/create-icon-set.js' { 288 | declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/lib/create-icon-set'>; 289 | } 290 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/generate-icon-set-from-css.js' { 291 | declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/lib/generate-icon-set-from-css'>; 292 | } 293 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/icon-button.js' { 294 | declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/lib/icon-button'>; 295 | } 296 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/react-native.js' { 297 | declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/lib/react-native'>; 298 | } 299 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/react-native.osx.js' { 300 | declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/lib/react-native.osx'>; 301 | } 302 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/tab-bar-item-ios.js' { 303 | declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/lib/tab-bar-item-ios'>; 304 | } 305 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/toolbar-android.js' { 306 | declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/lib/toolbar-android'>; 307 | } 308 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/MaterialCommunityIcons.js' { 309 | declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/MaterialCommunityIcons'>; 310 | } 311 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/MaterialIcons.js' { 312 | declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/MaterialIcons'>; 313 | } 314 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/Octicons.js' { 315 | declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/Octicons'>; 316 | } 317 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/RNIMigration.js' { 318 | declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/RNIMigration'>; 319 | } 320 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/SimpleLineIcons.js' { 321 | declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/SimpleLineIcons'>; 322 | } 323 | declare module '@expo/vector-icons/vendor/react-native-vector-icons/Zocial.js' { 324 | declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/Zocial'>; 325 | } 326 | declare module '@expo/vector-icons/website/err-if-inside-universe.js' { 327 | declare module.exports: $Exports<'@expo/vector-icons/website/err-if-inside-universe'>; 328 | } 329 | declare module '@expo/vector-icons/website/src/App.js' { 330 | declare module.exports: $Exports<'@expo/vector-icons/website/src/App'>; 331 | } 332 | declare module '@expo/vector-icons/website/src/Icon.js' { 333 | declare module.exports: $Exports<'@expo/vector-icons/website/src/Icon'>; 334 | } 335 | declare module '@expo/vector-icons/website/src/IconConstants.js' { 336 | declare module.exports: $Exports<'@expo/vector-icons/website/src/IconConstants'>; 337 | } 338 | declare module '@expo/vector-icons/website/src/IconList.js' { 339 | declare module.exports: $Exports<'@expo/vector-icons/website/src/IconList'>; 340 | } 341 | declare module '@expo/vector-icons/website/src/index.js' { 342 | declare module.exports: $Exports<'@expo/vector-icons/website/src/index'>; 343 | } 344 | declare module '@expo/vector-icons/Zocial.js' { 345 | declare module.exports: $Exports<'@expo/vector-icons/Zocial'>; 346 | } 347 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-cli_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 45660148c1072407a12908e4a58550b5 2 | // flow-typed version: <>/babel-cli_v^6.26.0/flow_v0.56.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-cli' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-cli' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-cli/bin/babel-doctor' { 26 | declare module.exports: any; 27 | } 28 | 29 | declare module 'babel-cli/bin/babel-external-helpers' { 30 | declare module.exports: any; 31 | } 32 | 33 | declare module 'babel-cli/bin/babel-node' { 34 | declare module.exports: any; 35 | } 36 | 37 | declare module 'babel-cli/bin/babel' { 38 | declare module.exports: any; 39 | } 40 | 41 | declare module 'babel-cli/lib/_babel-node' { 42 | declare module.exports: any; 43 | } 44 | 45 | declare module 'babel-cli/lib/babel-external-helpers' { 46 | declare module.exports: any; 47 | } 48 | 49 | declare module 'babel-cli/lib/babel-node' { 50 | declare module.exports: any; 51 | } 52 | 53 | declare module 'babel-cli/lib/babel/dir' { 54 | declare module.exports: any; 55 | } 56 | 57 | declare module 'babel-cli/lib/babel/file' { 58 | declare module.exports: any; 59 | } 60 | 61 | declare module 'babel-cli/lib/babel/index' { 62 | declare module.exports: any; 63 | } 64 | 65 | declare module 'babel-cli/lib/babel/util' { 66 | declare module.exports: any; 67 | } 68 | 69 | // Filename aliases 70 | declare module 'babel-cli/bin/babel-doctor.js' { 71 | declare module.exports: $Exports<'babel-cli/bin/babel-doctor'>; 72 | } 73 | declare module 'babel-cli/bin/babel-external-helpers.js' { 74 | declare module.exports: $Exports<'babel-cli/bin/babel-external-helpers'>; 75 | } 76 | declare module 'babel-cli/bin/babel-node.js' { 77 | declare module.exports: $Exports<'babel-cli/bin/babel-node'>; 78 | } 79 | declare module 'babel-cli/bin/babel.js' { 80 | declare module.exports: $Exports<'babel-cli/bin/babel'>; 81 | } 82 | declare module 'babel-cli/index' { 83 | declare module.exports: $Exports<'babel-cli'>; 84 | } 85 | declare module 'babel-cli/index.js' { 86 | declare module.exports: $Exports<'babel-cli'>; 87 | } 88 | declare module 'babel-cli/lib/_babel-node.js' { 89 | declare module.exports: $Exports<'babel-cli/lib/_babel-node'>; 90 | } 91 | declare module 'babel-cli/lib/babel-external-helpers.js' { 92 | declare module.exports: $Exports<'babel-cli/lib/babel-external-helpers'>; 93 | } 94 | declare module 'babel-cli/lib/babel-node.js' { 95 | declare module.exports: $Exports<'babel-cli/lib/babel-node'>; 96 | } 97 | declare module 'babel-cli/lib/babel/dir.js' { 98 | declare module.exports: $Exports<'babel-cli/lib/babel/dir'>; 99 | } 100 | declare module 'babel-cli/lib/babel/file.js' { 101 | declare module.exports: $Exports<'babel-cli/lib/babel/file'>; 102 | } 103 | declare module 'babel-cli/lib/babel/index.js' { 104 | declare module.exports: $Exports<'babel-cli/lib/babel/index'>; 105 | } 106 | declare module 'babel-cli/lib/babel/util.js' { 107 | declare module.exports: $Exports<'babel-cli/lib/babel/util'>; 108 | } 109 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-jest_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: fda9206a865012e0b4454d59b28fc825 2 | // flow-typed version: <>/babel-jest_v^21.2.0/flow_v0.56.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-jest' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-jest' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-jest/build/index' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'babel-jest/build/index.js' { 31 | declare module.exports: $Exports<'babel-jest/build/index'>; 32 | } 33 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-plugin-syntax-class-properties_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: d0d6a4ba1367cd2e4c6482a08b1a4b01 2 | // flow-typed version: <>/babel-plugin-syntax-class-properties_v^6.13.0/flow_v0.56.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-plugin-syntax-class-properties' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-plugin-syntax-class-properties' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-plugin-syntax-class-properties/lib/index' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'babel-plugin-syntax-class-properties/lib/index.js' { 31 | declare module.exports: $Exports<'babel-plugin-syntax-class-properties/lib/index'>; 32 | } 33 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-plugin-syntax-jsx_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: bca43ddbe413a229b1ee05870181660f 2 | // flow-typed version: <>/babel-plugin-syntax-jsx_v^6.18.0/flow_v0.56.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-plugin-syntax-jsx' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-plugin-syntax-jsx' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-plugin-syntax-jsx/lib/index' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'babel-plugin-syntax-jsx/lib/index.js' { 31 | declare module.exports: $Exports<'babel-plugin-syntax-jsx/lib/index'>; 32 | } 33 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-plugin-syntax-object-rest-spread_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 3bc29d2dec3d90d765e922c8096d8dfc 2 | // flow-typed version: <>/babel-plugin-syntax-object-rest-spread_v^6.13.0/flow_v0.56.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-plugin-syntax-object-rest-spread' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-plugin-syntax-object-rest-spread' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-plugin-syntax-object-rest-spread/lib/index' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'babel-plugin-syntax-object-rest-spread/lib/index.js' { 31 | declare module.exports: $Exports<'babel-plugin-syntax-object-rest-spread/lib/index'>; 32 | } 33 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-plugin-transform-flow-strip-types_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 2374cfcadfa849e9026f394d9681deb2 2 | // flow-typed version: <>/babel-plugin-transform-flow-strip-types_v^6.22.0/flow_v0.56.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-plugin-transform-flow-strip-types' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-plugin-transform-flow-strip-types' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-plugin-transform-flow-strip-types/lib/index' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'babel-plugin-transform-flow-strip-types/lib/index.js' { 31 | declare module.exports: $Exports<'babel-plugin-transform-flow-strip-types/lib/index'>; 32 | } 33 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-preset-react-native_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: da7f4ffcfb420e0ad7492e04856705c2 2 | // flow-typed version: <>/babel-preset-react-native_v^4.0.0/flow_v0.56.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-preset-react-native' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-preset-react-native' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-preset-react-native/configs/hmr' { 26 | declare module.exports: any; 27 | } 28 | 29 | declare module 'babel-preset-react-native/configs/main' { 30 | declare module.exports: any; 31 | } 32 | 33 | declare module 'babel-preset-react-native/lib/resolvePlugins' { 34 | declare module.exports: any; 35 | } 36 | 37 | declare module 'babel-preset-react-native/plugins' { 38 | declare module.exports: any; 39 | } 40 | 41 | declare module 'babel-preset-react-native/transforms/transform-dynamic-import' { 42 | declare module.exports: any; 43 | } 44 | 45 | declare module 'babel-preset-react-native/transforms/transform-symbol-member' { 46 | declare module.exports: any; 47 | } 48 | 49 | // Filename aliases 50 | declare module 'babel-preset-react-native/configs/hmr.js' { 51 | declare module.exports: $Exports<'babel-preset-react-native/configs/hmr'>; 52 | } 53 | declare module 'babel-preset-react-native/configs/main.js' { 54 | declare module.exports: $Exports<'babel-preset-react-native/configs/main'>; 55 | } 56 | declare module 'babel-preset-react-native/index' { 57 | declare module.exports: $Exports<'babel-preset-react-native'>; 58 | } 59 | declare module 'babel-preset-react-native/index.js' { 60 | declare module.exports: $Exports<'babel-preset-react-native'>; 61 | } 62 | declare module 'babel-preset-react-native/lib/resolvePlugins.js' { 63 | declare module.exports: $Exports<'babel-preset-react-native/lib/resolvePlugins'>; 64 | } 65 | declare module 'babel-preset-react-native/plugins.js' { 66 | declare module.exports: $Exports<'babel-preset-react-native/plugins'>; 67 | } 68 | declare module 'babel-preset-react-native/transforms/transform-dynamic-import.js' { 69 | declare module.exports: $Exports<'babel-preset-react-native/transforms/transform-dynamic-import'>; 70 | } 71 | declare module 'babel-preset-react-native/transforms/transform-symbol-member.js' { 72 | declare module.exports: $Exports<'babel-preset-react-native/transforms/transform-symbol-member'>; 73 | } 74 | -------------------------------------------------------------------------------- /flow-typed/npm/enzyme-adapter-react-16_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 7814bad223d2abb492841c50a587c50a 2 | // flow-typed version: <>/enzyme-adapter-react-16_v^1.1.0/flow_v0.56.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'enzyme-adapter-react-16' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'enzyme-adapter-react-16' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'enzyme-adapter-react-16/build/findCurrentFiberUsingSlowPath' { 26 | declare module.exports: any; 27 | } 28 | 29 | declare module 'enzyme-adapter-react-16/build/index' { 30 | declare module.exports: any; 31 | } 32 | 33 | declare module 'enzyme-adapter-react-16/build/ReactSixteenAdapter' { 34 | declare module.exports: any; 35 | } 36 | 37 | declare module 'enzyme-adapter-react-16/src/findCurrentFiberUsingSlowPath' { 38 | declare module.exports: any; 39 | } 40 | 41 | declare module 'enzyme-adapter-react-16/src/index' { 42 | declare module.exports: any; 43 | } 44 | 45 | declare module 'enzyme-adapter-react-16/src/ReactSixteenAdapter' { 46 | declare module.exports: any; 47 | } 48 | 49 | // Filename aliases 50 | declare module 'enzyme-adapter-react-16/build/findCurrentFiberUsingSlowPath.js' { 51 | declare module.exports: $Exports<'enzyme-adapter-react-16/build/findCurrentFiberUsingSlowPath'>; 52 | } 53 | declare module 'enzyme-adapter-react-16/build/index.js' { 54 | declare module.exports: $Exports<'enzyme-adapter-react-16/build/index'>; 55 | } 56 | declare module 'enzyme-adapter-react-16/build/ReactSixteenAdapter.js' { 57 | declare module.exports: $Exports<'enzyme-adapter-react-16/build/ReactSixteenAdapter'>; 58 | } 59 | declare module 'enzyme-adapter-react-16/src/findCurrentFiberUsingSlowPath.js' { 60 | declare module.exports: $Exports<'enzyme-adapter-react-16/src/findCurrentFiberUsingSlowPath'>; 61 | } 62 | declare module 'enzyme-adapter-react-16/src/index.js' { 63 | declare module.exports: $Exports<'enzyme-adapter-react-16/src/index'>; 64 | } 65 | declare module 'enzyme-adapter-react-16/src/ReactSixteenAdapter.js' { 66 | declare module.exports: $Exports<'enzyme-adapter-react-16/src/ReactSixteenAdapter'>; 67 | } 68 | -------------------------------------------------------------------------------- /flow-typed/npm/enzyme-to-json_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: baf756de734230f106096f5cc7925608 2 | // flow-typed version: <>/enzyme-to-json_v^3.2.2/flow_v0.56.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'enzyme-to-json' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'enzyme-to-json' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'enzyme-to-json/createSerializer' { 26 | declare module.exports: any; 27 | } 28 | 29 | declare module 'enzyme-to-json/mount' { 30 | declare module.exports: any; 31 | } 32 | 33 | declare module 'enzyme-to-json/render' { 34 | declare module.exports: any; 35 | } 36 | 37 | declare module 'enzyme-to-json/serializer' { 38 | declare module.exports: any; 39 | } 40 | 41 | declare module 'enzyme-to-json/shallow' { 42 | declare module.exports: any; 43 | } 44 | 45 | declare module 'enzyme-to-json/utils' { 46 | declare module.exports: any; 47 | } 48 | 49 | // Filename aliases 50 | declare module 'enzyme-to-json/createSerializer.js' { 51 | declare module.exports: $Exports<'enzyme-to-json/createSerializer'>; 52 | } 53 | declare module 'enzyme-to-json/index' { 54 | declare module.exports: $Exports<'enzyme-to-json'>; 55 | } 56 | declare module 'enzyme-to-json/index.js' { 57 | declare module.exports: $Exports<'enzyme-to-json'>; 58 | } 59 | declare module 'enzyme-to-json/mount.js' { 60 | declare module.exports: $Exports<'enzyme-to-json/mount'>; 61 | } 62 | declare module 'enzyme-to-json/render.js' { 63 | declare module.exports: $Exports<'enzyme-to-json/render'>; 64 | } 65 | declare module 'enzyme-to-json/serializer.js' { 66 | declare module.exports: $Exports<'enzyme-to-json/serializer'>; 67 | } 68 | declare module 'enzyme-to-json/shallow.js' { 69 | declare module.exports: $Exports<'enzyme-to-json/shallow'>; 70 | } 71 | declare module 'enzyme-to-json/utils.js' { 72 | declare module.exports: $Exports<'enzyme-to-json/utils'>; 73 | } 74 | -------------------------------------------------------------------------------- /flow-typed/npm/enzyme_v3.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 7be2af8800fdadaea6ac0404d256bafc 2 | // flow-typed version: 6ce6a0467c/enzyme_v3.x.x/flow_>=v0.53.x 3 | 4 | import * as React from "react"; 5 | 6 | declare module "enzyme" { 7 | declare type PredicateFunction = ( 8 | wrapper: T, 9 | index: number 10 | ) => boolean; 11 | declare type NodeOrNodes = React.Node | Array; 12 | declare type EnzymeSelector = string | Class> | Object; 13 | 14 | // CheerioWrapper is a type alias for an actual cheerio instance 15 | // TODO: Reference correct type from cheerio's type declarations 16 | declare type CheerioWrapper = any; 17 | 18 | declare class Wrapper { 19 | find(selector: EnzymeSelector): this, 20 | findWhere(predicate: PredicateFunction): this, 21 | filter(selector: EnzymeSelector): this, 22 | filterWhere(predicate: PredicateFunction): this, 23 | hostNodes(): this, 24 | contains(nodeOrNodes: NodeOrNodes): boolean, 25 | containsMatchingElement(node: React.Node): boolean, 26 | containsAllMatchingElements(nodes: NodeOrNodes): boolean, 27 | containsAnyMatchingElements(nodes: NodeOrNodes): boolean, 28 | dive(option?: { context?: Object }): this, 29 | exists(): boolean, 30 | isEmptyRender(): boolean, 31 | matchesElement(node: React.Node): boolean, 32 | hasClass(className: string): boolean, 33 | is(selector: EnzymeSelector): boolean, 34 | isEmpty(): boolean, 35 | not(selector: EnzymeSelector): this, 36 | children(selector?: EnzymeSelector): this, 37 | childAt(index: number): this, 38 | parents(selector?: EnzymeSelector): this, 39 | parent(): this, 40 | closest(selector: EnzymeSelector): this, 41 | render(): CheerioWrapper, 42 | unmount(): this, 43 | text(): string, 44 | html(): string, 45 | get(index: number): React.Node, 46 | getDOMNode(): HTMLElement | HTMLInputElement, 47 | at(index: number): this, 48 | first(): this, 49 | last(): this, 50 | state(key?: string): any, 51 | context(key?: string): any, 52 | props(): Object, 53 | prop(key: string): any, 54 | key(): string, 55 | simulate(event: string, ...args: Array): this, 56 | setState(state: {}, callback?: Function): this, 57 | setProps(props: {}): this, 58 | setContext(context: Object): this, 59 | instance(): React.Component<*, *>, 60 | update(): this, 61 | debug(options?: Object): string, 62 | type(): string | Function | null, 63 | name(): string, 64 | forEach(fn: (node: this, index: number) => mixed): this, 65 | map(fn: (node: this, index: number) => T): Array, 66 | reduce( 67 | fn: (value: T, node: this, index: number) => T, 68 | initialValue?: T 69 | ): Array, 70 | reduceRight( 71 | fn: (value: T, node: this, index: number) => T, 72 | initialValue?: T 73 | ): Array, 74 | some(selector: EnzymeSelector): boolean, 75 | someWhere(predicate: PredicateFunction): boolean, 76 | every(selector: EnzymeSelector): boolean, 77 | everyWhere(predicate: PredicateFunction): boolean, 78 | length: number 79 | } 80 | 81 | declare class ReactWrapper extends Wrapper { 82 | constructor(nodes: NodeOrNodes, root: any, options?: ?Object): ReactWrapper, 83 | mount(): this, 84 | ref(refName: string): this, 85 | detach(): void 86 | } 87 | 88 | declare class ShallowWrapper extends Wrapper { 89 | constructor( 90 | nodes: NodeOrNodes, 91 | root: any, 92 | options?: ?Object 93 | ): ShallowWrapper, 94 | equals(node: React.Node): boolean, 95 | shallow(options?: { context?: Object }): ShallowWrapper, 96 | getElement(): React.Node, 97 | getElements(): Array 98 | } 99 | 100 | declare function shallow( 101 | node: React.Node, 102 | options?: { context?: Object, disableLifecycleMethods?: boolean } 103 | ): ShallowWrapper; 104 | declare function mount( 105 | node: React.Node, 106 | options?: { 107 | context?: Object, 108 | attachTo?: HTMLElement, 109 | childContextTypes?: Object 110 | } 111 | ): ReactWrapper; 112 | declare function render( 113 | node: React.Node, 114 | options?: { context?: Object } 115 | ): CheerioWrapper; 116 | 117 | declare module.exports: { 118 | configure(options: { 119 | Adapter?: any, 120 | disableLifecycleMethods?: boolean 121 | }): void, 122 | render: typeof render, 123 | mount: typeof mount, 124 | shallow: typeof shallow, 125 | ShallowWrapper: typeof ShallowWrapper, 126 | ReactWrapper: typeof ReactWrapper 127 | }; 128 | } 129 | -------------------------------------------------------------------------------- /flow-typed/npm/eslint-config-satya164_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 971f61790d6569f915291a15ddb751b5 2 | // flow-typed version: <>/eslint-config-satya164_v^1.0.1/flow_v0.56.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'eslint-config-satya164' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'eslint-config-satya164' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | 26 | 27 | // Filename aliases 28 | declare module 'eslint-config-satya164/index' { 29 | declare module.exports: $Exports<'eslint-config-satya164'>; 30 | } 31 | declare module 'eslint-config-satya164/index.js' { 32 | declare module.exports: $Exports<'eslint-config-satya164'>; 33 | } 34 | -------------------------------------------------------------------------------- /flow-typed/npm/eslint-plugin-react-native-globals_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: be404e429473f2b985d42c86032a2276 2 | // flow-typed version: <>/eslint-plugin-react-native-globals_v^0.1.0/flow_v0.56.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'eslint-plugin-react-native-globals' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'eslint-plugin-react-native-globals' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | 26 | 27 | // Filename aliases 28 | declare module 'eslint-plugin-react-native-globals/index' { 29 | declare module.exports: $Exports<'eslint-plugin-react-native-globals'>; 30 | } 31 | declare module 'eslint-plugin-react-native-globals/index.js' { 32 | declare module.exports: $Exports<'eslint-plugin-react-native-globals'>; 33 | } 34 | -------------------------------------------------------------------------------- /flow-typed/npm/flow-bin_v0.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 6a5610678d4b01e13bbfbbc62bdaf583 2 | // flow-typed version: 3817bc6980/flow-bin_v0.x.x/flow_>=v0.25.x 3 | 4 | declare module "flow-bin" { 5 | declare module.exports: string; 6 | } 7 | -------------------------------------------------------------------------------- /flow-typed/npm/hoist-non-react-statics_v2.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 4a70afc6aaa9f6d8678add172ff49ba7 2 | // flow-typed version: 341cb80802/hoist-non-react-statics_v2.x.x/flow_>=v0.54.1 3 | 4 | declare module 'hoist-non-react-statics' { 5 | /* 6 | S - source component statics 7 | TP - target component props 8 | SP - additional source component props 9 | */ 10 | declare module.exports: ( 11 | target: React$ComponentType, 12 | source: React$ComponentType & S, 13 | blacklist?: { [key: $Keys]: boolean } 14 | ) => React$ComponentType & $Shape; 15 | } 16 | -------------------------------------------------------------------------------- /flow-typed/npm/jest_v21.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 483ecb6e4d88147c244d0b4e27951c1e 2 | // flow-typed version: a5bbe16c29/jest_v21.x.x/flow_>=v0.39.x 3 | 4 | type JestMockFn, TReturn> = { 5 | (...args: TArguments): TReturn, 6 | /** 7 | * An object for introspecting mock calls 8 | */ 9 | mock: { 10 | /** 11 | * An array that represents all calls that have been made into this mock 12 | * function. Each call is represented by an array of arguments that were 13 | * passed during the call. 14 | */ 15 | calls: Array, 16 | /** 17 | * An array that contains all the object instances that have been 18 | * instantiated from this mock function. 19 | */ 20 | instances: Array 21 | }, 22 | /** 23 | * Resets all information stored in the mockFn.mock.calls and 24 | * mockFn.mock.instances arrays. Often this is useful when you want to clean 25 | * up a mock's usage data between two assertions. 26 | */ 27 | mockClear(): void, 28 | /** 29 | * Resets all information stored in the mock. This is useful when you want to 30 | * completely restore a mock back to its initial state. 31 | */ 32 | mockReset(): void, 33 | /** 34 | * Removes the mock and restores the initial implementation. This is useful 35 | * when you want to mock functions in certain test cases and restore the 36 | * original implementation in others. Beware that mockFn.mockRestore only 37 | * works when mock was created with jest.spyOn. Thus you have to take care of 38 | * restoration yourself when manually assigning jest.fn(). 39 | */ 40 | mockRestore(): void, 41 | /** 42 | * Accepts a function that should be used as the implementation of the mock. 43 | * The mock itself will still record all calls that go into and instances 44 | * that come from itself -- the only difference is that the implementation 45 | * will also be executed when the mock is called. 46 | */ 47 | mockImplementation( 48 | fn: (...args: TArguments) => TReturn 49 | ): JestMockFn, 50 | /** 51 | * Accepts a function that will be used as an implementation of the mock for 52 | * one call to the mocked function. Can be chained so that multiple function 53 | * calls produce different results. 54 | */ 55 | mockImplementationOnce( 56 | fn: (...args: TArguments) => TReturn 57 | ): JestMockFn, 58 | /** 59 | * Just a simple sugar function for returning `this` 60 | */ 61 | mockReturnThis(): void, 62 | /** 63 | * Deprecated: use jest.fn(() => value) instead 64 | */ 65 | mockReturnValue(value: TReturn): JestMockFn, 66 | /** 67 | * Sugar for only returning a value once inside your mock 68 | */ 69 | mockReturnValueOnce(value: TReturn): JestMockFn 70 | }; 71 | 72 | type JestAsymmetricEqualityType = { 73 | /** 74 | * A custom Jasmine equality tester 75 | */ 76 | asymmetricMatch(value: mixed): boolean 77 | }; 78 | 79 | type JestCallsType = { 80 | allArgs(): mixed, 81 | all(): mixed, 82 | any(): boolean, 83 | count(): number, 84 | first(): mixed, 85 | mostRecent(): mixed, 86 | reset(): void 87 | }; 88 | 89 | type JestClockType = { 90 | install(): void, 91 | mockDate(date: Date): void, 92 | tick(milliseconds?: number): void, 93 | uninstall(): void 94 | }; 95 | 96 | type JestMatcherResult = { 97 | message?: string | (() => string), 98 | pass: boolean 99 | }; 100 | 101 | type JestMatcher = (actual: any, expected: any) => JestMatcherResult; 102 | 103 | type JestPromiseType = { 104 | /** 105 | * Use rejects to unwrap the reason of a rejected promise so any other 106 | * matcher can be chained. If the promise is fulfilled the assertion fails. 107 | */ 108 | rejects: JestExpectType, 109 | /** 110 | * Use resolves to unwrap the value of a fulfilled promise so any other 111 | * matcher can be chained. If the promise is rejected the assertion fails. 112 | */ 113 | resolves: JestExpectType 114 | }; 115 | 116 | /** 117 | * Plugin: jest-enzyme 118 | */ 119 | type EnzymeMatchersType = { 120 | toBeChecked(): void, 121 | toBeDisabled(): void, 122 | toBeEmpty(): void, 123 | toBePresent(): void, 124 | toContainReact(element: React$Element): void, 125 | toHaveClassName(className: string): void, 126 | toHaveHTML(html: string): void, 127 | toHaveProp(propKey: string, propValue?: any): void, 128 | toHaveRef(refName: string): void, 129 | toHaveState(stateKey: string, stateValue?: any): void, 130 | toHaveStyle(styleKey: string, styleValue?: any): void, 131 | toHaveTagName(tagName: string): void, 132 | toHaveText(text: string): void, 133 | toIncludeText(text: string): void, 134 | toHaveValue(value: any): void, 135 | toMatchElement(element: React$Element): void, 136 | toMatchSelector(selector: string): void 137 | }; 138 | 139 | type JestExpectType = { 140 | not: JestExpectType & EnzymeMatchersType, 141 | /** 142 | * If you have a mock function, you can use .lastCalledWith to test what 143 | * arguments it was last called with. 144 | */ 145 | lastCalledWith(...args: Array): void, 146 | /** 147 | * toBe just checks that a value is what you expect. It uses === to check 148 | * strict equality. 149 | */ 150 | toBe(value: any): void, 151 | /** 152 | * Use .toHaveBeenCalled to ensure that a mock function got called. 153 | */ 154 | toBeCalled(): void, 155 | /** 156 | * Use .toBeCalledWith to ensure that a mock function was called with 157 | * specific arguments. 158 | */ 159 | toBeCalledWith(...args: Array): void, 160 | /** 161 | * Using exact equality with floating point numbers is a bad idea. Rounding 162 | * means that intuitive things fail. 163 | */ 164 | toBeCloseTo(num: number, delta: any): void, 165 | /** 166 | * Use .toBeDefined to check that a variable is not undefined. 167 | */ 168 | toBeDefined(): void, 169 | /** 170 | * Use .toBeFalsy when you don't care what a value is, you just want to 171 | * ensure a value is false in a boolean context. 172 | */ 173 | toBeFalsy(): void, 174 | /** 175 | * To compare floating point numbers, you can use toBeGreaterThan. 176 | */ 177 | toBeGreaterThan(number: number): void, 178 | /** 179 | * To compare floating point numbers, you can use toBeGreaterThanOrEqual. 180 | */ 181 | toBeGreaterThanOrEqual(number: number): void, 182 | /** 183 | * To compare floating point numbers, you can use toBeLessThan. 184 | */ 185 | toBeLessThan(number: number): void, 186 | /** 187 | * To compare floating point numbers, you can use toBeLessThanOrEqual. 188 | */ 189 | toBeLessThanOrEqual(number: number): void, 190 | /** 191 | * Use .toBeInstanceOf(Class) to check that an object is an instance of a 192 | * class. 193 | */ 194 | toBeInstanceOf(cls: Class<*>): void, 195 | /** 196 | * .toBeNull() is the same as .toBe(null) but the error messages are a bit 197 | * nicer. 198 | */ 199 | toBeNull(): void, 200 | /** 201 | * Use .toBeTruthy when you don't care what a value is, you just want to 202 | * ensure a value is true in a boolean context. 203 | */ 204 | toBeTruthy(): void, 205 | /** 206 | * Use .toBeUndefined to check that a variable is undefined. 207 | */ 208 | toBeUndefined(): void, 209 | /** 210 | * Use .toContain when you want to check that an item is in a list. For 211 | * testing the items in the list, this uses ===, a strict equality check. 212 | */ 213 | toContain(item: any): void, 214 | /** 215 | * Use .toContainEqual when you want to check that an item is in a list. For 216 | * testing the items in the list, this matcher recursively checks the 217 | * equality of all fields, rather than checking for object identity. 218 | */ 219 | toContainEqual(item: any): void, 220 | /** 221 | * Use .toEqual when you want to check that two objects have the same value. 222 | * This matcher recursively checks the equality of all fields, rather than 223 | * checking for object identity. 224 | */ 225 | toEqual(value: any): void, 226 | /** 227 | * Use .toHaveBeenCalled to ensure that a mock function got called. 228 | */ 229 | toHaveBeenCalled(): void, 230 | /** 231 | * Use .toHaveBeenCalledTimes to ensure that a mock function got called exact 232 | * number of times. 233 | */ 234 | toHaveBeenCalledTimes(number: number): void, 235 | /** 236 | * Use .toHaveBeenCalledWith to ensure that a mock function was called with 237 | * specific arguments. 238 | */ 239 | toHaveBeenCalledWith(...args: Array): void, 240 | /** 241 | * Use .toHaveBeenLastCalledWith to ensure that a mock function was last called 242 | * with specific arguments. 243 | */ 244 | toHaveBeenLastCalledWith(...args: Array): void, 245 | /** 246 | * Check that an object has a .length property and it is set to a certain 247 | * numeric value. 248 | */ 249 | toHaveLength(number: number): void, 250 | /** 251 | * 252 | */ 253 | toHaveProperty(propPath: string, value?: any): void, 254 | /** 255 | * Use .toMatch to check that a string matches a regular expression or string. 256 | */ 257 | toMatch(regexpOrString: RegExp | string): void, 258 | /** 259 | * Use .toMatchObject to check that a javascript object matches a subset of the properties of an object. 260 | */ 261 | toMatchObject(object: Object | Array): void, 262 | /** 263 | * This ensures that a React component matches the most recent snapshot. 264 | */ 265 | toMatchSnapshot(name?: string): void, 266 | /** 267 | * Use .toThrow to test that a function throws when it is called. 268 | * If you want to test that a specific error gets thrown, you can provide an 269 | * argument to toThrow. The argument can be a string for the error message, 270 | * a class for the error, or a regex that should match the error. 271 | * 272 | * Alias: .toThrowError 273 | */ 274 | toThrow(message?: string | Error | Class | RegExp): void, 275 | toThrowError(message?: string | Error | Class | RegExp): void, 276 | /** 277 | * Use .toThrowErrorMatchingSnapshot to test that a function throws a error 278 | * matching the most recent snapshot when it is called. 279 | */ 280 | toThrowErrorMatchingSnapshot(): void 281 | }; 282 | 283 | type JestObjectType = { 284 | /** 285 | * Disables automatic mocking in the module loader. 286 | * 287 | * After this method is called, all `require()`s will return the real 288 | * versions of each module (rather than a mocked version). 289 | */ 290 | disableAutomock(): JestObjectType, 291 | /** 292 | * An un-hoisted version of disableAutomock 293 | */ 294 | autoMockOff(): JestObjectType, 295 | /** 296 | * Enables automatic mocking in the module loader. 297 | */ 298 | enableAutomock(): JestObjectType, 299 | /** 300 | * An un-hoisted version of enableAutomock 301 | */ 302 | autoMockOn(): JestObjectType, 303 | /** 304 | * Clears the mock.calls and mock.instances properties of all mocks. 305 | * Equivalent to calling .mockClear() on every mocked function. 306 | */ 307 | clearAllMocks(): JestObjectType, 308 | /** 309 | * Resets the state of all mocks. Equivalent to calling .mockReset() on every 310 | * mocked function. 311 | */ 312 | resetAllMocks(): JestObjectType, 313 | /** 314 | * Removes any pending timers from the timer system. 315 | */ 316 | clearAllTimers(): void, 317 | /** 318 | * The same as `mock` but not moved to the top of the expectation by 319 | * babel-jest. 320 | */ 321 | doMock(moduleName: string, moduleFactory?: any): JestObjectType, 322 | /** 323 | * The same as `unmock` but not moved to the top of the expectation by 324 | * babel-jest. 325 | */ 326 | dontMock(moduleName: string): JestObjectType, 327 | /** 328 | * Returns a new, unused mock function. Optionally takes a mock 329 | * implementation. 330 | */ 331 | fn, TReturn>( 332 | implementation?: (...args: TArguments) => TReturn 333 | ): JestMockFn, 334 | /** 335 | * Determines if the given function is a mocked function. 336 | */ 337 | isMockFunction(fn: Function): boolean, 338 | /** 339 | * Given the name of a module, use the automatic mocking system to generate a 340 | * mocked version of the module for you. 341 | */ 342 | genMockFromModule(moduleName: string): any, 343 | /** 344 | * Mocks a module with an auto-mocked version when it is being required. 345 | * 346 | * The second argument can be used to specify an explicit module factory that 347 | * is being run instead of using Jest's automocking feature. 348 | * 349 | * The third argument can be used to create virtual mocks -- mocks of modules 350 | * that don't exist anywhere in the system. 351 | */ 352 | mock( 353 | moduleName: string, 354 | moduleFactory?: any, 355 | options?: Object 356 | ): JestObjectType, 357 | /** 358 | * Returns the actual module instead of a mock, bypassing all checks on 359 | * whether the module should receive a mock implementation or not. 360 | */ 361 | requireActual(moduleName: string): any, 362 | /** 363 | * Returns a mock module instead of the actual module, bypassing all checks 364 | * on whether the module should be required normally or not. 365 | */ 366 | requireMock(moduleName: string): any, 367 | /** 368 | * Resets the module registry - the cache of all required modules. This is 369 | * useful to isolate modules where local state might conflict between tests. 370 | */ 371 | resetModules(): JestObjectType, 372 | /** 373 | * Exhausts the micro-task queue (usually interfaced in node via 374 | * process.nextTick). 375 | */ 376 | runAllTicks(): void, 377 | /** 378 | * Exhausts the macro-task queue (i.e., all tasks queued by setTimeout(), 379 | * setInterval(), and setImmediate()). 380 | */ 381 | runAllTimers(): void, 382 | /** 383 | * Exhausts all tasks queued by setImmediate(). 384 | */ 385 | runAllImmediates(): void, 386 | /** 387 | * Executes only the macro task queue (i.e. all tasks queued by setTimeout() 388 | * or setInterval() and setImmediate()). 389 | */ 390 | runTimersToTime(msToRun: number): void, 391 | /** 392 | * Executes only the macro-tasks that are currently pending (i.e., only the 393 | * tasks that have been queued by setTimeout() or setInterval() up to this 394 | * point) 395 | */ 396 | runOnlyPendingTimers(): void, 397 | /** 398 | * Explicitly supplies the mock object that the module system should return 399 | * for the specified module. Note: It is recommended to use jest.mock() 400 | * instead. 401 | */ 402 | setMock(moduleName: string, moduleExports: any): JestObjectType, 403 | /** 404 | * Indicates that the module system should never return a mocked version of 405 | * the specified module from require() (e.g. that it should always return the 406 | * real module). 407 | */ 408 | unmock(moduleName: string): JestObjectType, 409 | /** 410 | * Instructs Jest to use fake versions of the standard timer functions 411 | * (setTimeout, setInterval, clearTimeout, clearInterval, nextTick, 412 | * setImmediate and clearImmediate). 413 | */ 414 | useFakeTimers(): JestObjectType, 415 | /** 416 | * Instructs Jest to use the real versions of the standard timer functions. 417 | */ 418 | useRealTimers(): JestObjectType, 419 | /** 420 | * Creates a mock function similar to jest.fn but also tracks calls to 421 | * object[methodName]. 422 | */ 423 | spyOn(object: Object, methodName: string): JestMockFn, 424 | /** 425 | * Set the default timeout interval for tests and before/after hooks in milliseconds. 426 | * Note: The default timeout interval is 5 seconds if this method is not called. 427 | */ 428 | setTimeout(timeout: number): JestObjectType 429 | }; 430 | 431 | type JestSpyType = { 432 | calls: JestCallsType 433 | }; 434 | 435 | /** Runs this function after every test inside this context */ 436 | declare function afterEach( 437 | fn: (done: () => void) => ?Promise, 438 | timeout?: number 439 | ): void; 440 | /** Runs this function before every test inside this context */ 441 | declare function beforeEach( 442 | fn: (done: () => void) => ?Promise, 443 | timeout?: number 444 | ): void; 445 | /** Runs this function after all tests have finished inside this context */ 446 | declare function afterAll( 447 | fn: (done: () => void) => ?Promise, 448 | timeout?: number 449 | ): void; 450 | /** Runs this function before any tests have started inside this context */ 451 | declare function beforeAll( 452 | fn: (done: () => void) => ?Promise, 453 | timeout?: number 454 | ): void; 455 | 456 | /** A context for grouping tests together */ 457 | declare var describe: { 458 | /** 459 | * Creates a block that groups together several related tests in one "test suite" 460 | */ 461 | (name: string, fn: () => void): void, 462 | 463 | /** 464 | * Only run this describe block 465 | */ 466 | only(name: string, fn: () => void): void, 467 | 468 | /** 469 | * Skip running this describe block 470 | */ 471 | skip(name: string, fn: () => void): void 472 | }; 473 | 474 | /** An individual test unit */ 475 | declare var it: { 476 | /** 477 | * An individual test unit 478 | * 479 | * @param {string} Name of Test 480 | * @param {Function} Test 481 | * @param {number} Timeout for the test, in milliseconds. 482 | */ 483 | ( 484 | name: string, 485 | fn?: (done: () => void) => ?Promise, 486 | timeout?: number 487 | ): void, 488 | /** 489 | * Only run this test 490 | * 491 | * @param {string} Name of Test 492 | * @param {Function} Test 493 | * @param {number} Timeout for the test, in milliseconds. 494 | */ 495 | only( 496 | name: string, 497 | fn?: (done: () => void) => ?Promise, 498 | timeout?: number 499 | ): void, 500 | /** 501 | * Skip running this test 502 | * 503 | * @param {string} Name of Test 504 | * @param {Function} Test 505 | * @param {number} Timeout for the test, in milliseconds. 506 | */ 507 | skip( 508 | name: string, 509 | fn?: (done: () => void) => ?Promise, 510 | timeout?: number 511 | ): void, 512 | /** 513 | * Run the test concurrently 514 | * 515 | * @param {string} Name of Test 516 | * @param {Function} Test 517 | * @param {number} Timeout for the test, in milliseconds. 518 | */ 519 | concurrent( 520 | name: string, 521 | fn?: (done: () => void) => ?Promise, 522 | timeout?: number 523 | ): void 524 | }; 525 | declare function fit( 526 | name: string, 527 | fn: (done: () => void) => ?Promise, 528 | timeout?: number 529 | ): void; 530 | /** An individual test unit */ 531 | declare var test: typeof it; 532 | /** A disabled group of tests */ 533 | declare var xdescribe: typeof describe; 534 | /** A focused group of tests */ 535 | declare var fdescribe: typeof describe; 536 | /** A disabled individual test */ 537 | declare var xit: typeof it; 538 | /** A disabled individual test */ 539 | declare var xtest: typeof it; 540 | 541 | type JestPrettyFormatColors = { 542 | comment: { close: string, open: string }, 543 | content: { close: string, open: string }, 544 | prop: { close: string, open: string }, 545 | tag: { close: string, open: string }, 546 | value: { close: string, open: string }, 547 | }; 548 | 549 | type JestPrettyFormatIndent = string => string; 550 | type JestPrettyFormatRefs = Array; 551 | type JestPrettyFormatPrint = any => string; 552 | type JestPrettyFormatStringOrNull = string | null; 553 | 554 | type JestPrettyFormatOptions = {| 555 | callToJSON: boolean, 556 | edgeSpacing: string, 557 | escapeRegex: boolean, 558 | highlight: boolean, 559 | indent: number, 560 | maxDepth: number, 561 | min: boolean, 562 | plugins: JestPrettyFormatPlugins, 563 | printFunctionName: boolean, 564 | spacing: string, 565 | theme: {| 566 | comment: string, 567 | content: string, 568 | prop: string, 569 | tag: string, 570 | value: string, 571 | |}, 572 | |}; 573 | 574 | type JestPrettyFormatPlugin = { 575 | print: ( 576 | val: any, 577 | serialize: JestPrettyFormatPrint, 578 | indent: JestPrettyFormatIndent, 579 | opts: JestPrettyFormatOptions, 580 | colors: JestPrettyFormatColors, 581 | ) => string, 582 | test: any => boolean, 583 | }; 584 | 585 | type JestPrettyFormatPlugins = Array; 586 | 587 | /** The expect function is used every time you want to test a value */ 588 | declare var expect: { 589 | /** The object that you want to make assertions against */ 590 | (value: any): JestExpectType & JestPromiseType & EnzymeMatchersType, 591 | /** Add additional Jasmine matchers to Jest's roster */ 592 | extend(matchers: { [name: string]: JestMatcher }): void, 593 | /** Add a module that formats application-specific data structures. */ 594 | addSnapshotSerializer(pluginModule: JestPrettyFormatPlugin): void, 595 | assertions(expectedAssertions: number): void, 596 | hasAssertions(): void, 597 | any(value: mixed): JestAsymmetricEqualityType, 598 | anything(): void, 599 | arrayContaining(value: Array): void, 600 | objectContaining(value: Object): void, 601 | /** Matches any received string that contains the exact expected string. */ 602 | stringContaining(value: string): void, 603 | stringMatching(value: string | RegExp): void 604 | }; 605 | 606 | // TODO handle return type 607 | // http://jasmine.github.io/2.4/introduction.html#section-Spies 608 | declare function spyOn(value: mixed, method: string): Object; 609 | 610 | /** Holds all functions related to manipulating test runner */ 611 | declare var jest: JestObjectType; 612 | 613 | /** 614 | * The global Jasmine object, this is generally not exposed as the public API, 615 | * using features inside here could break in later versions of Jest. 616 | */ 617 | declare var jasmine: { 618 | DEFAULT_TIMEOUT_INTERVAL: number, 619 | any(value: mixed): JestAsymmetricEqualityType, 620 | anything(): void, 621 | arrayContaining(value: Array): void, 622 | clock(): JestClockType, 623 | createSpy(name: string): JestSpyType, 624 | createSpyObj( 625 | baseName: string, 626 | methodNames: Array 627 | ): { [methodName: string]: JestSpyType }, 628 | objectContaining(value: Object): void, 629 | stringMatching(value: string): void 630 | }; 631 | -------------------------------------------------------------------------------- /flow-typed/npm/prettier_v1.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 4eed8da2dc730dc33e7710b465eaa44b 2 | // flow-typed version: cc7a557b34/prettier_v1.x.x/flow_>=v0.56.x 3 | 4 | declare module "prettier" { 5 | declare type AST = Object; 6 | declare type Doc = Object; 7 | declare type FastPath = Object; 8 | 9 | declare type PrettierParserName = 10 | | "babylon" 11 | | "flow" 12 | | "typescript" 13 | | "postcss" 14 | | "css" 15 | | "less" 16 | | "scss" 17 | | "json" 18 | | "graphql" 19 | | "markdown" 20 | | "vue"; 21 | 22 | declare type PrettierParser = { 23 | [name: PrettierParserName]: (text: string, options?: Object) => AST 24 | }; 25 | 26 | declare type CustomParser = ( 27 | text: string, 28 | parsers: PrettierParser, 29 | options: Options 30 | ) => AST; 31 | 32 | declare type Options = {| 33 | printWidth?: number, 34 | tabWidth?: number, 35 | useTabs?: boolean, 36 | semi?: boolean, 37 | singleQuote?: boolean, 38 | trailingComma?: "none" | "es5" | "all", 39 | bracketSpacing?: boolean, 40 | jsxBracketSameLine?: boolean, 41 | arrowParens?: "avoid" | "always", 42 | rangeStart?: number, 43 | rangeEnd?: number, 44 | parser?: PrettierParserName | CustomParser, 45 | filepath?: string, 46 | requirePragma?: boolean, 47 | insertPragma?: boolean, 48 | proseWrap?: "always" | "never" | "preserve", 49 | plugins?: Array 50 | |}; 51 | 52 | declare type Plugin = { 53 | languages: SupportLanguage, 54 | parsers: { [parserName: string]: Parser }, 55 | printers: { [astFormat: string]: Printer } 56 | }; 57 | 58 | declare type Parser = { 59 | parse: ( 60 | text: string, 61 | parsers: { [parserName: string]: Parser }, 62 | options: Object 63 | ) => AST, 64 | astFormat: string 65 | }; 66 | 67 | declare type Printer = { 68 | print: ( 69 | path: FastPath, 70 | options: Object, 71 | print: (path: FastPath) => Doc 72 | ) => Doc, 73 | embed: ( 74 | path: FastPath, 75 | print: (path: FastPath) => Doc, 76 | textToDoc: (text: string, options: Object) => Doc, 77 | options: Object 78 | ) => ?Doc 79 | }; 80 | 81 | declare type CursorOptions = {| 82 | cursorOffset: number, 83 | printWidth?: $PropertyType, 84 | tabWidth?: $PropertyType, 85 | useTabs?: $PropertyType, 86 | semi?: $PropertyType, 87 | singleQuote?: $PropertyType, 88 | trailingComma?: $PropertyType, 89 | bracketSpacing?: $PropertyType, 90 | jsxBracketSameLine?: $PropertyType, 91 | arrowParens?: $PropertyType, 92 | parser?: $PropertyType, 93 | filepath?: $PropertyType, 94 | requirePragma?: $PropertyType, 95 | insertPragma?: $PropertyType, 96 | proseWrap?: $PropertyType, 97 | plugins?: $PropertyType 98 | |}; 99 | 100 | declare type CursorResult = {| 101 | formatted: string, 102 | cursorOffset: number 103 | |}; 104 | 105 | declare type ResolveConfigOptions = {| 106 | useCache?: boolean, 107 | config?: string, 108 | editorconfig?: boolean 109 | |}; 110 | 111 | declare type SupportLanguage = { 112 | name: string, 113 | since: string, 114 | parsers: Array, 115 | group?: string, 116 | tmScope: string, 117 | aceMode: string, 118 | codemirrorMode: string, 119 | codemirrorMimeType: string, 120 | aliases?: Array, 121 | extensions: Array, 122 | filenames?: Array, 123 | linguistLanguageId: number, 124 | vscodeLanguageIds: Array 125 | }; 126 | 127 | declare type SupportOption = {| 128 | since: string, 129 | type: "int" | "boolean" | "choice" | "path", 130 | deprecated?: string, 131 | redirect?: SupportOptionRedirect, 132 | description: string, 133 | oppositeDescription?: string, 134 | default: SupportOptionValue, 135 | range?: SupportOptionRange, 136 | choices?: SupportOptionChoice 137 | |}; 138 | 139 | declare type SupportOptionRedirect = {| 140 | options: string, 141 | value: SupportOptionValue 142 | |}; 143 | 144 | declare type SupportOptionRange = {| 145 | start: number, 146 | end: number, 147 | step: number 148 | |}; 149 | 150 | declare type SupportOptionChoice = {| 151 | value: boolean | string, 152 | description?: string, 153 | since?: string, 154 | deprecated?: string, 155 | redirect?: SupportOptionValue 156 | |}; 157 | 158 | declare type SupportOptionValue = number | boolean | string; 159 | 160 | declare type SupportInfo = {| 161 | languages: Array, 162 | options: Array 163 | |}; 164 | 165 | declare type Prettier = {| 166 | format: (source: string, options?: Options) => string, 167 | check: (source: string, options?: Options) => boolean, 168 | formatWithCursor: (source: string, options: CursorOptions) => CursorResult, 169 | resolveConfig: { 170 | (filePath: string, options?: ResolveConfigOptions): Promise, 171 | sync(filePath: string, options?: ResolveConfigOptions): Promise 172 | }, 173 | clearConfigCache: () => void, 174 | getSupportInfo: (version?: string) => SupportInfo 175 | |}; 176 | 177 | declare export default Prettier; 178 | } 179 | -------------------------------------------------------------------------------- /flow-typed/npm/prop-types_v15.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: d9a983bb1ac458a256c31c139047bdbb 2 | // flow-typed version: 927687984d/prop-types_v15.x.x/flow_>=v0.41.x 3 | 4 | type $npm$propTypes$ReactPropsCheckType = ( 5 | props: any, 6 | propName: string, 7 | componentName: string, 8 | href?: string) => ?Error; 9 | 10 | declare module 'prop-types' { 11 | declare var array: React$PropType$Primitive>; 12 | declare var bool: React$PropType$Primitive; 13 | declare var func: React$PropType$Primitive; 14 | declare var number: React$PropType$Primitive; 15 | declare var object: React$PropType$Primitive; 16 | declare var string: React$PropType$Primitive; 17 | declare var symbol: React$PropType$Primitive; 18 | declare var any: React$PropType$Primitive; 19 | declare var arrayOf: React$PropType$ArrayOf; 20 | declare var element: React$PropType$Primitive; /* TODO */ 21 | declare var instanceOf: React$PropType$InstanceOf; 22 | declare var node: React$PropType$Primitive; /* TODO */ 23 | declare var objectOf: React$PropType$ObjectOf; 24 | declare var oneOf: React$PropType$OneOf; 25 | declare var oneOfType: React$PropType$OneOfType; 26 | declare var shape: React$PropType$Shape; 27 | 28 | declare function checkPropTypes( 29 | propTypes: $Subtype<{[_: $Keys]: $npm$propTypes$ReactPropsCheckType}>, 30 | values: V, 31 | location: string, 32 | componentName: string, 33 | getStack: ?(() => ?string) 34 | ) : void; 35 | } 36 | -------------------------------------------------------------------------------- /flow-typed/npm/react-lifecycles-compat_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 911de6974ebd40dba57ac07ac53fa477 2 | // flow-typed version: <>/react-lifecycles-compat_v^3.0.4/flow_v0.56.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'react-lifecycles-compat' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'react-lifecycles-compat' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'react-lifecycles-compat/react-lifecycles-compat.cjs' { 26 | declare module.exports: any; 27 | } 28 | 29 | declare module 'react-lifecycles-compat/react-lifecycles-compat.es' { 30 | declare module.exports: any; 31 | } 32 | 33 | declare module 'react-lifecycles-compat/react-lifecycles-compat' { 34 | declare module.exports: any; 35 | } 36 | 37 | declare module 'react-lifecycles-compat/react-lifecycles-compat.min' { 38 | declare module.exports: any; 39 | } 40 | 41 | // Filename aliases 42 | declare module 'react-lifecycles-compat/react-lifecycles-compat.cjs.js' { 43 | declare module.exports: $Exports<'react-lifecycles-compat/react-lifecycles-compat.cjs'>; 44 | } 45 | declare module 'react-lifecycles-compat/react-lifecycles-compat.es.js' { 46 | declare module.exports: $Exports<'react-lifecycles-compat/react-lifecycles-compat.es'>; 47 | } 48 | declare module 'react-lifecycles-compat/react-lifecycles-compat.js' { 49 | declare module.exports: $Exports<'react-lifecycles-compat/react-lifecycles-compat'>; 50 | } 51 | declare module 'react-lifecycles-compat/react-lifecycles-compat.min.js' { 52 | declare module.exports: $Exports<'react-lifecycles-compat/react-lifecycles-compat.min'>; 53 | } 54 | -------------------------------------------------------------------------------- /flow-typed/npm/react-native-paper_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 386bdcd615d6c491751128e33bc326ed 2 | // flow-typed version: <>/react-native-paper_v^1.2.3/flow_v0.56.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'react-native-paper' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'react-native-paper' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'react-native-paper/src/components/__tests__/BottomNavigation.test' { 26 | declare module.exports: any; 27 | } 28 | 29 | declare module 'react-native-paper/src/components/__tests__/Portal.test' { 30 | declare module.exports: any; 31 | } 32 | 33 | declare module 'react-native-paper/src/components/BottomNavigation' { 34 | declare module.exports: any; 35 | } 36 | 37 | declare module 'react-native-paper/src/components/Button' { 38 | declare module.exports: any; 39 | } 40 | 41 | declare module 'react-native-paper/src/components/Card/Card' { 42 | declare module.exports: any; 43 | } 44 | 45 | declare module 'react-native-paper/src/components/Card/CardActions' { 46 | declare module.exports: any; 47 | } 48 | 49 | declare module 'react-native-paper/src/components/Card/CardContent' { 50 | declare module.exports: any; 51 | } 52 | 53 | declare module 'react-native-paper/src/components/Card/CardCover' { 54 | declare module.exports: any; 55 | } 56 | 57 | declare module 'react-native-paper/src/components/Checkbox.ios' { 58 | declare module.exports: any; 59 | } 60 | 61 | declare module 'react-native-paper/src/components/Checkbox' { 62 | declare module.exports: any; 63 | } 64 | 65 | declare module 'react-native-paper/src/components/Dialog/Dialog' { 66 | declare module.exports: any; 67 | } 68 | 69 | declare module 'react-native-paper/src/components/Dialog/DialogActions' { 70 | declare module.exports: any; 71 | } 72 | 73 | declare module 'react-native-paper/src/components/Dialog/DialogContent' { 74 | declare module.exports: any; 75 | } 76 | 77 | declare module 'react-native-paper/src/components/Dialog/DialogScrollArea' { 78 | declare module.exports: any; 79 | } 80 | 81 | declare module 'react-native-paper/src/components/Dialog/DialogTitle' { 82 | declare module.exports: any; 83 | } 84 | 85 | declare module 'react-native-paper/src/components/Divider' { 86 | declare module.exports: any; 87 | } 88 | 89 | declare module 'react-native-paper/src/components/DrawerItem' { 90 | declare module.exports: any; 91 | } 92 | 93 | declare module 'react-native-paper/src/components/DrawerSection' { 94 | declare module.exports: any; 95 | } 96 | 97 | declare module 'react-native-paper/src/components/FAB' { 98 | declare module.exports: any; 99 | } 100 | 101 | declare module 'react-native-paper/src/components/Icon' { 102 | declare module.exports: any; 103 | } 104 | 105 | declare module 'react-native-paper/src/components/Modal' { 106 | declare module.exports: any; 107 | } 108 | 109 | declare module 'react-native-paper/src/components/Paper' { 110 | declare module.exports: any; 111 | } 112 | 113 | declare module 'react-native-paper/src/components/Portal/Portal' { 114 | declare module.exports: any; 115 | } 116 | 117 | declare module 'react-native-paper/src/components/Portal/PortalConsumer' { 118 | declare module.exports: any; 119 | } 120 | 121 | declare module 'react-native-paper/src/components/Portal/PortalHost' { 122 | declare module.exports: any; 123 | } 124 | 125 | declare module 'react-native-paper/src/components/Portal/PortalManager' { 126 | declare module.exports: any; 127 | } 128 | 129 | declare module 'react-native-paper/src/components/Portal/ThemedPortal' { 130 | declare module.exports: any; 131 | } 132 | 133 | declare module 'react-native-paper/src/components/ProgressBar' { 134 | declare module.exports: any; 135 | } 136 | 137 | declare module 'react-native-paper/src/components/RadioButton.ios' { 138 | declare module.exports: any; 139 | } 140 | 141 | declare module 'react-native-paper/src/components/RadioButton' { 142 | declare module.exports: any; 143 | } 144 | 145 | declare module 'react-native-paper/src/components/SearchBar' { 146 | declare module.exports: any; 147 | } 148 | 149 | declare module 'react-native-paper/src/components/Switch' { 150 | declare module.exports: any; 151 | } 152 | 153 | declare module 'react-native-paper/src/components/TextInput' { 154 | declare module.exports: any; 155 | } 156 | 157 | declare module 'react-native-paper/src/components/Toolbar/Toolbar' { 158 | declare module.exports: any; 159 | } 160 | 161 | declare module 'react-native-paper/src/components/Toolbar/ToolbarAction' { 162 | declare module.exports: any; 163 | } 164 | 165 | declare module 'react-native-paper/src/components/Toolbar/ToolbarBackAction' { 166 | declare module.exports: any; 167 | } 168 | 169 | declare module 'react-native-paper/src/components/Toolbar/ToolbarContent' { 170 | declare module.exports: any; 171 | } 172 | 173 | declare module 'react-native-paper/src/components/TouchableIcon' { 174 | declare module.exports: any; 175 | } 176 | 177 | declare module 'react-native-paper/src/components/TouchableRipple' { 178 | declare module.exports: any; 179 | } 180 | 181 | declare module 'react-native-paper/src/components/Typography/Caption' { 182 | declare module.exports: any; 183 | } 184 | 185 | declare module 'react-native-paper/src/components/Typography/Headline' { 186 | declare module.exports: any; 187 | } 188 | 189 | declare module 'react-native-paper/src/components/Typography/Paragraph' { 190 | declare module.exports: any; 191 | } 192 | 193 | declare module 'react-native-paper/src/components/Typography/StyledText' { 194 | declare module.exports: any; 195 | } 196 | 197 | declare module 'react-native-paper/src/components/Typography/Subheading' { 198 | declare module.exports: any; 199 | } 200 | 201 | declare module 'react-native-paper/src/components/Typography/Text' { 202 | declare module.exports: any; 203 | } 204 | 205 | declare module 'react-native-paper/src/components/Typography/Title' { 206 | declare module.exports: any; 207 | } 208 | 209 | declare module 'react-native-paper/src/core/Provider' { 210 | declare module.exports: any; 211 | } 212 | 213 | declare module 'react-native-paper/src/core/ThemeProvider' { 214 | declare module.exports: any; 215 | } 216 | 217 | declare module 'react-native-paper/src/core/withTheme' { 218 | declare module.exports: any; 219 | } 220 | 221 | declare module 'react-native-paper/src/index' { 222 | declare module.exports: any; 223 | } 224 | 225 | declare module 'react-native-paper/src/styles/colors' { 226 | declare module.exports: any; 227 | } 228 | 229 | declare module 'react-native-paper/src/styles/DarkTheme' { 230 | declare module.exports: any; 231 | } 232 | 233 | declare module 'react-native-paper/src/styles/DefaultTheme' { 234 | declare module.exports: any; 235 | } 236 | 237 | declare module 'react-native-paper/src/styles/fonts' { 238 | declare module.exports: any; 239 | } 240 | 241 | declare module 'react-native-paper/src/styles/shadow' { 242 | declare module.exports: any; 243 | } 244 | 245 | declare module 'react-native-paper/src/types' { 246 | declare module.exports: any; 247 | } 248 | 249 | // Filename aliases 250 | declare module 'react-native-paper/src/components/__tests__/BottomNavigation.test.js' { 251 | declare module.exports: $Exports<'react-native-paper/src/components/__tests__/BottomNavigation.test'>; 252 | } 253 | declare module 'react-native-paper/src/components/__tests__/Portal.test.js' { 254 | declare module.exports: $Exports<'react-native-paper/src/components/__tests__/Portal.test'>; 255 | } 256 | declare module 'react-native-paper/src/components/BottomNavigation.js' { 257 | declare module.exports: $Exports<'react-native-paper/src/components/BottomNavigation'>; 258 | } 259 | declare module 'react-native-paper/src/components/Button.js' { 260 | declare module.exports: $Exports<'react-native-paper/src/components/Button'>; 261 | } 262 | declare module 'react-native-paper/src/components/Card/Card.js' { 263 | declare module.exports: $Exports<'react-native-paper/src/components/Card/Card'>; 264 | } 265 | declare module 'react-native-paper/src/components/Card/CardActions.js' { 266 | declare module.exports: $Exports<'react-native-paper/src/components/Card/CardActions'>; 267 | } 268 | declare module 'react-native-paper/src/components/Card/CardContent.js' { 269 | declare module.exports: $Exports<'react-native-paper/src/components/Card/CardContent'>; 270 | } 271 | declare module 'react-native-paper/src/components/Card/CardCover.js' { 272 | declare module.exports: $Exports<'react-native-paper/src/components/Card/CardCover'>; 273 | } 274 | declare module 'react-native-paper/src/components/Checkbox.ios.js' { 275 | declare module.exports: $Exports<'react-native-paper/src/components/Checkbox.ios'>; 276 | } 277 | declare module 'react-native-paper/src/components/Checkbox.js' { 278 | declare module.exports: $Exports<'react-native-paper/src/components/Checkbox'>; 279 | } 280 | declare module 'react-native-paper/src/components/Dialog/Dialog.js' { 281 | declare module.exports: $Exports<'react-native-paper/src/components/Dialog/Dialog'>; 282 | } 283 | declare module 'react-native-paper/src/components/Dialog/DialogActions.js' { 284 | declare module.exports: $Exports<'react-native-paper/src/components/Dialog/DialogActions'>; 285 | } 286 | declare module 'react-native-paper/src/components/Dialog/DialogContent.js' { 287 | declare module.exports: $Exports<'react-native-paper/src/components/Dialog/DialogContent'>; 288 | } 289 | declare module 'react-native-paper/src/components/Dialog/DialogScrollArea.js' { 290 | declare module.exports: $Exports<'react-native-paper/src/components/Dialog/DialogScrollArea'>; 291 | } 292 | declare module 'react-native-paper/src/components/Dialog/DialogTitle.js' { 293 | declare module.exports: $Exports<'react-native-paper/src/components/Dialog/DialogTitle'>; 294 | } 295 | declare module 'react-native-paper/src/components/Divider.js' { 296 | declare module.exports: $Exports<'react-native-paper/src/components/Divider'>; 297 | } 298 | declare module 'react-native-paper/src/components/DrawerItem.js' { 299 | declare module.exports: $Exports<'react-native-paper/src/components/DrawerItem'>; 300 | } 301 | declare module 'react-native-paper/src/components/DrawerSection.js' { 302 | declare module.exports: $Exports<'react-native-paper/src/components/DrawerSection'>; 303 | } 304 | declare module 'react-native-paper/src/components/FAB.js' { 305 | declare module.exports: $Exports<'react-native-paper/src/components/FAB'>; 306 | } 307 | declare module 'react-native-paper/src/components/Icon.js' { 308 | declare module.exports: $Exports<'react-native-paper/src/components/Icon'>; 309 | } 310 | declare module 'react-native-paper/src/components/Modal.js' { 311 | declare module.exports: $Exports<'react-native-paper/src/components/Modal'>; 312 | } 313 | declare module 'react-native-paper/src/components/Paper.js' { 314 | declare module.exports: $Exports<'react-native-paper/src/components/Paper'>; 315 | } 316 | declare module 'react-native-paper/src/components/Portal/Portal.js' { 317 | declare module.exports: $Exports<'react-native-paper/src/components/Portal/Portal'>; 318 | } 319 | declare module 'react-native-paper/src/components/Portal/PortalConsumer.js' { 320 | declare module.exports: $Exports<'react-native-paper/src/components/Portal/PortalConsumer'>; 321 | } 322 | declare module 'react-native-paper/src/components/Portal/PortalHost.js' { 323 | declare module.exports: $Exports<'react-native-paper/src/components/Portal/PortalHost'>; 324 | } 325 | declare module 'react-native-paper/src/components/Portal/PortalManager.js' { 326 | declare module.exports: $Exports<'react-native-paper/src/components/Portal/PortalManager'>; 327 | } 328 | declare module 'react-native-paper/src/components/Portal/ThemedPortal.js' { 329 | declare module.exports: $Exports<'react-native-paper/src/components/Portal/ThemedPortal'>; 330 | } 331 | declare module 'react-native-paper/src/components/ProgressBar.js' { 332 | declare module.exports: $Exports<'react-native-paper/src/components/ProgressBar'>; 333 | } 334 | declare module 'react-native-paper/src/components/RadioButton.ios.js' { 335 | declare module.exports: $Exports<'react-native-paper/src/components/RadioButton.ios'>; 336 | } 337 | declare module 'react-native-paper/src/components/RadioButton.js' { 338 | declare module.exports: $Exports<'react-native-paper/src/components/RadioButton'>; 339 | } 340 | declare module 'react-native-paper/src/components/SearchBar.js' { 341 | declare module.exports: $Exports<'react-native-paper/src/components/SearchBar'>; 342 | } 343 | declare module 'react-native-paper/src/components/Switch.js' { 344 | declare module.exports: $Exports<'react-native-paper/src/components/Switch'>; 345 | } 346 | declare module 'react-native-paper/src/components/TextInput.js' { 347 | declare module.exports: $Exports<'react-native-paper/src/components/TextInput'>; 348 | } 349 | declare module 'react-native-paper/src/components/Toolbar/Toolbar.js' { 350 | declare module.exports: $Exports<'react-native-paper/src/components/Toolbar/Toolbar'>; 351 | } 352 | declare module 'react-native-paper/src/components/Toolbar/ToolbarAction.js' { 353 | declare module.exports: $Exports<'react-native-paper/src/components/Toolbar/ToolbarAction'>; 354 | } 355 | declare module 'react-native-paper/src/components/Toolbar/ToolbarBackAction.js' { 356 | declare module.exports: $Exports<'react-native-paper/src/components/Toolbar/ToolbarBackAction'>; 357 | } 358 | declare module 'react-native-paper/src/components/Toolbar/ToolbarContent.js' { 359 | declare module.exports: $Exports<'react-native-paper/src/components/Toolbar/ToolbarContent'>; 360 | } 361 | declare module 'react-native-paper/src/components/TouchableIcon.js' { 362 | declare module.exports: $Exports<'react-native-paper/src/components/TouchableIcon'>; 363 | } 364 | declare module 'react-native-paper/src/components/TouchableRipple.js' { 365 | declare module.exports: $Exports<'react-native-paper/src/components/TouchableRipple'>; 366 | } 367 | declare module 'react-native-paper/src/components/Typography/Caption.js' { 368 | declare module.exports: $Exports<'react-native-paper/src/components/Typography/Caption'>; 369 | } 370 | declare module 'react-native-paper/src/components/Typography/Headline.js' { 371 | declare module.exports: $Exports<'react-native-paper/src/components/Typography/Headline'>; 372 | } 373 | declare module 'react-native-paper/src/components/Typography/Paragraph.js' { 374 | declare module.exports: $Exports<'react-native-paper/src/components/Typography/Paragraph'>; 375 | } 376 | declare module 'react-native-paper/src/components/Typography/StyledText.js' { 377 | declare module.exports: $Exports<'react-native-paper/src/components/Typography/StyledText'>; 378 | } 379 | declare module 'react-native-paper/src/components/Typography/Subheading.js' { 380 | declare module.exports: $Exports<'react-native-paper/src/components/Typography/Subheading'>; 381 | } 382 | declare module 'react-native-paper/src/components/Typography/Text.js' { 383 | declare module.exports: $Exports<'react-native-paper/src/components/Typography/Text'>; 384 | } 385 | declare module 'react-native-paper/src/components/Typography/Title.js' { 386 | declare module.exports: $Exports<'react-native-paper/src/components/Typography/Title'>; 387 | } 388 | declare module 'react-native-paper/src/core/Provider.js' { 389 | declare module.exports: $Exports<'react-native-paper/src/core/Provider'>; 390 | } 391 | declare module 'react-native-paper/src/core/ThemeProvider.js' { 392 | declare module.exports: $Exports<'react-native-paper/src/core/ThemeProvider'>; 393 | } 394 | declare module 'react-native-paper/src/core/withTheme.js' { 395 | declare module.exports: $Exports<'react-native-paper/src/core/withTheme'>; 396 | } 397 | declare module 'react-native-paper/src/index.js' { 398 | declare module.exports: $Exports<'react-native-paper/src/index'>; 399 | } 400 | declare module 'react-native-paper/src/styles/colors.js' { 401 | declare module.exports: $Exports<'react-native-paper/src/styles/colors'>; 402 | } 403 | declare module 'react-native-paper/src/styles/DarkTheme.js' { 404 | declare module.exports: $Exports<'react-native-paper/src/styles/DarkTheme'>; 405 | } 406 | declare module 'react-native-paper/src/styles/DefaultTheme.js' { 407 | declare module.exports: $Exports<'react-native-paper/src/styles/DefaultTheme'>; 408 | } 409 | declare module 'react-native-paper/src/styles/fonts.js' { 410 | declare module.exports: $Exports<'react-native-paper/src/styles/fonts'>; 411 | } 412 | declare module 'react-native-paper/src/styles/shadow.js' { 413 | declare module.exports: $Exports<'react-native-paper/src/styles/shadow'>; 414 | } 415 | declare module 'react-native-paper/src/types.js' { 416 | declare module.exports: $Exports<'react-native-paper/src/types'>; 417 | } 418 | -------------------------------------------------------------------------------- /flow-typed/npm/react-native-safe-area-view_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 7381ec0e475ad6658e39dd49d7a46956 2 | // flow-typed version: <>/react-native-safe-area-view_v^0.7.0/flow_v0.56.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'react-native-safe-area-view' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'react-native-safe-area-view' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'react-native-safe-area-view/index.web' { 26 | declare module.exports: any; 27 | } 28 | 29 | declare module 'react-native-safe-area-view/withOrientation' { 30 | declare module.exports: any; 31 | } 32 | 33 | // Filename aliases 34 | declare module 'react-native-safe-area-view/index' { 35 | declare module.exports: $Exports<'react-native-safe-area-view'>; 36 | } 37 | declare module 'react-native-safe-area-view/index.js' { 38 | declare module.exports: $Exports<'react-native-safe-area-view'>; 39 | } 40 | declare module 'react-native-safe-area-view/index.web.js' { 41 | declare module.exports: $Exports<'react-native-safe-area-view/index.web'>; 42 | } 43 | declare module 'react-native-safe-area-view/withOrientation.js' { 44 | declare module.exports: $Exports<'react-native-safe-area-view/withOrientation'>; 45 | } 46 | -------------------------------------------------------------------------------- /flow-typed/npm/react-native-screens_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 6780fb20485c0018ac8df929910df66f 2 | // flow-typed version: <>/react-native-screens_v1.0.0-alpha.15/flow_v0.67.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'react-native-screens' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'react-native-screens' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'react-native-screens/src/screens.native' { 26 | declare module.exports: any; 27 | } 28 | 29 | declare module 'react-native-screens/src/screens.web' { 30 | declare module.exports: any; 31 | } 32 | 33 | // Filename aliases 34 | declare module 'react-native-screens/src/screens.native.js' { 35 | declare module.exports: $Exports<'react-native-screens/src/screens.native'>; 36 | } 37 | declare module 'react-native-screens/src/screens.web.js' { 38 | declare module.exports: $Exports<'react-native-screens/src/screens.web'>; 39 | } 40 | -------------------------------------------------------------------------------- /flow-typed/npm/react-native-tab-view_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 5d69080676e60c98ee690434eb9b8475 2 | // flow-typed version: <>/react-native-tab-view_v~0.0.78/flow_v0.56.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'react-native-tab-view' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'react-native-tab-view' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'react-native-tab-view/src/index' { 26 | declare module.exports: any; 27 | } 28 | 29 | declare module 'react-native-tab-view/src/SceneMap' { 30 | declare module.exports: any; 31 | } 32 | 33 | declare module 'react-native-tab-view/src/TabBar' { 34 | declare module.exports: any; 35 | } 36 | 37 | declare module 'react-native-tab-view/src/TabViewAnimated' { 38 | declare module.exports: any; 39 | } 40 | 41 | declare module 'react-native-tab-view/src/TabViewPagerAndroid' { 42 | declare module.exports: any; 43 | } 44 | 45 | declare module 'react-native-tab-view/src/TabViewPagerAndroid.web' { 46 | declare module.exports: any; 47 | } 48 | 49 | declare module 'react-native-tab-view/src/TabViewPagerExperimental' { 50 | declare module.exports: any; 51 | } 52 | 53 | declare module 'react-native-tab-view/src/TabViewPagerPan' { 54 | declare module.exports: any; 55 | } 56 | 57 | declare module 'react-native-tab-view/src/TabViewPagerScroll' { 58 | declare module.exports: any; 59 | } 60 | 61 | declare module 'react-native-tab-view/src/TabViewPropTypes' { 62 | declare module.exports: any; 63 | } 64 | 65 | declare module 'react-native-tab-view/src/TabViewTypeDefinitions' { 66 | declare module.exports: any; 67 | } 68 | 69 | declare module 'react-native-tab-view/src/TouchableItem' { 70 | declare module.exports: any; 71 | } 72 | 73 | declare module 'react-native-tab-view/types' { 74 | declare module.exports: any; 75 | } 76 | 77 | // Filename aliases 78 | declare module 'react-native-tab-view/src/index.js' { 79 | declare module.exports: $Exports<'react-native-tab-view/src/index'>; 80 | } 81 | declare module 'react-native-tab-view/src/SceneMap.js' { 82 | declare module.exports: $Exports<'react-native-tab-view/src/SceneMap'>; 83 | } 84 | declare module 'react-native-tab-view/src/TabBar.js' { 85 | declare module.exports: $Exports<'react-native-tab-view/src/TabBar'>; 86 | } 87 | declare module 'react-native-tab-view/src/TabViewAnimated.js' { 88 | declare module.exports: $Exports<'react-native-tab-view/src/TabViewAnimated'>; 89 | } 90 | declare module 'react-native-tab-view/src/TabViewPagerAndroid.js' { 91 | declare module.exports: $Exports<'react-native-tab-view/src/TabViewPagerAndroid'>; 92 | } 93 | declare module 'react-native-tab-view/src/TabViewPagerAndroid.web.js' { 94 | declare module.exports: $Exports<'react-native-tab-view/src/TabViewPagerAndroid.web'>; 95 | } 96 | declare module 'react-native-tab-view/src/TabViewPagerExperimental.js' { 97 | declare module.exports: $Exports<'react-native-tab-view/src/TabViewPagerExperimental'>; 98 | } 99 | declare module 'react-native-tab-view/src/TabViewPagerPan.js' { 100 | declare module.exports: $Exports<'react-native-tab-view/src/TabViewPagerPan'>; 101 | } 102 | declare module 'react-native-tab-view/src/TabViewPagerScroll.js' { 103 | declare module.exports: $Exports<'react-native-tab-view/src/TabViewPagerScroll'>; 104 | } 105 | declare module 'react-native-tab-view/src/TabViewPropTypes.js' { 106 | declare module.exports: $Exports<'react-native-tab-view/src/TabViewPropTypes'>; 107 | } 108 | declare module 'react-native-tab-view/src/TabViewTypeDefinitions.js' { 109 | declare module.exports: $Exports<'react-native-tab-view/src/TabViewTypeDefinitions'>; 110 | } 111 | declare module 'react-native-tab-view/src/TouchableItem.js' { 112 | declare module.exports: $Exports<'react-native-tab-view/src/TouchableItem'>; 113 | } 114 | declare module 'react-native-tab-view/types.js' { 115 | declare module.exports: $Exports<'react-native-tab-view/types'>; 116 | } 117 | -------------------------------------------------------------------------------- /flow-typed/npm/react-navigation_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 8bc9640c25074cfb90ea11bd2b720915 2 | // flow-typed version: <>/react-navigation_v^2.0.0-alpha.5/flow_v0.56.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'react-navigation' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'react-navigation' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'react-navigation/src/__tests__/addNavigationHelpers-test' { 26 | declare module.exports: any; 27 | } 28 | 29 | declare module 'react-navigation/src/__tests__/getChildEventSubscriber-test' { 30 | declare module.exports: any; 31 | } 32 | 33 | declare module 'react-navigation/src/__tests__/NavigationActions-test' { 34 | declare module.exports: any; 35 | } 36 | 37 | declare module 'react-navigation/src/__tests__/NavigationContainer-test' { 38 | declare module.exports: any; 39 | } 40 | 41 | declare module 'react-navigation/src/__tests__/NavigationStateUtils-test' { 42 | declare module.exports: any; 43 | } 44 | 45 | declare module 'react-navigation/src/addNavigationHelpers' { 46 | declare module.exports: any; 47 | } 48 | 49 | declare module 'react-navigation/src/createNavigationContainer' { 50 | declare module.exports: any; 51 | } 52 | 53 | declare module 'react-navigation/src/getChildEventSubscriber' { 54 | declare module.exports: any; 55 | } 56 | 57 | declare module 'react-navigation/src/NavigationActions' { 58 | declare module.exports: any; 59 | } 60 | 61 | declare module 'react-navigation/src/navigators/__tests__/DrawerNavigator-test' { 62 | declare module.exports: any; 63 | } 64 | 65 | declare module 'react-navigation/src/navigators/__tests__/StackNavigator-test' { 66 | declare module.exports: any; 67 | } 68 | 69 | declare module 'react-navigation/src/navigators/__tests__/SwitchNavigator-test' { 70 | declare module.exports: any; 71 | } 72 | 73 | declare module 'react-navigation/src/navigators/__tests__/TabNavigator-test' { 74 | declare module.exports: any; 75 | } 76 | 77 | declare module 'react-navigation/src/navigators/createDrawerNavigator' { 78 | declare module.exports: any; 79 | } 80 | 81 | declare module 'react-navigation/src/navigators/createKeyboardAwareNavigator' { 82 | declare module.exports: any; 83 | } 84 | 85 | declare module 'react-navigation/src/navigators/createNavigator' { 86 | declare module.exports: any; 87 | } 88 | 89 | declare module 'react-navigation/src/navigators/createStackNavigator' { 90 | declare module.exports: any; 91 | } 92 | 93 | declare module 'react-navigation/src/navigators/createSwitchNavigator' { 94 | declare module.exports: any; 95 | } 96 | 97 | declare module 'react-navigation/src/PlatformHelpers.native' { 98 | declare module.exports: any; 99 | } 100 | 101 | declare module 'react-navigation/src/PlatformHelpers.web' { 102 | declare module.exports: any; 103 | } 104 | 105 | declare module 'react-navigation/src/react-navigation' { 106 | declare module.exports: any; 107 | } 108 | 109 | declare module 'react-navigation/src/react-navigation.web' { 110 | declare module.exports: any; 111 | } 112 | 113 | declare module 'react-navigation/src/routers/__tests__/createConfigGetter-test' { 114 | declare module.exports: any; 115 | } 116 | 117 | declare module 'react-navigation/src/routers/__tests__/DrawerRouter-test' { 118 | declare module.exports: any; 119 | } 120 | 121 | declare module 'react-navigation/src/routers/__tests__/Routers-test' { 122 | declare module.exports: any; 123 | } 124 | 125 | declare module 'react-navigation/src/routers/__tests__/StackRouter-test' { 126 | declare module.exports: any; 127 | } 128 | 129 | declare module 'react-navigation/src/routers/__tests__/SwitchRouter-test' { 130 | declare module.exports: any; 131 | } 132 | 133 | declare module 'react-navigation/src/routers/__tests__/TabRouter-test' { 134 | declare module.exports: any; 135 | } 136 | 137 | declare module 'react-navigation/src/routers/__tests__/validateRouteConfigMap-test' { 138 | declare module.exports: any; 139 | } 140 | 141 | declare module 'react-navigation/src/routers/createConfigGetter' { 142 | declare module.exports: any; 143 | } 144 | 145 | declare module 'react-navigation/src/routers/DrawerActions' { 146 | declare module.exports: any; 147 | } 148 | 149 | declare module 'react-navigation/src/routers/DrawerRouter' { 150 | declare module.exports: any; 151 | } 152 | 153 | declare module 'react-navigation/src/routers/getNavigationActionCreators' { 154 | declare module.exports: any; 155 | } 156 | 157 | declare module 'react-navigation/src/routers/getScreenForRouteName' { 158 | declare module.exports: any; 159 | } 160 | 161 | declare module 'react-navigation/src/routers/KeyGenerator' { 162 | declare module.exports: any; 163 | } 164 | 165 | declare module 'react-navigation/src/routers/StackActions' { 166 | declare module.exports: any; 167 | } 168 | 169 | declare module 'react-navigation/src/routers/StackRouter' { 170 | declare module.exports: any; 171 | } 172 | 173 | declare module 'react-navigation/src/routers/SwitchRouter' { 174 | declare module.exports: any; 175 | } 176 | 177 | declare module 'react-navigation/src/routers/TabRouter' { 178 | declare module.exports: any; 179 | } 180 | 181 | declare module 'react-navigation/src/routers/validateRouteConfigMap' { 182 | declare module.exports: any; 183 | } 184 | 185 | declare module 'react-navigation/src/routers/validateScreenOptions' { 186 | declare module.exports: any; 187 | } 188 | 189 | declare module 'react-navigation/src/StateUtils' { 190 | declare module.exports: any; 191 | } 192 | 193 | declare module 'react-navigation/src/utils/docsUrl' { 194 | declare module.exports: any; 195 | } 196 | 197 | declare module 'react-navigation/src/utils/getSceneIndicesForInterpolationInputRange' { 198 | declare module.exports: any; 199 | } 200 | 201 | declare module 'react-navigation/src/utils/invariant' { 202 | declare module.exports: any; 203 | } 204 | 205 | declare module 'react-navigation/src/utils/ReactNativeFeatures' { 206 | declare module.exports: any; 207 | } 208 | 209 | declare module 'react-navigation/src/utils/shallowEqual' { 210 | declare module.exports: any; 211 | } 212 | 213 | declare module 'react-navigation/src/utils/withDefaultValue' { 214 | declare module.exports: any; 215 | } 216 | 217 | declare module 'react-navigation/src/views/__tests__/NavigationScenesReducer-test' { 218 | declare module.exports: any; 219 | } 220 | 221 | declare module 'react-navigation/src/views/__tests__/TabView-test' { 222 | declare module.exports: any; 223 | } 224 | 225 | declare module 'react-navigation/src/views/__tests__/Transitioner-test' { 226 | declare module.exports: any; 227 | } 228 | 229 | declare module 'react-navigation/src/views/__tests__/withOrientation-test' { 230 | declare module.exports: any; 231 | } 232 | 233 | declare module 'react-navigation/src/views/AnimatedValueSubscription' { 234 | declare module.exports: any; 235 | } 236 | 237 | declare module 'react-navigation/src/views/Drawer/DrawerNavigatorItems' { 238 | declare module.exports: any; 239 | } 240 | 241 | declare module 'react-navigation/src/views/Drawer/DrawerScreen' { 242 | declare module.exports: any; 243 | } 244 | 245 | declare module 'react-navigation/src/views/Drawer/DrawerSidebar' { 246 | declare module.exports: any; 247 | } 248 | 249 | declare module 'react-navigation/src/views/Drawer/DrawerView' { 250 | declare module.exports: any; 251 | } 252 | 253 | declare module 'react-navigation/src/views/Header/Header' { 254 | declare module.exports: any; 255 | } 256 | 257 | declare module 'react-navigation/src/views/Header/HeaderBackButton' { 258 | declare module.exports: any; 259 | } 260 | 261 | declare module 'react-navigation/src/views/Header/HeaderStyleInterpolator' { 262 | declare module.exports: any; 263 | } 264 | 265 | declare module 'react-navigation/src/views/Header/HeaderTitle' { 266 | declare module.exports: any; 267 | } 268 | 269 | declare module 'react-navigation/src/views/Header/ModularHeaderBackButton' { 270 | declare module.exports: any; 271 | } 272 | 273 | declare module 'react-navigation/src/views/NavigationContext' { 274 | declare module.exports: any; 275 | } 276 | 277 | declare module 'react-navigation/src/views/ResourceSavingSceneView' { 278 | declare module.exports: any; 279 | } 280 | 281 | declare module 'react-navigation/src/views/ScenesReducer' { 282 | declare module.exports: any; 283 | } 284 | 285 | declare module 'react-navigation/src/views/SceneView' { 286 | declare module.exports: any; 287 | } 288 | 289 | declare module 'react-navigation/src/views/StackView/createPointerEventsContainer' { 290 | declare module.exports: any; 291 | } 292 | 293 | declare module 'react-navigation/src/views/StackView/StackView' { 294 | declare module.exports: any; 295 | } 296 | 297 | declare module 'react-navigation/src/views/StackView/StackViewCard' { 298 | declare module.exports: any; 299 | } 300 | 301 | declare module 'react-navigation/src/views/StackView/StackViewLayout' { 302 | declare module.exports: any; 303 | } 304 | 305 | declare module 'react-navigation/src/views/StackView/StackViewStyleInterpolator' { 306 | declare module.exports: any; 307 | } 308 | 309 | declare module 'react-navigation/src/views/StackView/StackViewTransitionConfigs' { 310 | declare module.exports: any; 311 | } 312 | 313 | declare module 'react-navigation/src/views/SwitchView/SwitchView' { 314 | declare module.exports: any; 315 | } 316 | 317 | declare module 'react-navigation/src/views/TouchableItem' { 318 | declare module.exports: any; 319 | } 320 | 321 | declare module 'react-navigation/src/views/Transitioner' { 322 | declare module.exports: any; 323 | } 324 | 325 | declare module 'react-navigation/src/views/withNavigation' { 326 | declare module.exports: any; 327 | } 328 | 329 | declare module 'react-navigation/src/views/withNavigationFocus' { 330 | declare module.exports: any; 331 | } 332 | 333 | declare module 'react-navigation/src/views/withOrientation' { 334 | declare module.exports: any; 335 | } 336 | 337 | // Filename aliases 338 | declare module 'react-navigation/src/__tests__/addNavigationHelpers-test.js' { 339 | declare module.exports: $Exports<'react-navigation/src/__tests__/addNavigationHelpers-test'>; 340 | } 341 | declare module 'react-navigation/src/__tests__/getChildEventSubscriber-test.js' { 342 | declare module.exports: $Exports<'react-navigation/src/__tests__/getChildEventSubscriber-test'>; 343 | } 344 | declare module 'react-navigation/src/__tests__/NavigationActions-test.js' { 345 | declare module.exports: $Exports<'react-navigation/src/__tests__/NavigationActions-test'>; 346 | } 347 | declare module 'react-navigation/src/__tests__/NavigationContainer-test.js' { 348 | declare module.exports: $Exports<'react-navigation/src/__tests__/NavigationContainer-test'>; 349 | } 350 | declare module 'react-navigation/src/__tests__/NavigationStateUtils-test.js' { 351 | declare module.exports: $Exports<'react-navigation/src/__tests__/NavigationStateUtils-test'>; 352 | } 353 | declare module 'react-navigation/src/addNavigationHelpers.js' { 354 | declare module.exports: $Exports<'react-navigation/src/addNavigationHelpers'>; 355 | } 356 | declare module 'react-navigation/src/createNavigationContainer.js' { 357 | declare module.exports: $Exports<'react-navigation/src/createNavigationContainer'>; 358 | } 359 | declare module 'react-navigation/src/getChildEventSubscriber.js' { 360 | declare module.exports: $Exports<'react-navigation/src/getChildEventSubscriber'>; 361 | } 362 | declare module 'react-navigation/src/NavigationActions.js' { 363 | declare module.exports: $Exports<'react-navigation/src/NavigationActions'>; 364 | } 365 | declare module 'react-navigation/src/navigators/__tests__/DrawerNavigator-test.js' { 366 | declare module.exports: $Exports<'react-navigation/src/navigators/__tests__/DrawerNavigator-test'>; 367 | } 368 | declare module 'react-navigation/src/navigators/__tests__/StackNavigator-test.js' { 369 | declare module.exports: $Exports<'react-navigation/src/navigators/__tests__/StackNavigator-test'>; 370 | } 371 | declare module 'react-navigation/src/navigators/__tests__/SwitchNavigator-test.js' { 372 | declare module.exports: $Exports<'react-navigation/src/navigators/__tests__/SwitchNavigator-test'>; 373 | } 374 | declare module 'react-navigation/src/navigators/__tests__/TabNavigator-test.js' { 375 | declare module.exports: $Exports<'react-navigation/src/navigators/__tests__/TabNavigator-test'>; 376 | } 377 | declare module 'react-navigation/src/navigators/createDrawerNavigator.js' { 378 | declare module.exports: $Exports<'react-navigation/src/navigators/createDrawerNavigator'>; 379 | } 380 | declare module 'react-navigation/src/navigators/createKeyboardAwareNavigator.js' { 381 | declare module.exports: $Exports<'react-navigation/src/navigators/createKeyboardAwareNavigator'>; 382 | } 383 | declare module 'react-navigation/src/navigators/createNavigator.js' { 384 | declare module.exports: $Exports<'react-navigation/src/navigators/createNavigator'>; 385 | } 386 | declare module 'react-navigation/src/navigators/createStackNavigator.js' { 387 | declare module.exports: $Exports<'react-navigation/src/navigators/createStackNavigator'>; 388 | } 389 | declare module 'react-navigation/src/navigators/createSwitchNavigator.js' { 390 | declare module.exports: $Exports<'react-navigation/src/navigators/createSwitchNavigator'>; 391 | } 392 | declare module 'react-navigation/src/PlatformHelpers.native.js' { 393 | declare module.exports: $Exports<'react-navigation/src/PlatformHelpers.native'>; 394 | } 395 | declare module 'react-navigation/src/PlatformHelpers.web.js' { 396 | declare module.exports: $Exports<'react-navigation/src/PlatformHelpers.web'>; 397 | } 398 | declare module 'react-navigation/src/react-navigation.js' { 399 | declare module.exports: $Exports<'react-navigation/src/react-navigation'>; 400 | } 401 | declare module 'react-navigation/src/react-navigation.web.js' { 402 | declare module.exports: $Exports<'react-navigation/src/react-navigation.web'>; 403 | } 404 | declare module 'react-navigation/src/routers/__tests__/createConfigGetter-test.js' { 405 | declare module.exports: $Exports<'react-navigation/src/routers/__tests__/createConfigGetter-test'>; 406 | } 407 | declare module 'react-navigation/src/routers/__tests__/DrawerRouter-test.js' { 408 | declare module.exports: $Exports<'react-navigation/src/routers/__tests__/DrawerRouter-test'>; 409 | } 410 | declare module 'react-navigation/src/routers/__tests__/Routers-test.js' { 411 | declare module.exports: $Exports<'react-navigation/src/routers/__tests__/Routers-test'>; 412 | } 413 | declare module 'react-navigation/src/routers/__tests__/StackRouter-test.js' { 414 | declare module.exports: $Exports<'react-navigation/src/routers/__tests__/StackRouter-test'>; 415 | } 416 | declare module 'react-navigation/src/routers/__tests__/SwitchRouter-test.js' { 417 | declare module.exports: $Exports<'react-navigation/src/routers/__tests__/SwitchRouter-test'>; 418 | } 419 | declare module 'react-navigation/src/routers/__tests__/TabRouter-test.js' { 420 | declare module.exports: $Exports<'react-navigation/src/routers/__tests__/TabRouter-test'>; 421 | } 422 | declare module 'react-navigation/src/routers/__tests__/validateRouteConfigMap-test.js' { 423 | declare module.exports: $Exports<'react-navigation/src/routers/__tests__/validateRouteConfigMap-test'>; 424 | } 425 | declare module 'react-navigation/src/routers/createConfigGetter.js' { 426 | declare module.exports: $Exports<'react-navigation/src/routers/createConfigGetter'>; 427 | } 428 | declare module 'react-navigation/src/routers/DrawerActions.js' { 429 | declare module.exports: $Exports<'react-navigation/src/routers/DrawerActions'>; 430 | } 431 | declare module 'react-navigation/src/routers/DrawerRouter.js' { 432 | declare module.exports: $Exports<'react-navigation/src/routers/DrawerRouter'>; 433 | } 434 | declare module 'react-navigation/src/routers/getNavigationActionCreators.js' { 435 | declare module.exports: $Exports<'react-navigation/src/routers/getNavigationActionCreators'>; 436 | } 437 | declare module 'react-navigation/src/routers/getScreenForRouteName.js' { 438 | declare module.exports: $Exports<'react-navigation/src/routers/getScreenForRouteName'>; 439 | } 440 | declare module 'react-navigation/src/routers/KeyGenerator.js' { 441 | declare module.exports: $Exports<'react-navigation/src/routers/KeyGenerator'>; 442 | } 443 | declare module 'react-navigation/src/routers/StackActions.js' { 444 | declare module.exports: $Exports<'react-navigation/src/routers/StackActions'>; 445 | } 446 | declare module 'react-navigation/src/routers/StackRouter.js' { 447 | declare module.exports: $Exports<'react-navigation/src/routers/StackRouter'>; 448 | } 449 | declare module 'react-navigation/src/routers/SwitchRouter.js' { 450 | declare module.exports: $Exports<'react-navigation/src/routers/SwitchRouter'>; 451 | } 452 | declare module 'react-navigation/src/routers/TabRouter.js' { 453 | declare module.exports: $Exports<'react-navigation/src/routers/TabRouter'>; 454 | } 455 | declare module 'react-navigation/src/routers/validateRouteConfigMap.js' { 456 | declare module.exports: $Exports<'react-navigation/src/routers/validateRouteConfigMap'>; 457 | } 458 | declare module 'react-navigation/src/routers/validateScreenOptions.js' { 459 | declare module.exports: $Exports<'react-navigation/src/routers/validateScreenOptions'>; 460 | } 461 | declare module 'react-navigation/src/StateUtils.js' { 462 | declare module.exports: $Exports<'react-navigation/src/StateUtils'>; 463 | } 464 | declare module 'react-navigation/src/utils/docsUrl.js' { 465 | declare module.exports: $Exports<'react-navigation/src/utils/docsUrl'>; 466 | } 467 | declare module 'react-navigation/src/utils/getSceneIndicesForInterpolationInputRange.js' { 468 | declare module.exports: $Exports<'react-navigation/src/utils/getSceneIndicesForInterpolationInputRange'>; 469 | } 470 | declare module 'react-navigation/src/utils/invariant.js' { 471 | declare module.exports: $Exports<'react-navigation/src/utils/invariant'>; 472 | } 473 | declare module 'react-navigation/src/utils/ReactNativeFeatures.js' { 474 | declare module.exports: $Exports<'react-navigation/src/utils/ReactNativeFeatures'>; 475 | } 476 | declare module 'react-navigation/src/utils/shallowEqual.js' { 477 | declare module.exports: $Exports<'react-navigation/src/utils/shallowEqual'>; 478 | } 479 | declare module 'react-navigation/src/utils/withDefaultValue.js' { 480 | declare module.exports: $Exports<'react-navigation/src/utils/withDefaultValue'>; 481 | } 482 | declare module 'react-navigation/src/views/__tests__/NavigationScenesReducer-test.js' { 483 | declare module.exports: $Exports<'react-navigation/src/views/__tests__/NavigationScenesReducer-test'>; 484 | } 485 | declare module 'react-navigation/src/views/__tests__/TabView-test.js' { 486 | declare module.exports: $Exports<'react-navigation/src/views/__tests__/TabView-test'>; 487 | } 488 | declare module 'react-navigation/src/views/__tests__/Transitioner-test.js' { 489 | declare module.exports: $Exports<'react-navigation/src/views/__tests__/Transitioner-test'>; 490 | } 491 | declare module 'react-navigation/src/views/__tests__/withOrientation-test.js' { 492 | declare module.exports: $Exports<'react-navigation/src/views/__tests__/withOrientation-test'>; 493 | } 494 | declare module 'react-navigation/src/views/AnimatedValueSubscription.js' { 495 | declare module.exports: $Exports<'react-navigation/src/views/AnimatedValueSubscription'>; 496 | } 497 | declare module 'react-navigation/src/views/Drawer/DrawerNavigatorItems.js' { 498 | declare module.exports: $Exports<'react-navigation/src/views/Drawer/DrawerNavigatorItems'>; 499 | } 500 | declare module 'react-navigation/src/views/Drawer/DrawerScreen.js' { 501 | declare module.exports: $Exports<'react-navigation/src/views/Drawer/DrawerScreen'>; 502 | } 503 | declare module 'react-navigation/src/views/Drawer/DrawerSidebar.js' { 504 | declare module.exports: $Exports<'react-navigation/src/views/Drawer/DrawerSidebar'>; 505 | } 506 | declare module 'react-navigation/src/views/Drawer/DrawerView.js' { 507 | declare module.exports: $Exports<'react-navigation/src/views/Drawer/DrawerView'>; 508 | } 509 | declare module 'react-navigation/src/views/Header/Header.js' { 510 | declare module.exports: $Exports<'react-navigation/src/views/Header/Header'>; 511 | } 512 | declare module 'react-navigation/src/views/Header/HeaderBackButton.js' { 513 | declare module.exports: $Exports<'react-navigation/src/views/Header/HeaderBackButton'>; 514 | } 515 | declare module 'react-navigation/src/views/Header/HeaderStyleInterpolator.js' { 516 | declare module.exports: $Exports<'react-navigation/src/views/Header/HeaderStyleInterpolator'>; 517 | } 518 | declare module 'react-navigation/src/views/Header/HeaderTitle.js' { 519 | declare module.exports: $Exports<'react-navigation/src/views/Header/HeaderTitle'>; 520 | } 521 | declare module 'react-navigation/src/views/Header/ModularHeaderBackButton.js' { 522 | declare module.exports: $Exports<'react-navigation/src/views/Header/ModularHeaderBackButton'>; 523 | } 524 | declare module 'react-navigation/src/views/NavigationContext.js' { 525 | declare module.exports: $Exports<'react-navigation/src/views/NavigationContext'>; 526 | } 527 | declare module 'react-navigation/src/views/ResourceSavingSceneView.js' { 528 | declare module.exports: $Exports<'react-navigation/src/views/ResourceSavingSceneView'>; 529 | } 530 | declare module 'react-navigation/src/views/ScenesReducer.js' { 531 | declare module.exports: $Exports<'react-navigation/src/views/ScenesReducer'>; 532 | } 533 | declare module 'react-navigation/src/views/SceneView.js' { 534 | declare module.exports: $Exports<'react-navigation/src/views/SceneView'>; 535 | } 536 | declare module 'react-navigation/src/views/StackView/createPointerEventsContainer.js' { 537 | declare module.exports: $Exports<'react-navigation/src/views/StackView/createPointerEventsContainer'>; 538 | } 539 | declare module 'react-navigation/src/views/StackView/StackView.js' { 540 | declare module.exports: $Exports<'react-navigation/src/views/StackView/StackView'>; 541 | } 542 | declare module 'react-navigation/src/views/StackView/StackViewCard.js' { 543 | declare module.exports: $Exports<'react-navigation/src/views/StackView/StackViewCard'>; 544 | } 545 | declare module 'react-navigation/src/views/StackView/StackViewLayout.js' { 546 | declare module.exports: $Exports<'react-navigation/src/views/StackView/StackViewLayout'>; 547 | } 548 | declare module 'react-navigation/src/views/StackView/StackViewStyleInterpolator.js' { 549 | declare module.exports: $Exports<'react-navigation/src/views/StackView/StackViewStyleInterpolator'>; 550 | } 551 | declare module 'react-navigation/src/views/StackView/StackViewTransitionConfigs.js' { 552 | declare module.exports: $Exports<'react-navigation/src/views/StackView/StackViewTransitionConfigs'>; 553 | } 554 | declare module 'react-navigation/src/views/SwitchView/SwitchView.js' { 555 | declare module.exports: $Exports<'react-navigation/src/views/SwitchView/SwitchView'>; 556 | } 557 | declare module 'react-navigation/src/views/TouchableItem.js' { 558 | declare module.exports: $Exports<'react-navigation/src/views/TouchableItem'>; 559 | } 560 | declare module 'react-navigation/src/views/Transitioner.js' { 561 | declare module.exports: $Exports<'react-navigation/src/views/Transitioner'>; 562 | } 563 | declare module 'react-navigation/src/views/withNavigation.js' { 564 | declare module.exports: $Exports<'react-navigation/src/views/withNavigation'>; 565 | } 566 | declare module 'react-navigation/src/views/withNavigationFocus.js' { 567 | declare module.exports: $Exports<'react-navigation/src/views/withNavigationFocus'>; 568 | } 569 | declare module 'react-navigation/src/views/withOrientation.js' { 570 | declare module.exports: $Exports<'react-navigation/src/views/withOrientation'>; 571 | } 572 | -------------------------------------------------------------------------------- /flow-typed/npm/react-test-renderer_v16.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 2d946f2ec4aba5210b19d053c411a59d 2 | // flow-typed version: 95b3e05165/react-test-renderer_v16.x.x/flow_>=v0.47.x 3 | 4 | // Type definitions for react-test-renderer 16.x.x 5 | // Ported from: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-test-renderer 6 | 7 | type ReactTestRendererJSON = { 8 | type: string, 9 | props: { [propName: string]: any }, 10 | children: null | ReactTestRendererJSON[] 11 | }; 12 | 13 | type ReactTestRendererTree = ReactTestRendererJSON & { 14 | nodeType: "component" | "host", 15 | instance: any, 16 | rendered: null | ReactTestRendererTree 17 | }; 18 | 19 | type ReactTestInstance = { 20 | instance: any, 21 | type: string, 22 | props: { [propName: string]: any }, 23 | parent: null | ReactTestInstance, 24 | children: Array, 25 | 26 | find(predicate: (node: ReactTestInstance) => boolean): ReactTestInstance, 27 | findByType(type: React$ElementType): ReactTestInstance, 28 | findByProps(props: { [propName: string]: any }): ReactTestInstance, 29 | 30 | findAll( 31 | predicate: (node: ReactTestInstance) => boolean, 32 | options?: { deep: boolean } 33 | ): ReactTestInstance[], 34 | findAllByType( 35 | type: React$ElementType, 36 | options?: { deep: boolean } 37 | ): ReactTestInstance[], 38 | findAllByProps( 39 | props: { [propName: string]: any }, 40 | options?: { deep: boolean } 41 | ): ReactTestInstance[] 42 | }; 43 | 44 | type ReactTestRenderer = { 45 | toJSON(): null | ReactTestRendererJSON, 46 | toTree(): null | ReactTestRendererTree, 47 | unmount(nextElement?: React$Element): void, 48 | update(nextElement: React$Element): void, 49 | getInstance(): null | ReactTestInstance, 50 | root: ReactTestInstance 51 | }; 52 | 53 | type TestRendererOptions = { 54 | createNodeMock(element: React$Element): any 55 | }; 56 | 57 | declare module "react-test-renderer" { 58 | declare function create( 59 | nextElement: React$Element, 60 | options?: TestRendererOptions 61 | ): ReactTestRenderer; 62 | } 63 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-navigation-tabs", 3 | "version": "2.7.0", 4 | "description": "Tab Navigation components for React Navigation", 5 | "main": "lib/commonjs/index.js", 6 | "module": "lib/module/index.js", 7 | "react-native": "lib/module/index.js", 8 | "types": "lib/typescript/src/index.d.ts", 9 | "files": [ 10 | "src", 11 | "lib" 12 | ], 13 | "scripts": { 14 | "test": "jest", 15 | "typescript": "tsc --noEmit", 16 | "lint": "eslint --ext .js,.ts,.tsx .", 17 | "bootstrap": "yarn --cwd example && yarn", 18 | "example": "yarn --cwd example", 19 | "release": "yarn release-it", 20 | "prepare": "bob build" 21 | }, 22 | "publishConfig": { 23 | "registry": "https://registry.npmjs.org/" 24 | }, 25 | "keywords": [ 26 | "react-native-component", 27 | "react-component", 28 | "react-native", 29 | "ios", 30 | "android", 31 | "tab", 32 | "swipe", 33 | "scrollable", 34 | "coverflow" 35 | ], 36 | "repository": { 37 | "type": "git", 38 | "url": "git+https://github.com/react-navigation/tabs.git" 39 | }, 40 | "author": "Satyajit Sahoo (https://github.com/satya164/)", 41 | "license": "MIT", 42 | "bugs": { 43 | "url": "https://github.com/react-navigation/tabs/issues" 44 | }, 45 | "homepage": "https://github.com/react-navigation/tabs#readme", 46 | "dependencies": { 47 | "hoist-non-react-statics": "^3.3.0", 48 | "react-lifecycles-compat": "^3.0.4", 49 | "react-native-safe-area-view": "^0.14.6", 50 | "react-native-tab-view": "^2.11.0" 51 | }, 52 | "devDependencies": { 53 | "@commitlint/config-conventional": "^7.5.0", 54 | "@expo/vector-icons": "^10.0.1", 55 | "@react-native-community/bob": "^0.6.1", 56 | "@types/hoist-non-react-statics": "^3.3.1", 57 | "@types/react": "^16.8.17", 58 | "@types/react-native": "^0.57.57", 59 | "babel-jest": "^24.5.0", 60 | "commitlint": "^7.5.2", 61 | "conventional-changelog-cli": "^2.0.12", 62 | "enzyme": "3.9.0", 63 | "enzyme-adapter-react-16": "^1.11.2", 64 | "enzyme-to-json": "^3.2.2", 65 | "eslint": "^6.5.1", 66 | "eslint-config-satya164": "^3.1.2", 67 | "eslint-plugin-react-native-globals": "^0.1.0", 68 | "flow-bin": "~0.78.0", 69 | "husky": "^1.3.1", 70 | "jest": "^24.5.0", 71 | "prettier": "^1.18.2", 72 | "react": "16.5.0", 73 | "react-dom": "16.5.0", 74 | "react-native": "~0.57.1", 75 | "react-native-gesture-handler": "^1.4.1", 76 | "react-native-reanimated": "^1.2.0", 77 | "react-navigation": "^4.0.7", 78 | "react-test-renderer": "16.5.0", 79 | "release-it": "^10.3.1", 80 | "typescript": "^3.5.2" 81 | }, 82 | "peerDependencies": { 83 | "react": "*", 84 | "react-native": "*", 85 | "react-native-gesture-handler": "^1.0.0", 86 | "react-native-reanimated": "^1.0.0-alpha", 87 | "react-native-screens": "^1.0.0 || ^1.0.0-alpha", 88 | "react-navigation": "^4.0.7" 89 | }, 90 | "husky": { 91 | "hooks": { 92 | "commit-msg": "commitlint -E HUSKY_GIT_PARAMS", 93 | "pre-commit": "yarn lint && yarn flow check" 94 | } 95 | }, 96 | "jest": { 97 | "preset": "react-native", 98 | "setupFiles": [ 99 | "/__setup__/enzyme.js" 100 | ], 101 | "modulePathIgnorePatterns": [ 102 | "/example/node_modules", 103 | "/lib/" 104 | ], 105 | "snapshotSerializers": [ 106 | "enzyme-to-json/serializer" 107 | ] 108 | }, 109 | "@react-native-community/bob": { 110 | "source": "src", 111 | "output": "lib", 112 | "targets": [ 113 | "commonjs", 114 | "module", 115 | "typescript" 116 | ] 117 | } 118 | } 119 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Navigators 3 | */ 4 | export { 5 | default as createBottomTabNavigator, 6 | } from './navigators/createBottomTabNavigator'; 7 | export { 8 | default as createMaterialTopTabNavigator, 9 | } from './navigators/createMaterialTopTabNavigator'; 10 | 11 | /** 12 | * Views 13 | */ 14 | export { default as BottomTabBar } from './views/BottomTabBar'; 15 | export { default as MaterialTopTabBar } from './views/MaterialTopTabBar'; 16 | 17 | /** 18 | * Utils 19 | */ 20 | export { default as createTabNavigator } from './utils/createTabNavigator'; 21 | 22 | /** 23 | * Types 24 | */ 25 | export { 26 | BottomTabBarProps, 27 | NavigationTabState, 28 | NavigationTabProp, 29 | NavigationTabScreenProps, 30 | NavigationBottomTabOptions, 31 | NavigationMaterialTabOptions, 32 | NavigationBottomTabScreenComponent, 33 | NavigationMaterialTabScreenComponent, 34 | } from './types'; 35 | -------------------------------------------------------------------------------- /src/navigators/createBottomTabNavigator.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { 3 | View, 4 | StyleSheet, 5 | AccessibilityRole, 6 | AccessibilityState, 7 | } from 'react-native'; 8 | import { NavigationRoute } from 'react-navigation'; 9 | 10 | // eslint-disable-next-line import/no-unresolved 11 | import { ScreenContainer } from 'react-native-screens'; 12 | 13 | import createTabNavigator, { 14 | NavigationViewProps, 15 | } from '../utils/createTabNavigator'; 16 | import BottomTabBar from '../views/BottomTabBar'; 17 | import ResourceSavingScene from '../views/ResourceSavingScene'; 18 | import { 19 | NavigationTabProp, 20 | NavigationBottomTabOptions, 21 | BottomTabBarOptions, 22 | SceneDescriptorMap, 23 | } from '../types'; 24 | 25 | type Config = { 26 | lazy?: boolean; 27 | tabBarComponent?: React.ComponentType; 28 | tabBarOptions?: BottomTabBarOptions; 29 | }; 30 | 31 | type Props = NavigationViewProps & 32 | Config & { 33 | getAccessibilityRole: (props: { 34 | route: NavigationRoute; 35 | }) => AccessibilityRole | undefined; 36 | getAccessibilityStates: (props: { 37 | route: NavigationRoute; 38 | focused: boolean; 39 | }) => AccessibilityState[]; 40 | navigation: NavigationTabProp; 41 | descriptors: SceneDescriptorMap; 42 | screenProps?: unknown; 43 | }; 44 | 45 | type State = { 46 | loaded: number[]; 47 | }; 48 | 49 | class TabNavigationView extends React.PureComponent { 50 | static defaultProps = { 51 | lazy: true, 52 | getAccessibilityRole: (): AccessibilityRole => 'button', 53 | getAccessibilityStates: ({ 54 | focused, 55 | }: { 56 | focused: boolean; 57 | }): AccessibilityState[] => (focused ? ['selected'] : []), 58 | }; 59 | 60 | static getDerivedStateFromProps(nextProps: Props, prevState: State) { 61 | const { index } = nextProps.navigation.state; 62 | 63 | return { 64 | // Set the current tab to be loaded if it was not loaded before 65 | loaded: prevState.loaded.includes(index) 66 | ? prevState.loaded 67 | : [...prevState.loaded, index], 68 | }; 69 | } 70 | 71 | state = { 72 | loaded: [this.props.navigation.state.index], 73 | }; 74 | 75 | _getButtonComponent = ({ route }: { route: NavigationRoute }) => { 76 | const { descriptors } = this.props; 77 | const descriptor = descriptors[route.key]; 78 | const options = descriptor.options; 79 | 80 | if (options.tabBarButtonComponent) { 81 | return options.tabBarButtonComponent; 82 | } 83 | 84 | return undefined; 85 | }; 86 | 87 | _renderTabBar = () => { 88 | const { 89 | tabBarComponent: TabBarComponent = BottomTabBar, 90 | tabBarOptions, 91 | navigation, 92 | screenProps, 93 | getLabelText, 94 | getAccessibilityLabel, 95 | getAccessibilityRole, 96 | getAccessibilityStates, 97 | getTestID, 98 | renderIcon, 99 | onTabPress, 100 | onTabLongPress, 101 | } = this.props; 102 | 103 | const { descriptors } = this.props; 104 | const { state } = this.props.navigation; 105 | const route = state.routes[state.index]; 106 | const descriptor = descriptors[route.key]; 107 | const options = descriptor.options; 108 | 109 | if (options.tabBarVisible === false) { 110 | return null; 111 | } 112 | 113 | return ( 114 | 129 | ); 130 | }; 131 | 132 | _jumpTo = (key: string) => { 133 | const { navigation, onIndexChange } = this.props; 134 | 135 | const index = navigation.state.routes.findIndex(route => route.key === key); 136 | 137 | onIndexChange(index); 138 | }; 139 | 140 | render() { 141 | const { navigation, renderScene, lazy } = this.props; 142 | const { routes } = navigation.state; 143 | const { loaded } = this.state; 144 | 145 | return ( 146 | 147 | 148 | {routes.map((route, index) => { 149 | if (lazy && !loaded.includes(index)) { 150 | // Don't render a screen if we've never navigated to it 151 | return null; 152 | } 153 | 154 | const isFocused = navigation.state.index === index; 155 | 156 | return ( 157 | 162 | {renderScene({ route })} 163 | 164 | ); 165 | })} 166 | 167 | {this._renderTabBar()} 168 | 169 | ); 170 | } 171 | } 172 | 173 | const styles = StyleSheet.create({ 174 | container: { 175 | flex: 1, 176 | overflow: 'hidden', 177 | }, 178 | pages: { 179 | flex: 1, 180 | }, 181 | }); 182 | 183 | export default createTabNavigator( 184 | TabNavigationView 185 | ); 186 | -------------------------------------------------------------------------------- /src/navigators/createMaterialTopTabNavigator.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { StyleProp, ViewStyle } from 'react-native'; 3 | import { TabView, SceneRendererProps } from 'react-native-tab-view'; 4 | import createTabNavigator, { 5 | NavigationViewProps, 6 | } from '../utils/createTabNavigator'; 7 | import MaterialTopTabBar from '../views/MaterialTopTabBar'; 8 | import { 9 | NavigationTabProp, 10 | NavigationMaterialTabOptions, 11 | MaterialTabBarOptions, 12 | SceneDescriptorMap, 13 | } from '../types'; 14 | 15 | type Route = { 16 | key: string; 17 | routeName: string; 18 | }; 19 | 20 | type Config = { 21 | keyboardDismissMode?: 'none' | 'on-drag'; 22 | swipeEnabled?: boolean; 23 | swipeDistanceThreshold?: number; 24 | swipeVelocityThreshold?: number; 25 | initialLayout?: { width?: number; height?: number }; 26 | lazy?: boolean; 27 | lazyPlaceholderComponent?: React.ComponentType<{ route: Route }>; 28 | pagerComponent?: React.ComponentType< 29 | Parameters['renderPager']>[0] 30 | >; 31 | tabBarComponent?: React.ComponentType; 32 | tabBarOptions?: MaterialTabBarOptions; 33 | tabBarPosition?: 'top' | 'bottom'; 34 | sceneContainerStyle?: StyleProp; 35 | style?: StyleProp; 36 | }; 37 | 38 | type Props = NavigationViewProps & 39 | Config & { 40 | onSwipeStart?: () => void; 41 | onSwipeEnd?: () => void; 42 | navigation: NavigationTabProp; 43 | descriptors: SceneDescriptorMap; 44 | screenProps?: unknown; 45 | }; 46 | 47 | class MaterialTabView extends React.PureComponent { 48 | private renderTabBar = (props: SceneRendererProps) => { 49 | const { state } = this.props.navigation; 50 | const route = state.routes[state.index]; 51 | const { descriptors } = this.props; 52 | const descriptor = descriptors[route.key]; 53 | const options = descriptor.options; 54 | 55 | const tabBarVisible = 56 | options.tabBarVisible == null ? true : options.tabBarVisible; 57 | 58 | const { 59 | navigation, 60 | getLabelText, 61 | getAccessibilityLabel, 62 | getTestID, 63 | renderIcon, 64 | onTabPress, 65 | onTabLongPress, 66 | tabBarComponent: TabBarComponent = MaterialTopTabBar, 67 | tabBarPosition, 68 | tabBarOptions, 69 | screenProps, 70 | } = this.props; 71 | 72 | if (TabBarComponent === null || !tabBarVisible) { 73 | return null; 74 | } 75 | 76 | return ( 77 | 90 | ); 91 | }; 92 | 93 | render() { 94 | const { 95 | /* eslint-disable @typescript-eslint/no-unused-vars */ 96 | getLabelText, 97 | getAccessibilityLabel, 98 | getTestID, 99 | renderIcon, 100 | onTabPress, 101 | onTabLongPress, 102 | screenProps, 103 | tabBarComponent, 104 | tabBarOptions, 105 | /* eslint-enable @typescript-eslint/no-unused-vars */ 106 | lazyPlaceholderComponent, 107 | pagerComponent, 108 | navigation, 109 | descriptors, 110 | ...rest 111 | } = this.props; 112 | 113 | const { state } = navigation; 114 | const route = state.routes[state.index]; 115 | 116 | const descriptor = descriptors[route.key]; 117 | const options = descriptor.options; 118 | 119 | let swipeEnabled = 120 | // @ts-ignore 121 | options.swipeEnabled == null 122 | ? this.props.swipeEnabled 123 | : (options as any).swipeEnabled; 124 | 125 | if (typeof swipeEnabled === 'function') { 126 | swipeEnabled = swipeEnabled(state); 127 | } 128 | 129 | return ( 130 | React.createElement(lazyPlaceholderComponent, props) 138 | : undefined 139 | } 140 | renderPager={ 141 | pagerComponent !== undefined 142 | ? props => React.createElement(pagerComponent, props) 143 | : undefined 144 | } 145 | /> 146 | ); 147 | } 148 | } 149 | 150 | export default createTabNavigator( 151 | MaterialTabView 152 | ); 153 | -------------------------------------------------------------------------------- /src/types.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { 3 | AccessibilityRole, 4 | AccessibilityState, 5 | StyleProp, 6 | TextStyle, 7 | ViewStyle, 8 | } from 'react-native'; 9 | import SafeAreaView from 'react-native-safe-area-view'; 10 | import Animated from 'react-native-reanimated'; 11 | import { 12 | NavigationRoute, 13 | NavigationState, 14 | NavigationScreenProp, 15 | NavigationParams, 16 | NavigationDescriptor, 17 | NavigationScreenConfig, 18 | SupportedThemes, 19 | } from 'react-navigation'; 20 | 21 | export type NavigationTabState = NavigationState; 22 | 23 | export type NavigationTabProp< 24 | State = NavigationRoute, 25 | Params = NavigationParams 26 | > = NavigationScreenProp & { 27 | jumpTo(routeName: string, key?: string): void; 28 | }; 29 | 30 | export type ThemedColor = 31 | | string 32 | | { 33 | light: string; 34 | dark: string; 35 | }; 36 | 37 | export type Orientation = 'horizontal' | 'vertical'; 38 | 39 | export type LabelPosition = 'beside-icon' | 'below-icon'; 40 | 41 | interface BaseAnimation { 42 | useNativeDriver?: boolean; 43 | } 44 | interface TimingAnimation extends BaseAnimation { 45 | easing?: (value: number) => number; 46 | duration?: number; 47 | delay?: number; 48 | } 49 | interface SpringAnimation extends BaseAnimation { 50 | overshootClamping?: boolean; 51 | restDisplacementThreshold?: number; 52 | restSpeedThreshold?: number; 53 | velocity?: number | { x: number; y: number }; 54 | bounciness?: number; 55 | speed?: number; 56 | tension?: number; 57 | friction?: number; 58 | stiffness?: number; 59 | mass?: number; 60 | damping?: number; 61 | delay?: number; 62 | } 63 | export type TimingKeyboardAnimationConfig = { 64 | animation: 'timing'; 65 | config?: TimingAnimation; 66 | }; 67 | export type SpringKeyboardAnimationConfig = { 68 | animation: 'spring'; 69 | config?: SpringAnimation; 70 | }; 71 | export type KeyboardAnimationConfig = 72 | | TimingKeyboardAnimationConfig 73 | | SpringKeyboardAnimationConfig; 74 | export type KeyboardHidesTabBarAnimationConfig = { 75 | show: KeyboardAnimationConfig; 76 | hide: KeyboardAnimationConfig; 77 | }; 78 | 79 | export type BottomTabBarOptions = { 80 | keyboardHidesTabBar?: boolean; 81 | keyboardHidesTabBarAnimationConfig?: Partial< 82 | KeyboardHidesTabBarAnimationConfig 83 | >; 84 | activeTintColor?: ThemedColor; 85 | inactiveTintColor?: ThemedColor; 86 | activeBackgroundColor?: ThemedColor; 87 | inactiveBackgroundColor?: ThemedColor; 88 | allowFontScaling?: boolean; 89 | showLabel?: boolean; 90 | showIcon?: boolean; 91 | labelStyle?: StyleProp; 92 | tabStyle?: StyleProp; 93 | labelPosition?: 94 | | LabelPosition 95 | | ((options: { deviceOrientation: Orientation }) => LabelPosition); 96 | adaptive?: boolean; 97 | safeAreaInset?: React.ComponentProps['forceInset']; 98 | style?: StyleProp; 99 | }; 100 | 101 | export type ButtonComponentProps = { 102 | route: NavigationRoute; 103 | focused: boolean; 104 | onPress: () => void; 105 | onLongPress: () => void; 106 | testID?: string; 107 | accessibilityLabel?: string; 108 | accessibilityRole?: AccessibilityRole; 109 | accessibilityStates?: AccessibilityState[]; 110 | style?: StyleProp; 111 | }; 112 | 113 | export type BottomTabBarProps = BottomTabBarOptions & { 114 | navigation: NavigationTabProp; 115 | onTabPress: (props: { route: NavigationRoute }) => void; 116 | onTabLongPress: (props: { route: NavigationRoute }) => void; 117 | getAccessibilityLabel: (props: { 118 | route: NavigationRoute; 119 | }) => string | undefined; 120 | getAccessibilityRole: (props: { 121 | route: NavigationRoute; 122 | }) => AccessibilityRole | undefined; 123 | getAccessibilityStates: (props: { 124 | route: NavigationRoute; 125 | focused: boolean; 126 | }) => AccessibilityState[]; 127 | getButtonComponent: (props: { 128 | route: NavigationRoute; 129 | }) => React.ComponentType | undefined; 130 | getLabelText: (props: { 131 | route: NavigationRoute; 132 | }) => 133 | | ((scene: { 134 | focused: boolean; 135 | tintColor?: string; 136 | orientation?: 'horizontal' | 'vertical'; 137 | }) => string | undefined) 138 | | string 139 | | undefined; 140 | getTestID: (props: { route: NavigationRoute }) => string | undefined; 141 | renderIcon: (props: { 142 | route: NavigationRoute; 143 | focused: boolean; 144 | tintColor?: string; 145 | horizontal?: boolean; 146 | }) => React.ReactNode; 147 | dimensions: { width: number; height: number }; 148 | isLandscape: boolean; 149 | jumpTo: (key: string) => void; 150 | screenProps: unknown; 151 | }; 152 | 153 | export type MaterialTabBarOptions = { 154 | activeTintColor?: string; 155 | allowFontScaling?: boolean; 156 | bounces?: boolean; 157 | inactiveTintColor?: string; 158 | pressColor?: string; 159 | pressOpacity?: number; 160 | scrollEnabled?: boolean; 161 | showIcon?: boolean; 162 | showLabel?: boolean; 163 | upperCaseLabel?: boolean; 164 | tabStyle?: StyleProp; 165 | indicatorStyle?: StyleProp; 166 | iconStyle?: StyleProp; 167 | labelStyle?: StyleProp; 168 | contentContainerStyle?: StyleProp; 169 | style?: StyleProp; 170 | }; 171 | 172 | export type MaterialTabBarProps = MaterialTabBarOptions & { 173 | layout: { 174 | width: number; 175 | height: number; 176 | }; 177 | position: Animated.Node; 178 | jumpTo: (key: string) => void; 179 | getLabelText: (scene: { 180 | route: NavigationRoute; 181 | }) => 182 | | ((scene: { focused: boolean; tintColor: string }) => string | undefined) 183 | | string 184 | | undefined; 185 | getAccessible?: (scene: { route: NavigationRoute }) => boolean | undefined; 186 | getAccessibilityLabel: (scene: { 187 | route: NavigationRoute; 188 | }) => string | undefined; 189 | getTestID: (scene: { route: NavigationRoute }) => string | undefined; 190 | renderIcon: (scene: { 191 | route: NavigationRoute; 192 | focused: boolean; 193 | tintColor: string; 194 | horizontal?: boolean; 195 | }) => React.ReactNode; 196 | renderBadge?: (scene: { route: NavigationRoute }) => React.ReactNode; 197 | onTabPress?: (scene: { route: NavigationRoute }) => void; 198 | onTabLongPress?: (scene: { route: NavigationRoute }) => void; 199 | tabBarPosition?: 'top' | 'bottom'; 200 | screenProps: unknown; 201 | navigation: NavigationTabProp; 202 | }; 203 | 204 | export type NavigationCommonTabOptions = { 205 | title?: string; 206 | tabBarLabel?: React.ReactNode; 207 | tabBarVisible?: boolean; 208 | tabBarAccessibilityLabel?: string; 209 | tabBarTestID?: string; 210 | tabBarIcon?: 211 | | React.ReactNode 212 | | ((props: { 213 | focused: boolean; 214 | tintColor?: string; 215 | horizontal?: boolean; 216 | }) => React.ReactNode); 217 | tabBarOnPress?: (props: { 218 | navigation: NavigationTabProp; 219 | defaultHandler: () => void; 220 | }) => void; 221 | tabBarOnLongPress?: (props: { 222 | navigation: NavigationTabProp; 223 | defaultHandler: () => void; 224 | }) => void; 225 | }; 226 | 227 | export type NavigationBottomTabOptions = NavigationCommonTabOptions & { 228 | tabBarButtonComponent?: React.ComponentType; 229 | }; 230 | 231 | export type NavigationMaterialTabOptions = NavigationCommonTabOptions & { 232 | tabBarButtonComponent?: React.ComponentType; 233 | swipeEnabled?: boolean | ((state: NavigationState) => boolean); 234 | }; 235 | 236 | export type NavigationTabScreenProps< 237 | Params = NavigationParams, 238 | ScreenProps = unknown 239 | > = { 240 | theme: SupportedThemes; 241 | navigation: NavigationTabProp; 242 | screenProps: ScreenProps; 243 | }; 244 | 245 | export type NavigationMaterialTabScreenComponent< 246 | Params = NavigationParams, 247 | ScreenProps = unknown 248 | > = React.ComponentType> & { 249 | navigationOptions?: NavigationScreenConfig< 250 | NavigationMaterialTabOptions, 251 | NavigationTabProp, 252 | ScreenProps 253 | >; 254 | }; 255 | 256 | export type NavigationBottomTabScreenComponent< 257 | Params = NavigationParams, 258 | ScreenProps = unknown 259 | > = React.ComponentType> & { 260 | navigationOptions?: NavigationScreenConfig< 261 | NavigationBottomTabOptions, 262 | NavigationTabProp, 263 | ScreenProps 264 | >; 265 | }; 266 | 267 | export type SceneDescriptorMap = { 268 | [key: string]: NavigationDescriptor< 269 | NavigationParams, 270 | NavigationBottomTabOptions | NavigationMaterialTabOptions, 271 | NavigationTabProp 272 | >; 273 | }; 274 | -------------------------------------------------------------------------------- /src/utils/createTabNavigator.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { 3 | TabRouter, 4 | StackActions, 5 | SceneView, 6 | createNavigator, 7 | SwitchActions, 8 | NavigationRoute, 9 | NavigationRouteConfigMap, 10 | CreateNavigatorConfig, 11 | NavigationTabRouterConfig, 12 | } from 'react-navigation'; 13 | import { 14 | NavigationTabProp, 15 | NavigationCommonTabOptions, 16 | SceneDescriptorMap, 17 | } from '../types'; 18 | 19 | type RouteConfig = NavigationRouteConfigMap< 20 | Options, 21 | NavigationTabProp 22 | >; 23 | 24 | type CommonProps = { 25 | navigation: NavigationTabProp; 26 | descriptors: SceneDescriptorMap; 27 | screenProps?: unknown; 28 | }; 29 | 30 | type ExtraProps = { 31 | navigationConfig: Config; 32 | }; 33 | 34 | export type RenderIconProps = { 35 | route: NavigationRoute; 36 | focused: boolean; 37 | tintColor?: string; 38 | horizontal?: boolean; 39 | }; 40 | 41 | export type NavigationViewProps = { 42 | getLabelText: (props: { route: NavigationRoute }) => string | undefined; 43 | getAccessibilityLabel: (props: { 44 | route: NavigationRoute; 45 | }) => string | undefined; 46 | getTestID: (props: { route: NavigationRoute }) => string | undefined; 47 | renderIcon: (props: RenderIconProps) => React.ReactNode; 48 | renderScene: (props: { route: NavigationRoute }) => React.ReactNode; 49 | onIndexChange: (index: number) => void; 50 | onTabPress: (props: { route: NavigationRoute }) => void; 51 | onTabLongPress: (props: { route: NavigationRoute }) => void; 52 | }; 53 | 54 | export default function createTabNavigator< 55 | Config extends {}, 56 | Options extends NavigationCommonTabOptions, 57 | Props extends NavigationViewProps & CommonProps 58 | >(TabView: React.ComponentType) { 59 | class NavigationView extends React.Component< 60 | Exclude & ExtraProps 61 | > { 62 | _renderScene = ({ route }: { route: { key: string } }) => { 63 | const { screenProps, descriptors } = this.props; 64 | const descriptor = descriptors[route.key]; 65 | const TabComponent = descriptor.getComponent(); 66 | return ( 67 | 72 | ); 73 | }; 74 | 75 | _renderIcon = ({ 76 | route, 77 | focused, 78 | tintColor, 79 | horizontal = false, 80 | }: RenderIconProps) => { 81 | const { descriptors } = this.props; 82 | const descriptor = descriptors[route.key]; 83 | const options = descriptor.options; 84 | 85 | if (options.tabBarIcon) { 86 | return typeof options.tabBarIcon === 'function' 87 | ? options.tabBarIcon({ focused, tintColor, horizontal }) 88 | : options.tabBarIcon; 89 | } 90 | 91 | return null; 92 | }; 93 | 94 | _getLabelText = ({ route }: { route: NavigationRoute }) => { 95 | const { descriptors } = this.props; 96 | const descriptor = descriptors[route.key]; 97 | const options = descriptor.options; 98 | 99 | if (options.tabBarLabel) { 100 | return options.tabBarLabel; 101 | } 102 | 103 | if (typeof options.title === 'string') { 104 | return options.title; 105 | } 106 | 107 | return route.routeName; 108 | }; 109 | 110 | _getAccessibilityLabel = ({ route }: { route: NavigationRoute }) => { 111 | const { descriptors } = this.props; 112 | const descriptor = descriptors[route.key]; 113 | const options = descriptor.options; 114 | 115 | if (typeof options.tabBarAccessibilityLabel !== 'undefined') { 116 | return options.tabBarAccessibilityLabel; 117 | } 118 | 119 | const label = this._getLabelText({ route }); 120 | 121 | if (typeof label === 'string') { 122 | const { routes } = this.props.navigation.state; 123 | return `${label}, tab, ${routes.indexOf(route) + 1} of ${ 124 | routes.length 125 | }`; 126 | } 127 | 128 | return undefined; 129 | }; 130 | 131 | _getTestID = ({ route }: { route: NavigationRoute }) => { 132 | const { descriptors } = this.props; 133 | const descriptor = descriptors[route.key]; 134 | const options = descriptor.options; 135 | 136 | return options.tabBarTestID; 137 | }; 138 | 139 | _makeDefaultHandler = ({ 140 | route, 141 | navigation, 142 | }: { 143 | route: NavigationRoute; 144 | navigation: NavigationTabProp; 145 | }) => () => { 146 | if (navigation.isFocused()) { 147 | if (route.hasOwnProperty('index') && route.index > 0) { 148 | // If current tab has a nested navigator, pop to top 149 | navigation.dispatch(StackActions.popToTop({ key: route.key })); 150 | } else { 151 | navigation.emit('refocus'); 152 | } 153 | } else { 154 | this._jumpTo(route.routeName); 155 | } 156 | }; 157 | 158 | _handleTabPress = ({ route }: { route: NavigationRoute }) => { 159 | this._isTabPress = true; 160 | 161 | // After tab press, handleIndexChange will be called synchronously 162 | // So we reset it in promise callback 163 | Promise.resolve().then(() => (this._isTabPress = false)); 164 | 165 | const { descriptors } = this.props; 166 | const descriptor = descriptors[route.key]; 167 | const { navigation, options } = descriptor; 168 | 169 | const defaultHandler = this._makeDefaultHandler({ route, navigation }); 170 | 171 | if (options.tabBarOnPress) { 172 | options.tabBarOnPress({ navigation, defaultHandler }); 173 | } else { 174 | defaultHandler(); 175 | } 176 | }; 177 | 178 | _handleTabLongPress = ({ route }: { route: NavigationRoute }) => { 179 | const { descriptors } = this.props; 180 | const descriptor = descriptors[route.key]; 181 | const { navigation, options } = descriptor; 182 | 183 | const defaultHandler = this._makeDefaultHandler({ route, navigation }); 184 | 185 | if (options.tabBarOnLongPress) { 186 | options.tabBarOnLongPress({ navigation, defaultHandler }); 187 | } else { 188 | defaultHandler(); 189 | } 190 | }; 191 | 192 | _handleIndexChange = (index: number) => { 193 | if (this._isTabPress) { 194 | this._isTabPress = false; 195 | return; 196 | } 197 | 198 | this._jumpTo(this.props.navigation.state.routes[index].routeName); 199 | }; 200 | 201 | _jumpTo = (routeName: string) => { 202 | const { navigation } = this.props; 203 | 204 | navigation.dispatch( 205 | SwitchActions.jumpTo({ 206 | routeName, 207 | key: navigation.state.key, 208 | }) 209 | ); 210 | }; 211 | 212 | _isTabPress: boolean = false; 213 | 214 | render() { 215 | const { 216 | descriptors, 217 | navigation, 218 | screenProps, 219 | navigationConfig, 220 | } = this.props; 221 | const { state } = navigation; 222 | const route = state.routes[state.index]; 223 | const descriptor = descriptors[route.key]; 224 | 225 | return ( 226 | // TODO: don't have time to fix it right now 227 | // @ts-ignore 228 | 243 | ); 244 | } 245 | } 246 | 247 | return ( 248 | routes: RouteConfig, 249 | config: CreateNavigatorConfig< 250 | Partial, 251 | NavigationTabRouterConfig, 252 | Partial, 253 | NavigationTabProp 254 | > = {} 255 | ) => { 256 | const router = TabRouter(routes, config as any); 257 | 258 | return createNavigator(NavigationView as any, router, config as any); 259 | }; 260 | } 261 | -------------------------------------------------------------------------------- /src/utils/withDimensions.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Dimensions, ScaledSize } from 'react-native'; 3 | import hoistNonReactStatic from 'hoist-non-react-statics'; 4 | 5 | type DimensionsType = { 6 | width: number; 7 | height: number; 8 | }; 9 | 10 | type InjectedProps = { 11 | dimensions: DimensionsType; 12 | isLandscape: boolean; 13 | }; 14 | 15 | export const isOrientationLandscape = ({ width, height }: DimensionsType) => 16 | width > height; 17 | 18 | export default function withDimensions( 19 | WrappedComponent: React.ComponentType 20 | ): React.ComponentType>> { 21 | class EnhancedComponent extends React.Component { 22 | static displayName = `withDimensions(${WrappedComponent.displayName})`; 23 | 24 | constructor(props: Props) { 25 | super(props); 26 | 27 | const { width, height } = Dimensions.get('window'); 28 | this.state = { 29 | dimensions: { width, height }, 30 | isLandscape: isOrientationLandscape({ width, height }), 31 | }; 32 | } 33 | 34 | componentDidMount() { 35 | Dimensions.addEventListener('change', this.handleOrientationChange); 36 | } 37 | 38 | componentWillUnmount() { 39 | Dimensions.removeEventListener('change', this.handleOrientationChange); 40 | } 41 | 42 | handleOrientationChange = ({ window }: { window: ScaledSize }) => { 43 | const { width, height } = window; 44 | this.setState({ 45 | dimensions: { width, height }, 46 | isLandscape: isOrientationLandscape({ width, height }), 47 | }); 48 | }; 49 | 50 | render() { 51 | // @ts-ignore 52 | return ; 53 | } 54 | } 55 | 56 | // @ts-ignore 57 | return hoistNonReactStatic(EnhancedComponent, WrappedComponent); 58 | } 59 | -------------------------------------------------------------------------------- /src/views/BottomTabBar.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Animated, 4 | TouchableWithoutFeedback, 5 | StyleSheet, 6 | View, 7 | Keyboard, 8 | Platform, 9 | LayoutChangeEvent, 10 | } from 'react-native'; 11 | import SafeAreaView from 'react-native-safe-area-view'; 12 | import { ThemeColors, ThemeContext, NavigationRoute } from 'react-navigation'; 13 | 14 | import CrossFadeIcon from './CrossFadeIcon'; 15 | import withDimensions from '../utils/withDimensions'; 16 | import { 17 | BottomTabBarProps, 18 | ButtonComponentProps, 19 | KeyboardHidesTabBarAnimationConfig, 20 | KeyboardAnimationConfig, 21 | } from '../types'; 22 | 23 | type State = { 24 | layout: { height: number; width: number }; 25 | keyboard: boolean; 26 | visible: Animated.Value; 27 | }; 28 | 29 | const majorVersion = parseInt(Platform.Version as string, 10); 30 | const isIos = Platform.OS === 'ios'; 31 | const isIOS11 = majorVersion >= 11 && isIos; 32 | 33 | const DEFAULT_MAX_TAB_ITEM_WIDTH = 125; 34 | const DEFAULT_KEYBOARD_ANIMATION_CONFIG: KeyboardHidesTabBarAnimationConfig = { 35 | show: { 36 | animation: 'timing', 37 | config: { 38 | useNativeDriver: true, 39 | duration: 150, 40 | }, 41 | }, 42 | hide: { 43 | animation: 'timing', 44 | config: { 45 | useNativeDriver: true, 46 | duration: 100, 47 | }, 48 | }, 49 | }; 50 | 51 | class TouchableWithoutFeedbackWrapper extends React.Component< 52 | ButtonComponentProps 53 | > { 54 | render() { 55 | const { 56 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 57 | route, 58 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 59 | focused, 60 | onPress, 61 | onLongPress, 62 | testID, 63 | accessibilityLabel, 64 | accessibilityRole, 65 | accessibilityStates, 66 | ...rest 67 | } = this.props; 68 | 69 | return ( 70 | 79 | 80 | 81 | ); 82 | } 83 | } 84 | 85 | class TabBarBottom extends React.Component { 86 | static defaultProps = { 87 | keyboardHidesTabBar: true, 88 | keyboardHidesTabBarAnimationConfig: DEFAULT_KEYBOARD_ANIMATION_CONFIG, 89 | activeTintColor: { 90 | light: '#007AFF', 91 | dark: '#fff', 92 | }, 93 | inactiveTintColor: { 94 | light: '#8e8e93', 95 | dark: '#7f7f7f', 96 | }, 97 | activeBackgroundColor: 'transparent', 98 | inactiveBackgroundColor: 'transparent', 99 | showLabel: true, 100 | showIcon: true, 101 | allowFontScaling: true, 102 | adaptive: isIOS11, 103 | safeAreaInset: { bottom: 'always', top: 'never' } as React.ComponentProps< 104 | typeof SafeAreaView 105 | >['forceInset'], 106 | }; 107 | 108 | // eslint-disable-next-line react/sort-comp 109 | static contextType = ThemeContext; 110 | 111 | state = { 112 | layout: { height: 0, width: 0 }, 113 | keyboard: false, 114 | visible: new Animated.Value(1), 115 | }; 116 | 117 | componentDidMount() { 118 | if (Platform.OS === 'ios') { 119 | Keyboard.addListener('keyboardWillShow', this._handleKeyboardShow); 120 | Keyboard.addListener('keyboardWillHide', this._handleKeyboardHide); 121 | } else { 122 | Keyboard.addListener('keyboardDidShow', this._handleKeyboardShow); 123 | Keyboard.addListener('keyboardDidHide', this._handleKeyboardHide); 124 | } 125 | } 126 | 127 | componentWillUnmount() { 128 | if (Platform.OS === 'ios') { 129 | Keyboard.removeListener('keyboardWillShow', this._handleKeyboardShow); 130 | Keyboard.removeListener('keyboardWillHide', this._handleKeyboardHide); 131 | } else { 132 | Keyboard.removeListener('keyboardDidShow', this._handleKeyboardShow); 133 | Keyboard.removeListener('keyboardDidHide', this._handleKeyboardHide); 134 | } 135 | } 136 | 137 | // @ts-ignore 138 | context: 'light' | 'dark'; 139 | 140 | _getKeyboardAnimationConfigByType = ( 141 | type: keyof KeyboardHidesTabBarAnimationConfig 142 | ): KeyboardAnimationConfig => { 143 | const { keyboardHidesTabBarAnimationConfig } = this.props; 144 | const defaultKeyboardAnimationConfig = 145 | DEFAULT_KEYBOARD_ANIMATION_CONFIG[type]; 146 | const keyboardAnimationConfig = 147 | (keyboardHidesTabBarAnimationConfig && 148 | keyboardHidesTabBarAnimationConfig[type]) || 149 | defaultKeyboardAnimationConfig; 150 | 151 | // merge config only `timing` animation 152 | if ( 153 | keyboardAnimationConfig && 154 | keyboardAnimationConfig.animation === 'timing' 155 | ) { 156 | return { 157 | ...defaultKeyboardAnimationConfig, 158 | ...keyboardAnimationConfig, 159 | config: { 160 | ...defaultKeyboardAnimationConfig.config, 161 | ...keyboardAnimationConfig.config, 162 | }, 163 | }; 164 | } 165 | 166 | return keyboardAnimationConfig as KeyboardAnimationConfig; 167 | }; 168 | 169 | _handleKeyboardShow = () => { 170 | this.setState({ keyboard: true }, () => { 171 | const { animation, config } = this._getKeyboardAnimationConfigByType( 172 | 'show' 173 | ); 174 | Animated[animation](this.state.visible, { 175 | toValue: 0, 176 | ...config, 177 | }).start(); 178 | }); 179 | }; 180 | 181 | _handleKeyboardHide = () => { 182 | const { animation, config } = this._getKeyboardAnimationConfigByType( 183 | 'hide' 184 | ); 185 | Animated[animation](this.state.visible, { 186 | toValue: 1, 187 | ...config, 188 | }).start(() => { 189 | this.setState({ keyboard: false }); 190 | }); 191 | }; 192 | 193 | _handleLayout = (e: LayoutChangeEvent) => { 194 | const { layout } = this.state; 195 | const { height, width } = e.nativeEvent.layout; 196 | 197 | if (height === layout.height && width === layout.width) { 198 | return; 199 | } 200 | 201 | this.setState({ 202 | layout: { 203 | height, 204 | width, 205 | }, 206 | }); 207 | }; 208 | 209 | _getActiveTintColor = () => { 210 | let { activeTintColor } = this.props; 211 | if (!activeTintColor) { 212 | return; 213 | } else if (typeof activeTintColor === 'string') { 214 | return activeTintColor; 215 | } 216 | 217 | return activeTintColor[this.context]; 218 | }; 219 | 220 | _getInactiveTintColor = () => { 221 | let { inactiveTintColor } = this.props; 222 | if (!inactiveTintColor) { 223 | return; 224 | } else if (typeof inactiveTintColor === 'string') { 225 | return inactiveTintColor; 226 | } 227 | 228 | return inactiveTintColor[this.context]; 229 | }; 230 | 231 | _getActiveBackgroundColor = () => { 232 | let { activeBackgroundColor } = this.props; 233 | if (!activeBackgroundColor) { 234 | return; 235 | } else if (typeof activeBackgroundColor === 'string') { 236 | return activeBackgroundColor; 237 | } 238 | 239 | return activeBackgroundColor[this.context]; 240 | }; 241 | 242 | _getInactiveBackgroundColor = () => { 243 | let { inactiveBackgroundColor } = this.props; 244 | if (!inactiveBackgroundColor) { 245 | return; 246 | } else if (typeof inactiveBackgroundColor === 'string') { 247 | return inactiveBackgroundColor; 248 | } 249 | 250 | return inactiveBackgroundColor[this.context]; 251 | }; 252 | 253 | _renderLabel = ({ 254 | route, 255 | focused, 256 | }: { 257 | route: NavigationRoute; 258 | focused: boolean; 259 | }) => { 260 | const { labelStyle, showLabel, showIcon, allowFontScaling } = this.props; 261 | 262 | if (showLabel === false) { 263 | return null; 264 | } 265 | 266 | const activeTintColor = this._getActiveTintColor(); 267 | const inactiveTintColor = this._getInactiveTintColor(); 268 | const label = this.props.getLabelText({ route }); 269 | const tintColor = focused ? activeTintColor : inactiveTintColor; 270 | const horizontal = this._shouldUseHorizontalLabels(); 271 | 272 | if (typeof label === 'string') { 273 | return ( 274 | 284 | {label} 285 | 286 | ); 287 | } 288 | 289 | if (typeof label === 'function') { 290 | return label({ 291 | focused, 292 | tintColor, 293 | orientation: horizontal ? 'horizontal' : 'vertical', 294 | }); 295 | } 296 | 297 | return label; 298 | }; 299 | 300 | _renderIcon = ({ 301 | route, 302 | focused, 303 | }: { 304 | route: NavigationRoute; 305 | focused: boolean; 306 | }) => { 307 | const { renderIcon, showIcon, showLabel } = this.props; 308 | 309 | if (showIcon === false) { 310 | return null; 311 | } 312 | 313 | const horizontal = this._shouldUseHorizontalLabels(); 314 | 315 | const activeTintColor = this._getActiveTintColor(); 316 | const inactiveTintColor = this._getInactiveTintColor(); 317 | const activeOpacity = focused ? 1 : 0; 318 | const inactiveOpacity = focused ? 0 : 1; 319 | 320 | return ( 321 | 335 | ); 336 | }; 337 | 338 | _shouldUseHorizontalLabels = () => { 339 | const { routes } = this.props.navigation.state; 340 | const { 341 | isLandscape, 342 | dimensions, 343 | adaptive, 344 | tabStyle, 345 | labelPosition, 346 | } = this.props; 347 | 348 | if (labelPosition) { 349 | let position; 350 | if (typeof labelPosition === 'string') { 351 | position = labelPosition; 352 | } else { 353 | position = labelPosition({ 354 | deviceOrientation: isLandscape ? 'horizontal' : 'vertical', 355 | }); 356 | } 357 | 358 | if (position) { 359 | return position === 'beside-icon'; 360 | } 361 | } 362 | 363 | if (!adaptive) { 364 | return false; 365 | } 366 | 367 | // @ts-ignore 368 | if (Platform.isPad) { 369 | let maxTabItemWidth = DEFAULT_MAX_TAB_ITEM_WIDTH; 370 | 371 | const flattenedStyle = StyleSheet.flatten(tabStyle); 372 | 373 | if (flattenedStyle) { 374 | if (typeof flattenedStyle.width === 'number') { 375 | maxTabItemWidth = flattenedStyle.width; 376 | } else if (typeof flattenedStyle.maxWidth === 'number') { 377 | maxTabItemWidth = flattenedStyle.maxWidth; 378 | } 379 | } 380 | 381 | return routes.length * maxTabItemWidth <= dimensions.width; 382 | } else { 383 | return isLandscape; 384 | } 385 | }; 386 | 387 | render() { 388 | const { 389 | navigation, 390 | keyboardHidesTabBar, 391 | onTabPress, 392 | onTabLongPress, 393 | safeAreaInset, 394 | style, 395 | tabStyle, 396 | } = this.props; 397 | 398 | const { routes } = navigation.state; 399 | const isDark = this.context === 'dark'; 400 | 401 | const activeBackgroundColor = this._getActiveBackgroundColor(); 402 | const inactiveBackgroundColor = this._getInactiveBackgroundColor(); 403 | 404 | const { 405 | position, 406 | top, 407 | left = 0, 408 | bottom = 0, 409 | right = 0, 410 | margin, 411 | marginTop, 412 | marginLeft, 413 | marginBottom, 414 | marginRight, 415 | marginHorizontal, 416 | marginVertical, 417 | ...innerStyle 418 | } = StyleSheet.flatten(style || {}); 419 | 420 | const containerStyle = { 421 | position, 422 | top, 423 | left, 424 | bottom, 425 | right, 426 | margin, 427 | marginTop, 428 | marginLeft, 429 | marginBottom, 430 | marginRight, 431 | marginHorizontal, 432 | marginVertical, 433 | }; 434 | 435 | const tabBarStyle = [ 436 | styles.tabBar, 437 | isDark ? styles.tabBarDark : styles.tabBarLight, 438 | // @ts-ignore 439 | this._shouldUseHorizontalLabels() && !Platform.isPad 440 | ? styles.tabBarCompact 441 | : styles.tabBarRegular, 442 | innerStyle, 443 | ]; 444 | 445 | return ( 446 | 525 | ); 526 | } 527 | } 528 | 529 | const DEFAULT_HEIGHT = 49; 530 | const COMPACT_HEIGHT = 29; 531 | 532 | const styles = StyleSheet.create({ 533 | tabBar: { 534 | borderTopWidth: StyleSheet.hairlineWidth, 535 | flexDirection: 'row', 536 | }, 537 | tabBarLight: { 538 | backgroundColor: ThemeColors.light.header, 539 | borderTopColor: ThemeColors.light.headerBorder, 540 | }, 541 | tabBarDark: { 542 | backgroundColor: ThemeColors.dark.header, 543 | borderTopColor: ThemeColors.dark.headerBorder, 544 | }, 545 | container: { 546 | elevation: 8, 547 | }, 548 | tabBarCompact: { 549 | height: COMPACT_HEIGHT, 550 | }, 551 | tabBarRegular: { 552 | height: DEFAULT_HEIGHT, 553 | }, 554 | tab: { 555 | flex: 1, 556 | alignItems: isIos ? 'center' : 'stretch', 557 | }, 558 | tabPortrait: { 559 | justifyContent: 'flex-end', 560 | flexDirection: 'column', 561 | }, 562 | tabLandscape: { 563 | justifyContent: 'center', 564 | flexDirection: 'row', 565 | }, 566 | iconWithoutLabel: { 567 | flex: 1, 568 | }, 569 | iconWithLabel: { 570 | flex: 1, 571 | }, 572 | iconWithExplicitHeight: { 573 | // @ts-ignore 574 | height: Platform.isPad ? DEFAULT_HEIGHT : COMPACT_HEIGHT, 575 | }, 576 | label: { 577 | textAlign: 'center', 578 | backgroundColor: 'transparent', 579 | }, 580 | labelBeneath: { 581 | fontSize: 11, 582 | marginBottom: 1.5, 583 | }, 584 | labelBeside: { 585 | fontSize: 12, 586 | marginLeft: 20, 587 | }, 588 | }); 589 | 590 | export default withDimensions(TabBarBottom); 591 | -------------------------------------------------------------------------------- /src/views/CrossFadeIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native'; 3 | import Animated from 'react-native-reanimated'; 4 | import { NavigationRoute } from 'react-navigation'; 5 | 6 | type Props = { 7 | route: NavigationRoute; 8 | horizontal?: boolean; 9 | activeOpacity: number; 10 | inactiveOpacity: number; 11 | activeTintColor?: string; 12 | inactiveTintColor?: string; 13 | renderIcon: (props: { 14 | route: NavigationRoute; 15 | focused: boolean; 16 | tintColor?: string; 17 | horizontal?: boolean; 18 | }) => React.ReactNode; 19 | style: StyleProp; 20 | }; 21 | 22 | export default class TabBarIcon extends React.Component { 23 | render() { 24 | const { 25 | route, 26 | activeOpacity, 27 | inactiveOpacity, 28 | activeTintColor, 29 | inactiveTintColor, 30 | renderIcon, 31 | horizontal, 32 | style, 33 | } = this.props; 34 | 35 | // We render the icon twice at the same position on top of each other: 36 | // active and inactive one, so we can fade between them. 37 | return ( 38 | 39 | 40 | {renderIcon({ 41 | route, 42 | focused: true, 43 | horizontal, 44 | tintColor: activeTintColor, 45 | })} 46 | 47 | 48 | {renderIcon({ 49 | route, 50 | focused: false, 51 | horizontal, 52 | tintColor: inactiveTintColor, 53 | })} 54 | 55 | 56 | ); 57 | } 58 | } 59 | 60 | const styles = StyleSheet.create({ 61 | icon: { 62 | // We render the icon twice at the same position on top of each other: 63 | // active and inactive one, so we can fade between them: 64 | // Cover the whole iconContainer: 65 | position: 'absolute', 66 | alignSelf: 'center', 67 | alignItems: 'center', 68 | justifyContent: 'center', 69 | height: '100%', 70 | width: '100%', 71 | // Workaround for react-native >= 0.54 layout bug 72 | minWidth: 25, 73 | }, 74 | }); 75 | -------------------------------------------------------------------------------- /src/views/MaterialTopTabBar.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { View, StyleSheet } from 'react-native'; 3 | import { TabBar } from 'react-native-tab-view'; 4 | import Animated from 'react-native-reanimated'; 5 | import { NavigationRoute } from 'react-navigation'; 6 | import { MaterialTabBarProps } from '../types'; 7 | 8 | type Scene = { route: NavigationRoute; focused: boolean; color: string }; 9 | 10 | export default class TabBarTop extends React.PureComponent< 11 | MaterialTabBarProps 12 | > { 13 | static defaultProps = { 14 | activeTintColor: 'rgba(255, 255, 255, 1)', 15 | inactiveTintColor: 'rgba(255, 255, 255, 0.7)', 16 | showIcon: false, 17 | showLabel: true, 18 | upperCaseLabel: true, 19 | allowFontScaling: true, 20 | }; 21 | 22 | _renderLabel = ({ route, focused, color }: Scene) => { 23 | const { 24 | showLabel, 25 | upperCaseLabel, 26 | labelStyle, 27 | allowFontScaling, 28 | } = this.props; 29 | 30 | if (showLabel === false) { 31 | return null; 32 | } 33 | 34 | const label = this.props.getLabelText({ route }); 35 | 36 | if (typeof label === 'string') { 37 | return ( 38 | 42 | {upperCaseLabel ? label.toUpperCase() : label} 43 | 44 | ); 45 | } 46 | 47 | if (typeof label === 'function') { 48 | return label({ focused, tintColor: color }); 49 | } 50 | 51 | return label; 52 | }; 53 | 54 | _renderIcon = ({ route, focused, color }: Scene) => { 55 | const { renderIcon, showIcon, iconStyle } = this.props; 56 | 57 | if (showIcon === false) { 58 | return null; 59 | } 60 | 61 | return ( 62 | 63 | {renderIcon({ 64 | route, 65 | focused, 66 | tintColor: color, 67 | })} 68 | 69 | ); 70 | }; 71 | 72 | render() { 73 | const { 74 | navigation, 75 | activeTintColor, 76 | inactiveTintColor, 77 | /* eslint-disable @typescript-eslint/no-unused-vars */ 78 | renderIcon, 79 | getLabelText, 80 | allowFontScaling, 81 | showLabel, 82 | showIcon, 83 | upperCaseLabel, 84 | tabBarPosition, 85 | screenProps, 86 | iconStyle, 87 | /* eslint-enable @typescript-eslint/no-unused-vars */ 88 | ...rest 89 | } = this.props; 90 | 91 | return ( 92 | 100 | ); 101 | } 102 | } 103 | 104 | const styles = StyleSheet.create({ 105 | icon: { 106 | height: 24, 107 | width: 24, 108 | }, 109 | label: { 110 | textAlign: 'center', 111 | fontSize: 13, 112 | margin: 4, 113 | backgroundColor: 'transparent', 114 | }, 115 | }); 116 | -------------------------------------------------------------------------------- /src/views/ResourceSavingScene.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Platform, StyleSheet, View } from 'react-native'; 3 | 4 | // eslint-disable-next-line import/no-unresolved 5 | import { Screen, screensEnabled } from 'react-native-screens'; 6 | 7 | type Props = { 8 | isVisible: boolean; 9 | children: React.ReactNode; 10 | style?: any; 11 | }; 12 | 13 | const FAR_FAR_AWAY = 3000; // this should be big enough to move the whole view out of its container 14 | 15 | export default class ResourceSavingScene extends React.Component { 16 | render() { 17 | if (screensEnabled && screensEnabled()) { 18 | const { isVisible, ...rest } = this.props; 19 | // @ts-ignore 20 | return ; 21 | } 22 | 23 | const { isVisible, children, style, ...rest } = this.props; 24 | 25 | return ( 26 | 37 | 38 | {children} 39 | 40 | 41 | ); 42 | } 43 | } 44 | 45 | const styles = StyleSheet.create({ 46 | container: { 47 | flex: 1, 48 | overflow: 'hidden', 49 | }, 50 | attached: { 51 | flex: 1, 52 | }, 53 | detached: { 54 | flex: 1, 55 | top: FAR_FAR_AWAY, 56 | }, 57 | }); 58 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { 5 | "react-navigation-tabs": ["./src/index"] 6 | }, 7 | "allowUnreachableCode": false, 8 | "allowUnusedLabels": false, 9 | "esModuleInterop": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "jsx": "react", 12 | "lib": ["esnext"], 13 | "module": "esnext", 14 | "moduleResolution": "node", 15 | "noFallthroughCasesInSwitch": true, 16 | "noImplicitReturns": true, 17 | "noImplicitUseStrict": false, 18 | "noStrictGenericChecks": false, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "resolveJsonModule": true, 22 | "skipLibCheck": true, 23 | "strict": true, 24 | "target": "esnext" 25 | } 26 | } 27 | --------------------------------------------------------------------------------