mirror of
https://github.com/status-im/react-navigation.git
synced 2025-02-24 09:08:15 +00:00
Move examples to https://github.com/react-navigation/examples
This commit is contained in:
Brent Vatne
parent
99c4d448b2
commit
36775007b0
@ -132,8 +132,10 @@ If any errors occur you'll either have to manually fix them or you can attempt t
|
||||
### Run the Example App
|
||||
|
||||
```bash
|
||||
git@github.com:react-navigation/examples.git
|
||||
cd examples
|
||||
yarn install
|
||||
cd examples/NavigationPlayground
|
||||
cd NavigationPlayground
|
||||
yarn install
|
||||
yarn start
|
||||
```
|
||||
@ -142,9 +144,9 @@ You will be show a QR code to scan in the Expo app. You can get Expo [here](http
|
||||
|
||||
All examples:
|
||||
|
||||
- [NavigationPlayground](https://github.com/react-community/react-navigation/tree/master/examples/NavigationPlayground)
|
||||
- [ReduxExample](https://github.com/react-community/react-navigation/tree/master/examples/ReduxExample)
|
||||
- [SafeAreaExample](https://github.com/react-community/react-navigation/tree/master/examples/SafeAreaExample)
|
||||
- [NavigationPlayground](https://github.com/react-community/examples/tree/master/NavigationPlayground)
|
||||
- [ReduxExample](https://github.com/react-community/examples/tree/master/ReduxExample)
|
||||
- [SafeAreaExample](https://github.com/react-community/examples/tree/master/SafeAreaExample)
|
||||
|
||||
Commands are the same as above for any of the example apps. If you run into any issues, please try the following to start fresh:
|
||||
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
{
|
||||
"presets": ["babel-preset-expo"],
|
||||
"plugins": [
|
||||
["module-resolver", {
|
||||
"alias": {
|
||||
"react-native": "./node_modules/react-native",
|
||||
"react": "./node_modules/react"
|
||||
}
|
||||
}]
|
||||
],
|
||||
"env": {
|
||||
"development": {
|
||||
"plugins": ["transform-react-jsx-source"]
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,81 +0,0 @@
|
||||
[ignore]
|
||||
; We fork some components by platform
|
||||
.*/*[.]android.js
|
||||
|
||||
; Ignore "BUCK" generated dirs
|
||||
<PROJECT_ROOT>/\.buckd/
|
||||
|
||||
; Ignore unexpected extra "@providesModule"
|
||||
.*/node_modules/.*/node_modules/fbjs/.*
|
||||
|
||||
; Ignore duplicate module providers
|
||||
; For RN Apps installed via npm, "Libraries" folder is inside
|
||||
; "node_modules/react-native" but in the source repo it is in the root
|
||||
.*/Libraries/react-native/React.js
|
||||
|
||||
; Ignore polyfills
|
||||
.*/Libraries/polyfills/.*
|
||||
|
||||
.*/react-navigation/node_modules/.*
|
||||
|
||||
; Additional create-react-native-app ignores
|
||||
|
||||
; Ignore duplicate module providers
|
||||
.*/node_modules/fbemitter/lib/*
|
||||
|
||||
; Ignore misbehaving dev-dependencies
|
||||
.*/node_modules/xdl/build/*
|
||||
.*/node_modules/reqwest/tests/*
|
||||
|
||||
; Ignore missing expo-sdk dependencies (temporarily)
|
||||
; https://github.com/expo/expo/issues/162
|
||||
.*/node_modules/expo/src/*
|
||||
|
||||
; Ignore react-native-fbads dependency of the expo sdk
|
||||
.*/node_modules/react-native-fbads/*
|
||||
|
||||
.*/react-navigation/lib-rn/.*
|
||||
.*/react-navigation/lib/.*
|
||||
|
||||
.*/react-navigation/examples/ReduxExample/.*
|
||||
.*/react-navigation/website/.*
|
||||
|
||||
; This package is required by Expo and causes Flow errors
|
||||
.*/node_modules/react-native-gesture-handler/.*
|
||||
|
||||
[include]
|
||||
|
||||
[libs]
|
||||
node_modules/react-native/Libraries/react-native/react-native-interface.js
|
||||
node_modules/react-native/flow/
|
||||
|
||||
[options]
|
||||
module.system=haste
|
||||
|
||||
emoji=true
|
||||
|
||||
experimental.strict_type_args=true
|
||||
|
||||
munge_underscores=true
|
||||
|
||||
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'
|
||||
module.file_ext=.js
|
||||
module.file_ext=.jsx
|
||||
module.file_ext=.json
|
||||
module.file_ext=.native.js
|
||||
|
||||
suppress_type=$FlowIssue
|
||||
suppress_type=$FlowFixMe
|
||||
suppress_type=$FlowFixMeProps
|
||||
suppress_type=$FlowFixMeState
|
||||
suppress_type=$FixMe
|
||||
|
||||
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(5[0-6]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
|
||||
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(5[0-6]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
|
||||
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
|
||||
suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
|
||||
|
||||
unsafe.enable_getters_and_setters=true
|
||||
|
||||
[version]
|
||||
^0.56.0
|
||||
3
examples/NavigationPlayground/.gitignore
vendored
3
examples/NavigationPlayground/.gitignore
vendored
@ -1,3 +0,0 @@
|
||||
node_modules/
|
||||
.expo/
|
||||
npm-debug.*
|
||||
@ -1 +0,0 @@
|
||||
{}
|
||||
@ -1,2 +0,0 @@
|
||||
import App from './js/App';
|
||||
export default App;
|
||||
@ -1,9 +0,0 @@
|
||||
import React from 'react';
|
||||
import App from './App';
|
||||
|
||||
import renderer from 'react-test-renderer';
|
||||
|
||||
it('renders without crashing', () => {
|
||||
const rendered = renderer.create(<App />).toJSON();
|
||||
expect(rendered).toBeTruthy();
|
||||
});
|
||||
@ -1,9 +0,0 @@
|
||||
# Navigation Playground Example
|
||||
|
||||
A playground for experimenting with react-navigation in a pure-JS React Native app.
|
||||
|
||||
## Usage
|
||||
|
||||
Please see the [Contributors Guide](https://reactnavigation.org/docs/guides/contributors#Run-the-Example-App) for instructions on running these example apps.
|
||||
|
||||
You can view this example application directly on your phone by visiting [our expo demo](https://exp.host/@react-navigation/NavigationPlayground).
|
||||
@ -1,26 +0,0 @@
|
||||
{
|
||||
"expo": {
|
||||
"name": "NavigationPlayground",
|
||||
"description": "Try out react-navigation now with this awesome playground",
|
||||
"version": "1.0.0",
|
||||
"slug": "NavigationPlayground",
|
||||
"privacy": "public",
|
||||
"orientation": "portrait",
|
||||
"primaryColor": "#cccccc",
|
||||
"icon": "./assets/icons/icon.png",
|
||||
"splash": {
|
||||
"image": "./assets/icons/splash.png"
|
||||
},
|
||||
"sdkVersion": "24.0.0",
|
||||
"entryPoint": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
|
||||
"packagerOpts": {
|
||||
"assetExts": [
|
||||
"ttf",
|
||||
"mp4"
|
||||
]
|
||||
},
|
||||
"ios": {
|
||||
"supportsTablet": true
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 145 KiB |
@ -1,32 +0,0 @@
|
||||
// flow-typed signature: 5964a245d3129ecd50da1f74a2f86454
|
||||
// flow-typed version: <<STUB>>/babel-jest_v^21.0.0/flow_v0.53.0
|
||||
|
||||
/**
|
||||
* This is an autogenerated libdef stub for:
|
||||
*
|
||||
* 'babel-jest'
|
||||
*
|
||||
* Fill this stub out by replacing all the `any` types.
|
||||
*
|
||||
* Once filled out, we encourage you to share your work with the
|
||||
* community by sending a pull request to:
|
||||
* https://github.com/flowtype/flow-typed
|
||||
*/
|
||||
|
||||
declare module 'babel-jest' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* We include stubs for each file inside this npm package in case you need to
|
||||
* require those files directly. Feel free to delete any files that aren't
|
||||
* needed.
|
||||
*/
|
||||
declare module 'babel-jest/build/index' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
// Filename aliases
|
||||
declare module 'babel-jest/build/index.js' {
|
||||
declare module.exports: $Exports<'babel-jest/build/index'>;
|
||||
}
|
||||
@ -1,676 +0,0 @@
|
||||
// flow-typed signature: 4fb1f6897647ab1ad25d819aa06d2d6c
|
||||
// flow-typed version: <<STUB>>/expo_v^22.0.0/flow_v0.53.0
|
||||
|
||||
/**
|
||||
* This is an autogenerated libdef stub for:
|
||||
*
|
||||
* 'expo'
|
||||
*
|
||||
* Fill this stub out by replacing all the `any` types.
|
||||
*
|
||||
* Once filled out, we encourage you to share your work with the
|
||||
* community by sending a pull request to:
|
||||
* https://github.com/flowtype/flow-typed
|
||||
*/
|
||||
|
||||
declare module 'expo' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* We include stubs for each file inside this npm package in case you need to
|
||||
* require those files directly. Feel free to delete any files that aren't
|
||||
* needed.
|
||||
*/
|
||||
declare module 'expo/AppEntry' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/__tests__/Amplitude-test' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/__tests__/AuthSession-test' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/__tests__/Constants-test' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/__tests__/ErrorRecovery-test' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/__tests__/Expo-test' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/__tests__/Facebook-test' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/__tests__/Location-test' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/__tests__/Notifications-test' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/__tests__/SecureStore-test' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/__tests__/Segment-test' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/__tests__/WebBrowser-test' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/Amplitude' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/apisAreAvailable' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/AppLoading' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/AppLoadingNativeWrapper.android' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/AppLoadingNativeWrapper.ios' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/Asset' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/Audio' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/AuthSession' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/AV' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/BarCodeScanner' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/BlurView.android' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/BlurView.ios' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/Brightness' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/Camera' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/Constants' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/Contacts' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/DangerZone' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/DocumentPicker' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/ErrorRecovery' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/Expo' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/Facebook' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/FacebookAds/AdSettings' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/FacebookAds/BannerViewManager' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/FacebookAds/index' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/FacebookAds/InterstitialAdManager' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/FacebookAds/NativeAdsManager' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/FacebookAds/withNativeAd' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/FileSystem' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/Fingerprint' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/Font' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/GLView' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/Google' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/Icon' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/ImagePicker' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/IntentLauncherAndroid' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/KeepAwake' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/LegacyAsyncStorage.android' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/LegacyAsyncStorage.ios' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/lib/Queue' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/LinearGradient.android' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/LinearGradient.ios' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/Location' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/Logs' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/Modal/Modal' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/Modal/ModalHost' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/Modal/ModalImplementation' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/Modal/PureContainer' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/Notifications' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/Payments' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/Pedometer' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/Permissions' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/registerRootComponent' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/RNAdMobBanner' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/RNAdMobInterstitial' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/RNAdMobRewarded' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/RNPublisherBanner' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/RootErrorBoundary' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/ScreenOrientation' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/SecureStore' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/Segment' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/sensor/__tests__/Accelerometer-test' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/sensor/__tests__/DeviceMotion-test' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/sensor/__tests__/DeviceSensor-test' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/sensor/__tests__/Gyroscope-test' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/sensor/__tests__/Magnetometer-test' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/sensor/Accelerometer' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/sensor/DeviceMotion' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/sensor/DeviceSensor' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/sensor/Gyroscope' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/sensor/Magnetometer' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/sensor/MagnetometerUncalibrated' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/sensor/ThreeAxisSensor' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/Speech' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/SQLite' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/Svg' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/takeSnapshotAsync' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/Util' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/Video' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/src/WebBrowser' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/tools/hashAssetFiles' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'expo/tools/LogReporter' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
// Filename aliases
|
||||
declare module 'expo/AppEntry.js' {
|
||||
declare module.exports: $Exports<'expo/AppEntry'>;
|
||||
}
|
||||
declare module 'expo/src/__tests__/Amplitude-test.js' {
|
||||
declare module.exports: $Exports<'expo/src/__tests__/Amplitude-test'>;
|
||||
}
|
||||
declare module 'expo/src/__tests__/AuthSession-test.js' {
|
||||
declare module.exports: $Exports<'expo/src/__tests__/AuthSession-test'>;
|
||||
}
|
||||
declare module 'expo/src/__tests__/Constants-test.js' {
|
||||
declare module.exports: $Exports<'expo/src/__tests__/Constants-test'>;
|
||||
}
|
||||
declare module 'expo/src/__tests__/ErrorRecovery-test.js' {
|
||||
declare module.exports: $Exports<'expo/src/__tests__/ErrorRecovery-test'>;
|
||||
}
|
||||
declare module 'expo/src/__tests__/Expo-test.js' {
|
||||
declare module.exports: $Exports<'expo/src/__tests__/Expo-test'>;
|
||||
}
|
||||
declare module 'expo/src/__tests__/Facebook-test.js' {
|
||||
declare module.exports: $Exports<'expo/src/__tests__/Facebook-test'>;
|
||||
}
|
||||
declare module 'expo/src/__tests__/Location-test.js' {
|
||||
declare module.exports: $Exports<'expo/src/__tests__/Location-test'>;
|
||||
}
|
||||
declare module 'expo/src/__tests__/Notifications-test.js' {
|
||||
declare module.exports: $Exports<'expo/src/__tests__/Notifications-test'>;
|
||||
}
|
||||
declare module 'expo/src/__tests__/SecureStore-test.js' {
|
||||
declare module.exports: $Exports<'expo/src/__tests__/SecureStore-test'>;
|
||||
}
|
||||
declare module 'expo/src/__tests__/Segment-test.js' {
|
||||
declare module.exports: $Exports<'expo/src/__tests__/Segment-test'>;
|
||||
}
|
||||
declare module 'expo/src/__tests__/WebBrowser-test.js' {
|
||||
declare module.exports: $Exports<'expo/src/__tests__/WebBrowser-test'>;
|
||||
}
|
||||
declare module 'expo/src/Amplitude.js' {
|
||||
declare module.exports: $Exports<'expo/src/Amplitude'>;
|
||||
}
|
||||
declare module 'expo/src/apisAreAvailable.js' {
|
||||
declare module.exports: $Exports<'expo/src/apisAreAvailable'>;
|
||||
}
|
||||
declare module 'expo/src/AppLoading.js' {
|
||||
declare module.exports: $Exports<'expo/src/AppLoading'>;
|
||||
}
|
||||
declare module 'expo/src/AppLoadingNativeWrapper.android.js' {
|
||||
declare module.exports: $Exports<'expo/src/AppLoadingNativeWrapper.android'>;
|
||||
}
|
||||
declare module 'expo/src/AppLoadingNativeWrapper.ios.js' {
|
||||
declare module.exports: $Exports<'expo/src/AppLoadingNativeWrapper.ios'>;
|
||||
}
|
||||
declare module 'expo/src/Asset.js' {
|
||||
declare module.exports: $Exports<'expo/src/Asset'>;
|
||||
}
|
||||
declare module 'expo/src/Audio.js' {
|
||||
declare module.exports: $Exports<'expo/src/Audio'>;
|
||||
}
|
||||
declare module 'expo/src/AuthSession.js' {
|
||||
declare module.exports: $Exports<'expo/src/AuthSession'>;
|
||||
}
|
||||
declare module 'expo/src/AV.js' {
|
||||
declare module.exports: $Exports<'expo/src/AV'>;
|
||||
}
|
||||
declare module 'expo/src/BarCodeScanner.js' {
|
||||
declare module.exports: $Exports<'expo/src/BarCodeScanner'>;
|
||||
}
|
||||
declare module 'expo/src/BlurView.android.js' {
|
||||
declare module.exports: $Exports<'expo/src/BlurView.android'>;
|
||||
}
|
||||
declare module 'expo/src/BlurView.ios.js' {
|
||||
declare module.exports: $Exports<'expo/src/BlurView.ios'>;
|
||||
}
|
||||
declare module 'expo/src/Brightness.js' {
|
||||
declare module.exports: $Exports<'expo/src/Brightness'>;
|
||||
}
|
||||
declare module 'expo/src/Camera.js' {
|
||||
declare module.exports: $Exports<'expo/src/Camera'>;
|
||||
}
|
||||
declare module 'expo/src/Constants.js' {
|
||||
declare module.exports: $Exports<'expo/src/Constants'>;
|
||||
}
|
||||
declare module 'expo/src/Contacts.js' {
|
||||
declare module.exports: $Exports<'expo/src/Contacts'>;
|
||||
}
|
||||
declare module 'expo/src/DangerZone.js' {
|
||||
declare module.exports: $Exports<'expo/src/DangerZone'>;
|
||||
}
|
||||
declare module 'expo/src/DocumentPicker.js' {
|
||||
declare module.exports: $Exports<'expo/src/DocumentPicker'>;
|
||||
}
|
||||
declare module 'expo/src/ErrorRecovery.js' {
|
||||
declare module.exports: $Exports<'expo/src/ErrorRecovery'>;
|
||||
}
|
||||
declare module 'expo/src/Expo.js' {
|
||||
declare module.exports: $Exports<'expo/src/Expo'>;
|
||||
}
|
||||
declare module 'expo/src/Facebook.js' {
|
||||
declare module.exports: $Exports<'expo/src/Facebook'>;
|
||||
}
|
||||
declare module 'expo/src/FacebookAds/AdSettings.js' {
|
||||
declare module.exports: $Exports<'expo/src/FacebookAds/AdSettings'>;
|
||||
}
|
||||
declare module 'expo/src/FacebookAds/BannerViewManager.js' {
|
||||
declare module.exports: $Exports<'expo/src/FacebookAds/BannerViewManager'>;
|
||||
}
|
||||
declare module 'expo/src/FacebookAds/index.js' {
|
||||
declare module.exports: $Exports<'expo/src/FacebookAds/index'>;
|
||||
}
|
||||
declare module 'expo/src/FacebookAds/InterstitialAdManager.js' {
|
||||
declare module.exports: $Exports<'expo/src/FacebookAds/InterstitialAdManager'>;
|
||||
}
|
||||
declare module 'expo/src/FacebookAds/NativeAdsManager.js' {
|
||||
declare module.exports: $Exports<'expo/src/FacebookAds/NativeAdsManager'>;
|
||||
}
|
||||
declare module 'expo/src/FacebookAds/withNativeAd.js' {
|
||||
declare module.exports: $Exports<'expo/src/FacebookAds/withNativeAd'>;
|
||||
}
|
||||
declare module 'expo/src/FileSystem.js' {
|
||||
declare module.exports: $Exports<'expo/src/FileSystem'>;
|
||||
}
|
||||
declare module 'expo/src/Fingerprint.js' {
|
||||
declare module.exports: $Exports<'expo/src/Fingerprint'>;
|
||||
}
|
||||
declare module 'expo/src/Font.js' {
|
||||
declare module.exports: $Exports<'expo/src/Font'>;
|
||||
}
|
||||
declare module 'expo/src/GLView.js' {
|
||||
declare module.exports: $Exports<'expo/src/GLView'>;
|
||||
}
|
||||
declare module 'expo/src/Google.js' {
|
||||
declare module.exports: $Exports<'expo/src/Google'>;
|
||||
}
|
||||
declare module 'expo/src/Icon.js' {
|
||||
declare module.exports: $Exports<'expo/src/Icon'>;
|
||||
}
|
||||
declare module 'expo/src/ImagePicker.js' {
|
||||
declare module.exports: $Exports<'expo/src/ImagePicker'>;
|
||||
}
|
||||
declare module 'expo/src/IntentLauncherAndroid.js' {
|
||||
declare module.exports: $Exports<'expo/src/IntentLauncherAndroid'>;
|
||||
}
|
||||
declare module 'expo/src/KeepAwake.js' {
|
||||
declare module.exports: $Exports<'expo/src/KeepAwake'>;
|
||||
}
|
||||
declare module 'expo/src/LegacyAsyncStorage.android.js' {
|
||||
declare module.exports: $Exports<'expo/src/LegacyAsyncStorage.android'>;
|
||||
}
|
||||
declare module 'expo/src/LegacyAsyncStorage.ios.js' {
|
||||
declare module.exports: $Exports<'expo/src/LegacyAsyncStorage.ios'>;
|
||||
}
|
||||
declare module 'expo/src/lib/Queue.js' {
|
||||
declare module.exports: $Exports<'expo/src/lib/Queue'>;
|
||||
}
|
||||
declare module 'expo/src/LinearGradient.android.js' {
|
||||
declare module.exports: $Exports<'expo/src/LinearGradient.android'>;
|
||||
}
|
||||
declare module 'expo/src/LinearGradient.ios.js' {
|
||||
declare module.exports: $Exports<'expo/src/LinearGradient.ios'>;
|
||||
}
|
||||
declare module 'expo/src/Location.js' {
|
||||
declare module.exports: $Exports<'expo/src/Location'>;
|
||||
}
|
||||
declare module 'expo/src/Logs.js' {
|
||||
declare module.exports: $Exports<'expo/src/Logs'>;
|
||||
}
|
||||
declare module 'expo/src/Modal/Modal.js' {
|
||||
declare module.exports: $Exports<'expo/src/Modal/Modal'>;
|
||||
}
|
||||
declare module 'expo/src/Modal/ModalHost.js' {
|
||||
declare module.exports: $Exports<'expo/src/Modal/ModalHost'>;
|
||||
}
|
||||
declare module 'expo/src/Modal/ModalImplementation.js' {
|
||||
declare module.exports: $Exports<'expo/src/Modal/ModalImplementation'>;
|
||||
}
|
||||
declare module 'expo/src/Modal/PureContainer.js' {
|
||||
declare module.exports: $Exports<'expo/src/Modal/PureContainer'>;
|
||||
}
|
||||
declare module 'expo/src/Notifications.js' {
|
||||
declare module.exports: $Exports<'expo/src/Notifications'>;
|
||||
}
|
||||
declare module 'expo/src/Payments.js' {
|
||||
declare module.exports: $Exports<'expo/src/Payments'>;
|
||||
}
|
||||
declare module 'expo/src/Pedometer.js' {
|
||||
declare module.exports: $Exports<'expo/src/Pedometer'>;
|
||||
}
|
||||
declare module 'expo/src/Permissions.js' {
|
||||
declare module.exports: $Exports<'expo/src/Permissions'>;
|
||||
}
|
||||
declare module 'expo/src/registerRootComponent.js' {
|
||||
declare module.exports: $Exports<'expo/src/registerRootComponent'>;
|
||||
}
|
||||
declare module 'expo/src/RNAdMobBanner.js' {
|
||||
declare module.exports: $Exports<'expo/src/RNAdMobBanner'>;
|
||||
}
|
||||
declare module 'expo/src/RNAdMobInterstitial.js' {
|
||||
declare module.exports: $Exports<'expo/src/RNAdMobInterstitial'>;
|
||||
}
|
||||
declare module 'expo/src/RNAdMobRewarded.js' {
|
||||
declare module.exports: $Exports<'expo/src/RNAdMobRewarded'>;
|
||||
}
|
||||
declare module 'expo/src/RNPublisherBanner.js' {
|
||||
declare module.exports: $Exports<'expo/src/RNPublisherBanner'>;
|
||||
}
|
||||
declare module 'expo/src/RootErrorBoundary.js' {
|
||||
declare module.exports: $Exports<'expo/src/RootErrorBoundary'>;
|
||||
}
|
||||
declare module 'expo/src/ScreenOrientation.js' {
|
||||
declare module.exports: $Exports<'expo/src/ScreenOrientation'>;
|
||||
}
|
||||
declare module 'expo/src/SecureStore.js' {
|
||||
declare module.exports: $Exports<'expo/src/SecureStore'>;
|
||||
}
|
||||
declare module 'expo/src/Segment.js' {
|
||||
declare module.exports: $Exports<'expo/src/Segment'>;
|
||||
}
|
||||
declare module 'expo/src/sensor/__tests__/Accelerometer-test.js' {
|
||||
declare module.exports: $Exports<'expo/src/sensor/__tests__/Accelerometer-test'>;
|
||||
}
|
||||
declare module 'expo/src/sensor/__tests__/DeviceMotion-test.js' {
|
||||
declare module.exports: $Exports<'expo/src/sensor/__tests__/DeviceMotion-test'>;
|
||||
}
|
||||
declare module 'expo/src/sensor/__tests__/DeviceSensor-test.js' {
|
||||
declare module.exports: $Exports<'expo/src/sensor/__tests__/DeviceSensor-test'>;
|
||||
}
|
||||
declare module 'expo/src/sensor/__tests__/Gyroscope-test.js' {
|
||||
declare module.exports: $Exports<'expo/src/sensor/__tests__/Gyroscope-test'>;
|
||||
}
|
||||
declare module 'expo/src/sensor/__tests__/Magnetometer-test.js' {
|
||||
declare module.exports: $Exports<'expo/src/sensor/__tests__/Magnetometer-test'>;
|
||||
}
|
||||
declare module 'expo/src/sensor/Accelerometer.js' {
|
||||
declare module.exports: $Exports<'expo/src/sensor/Accelerometer'>;
|
||||
}
|
||||
declare module 'expo/src/sensor/DeviceMotion.js' {
|
||||
declare module.exports: $Exports<'expo/src/sensor/DeviceMotion'>;
|
||||
}
|
||||
declare module 'expo/src/sensor/DeviceSensor.js' {
|
||||
declare module.exports: $Exports<'expo/src/sensor/DeviceSensor'>;
|
||||
}
|
||||
declare module 'expo/src/sensor/Gyroscope.js' {
|
||||
declare module.exports: $Exports<'expo/src/sensor/Gyroscope'>;
|
||||
}
|
||||
declare module 'expo/src/sensor/Magnetometer.js' {
|
||||
declare module.exports: $Exports<'expo/src/sensor/Magnetometer'>;
|
||||
}
|
||||
declare module 'expo/src/sensor/MagnetometerUncalibrated.js' {
|
||||
declare module.exports: $Exports<'expo/src/sensor/MagnetometerUncalibrated'>;
|
||||
}
|
||||
declare module 'expo/src/sensor/ThreeAxisSensor.js' {
|
||||
declare module.exports: $Exports<'expo/src/sensor/ThreeAxisSensor'>;
|
||||
}
|
||||
declare module 'expo/src/Speech.js' {
|
||||
declare module.exports: $Exports<'expo/src/Speech'>;
|
||||
}
|
||||
declare module 'expo/src/SQLite.js' {
|
||||
declare module.exports: $Exports<'expo/src/SQLite'>;
|
||||
}
|
||||
declare module 'expo/src/Svg.js' {
|
||||
declare module.exports: $Exports<'expo/src/Svg'>;
|
||||
}
|
||||
declare module 'expo/src/takeSnapshotAsync.js' {
|
||||
declare module.exports: $Exports<'expo/src/takeSnapshotAsync'>;
|
||||
}
|
||||
declare module 'expo/src/Util.js' {
|
||||
declare module.exports: $Exports<'expo/src/Util'>;
|
||||
}
|
||||
declare module 'expo/src/Video.js' {
|
||||
declare module.exports: $Exports<'expo/src/Video'>;
|
||||
}
|
||||
declare module 'expo/src/WebBrowser.js' {
|
||||
declare module.exports: $Exports<'expo/src/WebBrowser'>;
|
||||
}
|
||||
declare module 'expo/tools/hashAssetFiles.js' {
|
||||
declare module.exports: $Exports<'expo/tools/hashAssetFiles'>;
|
||||
}
|
||||
declare module 'expo/tools/LogReporter.js' {
|
||||
declare module.exports: $Exports<'expo/tools/LogReporter'>;
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
// flow-typed signature: 6a5610678d4b01e13bbfbbc62bdaf583
|
||||
// flow-typed version: 3817bc6980/flow-bin_v0.x.x/flow_>=v0.25.x
|
||||
|
||||
declare module "flow-bin" {
|
||||
declare module.exports: string;
|
||||
}
|
||||
@ -1,46 +0,0 @@
|
||||
// flow-typed signature: 72ab5b9c7dcb88b82de627702a0db27a
|
||||
// flow-typed version: <<STUB>>/jest-expo_v^22.0.0/flow_v0.53.0
|
||||
|
||||
/**
|
||||
* This is an autogenerated libdef stub for:
|
||||
*
|
||||
* 'jest-expo'
|
||||
*
|
||||
* Fill this stub out by replacing all the `any` types.
|
||||
*
|
||||
* Once filled out, we encourage you to share your work with the
|
||||
* community by sending a pull request to:
|
||||
* https://github.com/flowtype/flow-typed
|
||||
*/
|
||||
|
||||
declare module 'jest-expo' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* We include stubs for each file inside this npm package in case you need to
|
||||
* require those files directly. Feel free to delete any files that aren't
|
||||
* needed.
|
||||
*/
|
||||
declare module 'jest-expo/src/createMockConstants' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'jest-expo/src/expoModules' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'jest-expo/src/setup' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
// Filename aliases
|
||||
declare module 'jest-expo/src/createMockConstants.js' {
|
||||
declare module.exports: $Exports<'jest-expo/src/createMockConstants'>;
|
||||
}
|
||||
declare module 'jest-expo/src/expoModules.js' {
|
||||
declare module.exports: $Exports<'jest-expo/src/expoModules'>;
|
||||
}
|
||||
declare module 'jest-expo/src/setup.js' {
|
||||
declare module.exports: $Exports<'jest-expo/src/setup'>;
|
||||
}
|
||||
@ -1,528 +0,0 @@
|
||||
// flow-typed signature: a0369c11661f437ec4ccdd805579ddcf
|
||||
// flow-typed version: c4b9fea7c9/jest_v20.x.x/flow_>=v0.33.x
|
||||
|
||||
type JestMockFn = {
|
||||
(...args: Array<any>): any,
|
||||
/**
|
||||
* An object for introspecting mock calls
|
||||
*/
|
||||
mock: {
|
||||
/**
|
||||
* An array that represents all calls that have been made into this mock
|
||||
* function. Each call is represented by an array of arguments that were
|
||||
* passed during the call.
|
||||
*/
|
||||
calls: Array<Array<any>>,
|
||||
/**
|
||||
* An array that contains all the object instances that have been
|
||||
* instantiated from this mock function.
|
||||
*/
|
||||
instances: mixed
|
||||
},
|
||||
/**
|
||||
* Resets all information stored in the mockFn.mock.calls and
|
||||
* mockFn.mock.instances arrays. Often this is useful when you want to clean
|
||||
* up a mock's usage data between two assertions.
|
||||
*/
|
||||
mockClear(): Function,
|
||||
/**
|
||||
* Resets all information stored in the mock. This is useful when you want to
|
||||
* completely restore a mock back to its initial state.
|
||||
*/
|
||||
mockReset(): Function,
|
||||
/**
|
||||
* Removes the mock and restores the initial implementation. This is useful
|
||||
* when you want to mock functions in certain test cases and restore the
|
||||
* original implementation in others. Beware that mockFn.mockRestore only
|
||||
* works when mock was created with jest.spyOn. Thus you have to take care of
|
||||
* restoration yourself when manually assigning jest.fn().
|
||||
*/
|
||||
mockRestore(): Function,
|
||||
/**
|
||||
* Accepts a function that should be used as the implementation of the mock.
|
||||
* The mock itself will still record all calls that go into and instances
|
||||
* that come from itself -- the only difference is that the implementation
|
||||
* will also be executed when the mock is called.
|
||||
*/
|
||||
mockImplementation(fn: Function): JestMockFn,
|
||||
/**
|
||||
* Accepts a function that will be used as an implementation of the mock for
|
||||
* one call to the mocked function. Can be chained so that multiple function
|
||||
* calls produce different results.
|
||||
*/
|
||||
mockImplementationOnce(fn: Function): JestMockFn,
|
||||
/**
|
||||
* Just a simple sugar function for returning `this`
|
||||
*/
|
||||
mockReturnThis(): void,
|
||||
/**
|
||||
* Deprecated: use jest.fn(() => value) instead
|
||||
*/
|
||||
mockReturnValue(value: any): JestMockFn,
|
||||
/**
|
||||
* Sugar for only returning a value once inside your mock
|
||||
*/
|
||||
mockReturnValueOnce(value: any): JestMockFn
|
||||
};
|
||||
|
||||
type JestAsymmetricEqualityType = {
|
||||
/**
|
||||
* A custom Jasmine equality tester
|
||||
*/
|
||||
asymmetricMatch(value: mixed): boolean
|
||||
};
|
||||
|
||||
type JestCallsType = {
|
||||
allArgs(): mixed,
|
||||
all(): mixed,
|
||||
any(): boolean,
|
||||
count(): number,
|
||||
first(): mixed,
|
||||
mostRecent(): mixed,
|
||||
reset(): void
|
||||
};
|
||||
|
||||
type JestClockType = {
|
||||
install(): void,
|
||||
mockDate(date: Date): void,
|
||||
tick(milliseconds?: number): void,
|
||||
uninstall(): void
|
||||
};
|
||||
|
||||
type JestMatcherResult = {
|
||||
message?: string | (() => string),
|
||||
pass: boolean
|
||||
};
|
||||
|
||||
type JestMatcher = (actual: any, expected: any) => JestMatcherResult;
|
||||
|
||||
type JestPromiseType = {
|
||||
/**
|
||||
* Use rejects to unwrap the reason of a rejected promise so any other
|
||||
* matcher can be chained. If the promise is fulfilled the assertion fails.
|
||||
*/
|
||||
rejects: JestExpectType,
|
||||
/**
|
||||
* Use resolves to unwrap the value of a fulfilled promise so any other
|
||||
* matcher can be chained. If the promise is rejected the assertion fails.
|
||||
*/
|
||||
resolves: JestExpectType
|
||||
};
|
||||
|
||||
/**
|
||||
* Plugin: jest-enzyme
|
||||
*/
|
||||
type EnzymeMatchersType = {
|
||||
toBeChecked(): void,
|
||||
toBeDisabled(): void,
|
||||
toBeEmpty(): void,
|
||||
toBePresent(): void,
|
||||
toContainReact(element: React$Element<any>): void,
|
||||
toHaveClassName(className: string): void,
|
||||
toHaveHTML(html: string): void,
|
||||
toHaveProp(propKey: string, propValue?: any): void,
|
||||
toHaveRef(refName: string): void,
|
||||
toHaveState(stateKey: string, stateValue?: any): void,
|
||||
toHaveStyle(styleKey: string, styleValue?: any): void,
|
||||
toHaveTagName(tagName: string): void,
|
||||
toHaveText(text: string): void,
|
||||
toIncludeText(text: string): void,
|
||||
toHaveValue(value: any): void,
|
||||
toMatchElement(element: React$Element<any>): void,
|
||||
toMatchSelector(selector: string): void,
|
||||
};
|
||||
|
||||
type JestExpectType = {
|
||||
not: JestExpectType & EnzymeMatchersType,
|
||||
/**
|
||||
* If you have a mock function, you can use .lastCalledWith to test what
|
||||
* arguments it was last called with.
|
||||
*/
|
||||
lastCalledWith(...args: Array<any>): void,
|
||||
/**
|
||||
* toBe just checks that a value is what you expect. It uses === to check
|
||||
* strict equality.
|
||||
*/
|
||||
toBe(value: any): void,
|
||||
/**
|
||||
* Use .toHaveBeenCalled to ensure that a mock function got called.
|
||||
*/
|
||||
toBeCalled(): void,
|
||||
/**
|
||||
* Use .toBeCalledWith to ensure that a mock function was called with
|
||||
* specific arguments.
|
||||
*/
|
||||
toBeCalledWith(...args: Array<any>): void,
|
||||
/**
|
||||
* Using exact equality with floating point numbers is a bad idea. Rounding
|
||||
* means that intuitive things fail.
|
||||
*/
|
||||
toBeCloseTo(num: number, delta: any): void,
|
||||
/**
|
||||
* Use .toBeDefined to check that a variable is not undefined.
|
||||
*/
|
||||
toBeDefined(): void,
|
||||
/**
|
||||
* Use .toBeFalsy when you don't care what a value is, you just want to
|
||||
* ensure a value is false in a boolean context.
|
||||
*/
|
||||
toBeFalsy(): void,
|
||||
/**
|
||||
* To compare floating point numbers, you can use toBeGreaterThan.
|
||||
*/
|
||||
toBeGreaterThan(number: number): void,
|
||||
/**
|
||||
* To compare floating point numbers, you can use toBeGreaterThanOrEqual.
|
||||
*/
|
||||
toBeGreaterThanOrEqual(number: number): void,
|
||||
/**
|
||||
* To compare floating point numbers, you can use toBeLessThan.
|
||||
*/
|
||||
toBeLessThan(number: number): void,
|
||||
/**
|
||||
* To compare floating point numbers, you can use toBeLessThanOrEqual.
|
||||
*/
|
||||
toBeLessThanOrEqual(number: number): void,
|
||||
/**
|
||||
* Use .toBeInstanceOf(Class) to check that an object is an instance of a
|
||||
* class.
|
||||
*/
|
||||
toBeInstanceOf(cls: Class<*>): void,
|
||||
/**
|
||||
* .toBeNull() is the same as .toBe(null) but the error messages are a bit
|
||||
* nicer.
|
||||
*/
|
||||
toBeNull(): void,
|
||||
/**
|
||||
* Use .toBeTruthy when you don't care what a value is, you just want to
|
||||
* ensure a value is true in a boolean context.
|
||||
*/
|
||||
toBeTruthy(): void,
|
||||
/**
|
||||
* Use .toBeUndefined to check that a variable is undefined.
|
||||
*/
|
||||
toBeUndefined(): void,
|
||||
/**
|
||||
* Use .toContain when you want to check that an item is in a list. For
|
||||
* testing the items in the list, this uses ===, a strict equality check.
|
||||
*/
|
||||
toContain(item: any): void,
|
||||
/**
|
||||
* Use .toContainEqual when you want to check that an item is in a list. For
|
||||
* testing the items in the list, this matcher recursively checks the
|
||||
* equality of all fields, rather than checking for object identity.
|
||||
*/
|
||||
toContainEqual(item: any): void,
|
||||
/**
|
||||
* Use .toEqual when you want to check that two objects have the same value.
|
||||
* This matcher recursively checks the equality of all fields, rather than
|
||||
* checking for object identity.
|
||||
*/
|
||||
toEqual(value: any): void,
|
||||
/**
|
||||
* Use .toHaveBeenCalled to ensure that a mock function got called.
|
||||
*/
|
||||
toHaveBeenCalled(): void,
|
||||
/**
|
||||
* Use .toHaveBeenCalledTimes to ensure that a mock function got called exact
|
||||
* number of times.
|
||||
*/
|
||||
toHaveBeenCalledTimes(number: number): void,
|
||||
/**
|
||||
* Use .toHaveBeenCalledWith to ensure that a mock function was called with
|
||||
* specific arguments.
|
||||
*/
|
||||
toHaveBeenCalledWith(...args: Array<any>): void,
|
||||
/**
|
||||
* Use .toHaveBeenLastCalledWith to ensure that a mock function was last called
|
||||
* with specific arguments.
|
||||
*/
|
||||
toHaveBeenLastCalledWith(...args: Array<any>): void,
|
||||
/**
|
||||
* Check that an object has a .length property and it is set to a certain
|
||||
* numeric value.
|
||||
*/
|
||||
toHaveLength(number: number): void,
|
||||
/**
|
||||
*
|
||||
*/
|
||||
toHaveProperty(propPath: string, value?: any): void,
|
||||
/**
|
||||
* Use .toMatch to check that a string matches a regular expression or string.
|
||||
*/
|
||||
toMatch(regexpOrString: RegExp | string): void,
|
||||
/**
|
||||
* Use .toMatchObject to check that a javascript object matches a subset of the properties of an object.
|
||||
*/
|
||||
toMatchObject(object: Object): void,
|
||||
/**
|
||||
* This ensures that a React component matches the most recent snapshot.
|
||||
*/
|
||||
toMatchSnapshot(name?: string): void,
|
||||
/**
|
||||
* Use .toThrow to test that a function throws when it is called.
|
||||
* If you want to test that a specific error gets thrown, you can provide an
|
||||
* argument to toThrow. The argument can be a string for the error message,
|
||||
* a class for the error, or a regex that should match the error.
|
||||
*
|
||||
* Alias: .toThrowError
|
||||
*/
|
||||
toThrow(message?: string | Error | RegExp): void,
|
||||
toThrowError(message?: string | Error | RegExp): void,
|
||||
/**
|
||||
* Use .toThrowErrorMatchingSnapshot to test that a function throws a error
|
||||
* matching the most recent snapshot when it is called.
|
||||
*/
|
||||
toThrowErrorMatchingSnapshot(): void
|
||||
};
|
||||
|
||||
type JestObjectType = {
|
||||
/**
|
||||
* Disables automatic mocking in the module loader.
|
||||
*
|
||||
* After this method is called, all `require()`s will return the real
|
||||
* versions of each module (rather than a mocked version).
|
||||
*/
|
||||
disableAutomock(): JestObjectType,
|
||||
/**
|
||||
* An un-hoisted version of disableAutomock
|
||||
*/
|
||||
autoMockOff(): JestObjectType,
|
||||
/**
|
||||
* Enables automatic mocking in the module loader.
|
||||
*/
|
||||
enableAutomock(): JestObjectType,
|
||||
/**
|
||||
* An un-hoisted version of enableAutomock
|
||||
*/
|
||||
autoMockOn(): JestObjectType,
|
||||
/**
|
||||
* Clears the mock.calls and mock.instances properties of all mocks.
|
||||
* Equivalent to calling .mockClear() on every mocked function.
|
||||
*/
|
||||
clearAllMocks(): JestObjectType,
|
||||
/**
|
||||
* Resets the state of all mocks. Equivalent to calling .mockReset() on every
|
||||
* mocked function.
|
||||
*/
|
||||
resetAllMocks(): JestObjectType,
|
||||
/**
|
||||
* Removes any pending timers from the timer system.
|
||||
*/
|
||||
clearAllTimers(): void,
|
||||
/**
|
||||
* The same as `mock` but not moved to the top of the expectation by
|
||||
* babel-jest.
|
||||
*/
|
||||
doMock(moduleName: string, moduleFactory?: any): JestObjectType,
|
||||
/**
|
||||
* The same as `unmock` but not moved to the top of the expectation by
|
||||
* babel-jest.
|
||||
*/
|
||||
dontMock(moduleName: string): JestObjectType,
|
||||
/**
|
||||
* Returns a new, unused mock function. Optionally takes a mock
|
||||
* implementation.
|
||||
*/
|
||||
fn(implementation?: Function): JestMockFn,
|
||||
/**
|
||||
* Determines if the given function is a mocked function.
|
||||
*/
|
||||
isMockFunction(fn: Function): boolean,
|
||||
/**
|
||||
* Given the name of a module, use the automatic mocking system to generate a
|
||||
* mocked version of the module for you.
|
||||
*/
|
||||
genMockFromModule(moduleName: string): any,
|
||||
/**
|
||||
* Mocks a module with an auto-mocked version when it is being required.
|
||||
*
|
||||
* The second argument can be used to specify an explicit module factory that
|
||||
* is being run instead of using Jest's automocking feature.
|
||||
*
|
||||
* The third argument can be used to create virtual mocks -- mocks of modules
|
||||
* that don't exist anywhere in the system.
|
||||
*/
|
||||
mock(
|
||||
moduleName: string,
|
||||
moduleFactory?: any,
|
||||
options?: Object
|
||||
): JestObjectType,
|
||||
/**
|
||||
* Resets the module registry - the cache of all required modules. This is
|
||||
* useful to isolate modules where local state might conflict between tests.
|
||||
*/
|
||||
resetModules(): JestObjectType,
|
||||
/**
|
||||
* Exhausts the micro-task queue (usually interfaced in node via
|
||||
* process.nextTick).
|
||||
*/
|
||||
runAllTicks(): void,
|
||||
/**
|
||||
* Exhausts the macro-task queue (i.e., all tasks queued by setTimeout(),
|
||||
* setInterval(), and setImmediate()).
|
||||
*/
|
||||
runAllTimers(): void,
|
||||
/**
|
||||
* Exhausts all tasks queued by setImmediate().
|
||||
*/
|
||||
runAllImmediates(): void,
|
||||
/**
|
||||
* Executes only the macro task queue (i.e. all tasks queued by setTimeout()
|
||||
* or setInterval() and setImmediate()).
|
||||
*/
|
||||
runTimersToTime(msToRun: number): void,
|
||||
/**
|
||||
* Executes only the macro-tasks that are currently pending (i.e., only the
|
||||
* tasks that have been queued by setTimeout() or setInterval() up to this
|
||||
* point)
|
||||
*/
|
||||
runOnlyPendingTimers(): void,
|
||||
/**
|
||||
* Explicitly supplies the mock object that the module system should return
|
||||
* for the specified module. Note: It is recommended to use jest.mock()
|
||||
* instead.
|
||||
*/
|
||||
setMock(moduleName: string, moduleExports: any): JestObjectType,
|
||||
/**
|
||||
* Indicates that the module system should never return a mocked version of
|
||||
* the specified module from require() (e.g. that it should always return the
|
||||
* real module).
|
||||
*/
|
||||
unmock(moduleName: string): JestObjectType,
|
||||
/**
|
||||
* Instructs Jest to use fake versions of the standard timer functions
|
||||
* (setTimeout, setInterval, clearTimeout, clearInterval, nextTick,
|
||||
* setImmediate and clearImmediate).
|
||||
*/
|
||||
useFakeTimers(): JestObjectType,
|
||||
/**
|
||||
* Instructs Jest to use the real versions of the standard timer functions.
|
||||
*/
|
||||
useRealTimers(): JestObjectType,
|
||||
/**
|
||||
* Creates a mock function similar to jest.fn but also tracks calls to
|
||||
* object[methodName].
|
||||
*/
|
||||
spyOn(object: Object, methodName: string): JestMockFn
|
||||
};
|
||||
|
||||
type JestSpyType = {
|
||||
calls: JestCallsType
|
||||
};
|
||||
|
||||
/** Runs this function after every test inside this context */
|
||||
declare function afterEach(fn: Function): void;
|
||||
/** Runs this function before every test inside this context */
|
||||
declare function beforeEach(fn: Function): void;
|
||||
/** Runs this function after all tests have finished inside this context */
|
||||
declare function afterAll(fn: Function): void;
|
||||
/** Runs this function before any tests have started inside this context */
|
||||
declare function beforeAll(fn: Function): void;
|
||||
|
||||
/** A context for grouping tests together */
|
||||
declare var describe: {
|
||||
/**
|
||||
* Creates a block that groups together several related tests in one "test suite"
|
||||
*/
|
||||
(name: string, fn: Function): void,
|
||||
|
||||
/**
|
||||
* Only run this describe block
|
||||
*/
|
||||
only(name: string, fn: Function): void,
|
||||
|
||||
/**
|
||||
* Skip running this describe block
|
||||
*/
|
||||
skip(name: string, fn: Function): void,
|
||||
};
|
||||
|
||||
|
||||
/** An individual test unit */
|
||||
declare var it: {
|
||||
/**
|
||||
* An individual test unit
|
||||
*
|
||||
* @param {string} Name of Test
|
||||
* @param {Function} Test
|
||||
*/
|
||||
(name: string, fn?: Function): ?Promise<void>,
|
||||
/**
|
||||
* Only run this test
|
||||
*
|
||||
* @param {string} Name of Test
|
||||
* @param {Function} Test
|
||||
*/
|
||||
only(name: string, fn?: Function): ?Promise<void>,
|
||||
/**
|
||||
* Skip running this test
|
||||
*
|
||||
* @param {string} Name of Test
|
||||
* @param {Function} Test
|
||||
*/
|
||||
skip(name: string, fn?: Function): ?Promise<void>,
|
||||
/**
|
||||
* Run the test concurrently
|
||||
*
|
||||
* @param {string} Name of Test
|
||||
* @param {Function} Test
|
||||
*/
|
||||
concurrent(name: string, fn?: Function): ?Promise<void>
|
||||
};
|
||||
declare function fit(name: string, fn: Function): ?Promise<void>;
|
||||
/** An individual test unit */
|
||||
declare var test: typeof it;
|
||||
/** A disabled group of tests */
|
||||
declare var xdescribe: typeof describe;
|
||||
/** A focused group of tests */
|
||||
declare var fdescribe: typeof describe;
|
||||
/** A disabled individual test */
|
||||
declare var xit: typeof it;
|
||||
/** A disabled individual test */
|
||||
declare var xtest: typeof it;
|
||||
|
||||
/** The expect function is used every time you want to test a value */
|
||||
declare var expect: {
|
||||
/** The object that you want to make assertions against */
|
||||
(value: any): JestExpectType & JestPromiseType & EnzymeMatchersType,
|
||||
/** Add additional Jasmine matchers to Jest's roster */
|
||||
extend(matchers: { [name: string]: JestMatcher }): void,
|
||||
/** Add a module that formats application-specific data structures. */
|
||||
addSnapshotSerializer(serializer: (input: Object) => string): void,
|
||||
assertions(expectedAssertions: number): void,
|
||||
hasAssertions(): void,
|
||||
any(value: mixed): JestAsymmetricEqualityType,
|
||||
anything(): void,
|
||||
arrayContaining(value: Array<mixed>): void,
|
||||
objectContaining(value: Object): void,
|
||||
/** Matches any received string that contains the exact expected string. */
|
||||
stringContaining(value: string): void,
|
||||
stringMatching(value: string | RegExp): void
|
||||
};
|
||||
|
||||
// TODO handle return type
|
||||
// http://jasmine.github.io/2.4/introduction.html#section-Spies
|
||||
declare function spyOn(value: mixed, method: string): Object;
|
||||
|
||||
/** Holds all functions related to manipulating test runner */
|
||||
declare var jest: JestObjectType;
|
||||
|
||||
/**
|
||||
* The global Jamine object, this is generally not exposed as the public API,
|
||||
* using features inside here could break in later versions of Jest.
|
||||
*/
|
||||
declare var jasmine: {
|
||||
DEFAULT_TIMEOUT_INTERVAL: number,
|
||||
any(value: mixed): JestAsymmetricEqualityType,
|
||||
anything(): void,
|
||||
arrayContaining(value: Array<mixed>): void,
|
||||
clock(): JestClockType,
|
||||
createSpy(name: string): JestSpyType,
|
||||
createSpyObj(
|
||||
baseName: string,
|
||||
methodNames: Array<string>
|
||||
): { [methodName: string]: JestSpyType },
|
||||
objectContaining(value: Object): void,
|
||||
stringMatching(value: string): void
|
||||
};
|
||||
@ -1,39 +0,0 @@
|
||||
// flow-typed signature: 3ba80f288ae054d394dca2d025d14dd9
|
||||
// flow-typed version: <<STUB>>/jest_v^21.0.1/flow_v0.53.0
|
||||
|
||||
/**
|
||||
* This is an autogenerated libdef stub for:
|
||||
*
|
||||
* 'jest'
|
||||
*
|
||||
* Fill this stub out by replacing all the `any` types.
|
||||
*
|
||||
* Once filled out, we encourage you to share your work with the
|
||||
* community by sending a pull request to:
|
||||
* https://github.com/flowtype/flow-typed
|
||||
*/
|
||||
|
||||
declare module 'jest' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* We include stubs for each file inside this npm package in case you need to
|
||||
* require those files directly. Feel free to delete any files that aren't
|
||||
* needed.
|
||||
*/
|
||||
declare module 'jest/bin/jest' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'jest/build/jest' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
// Filename aliases
|
||||
declare module 'jest/bin/jest.js' {
|
||||
declare module.exports: $Exports<'jest/bin/jest'>;
|
||||
}
|
||||
declare module 'jest/build/jest.js' {
|
||||
declare module.exports: $Exports<'jest/build/jest'>;
|
||||
}
|
||||
@ -1,33 +0,0 @@
|
||||
// flow-typed signature: fe3ce80849031f84c8c106122bef896a
|
||||
// flow-typed version: <<STUB>>/react-addons-test-utils_v16.0.0-alpha.3/flow_v0.53.0
|
||||
|
||||
/**
|
||||
* This is an autogenerated libdef stub for:
|
||||
*
|
||||
* 'react-addons-test-utils'
|
||||
*
|
||||
* Fill this stub out by replacing all the `any` types.
|
||||
*
|
||||
* Once filled out, we encourage you to share your work with the
|
||||
* community by sending a pull request to:
|
||||
* https://github.com/flowtype/flow-typed
|
||||
*/
|
||||
|
||||
declare module 'react-addons-test-utils' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* We include stubs for each file inside this npm package in case you need to
|
||||
* require those files directly. Feel free to delete any files that aren't
|
||||
* needed.
|
||||
*/
|
||||
|
||||
|
||||
// Filename aliases
|
||||
declare module 'react-addons-test-utils/index' {
|
||||
declare module.exports: $Exports<'react-addons-test-utils'>;
|
||||
}
|
||||
declare module 'react-addons-test-utils/index.js' {
|
||||
declare module.exports: $Exports<'react-addons-test-utils'>;
|
||||
}
|
||||
@ -1,123 +0,0 @@
|
||||
// flow-typed signature: bd52927dcfdd08c54751906ebaf7cfa1
|
||||
// flow-typed version: <<STUB>>/react-native-scripts_v^1.3.1/flow_v0.53.0
|
||||
|
||||
/**
|
||||
* This is an autogenerated libdef stub for:
|
||||
*
|
||||
* 'react-native-scripts'
|
||||
*
|
||||
* Fill this stub out by replacing all the `any` types.
|
||||
*
|
||||
* Once filled out, we encourage you to share your work with the
|
||||
* community by sending a pull request to:
|
||||
* https://github.com/flowtype/flow-typed
|
||||
*/
|
||||
|
||||
declare module 'react-native-scripts' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* We include stubs for each file inside this npm package in case you need to
|
||||
* require those files directly. Feel free to delete any files that aren't
|
||||
* needed.
|
||||
*/
|
||||
declare module 'react-native-scripts/build/bin/crna-entry' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'react-native-scripts/build/bin/react-native-scripts' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'react-native-scripts/build/scripts/android' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'react-native-scripts/build/scripts/eject' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'react-native-scripts/build/scripts/init' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'react-native-scripts/build/scripts/ios' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'react-native-scripts/build/scripts/start' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'react-native-scripts/build/util/clearConsole' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'react-native-scripts/build/util/expo' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'react-native-scripts/build/util/install' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'react-native-scripts/build/util/log' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'react-native-scripts/build/util/packager' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'react-native-scripts/template/App' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'react-native-scripts/template/App.test' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
// Filename aliases
|
||||
declare module 'react-native-scripts/build/bin/crna-entry.js' {
|
||||
declare module.exports: $Exports<'react-native-scripts/build/bin/crna-entry'>;
|
||||
}
|
||||
declare module 'react-native-scripts/build/bin/react-native-scripts.js' {
|
||||
declare module.exports: $Exports<'react-native-scripts/build/bin/react-native-scripts'>;
|
||||
}
|
||||
declare module 'react-native-scripts/build/scripts/android.js' {
|
||||
declare module.exports: $Exports<'react-native-scripts/build/scripts/android'>;
|
||||
}
|
||||
declare module 'react-native-scripts/build/scripts/eject.js' {
|
||||
declare module.exports: $Exports<'react-native-scripts/build/scripts/eject'>;
|
||||
}
|
||||
declare module 'react-native-scripts/build/scripts/init.js' {
|
||||
declare module.exports: $Exports<'react-native-scripts/build/scripts/init'>;
|
||||
}
|
||||
declare module 'react-native-scripts/build/scripts/ios.js' {
|
||||
declare module.exports: $Exports<'react-native-scripts/build/scripts/ios'>;
|
||||
}
|
||||
declare module 'react-native-scripts/build/scripts/start.js' {
|
||||
declare module.exports: $Exports<'react-native-scripts/build/scripts/start'>;
|
||||
}
|
||||
declare module 'react-native-scripts/build/util/clearConsole.js' {
|
||||
declare module.exports: $Exports<'react-native-scripts/build/util/clearConsole'>;
|
||||
}
|
||||
declare module 'react-native-scripts/build/util/expo.js' {
|
||||
declare module.exports: $Exports<'react-native-scripts/build/util/expo'>;
|
||||
}
|
||||
declare module 'react-native-scripts/build/util/install.js' {
|
||||
declare module.exports: $Exports<'react-native-scripts/build/util/install'>;
|
||||
}
|
||||
declare module 'react-native-scripts/build/util/log.js' {
|
||||
declare module.exports: $Exports<'react-native-scripts/build/util/log'>;
|
||||
}
|
||||
declare module 'react-native-scripts/build/util/packager.js' {
|
||||
declare module.exports: $Exports<'react-native-scripts/build/util/packager'>;
|
||||
}
|
||||
declare module 'react-native-scripts/template/App.js' {
|
||||
declare module.exports: $Exports<'react-native-scripts/template/App'>;
|
||||
}
|
||||
declare module 'react-native-scripts/template/App.test.js' {
|
||||
declare module.exports: $Exports<'react-native-scripts/template/App.test'>;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,66 +0,0 @@
|
||||
// flow-typed signature: bc77d9125cee5869fd1f9ffe55231e21
|
||||
// flow-typed version: <<STUB>>/react-test-renderer_v16.0.0-alpha.12/flow_v0.53.0
|
||||
|
||||
/**
|
||||
* This is an autogenerated libdef stub for:
|
||||
*
|
||||
* 'react-test-renderer'
|
||||
*
|
||||
* Fill this stub out by replacing all the `any` types.
|
||||
*
|
||||
* Once filled out, we encourage you to share your work with the
|
||||
* community by sending a pull request to:
|
||||
* https://github.com/flowtype/flow-typed
|
||||
*/
|
||||
|
||||
declare module 'react-test-renderer' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* We include stubs for each file inside this npm package in case you need to
|
||||
* require those files directly. Feel free to delete any files that aren't
|
||||
* needed.
|
||||
*/
|
||||
declare module 'react-test-renderer/cjs/react-test-renderer-shallow.development' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'react-test-renderer/cjs/react-test-renderer-stack.development' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'react-test-renderer/cjs/react-test-renderer.development' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'react-test-renderer/shallow' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
declare module 'react-test-renderer/stack' {
|
||||
declare module.exports: any;
|
||||
}
|
||||
|
||||
// Filename aliases
|
||||
declare module 'react-test-renderer/cjs/react-test-renderer-shallow.development.js' {
|
||||
declare module.exports: $Exports<'react-test-renderer/cjs/react-test-renderer-shallow.development'>;
|
||||
}
|
||||
declare module 'react-test-renderer/cjs/react-test-renderer-stack.development.js' {
|
||||
declare module.exports: $Exports<'react-test-renderer/cjs/react-test-renderer-stack.development'>;
|
||||
}
|
||||
declare module 'react-test-renderer/cjs/react-test-renderer.development.js' {
|
||||
declare module.exports: $Exports<'react-test-renderer/cjs/react-test-renderer.development'>;
|
||||
}
|
||||
declare module 'react-test-renderer/index' {
|
||||
declare module.exports: $Exports<'react-test-renderer'>;
|
||||
}
|
||||
declare module 'react-test-renderer/index.js' {
|
||||
declare module.exports: $Exports<'react-test-renderer'>;
|
||||
}
|
||||
declare module 'react-test-renderer/shallow.js' {
|
||||
declare module.exports: $Exports<'react-test-renderer/shallow'>;
|
||||
}
|
||||
declare module 'react-test-renderer/stack.js' {
|
||||
declare module.exports: $Exports<'react-test-renderer/stack'>;
|
||||
}
|
||||
@ -1,205 +0,0 @@
|
||||
/* @flow */
|
||||
|
||||
import React from 'react';
|
||||
import { Constants, ScreenOrientation } from 'expo';
|
||||
|
||||
ScreenOrientation.allow(ScreenOrientation.Orientation.ALL);
|
||||
|
||||
import {
|
||||
Platform,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
Text,
|
||||
StatusBar,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import { SafeAreaView, StackNavigator } from 'react-navigation';
|
||||
|
||||
import Banner from './Banner';
|
||||
import CustomTabs from './CustomTabs';
|
||||
import CustomTransitioner from './CustomTransitioner';
|
||||
import Drawer from './Drawer';
|
||||
import MultipleDrawer from './MultipleDrawer';
|
||||
import TabsInDrawer from './TabsInDrawer';
|
||||
import ModalStack from './ModalStack';
|
||||
import StacksInTabs from './StacksInTabs';
|
||||
import StacksOverTabs from './StacksOverTabs';
|
||||
import SimpleStack from './SimpleStack';
|
||||
import SimpleTabs from './SimpleTabs';
|
||||
import TabAnimations from './TabAnimations';
|
||||
|
||||
const ExampleRoutes = {
|
||||
SimpleStack: {
|
||||
name: 'Stack Example',
|
||||
description: 'A card stack',
|
||||
screen: SimpleStack,
|
||||
},
|
||||
SimpleTabs: {
|
||||
name: 'Tabs Example',
|
||||
description: 'Tabs following platform conventions',
|
||||
screen: SimpleTabs,
|
||||
},
|
||||
Drawer: {
|
||||
name: 'Drawer Example',
|
||||
description: 'Android-style drawer navigation',
|
||||
screen: Drawer,
|
||||
},
|
||||
// MultipleDrawer: {
|
||||
// name: 'Multiple Drawer Example',
|
||||
// description: 'Add any drawer you need',
|
||||
// screen: MultipleDrawer,
|
||||
// },
|
||||
TabsInDrawer: {
|
||||
name: 'Drawer + Tabs Example',
|
||||
description: 'A drawer combined with tabs',
|
||||
screen: TabsInDrawer,
|
||||
},
|
||||
CustomTabs: {
|
||||
name: 'Custom Tabs',
|
||||
description: 'Custom tabs with tab router',
|
||||
screen: CustomTabs,
|
||||
},
|
||||
CustomTransitioner: {
|
||||
name: 'Custom Transitioner',
|
||||
description: 'Custom transitioner with stack router',
|
||||
screen: CustomTransitioner,
|
||||
},
|
||||
ModalStack: {
|
||||
name:
|
||||
Platform.OS === 'ios'
|
||||
? 'Modal Stack Example'
|
||||
: 'Stack with Dynamic Header',
|
||||
description:
|
||||
Platform.OS === 'ios'
|
||||
? 'Stack navigation with modals'
|
||||
: 'Dynamically showing and hiding the header',
|
||||
screen: ModalStack,
|
||||
},
|
||||
StacksInTabs: {
|
||||
name: 'Stacks in Tabs',
|
||||
description: 'Nested stack navigation in tabs',
|
||||
screen: StacksInTabs,
|
||||
},
|
||||
StacksOverTabs: {
|
||||
name: 'Stacks over Tabs',
|
||||
description: 'Nested stack navigation that pushes on top of tabs',
|
||||
screen: StacksOverTabs,
|
||||
},
|
||||
LinkStack: {
|
||||
name: 'Link in Stack',
|
||||
description: 'Deep linking into a route in stack',
|
||||
screen: SimpleStack,
|
||||
path: 'people/Jordan',
|
||||
},
|
||||
LinkTabs: {
|
||||
name: 'Link to Settings Tab',
|
||||
description: 'Deep linking into a route in tab',
|
||||
screen: SimpleTabs,
|
||||
path: 'settings',
|
||||
},
|
||||
TabAnimations: {
|
||||
name: 'Animated Tabs Example',
|
||||
description: 'Tab transitions have custom animations',
|
||||
screen: TabAnimations,
|
||||
},
|
||||
};
|
||||
|
||||
class MainScreen extends React.Component<*> {
|
||||
render() {
|
||||
const { navigation } = this.props;
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1 }}>
|
||||
<ScrollView style={{ flex: 1 }}>
|
||||
<Banner />
|
||||
{Object.keys(ExampleRoutes).map((routeName: string) => (
|
||||
<TouchableOpacity
|
||||
key={routeName}
|
||||
onPress={() => {
|
||||
const { path, params, screen } = ExampleRoutes[routeName];
|
||||
const { router } = screen;
|
||||
const action =
|
||||
path && router.getActionForPathAndParams(path, params);
|
||||
navigation.navigate(routeName, {}, action);
|
||||
}}
|
||||
>
|
||||
<SafeAreaView
|
||||
style={styles.itemContainer}
|
||||
forceInset={{ vertical: 'never' }}
|
||||
>
|
||||
<View style={styles.item}>
|
||||
<Text style={styles.title}>
|
||||
{ExampleRoutes[routeName].name}
|
||||
</Text>
|
||||
<Text style={styles.description}>
|
||||
{ExampleRoutes[routeName].description}
|
||||
</Text>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</ScrollView>
|
||||
<StatusBar barStyle="light-content" />
|
||||
<View style={styles.statusBarUnderlay} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const AppNavigator = StackNavigator(
|
||||
{
|
||||
...ExampleRoutes,
|
||||
Index: {
|
||||
screen: MainScreen,
|
||||
},
|
||||
},
|
||||
{
|
||||
initialRouteName: 'Index',
|
||||
headerMode: 'none',
|
||||
|
||||
/*
|
||||
* Use modal on iOS because the card mode comes from the right,
|
||||
* which conflicts with the drawer example gesture
|
||||
*/
|
||||
mode: Platform.OS === 'ios' ? 'modal' : 'card',
|
||||
}
|
||||
);
|
||||
|
||||
export default () => <AppNavigator />;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
item: {
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
},
|
||||
itemContainer: {
|
||||
backgroundColor: '#fff',
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
borderBottomColor: '#ddd',
|
||||
},
|
||||
image: {
|
||||
width: 120,
|
||||
height: 120,
|
||||
alignSelf: 'center',
|
||||
marginBottom: 20,
|
||||
resizeMode: 'contain',
|
||||
},
|
||||
statusBarUnderlay: {
|
||||
backgroundColor: '#673ab7',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: Constants.statusBarHeight,
|
||||
},
|
||||
title: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
color: '#444',
|
||||
},
|
||||
description: {
|
||||
fontSize: 13,
|
||||
color: '#999',
|
||||
},
|
||||
});
|
||||
@ -1,45 +0,0 @@
|
||||
/* @flow */
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { Image, Platform, StyleSheet, Text, View } from 'react-native';
|
||||
import { SafeAreaView } from 'react-navigation';
|
||||
|
||||
const Banner = () => (
|
||||
<SafeAreaView
|
||||
style={styles.bannerContainer}
|
||||
forceInset={{ top: 'always' }}
|
||||
>
|
||||
<View style={styles.banner}>
|
||||
<Image source={require('./assets/NavLogo.png')} style={styles.image} />
|
||||
<Text style={styles.title}>React Navigation Examples</Text>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
|
||||
export default Banner;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
bannerContainer: {
|
||||
backgroundColor: '#673ab7',
|
||||
paddingTop: 20,
|
||||
},
|
||||
banner: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
padding: 16,
|
||||
},
|
||||
image: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
resizeMode: 'contain',
|
||||
tintColor: '#fff',
|
||||
margin: 8,
|
||||
},
|
||||
title: {
|
||||
fontSize: 18,
|
||||
fontWeight: '200',
|
||||
color: '#fff',
|
||||
margin: 8,
|
||||
},
|
||||
});
|
||||
@ -1,127 +0,0 @@
|
||||
/**
|
||||
* @flow
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
Button,
|
||||
Platform,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
StatusBar,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import {
|
||||
createNavigator,
|
||||
createNavigationContainer,
|
||||
SafeAreaView,
|
||||
TabRouter,
|
||||
addNavigationHelpers,
|
||||
} from 'react-navigation';
|
||||
import SampleText from './SampleText';
|
||||
|
||||
const MyNavScreen = ({ navigation, banner }) => (
|
||||
<ScrollView>
|
||||
<SafeAreaView forceInset={{ horizontal: 'always' }}>
|
||||
<SampleText>{banner}</SampleText>
|
||||
<Button
|
||||
onPress={() => {
|
||||
navigation.goBack(null);
|
||||
}}
|
||||
title="Go back"
|
||||
/>
|
||||
</SafeAreaView>
|
||||
<StatusBar barStyle="default" />
|
||||
</ScrollView>
|
||||
);
|
||||
|
||||
const MyHomeScreen = ({ navigation }) => (
|
||||
<MyNavScreen banner="Home Screen" navigation={navigation} />
|
||||
);
|
||||
|
||||
const MyNotificationsScreen = ({ navigation }) => (
|
||||
<MyNavScreen banner="Notifications Screen" navigation={navigation} />
|
||||
);
|
||||
|
||||
const MySettingsScreen = ({ navigation }) => (
|
||||
<MyNavScreen banner="Settings Screen" navigation={navigation} />
|
||||
);
|
||||
|
||||
const CustomTabBar = ({ navigation }) => {
|
||||
const { routes } = navigation.state;
|
||||
return (
|
||||
<SafeAreaView style={styles.tabContainer}>
|
||||
{routes.map(route => (
|
||||
<TouchableOpacity
|
||||
onPress={() => navigation.navigate(route.routeName)}
|
||||
style={styles.tab}
|
||||
key={route.routeName}
|
||||
>
|
||||
<Text>{route.routeName}</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const CustomTabView = ({ router, navigation }) => {
|
||||
const { routes, index } = navigation.state;
|
||||
const ActiveScreen = router.getComponentForRouteName(routes[index].routeName);
|
||||
return (
|
||||
<SafeAreaView forceInset={{ top: 'always' }}>
|
||||
<CustomTabBar navigation={navigation} />
|
||||
<ActiveScreen
|
||||
navigation={addNavigationHelpers({
|
||||
dispatch: navigation.dispatch,
|
||||
state: routes[index],
|
||||
})}
|
||||
screenProps={{}}
|
||||
/>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const CustomTabRouter = TabRouter(
|
||||
{
|
||||
Home: {
|
||||
screen: MyHomeScreen,
|
||||
path: '',
|
||||
},
|
||||
Notifications: {
|
||||
screen: MyNotificationsScreen,
|
||||
path: 'notifications',
|
||||
},
|
||||
Settings: {
|
||||
screen: MySettingsScreen,
|
||||
path: 'settings',
|
||||
},
|
||||
},
|
||||
{
|
||||
// Change this to start on a different tab
|
||||
initialRouteName: 'Home',
|
||||
}
|
||||
);
|
||||
|
||||
const CustomTabs = createNavigationContainer(
|
||||
createNavigator(CustomTabRouter)(CustomTabView)
|
||||
);
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
tabContainer: {
|
||||
flexDirection: 'row',
|
||||
height: 48,
|
||||
},
|
||||
tab: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: 4,
|
||||
borderWidth: 1,
|
||||
borderColor: '#ddd',
|
||||
borderRadius: 4,
|
||||
},
|
||||
});
|
||||
|
||||
export default CustomTabs;
|
||||
@ -1,123 +0,0 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import {
|
||||
Animated,
|
||||
Button,
|
||||
Easing,
|
||||
Image,
|
||||
Platform,
|
||||
StatusBar,
|
||||
StyleSheet,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import {
|
||||
Transitioner,
|
||||
SafeAreaView,
|
||||
StackRouter,
|
||||
createNavigationContainer,
|
||||
addNavigationHelpers,
|
||||
createNavigator,
|
||||
} from 'react-navigation';
|
||||
import SampleText from './SampleText';
|
||||
|
||||
const MyNavScreen = ({ navigation, banner }) => (
|
||||
<SafeAreaView forceInset={{ top: 'always' }}>
|
||||
<SampleText>{banner}</SampleText>
|
||||
{navigation.state &&
|
||||
navigation.state.routeName !== 'Settings' && (
|
||||
<Button
|
||||
onPress={() => navigation.navigate('Settings')}
|
||||
title="Go to a settings screen"
|
||||
/>
|
||||
)}
|
||||
|
||||
<Button onPress={() => navigation.goBack(null)} title="Go back" />
|
||||
<StatusBar barStyle="default" />
|
||||
</SafeAreaView>
|
||||
);
|
||||
|
||||
const MyHomeScreen = ({ navigation }) => (
|
||||
<MyNavScreen banner="Home Screen" navigation={navigation} />
|
||||
);
|
||||
|
||||
const MySettingsScreen = ({ navigation }) => (
|
||||
<MyNavScreen banner="Settings Screen" navigation={navigation} />
|
||||
);
|
||||
|
||||
class CustomNavigationView extends Component {
|
||||
render() {
|
||||
const { navigation, router } = this.props;
|
||||
|
||||
return (
|
||||
<Transitioner
|
||||
configureTransition={this._configureTransition}
|
||||
navigation={navigation}
|
||||
render={this._render}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
_configureTransition(transitionProps, prevTransitionProps) {
|
||||
return {
|
||||
duration: 200,
|
||||
easing: Easing.out(Easing.ease),
|
||||
};
|
||||
}
|
||||
|
||||
_render = (transitionProps, prevTransitionProps) => {
|
||||
const scenes = transitionProps.scenes.map(scene =>
|
||||
this._renderScene(transitionProps, scene)
|
||||
);
|
||||
return <View style={{ flex: 1 }}>{scenes}</View>;
|
||||
};
|
||||
|
||||
_renderScene = (transitionProps, scene) => {
|
||||
const { navigation, router } = this.props;
|
||||
const { routes } = navigation.state;
|
||||
const { position } = transitionProps;
|
||||
const { index } = scene;
|
||||
|
||||
const animatedValue = position.interpolate({
|
||||
inputRange: [index - 1, index, index + 1],
|
||||
outputRange: [0, 1, 0],
|
||||
});
|
||||
|
||||
const animation = {
|
||||
opacity: animatedValue,
|
||||
transform: [{ scale: animatedValue }],
|
||||
};
|
||||
|
||||
// The prop `router` is populated when we call `createNavigator`.
|
||||
const Scene = router.getComponentForRouteName(scene.route.routeName);
|
||||
return (
|
||||
<Animated.View key={index} style={[styles.view, animation]}>
|
||||
<Scene
|
||||
navigation={addNavigationHelpers({
|
||||
...navigation,
|
||||
state: routes[index],
|
||||
})}
|
||||
/>
|
||||
</Animated.View>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
const CustomRouter = StackRouter({
|
||||
Home: { screen: MyHomeScreen },
|
||||
Settings: { screen: MySettingsScreen },
|
||||
});
|
||||
|
||||
const CustomTransitioner = createNavigationContainer(
|
||||
createNavigator(CustomRouter)(CustomNavigationView)
|
||||
);
|
||||
|
||||
export default CustomTransitioner;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
view: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
});
|
||||
@ -1,71 +0,0 @@
|
||||
/**
|
||||
* @flow
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Button, Platform, ScrollView, StatusBar } from 'react-native';
|
||||
import { DrawerNavigator, SafeAreaView } from 'react-navigation';
|
||||
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
|
||||
import SampleText from './SampleText';
|
||||
|
||||
const MyNavScreen = ({ navigation, banner }) => (
|
||||
<ScrollView>
|
||||
<SafeAreaView forceInset={{ top: 'always' }}>
|
||||
<SampleText>{banner}</SampleText>
|
||||
<Button
|
||||
onPress={() => navigation.navigate('DrawerOpen')}
|
||||
title="Open drawer"
|
||||
/>
|
||||
<Button onPress={() => navigation.goBack(null)} title="Go back" />
|
||||
</SafeAreaView>
|
||||
<StatusBar barStyle="default" />
|
||||
</ScrollView>
|
||||
);
|
||||
|
||||
const InboxScreen = ({ navigation }) => (
|
||||
<MyNavScreen banner={'Inbox Screen'} navigation={navigation} />
|
||||
);
|
||||
InboxScreen.navigationOptions = {
|
||||
drawerLabel: 'Inbox',
|
||||
drawerIcon: ({ tintColor }) => (
|
||||
<MaterialIcons
|
||||
name="move-to-inbox"
|
||||
size={24}
|
||||
style={{ color: tintColor }}
|
||||
/>
|
||||
),
|
||||
};
|
||||
|
||||
const DraftsScreen = ({ navigation }) => (
|
||||
<MyNavScreen banner={'Drafts Screen'} navigation={navigation} />
|
||||
);
|
||||
DraftsScreen.navigationOptions = {
|
||||
drawerLabel: 'Drafts',
|
||||
drawerIcon: ({ tintColor }) => (
|
||||
<MaterialIcons name="drafts" size={24} style={{ color: tintColor }} />
|
||||
),
|
||||
};
|
||||
|
||||
const DrawerExample = DrawerNavigator(
|
||||
{
|
||||
Inbox: {
|
||||
path: '/',
|
||||
screen: InboxScreen,
|
||||
},
|
||||
Drafts: {
|
||||
path: '/sent',
|
||||
screen: DraftsScreen,
|
||||
},
|
||||
},
|
||||
{
|
||||
drawerOpenRoute: 'DrawerOpen',
|
||||
drawerCloseRoute: 'DrawerClose',
|
||||
drawerToggleRoute: 'DrawerToggle',
|
||||
initialRouteName: 'Drafts',
|
||||
contentOptions: {
|
||||
activeTintColor: '#e91e63',
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
export default DrawerExample;
|
||||
@ -1,104 +0,0 @@
|
||||
/**
|
||||
* @flow
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Button, ScrollView, StatusBar, Text } from 'react-native';
|
||||
import { SafeAreaView, StackNavigator } from 'react-navigation';
|
||||
import SampleText from './SampleText';
|
||||
|
||||
const MyNavScreen = ({ navigation, banner }) => (
|
||||
<ScrollView contentInsetAdjustmentBehavior="automatic">
|
||||
<SafeAreaView
|
||||
forceInset={{
|
||||
top: navigation.state.routeName === 'HeaderTest' ? 'always' : 'never',
|
||||
}}
|
||||
>
|
||||
<SampleText>{banner}</SampleText>
|
||||
<Button
|
||||
onPress={() => navigation.navigate('Profile', { name: 'Jane' })}
|
||||
title="Go to a profile screen"
|
||||
/>
|
||||
<Button
|
||||
onPress={() => navigation.navigate('HeaderTest')}
|
||||
title="Go to a header toggle screen"
|
||||
/>
|
||||
{navigation.state.routeName === 'HeaderTest' && (
|
||||
<Button
|
||||
title="Toggle Header"
|
||||
onPress={() =>
|
||||
navigation.setParams({
|
||||
headerVisible:
|
||||
!navigation.state.params ||
|
||||
!navigation.state.params.headerVisible,
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
<Button onPress={() => navigation.goBack(null)} title="Go back" />
|
||||
</SafeAreaView>
|
||||
<StatusBar barStyle="default" />
|
||||
</ScrollView>
|
||||
);
|
||||
|
||||
const MyHomeScreen = ({ navigation }) => (
|
||||
<MyNavScreen banner="Home Screen" navigation={navigation} />
|
||||
);
|
||||
MyHomeScreen.navigationOptions = {
|
||||
title: 'Welcome',
|
||||
};
|
||||
|
||||
const MyProfileScreen = ({ navigation }) => (
|
||||
<MyNavScreen
|
||||
banner={`${navigation.state.params.name}'s Profile`}
|
||||
navigation={navigation}
|
||||
/>
|
||||
);
|
||||
MyProfileScreen.navigationOptions = ({ navigation }) => ({
|
||||
title: `${navigation.state.params.name}'s Profile!`,
|
||||
});
|
||||
|
||||
const ProfileNavigator = StackNavigator(
|
||||
{
|
||||
Home: {
|
||||
screen: MyHomeScreen,
|
||||
},
|
||||
Profile: {
|
||||
path: 'people/:name',
|
||||
screen: MyProfileScreen,
|
||||
},
|
||||
},
|
||||
{
|
||||
navigationOptions: {
|
||||
header: null,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const MyHeaderTestScreen = ({ navigation }) => (
|
||||
<MyNavScreen banner={`Full screen view`} navigation={navigation} />
|
||||
);
|
||||
MyHeaderTestScreen.navigationOptions = ({ navigation }) => {
|
||||
const headerVisible =
|
||||
navigation.state.params && navigation.state.params.headerVisible;
|
||||
return {
|
||||
header: headerVisible ? undefined : null,
|
||||
title: 'Now you see me',
|
||||
};
|
||||
};
|
||||
|
||||
const ModalStack = StackNavigator(
|
||||
{
|
||||
Home: {
|
||||
screen: MyHomeScreen,
|
||||
},
|
||||
ProfileNavigator: {
|
||||
screen: ProfileNavigator,
|
||||
},
|
||||
HeaderTest: { screen: MyHeaderTestScreen },
|
||||
},
|
||||
{
|
||||
mode: 'modal',
|
||||
}
|
||||
);
|
||||
|
||||
export default ModalStack;
|
||||
@ -1,84 +0,0 @@
|
||||
/**
|
||||
* @flow
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Button, Platform, ScrollView, StyleSheet } from 'react-native';
|
||||
import { DrawerNavigator } from 'react-navigation';
|
||||
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
|
||||
import SampleText from './SampleText';
|
||||
|
||||
const MyNavScreen = ({ navigation, banner }) => (
|
||||
<ScrollView style={styles.container}>
|
||||
<SampleText>{banner}</SampleText>
|
||||
<Button
|
||||
onPress={() => navigation.navigate('DrawerOpen')}
|
||||
title="Open drawer"
|
||||
/>
|
||||
<Button onPress={() => navigation.goBack(null)} title="Go back" />
|
||||
</ScrollView>
|
||||
);
|
||||
|
||||
const InboxScreen = ({ navigation }) => (
|
||||
<MyNavScreen banner={'Inbox Screen'} navigation={navigation} />
|
||||
);
|
||||
InboxScreen.navigationOptions = {
|
||||
drawerLabel: 'Inbox',
|
||||
drawerIcon: ({ tintColor }) => (
|
||||
<MaterialIcons
|
||||
name="move-to-inbox"
|
||||
size={24}
|
||||
style={{ color: tintColor }}
|
||||
/>
|
||||
),
|
||||
};
|
||||
|
||||
const DraftsScreen = ({ navigation }) => (
|
||||
<MyNavScreen banner={'Drafts Screen'} navigation={navigation} />
|
||||
);
|
||||
DraftsScreen.navigationOptions = {
|
||||
drawerLabel: 'Drafts',
|
||||
drawerIcon: ({ tintColor }) => (
|
||||
<MaterialIcons name="drafts" size={24} style={{ color: tintColor }} />
|
||||
),
|
||||
};
|
||||
|
||||
const DrawerExample = DrawerNavigator(
|
||||
{
|
||||
Inbox: {
|
||||
path: '/',
|
||||
screen: InboxScreen,
|
||||
},
|
||||
Drafts: {
|
||||
path: '/sent',
|
||||
screen: DraftsScreen,
|
||||
},
|
||||
},
|
||||
{
|
||||
drawerOpenRoute: 'DrawerOpen',
|
||||
drawerCloseRoute: 'DrawerClose',
|
||||
drawerToggleRoute: 'DrawerToggle',
|
||||
initialRouteName: 'Drafts',
|
||||
contentOptions: {
|
||||
activeTintColor: '#e91e63',
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const MainDrawerExample = DrawerNavigator({
|
||||
Drafts: {
|
||||
screen: DrawerExample,
|
||||
},
|
||||
}, {
|
||||
drawerOpenRoute: 'DrawerOpen',
|
||||
drawerCloseRoute: 'DrawerClose',
|
||||
drawerToggleRoute: 'DrawerToggle',
|
||||
});
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
marginTop: Platform.OS === 'ios' ? 20 : 0,
|
||||
},
|
||||
});
|
||||
|
||||
export default MainDrawerExample;
|
||||
@ -1,22 +0,0 @@
|
||||
/* @flow */
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { StyleSheet, Text } from 'react-native';
|
||||
|
||||
/**
|
||||
* Used across examples as a screen placeholder.
|
||||
*/
|
||||
import type { ChildrenArray } from 'react';
|
||||
|
||||
const SampleText = ({ children }: { children?: ChildrenArray<*> }) => (
|
||||
<Text style={styles.sampleText}>{children}</Text>
|
||||
);
|
||||
|
||||
export default SampleText;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
sampleText: {
|
||||
margin: 14,
|
||||
},
|
||||
});
|
||||
@ -1,84 +0,0 @@
|
||||
/**
|
||||
* @flow
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Button, ScrollView, StatusBar } from 'react-native';
|
||||
import { StackNavigator, SafeAreaView } from 'react-navigation';
|
||||
import SampleText from './SampleText';
|
||||
|
||||
const MyNavScreen = ({ navigation, banner }) => (
|
||||
<SafeAreaView>
|
||||
<SampleText>{banner}</SampleText>
|
||||
<Button
|
||||
onPress={() => navigation.navigate('Profile', { name: 'Jane' })}
|
||||
title="Go to a profile screen"
|
||||
/>
|
||||
<Button
|
||||
onPress={() => navigation.navigate('Photos', { name: 'Jane' })}
|
||||
title="Go to a photos screen"
|
||||
/>
|
||||
<Button onPress={() => navigation.goBack(null)} title="Go back" />
|
||||
<StatusBar barStyle="default" />
|
||||
</SafeAreaView>
|
||||
);
|
||||
|
||||
const MyHomeScreen = ({ navigation }) => (
|
||||
<MyNavScreen banner="Home Screen" navigation={navigation} />
|
||||
);
|
||||
MyHomeScreen.navigationOptions = {
|
||||
title: 'Welcome',
|
||||
};
|
||||
|
||||
const MyPhotosScreen = ({ navigation }) => (
|
||||
<MyNavScreen
|
||||
banner={`${navigation.state.params.name}'s Photos`}
|
||||
navigation={navigation}
|
||||
/>
|
||||
);
|
||||
MyPhotosScreen.navigationOptions = {
|
||||
title: 'Photos',
|
||||
};
|
||||
|
||||
const MyProfileScreen = ({ navigation }) => (
|
||||
<MyNavScreen
|
||||
banner={`${navigation.state.params.mode === 'edit'
|
||||
? 'Now Editing '
|
||||
: ''}${navigation.state.params.name}'s Profile`}
|
||||
navigation={navigation}
|
||||
/>
|
||||
);
|
||||
|
||||
MyProfileScreen.navigationOptions = props => {
|
||||
const { navigation } = props;
|
||||
const { state, setParams } = navigation;
|
||||
const { params } = state;
|
||||
return {
|
||||
headerTitle: `${params.name}'s Profile!`,
|
||||
// Render a button on the right side of the header.
|
||||
// When pressed switches the screen to edit mode.
|
||||
headerRight: (
|
||||
<Button
|
||||
title={params.mode === 'edit' ? 'Done' : 'Edit'}
|
||||
onPress={() =>
|
||||
setParams({ mode: params.mode === 'edit' ? '' : 'edit' })}
|
||||
/>
|
||||
),
|
||||
};
|
||||
};
|
||||
|
||||
const SimpleStack = StackNavigator({
|
||||
Home: {
|
||||
screen: MyHomeScreen,
|
||||
},
|
||||
Profile: {
|
||||
path: 'people/:name',
|
||||
screen: MyProfileScreen,
|
||||
},
|
||||
Photos: {
|
||||
path: 'photos/:name',
|
||||
screen: MyPhotosScreen,
|
||||
},
|
||||
});
|
||||
|
||||
export default SimpleStack;
|
||||
@ -1,117 +0,0 @@
|
||||
/**
|
||||
* @flow
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Button, Platform, ScrollView, StatusBar, View } from 'react-native';
|
||||
import { SafeAreaView, TabNavigator } from 'react-navigation';
|
||||
import Ionicons from 'react-native-vector-icons/Ionicons';
|
||||
import SampleText from './SampleText';
|
||||
|
||||
const MyNavScreen = ({ navigation, banner }) => (
|
||||
<SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
|
||||
<SampleText>{banner}</SampleText>
|
||||
<Button
|
||||
onPress={() => navigation.navigate('Home')}
|
||||
title="Go to home tab"
|
||||
/>
|
||||
<Button
|
||||
onPress={() => navigation.navigate('Settings')}
|
||||
title="Go to settings tab"
|
||||
/>
|
||||
<Button onPress={() => navigation.goBack(null)} title="Go back" />
|
||||
<StatusBar barStyle="default" />
|
||||
</SafeAreaView>
|
||||
);
|
||||
|
||||
const MyHomeScreen = ({ navigation }) => (
|
||||
<MyNavScreen banner="Home Tab" navigation={navigation} />
|
||||
);
|
||||
|
||||
MyHomeScreen.navigationOptions = {
|
||||
tabBarTestIDProps: {
|
||||
testID: 'TEST_ID_HOME',
|
||||
accessibilityLabel: 'TEST_ID_HOME_ACLBL',
|
||||
},
|
||||
tabBarLabel: 'Home',
|
||||
tabBarIcon: ({ tintColor, focused }) => (
|
||||
<Ionicons
|
||||
name={focused ? 'ios-home' : 'ios-home-outline'}
|
||||
size={26}
|
||||
style={{ color: tintColor }}
|
||||
/>
|
||||
),
|
||||
};
|
||||
|
||||
const MyPeopleScreen = ({ navigation }) => (
|
||||
<MyNavScreen banner="People Tab" navigation={navigation} />
|
||||
);
|
||||
|
||||
MyPeopleScreen.navigationOptions = {
|
||||
tabBarLabel: 'People',
|
||||
tabBarIcon: ({ tintColor, focused }) => (
|
||||
<Ionicons
|
||||
name={focused ? 'ios-people' : 'ios-people-outline'}
|
||||
size={26}
|
||||
style={{ color: tintColor }}
|
||||
/>
|
||||
),
|
||||
};
|
||||
|
||||
const MyChatScreen = ({ navigation }) => (
|
||||
<MyNavScreen banner="Chat Tab" navigation={navigation} />
|
||||
);
|
||||
|
||||
MyChatScreen.navigationOptions = {
|
||||
tabBarLabel: 'Chat',
|
||||
tabBarIcon: ({ tintColor, focused }) => (
|
||||
<Ionicons
|
||||
name={focused ? 'ios-chatboxes' : 'ios-chatboxes-outline'}
|
||||
size={26}
|
||||
style={{ color: tintColor }}
|
||||
/>
|
||||
),
|
||||
};
|
||||
|
||||
const MySettingsScreen = ({ navigation }) => (
|
||||
<MyNavScreen banner="Settings Tab" navigation={navigation} />
|
||||
);
|
||||
|
||||
MySettingsScreen.navigationOptions = {
|
||||
tabBarLabel: 'Settings',
|
||||
tabBarIcon: ({ tintColor, focused }) => (
|
||||
<Ionicons
|
||||
name={focused ? 'ios-settings' : 'ios-settings-outline'}
|
||||
size={26}
|
||||
style={{ color: tintColor }}
|
||||
/>
|
||||
),
|
||||
};
|
||||
|
||||
const SimpleTabs = TabNavigator(
|
||||
{
|
||||
Home: {
|
||||
screen: MyHomeScreen,
|
||||
path: '',
|
||||
},
|
||||
People: {
|
||||
screen: MyPeopleScreen,
|
||||
path: 'cart',
|
||||
},
|
||||
Chat: {
|
||||
screen: MyChatScreen,
|
||||
path: 'chat',
|
||||
},
|
||||
Settings: {
|
||||
screen: MySettingsScreen,
|
||||
path: 'settings',
|
||||
},
|
||||
},
|
||||
{
|
||||
tabBarOptions: {
|
||||
activeTintColor: Platform.OS === 'ios' ? '#e91e63' : '#fff',
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
export default SimpleTabs;
|
||||
@ -1,125 +0,0 @@
|
||||
/**
|
||||
* @flow
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Button, ScrollView, StatusBar } from 'react-native';
|
||||
import { SafeAreaView, StackNavigator, TabNavigator } from 'react-navigation';
|
||||
|
||||
import Ionicons from 'react-native-vector-icons/Ionicons';
|
||||
import SampleText from './SampleText';
|
||||
|
||||
const MyNavScreen = ({ navigation, banner }) => (
|
||||
<ScrollView>
|
||||
<SafeAreaView forceInset={{ horizontal: 'always' }}>
|
||||
<SampleText>{banner}</SampleText>
|
||||
<Button
|
||||
onPress={() => navigation.navigate('Profile', { name: 'Jordan' })}
|
||||
title="Open profile screen"
|
||||
/>
|
||||
<Button
|
||||
onPress={() => navigation.navigate('NotifSettings')}
|
||||
title="Open notifications screen"
|
||||
/>
|
||||
<Button
|
||||
onPress={() => navigation.navigate('SettingsTab')}
|
||||
title="Go to settings tab"
|
||||
/>
|
||||
<Button onPress={() => navigation.goBack(null)} title="Go back" />
|
||||
</SafeAreaView>
|
||||
|
||||
<StatusBar barStyle="default" />
|
||||
</ScrollView>
|
||||
);
|
||||
|
||||
const MyHomeScreen = ({ navigation }) => (
|
||||
<MyNavScreen banner="Home Screen" navigation={navigation} />
|
||||
);
|
||||
|
||||
const MyProfileScreen = ({ navigation }) => (
|
||||
<MyNavScreen
|
||||
banner={`${navigation.state.params.name}s Profile`}
|
||||
navigation={navigation}
|
||||
/>
|
||||
);
|
||||
|
||||
const MyNotificationsSettingsScreen = ({ navigation }) => (
|
||||
<MyNavScreen banner="Notifications Screen" navigation={navigation} />
|
||||
);
|
||||
|
||||
const MySettingsScreen = ({ navigation }) => (
|
||||
<MyNavScreen banner="Settings Screen" navigation={navigation} />
|
||||
);
|
||||
|
||||
const MainTab = StackNavigator({
|
||||
Home: {
|
||||
screen: MyHomeScreen,
|
||||
path: '/',
|
||||
navigationOptions: {
|
||||
title: 'Welcome',
|
||||
},
|
||||
},
|
||||
Profile: {
|
||||
screen: MyProfileScreen,
|
||||
path: '/people/:name',
|
||||
navigationOptions: ({ navigation }) => ({
|
||||
title: `${navigation.state.params.name}'s Profile!`,
|
||||
}),
|
||||
},
|
||||
});
|
||||
|
||||
const SettingsTab = StackNavigator({
|
||||
Settings: {
|
||||
screen: MySettingsScreen,
|
||||
path: '/',
|
||||
navigationOptions: () => ({
|
||||
title: 'Settings',
|
||||
}),
|
||||
},
|
||||
NotifSettings: {
|
||||
screen: MyNotificationsSettingsScreen,
|
||||
navigationOptions: {
|
||||
title: 'Notifications',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const StacksInTabs = TabNavigator(
|
||||
{
|
||||
MainTab: {
|
||||
screen: MainTab,
|
||||
path: '/',
|
||||
navigationOptions: {
|
||||
tabBarLabel: 'Home',
|
||||
tabBarIcon: ({ tintColor, focused }) => (
|
||||
<Ionicons
|
||||
name={focused ? 'ios-home' : 'ios-home-outline'}
|
||||
size={26}
|
||||
style={{ color: tintColor }}
|
||||
/>
|
||||
),
|
||||
},
|
||||
},
|
||||
SettingsTab: {
|
||||
screen: SettingsTab,
|
||||
path: '/settings',
|
||||
navigationOptions: {
|
||||
tabBarLabel: 'Settings',
|
||||
tabBarIcon: ({ tintColor, focused }) => (
|
||||
<Ionicons
|
||||
name={focused ? 'ios-settings' : 'ios-settings-outline'}
|
||||
size={26}
|
||||
style={{ color: tintColor }}
|
||||
/>
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
tabBarPosition: 'bottom',
|
||||
animationEnabled: false,
|
||||
swipeEnabled: false,
|
||||
}
|
||||
);
|
||||
|
||||
export default StacksInTabs;
|
||||
@ -1,111 +0,0 @@
|
||||
/**
|
||||
* @flow
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Button, ScrollView, StatusBar } from 'react-native';
|
||||
import { SafeAreaView, StackNavigator, TabNavigator } from 'react-navigation';
|
||||
|
||||
import Ionicons from 'react-native-vector-icons/Ionicons';
|
||||
import SampleText from './SampleText';
|
||||
|
||||
const MyNavScreen = ({ navigation, banner }) => (
|
||||
<ScrollView>
|
||||
<SafeAreaView forceInset={{ horizontal: 'always' }}>
|
||||
<SampleText>{banner}</SampleText>
|
||||
<Button
|
||||
onPress={() => navigation.navigate('Profile', { name: 'Jordan' })}
|
||||
title="Open profile screen"
|
||||
/>
|
||||
<Button
|
||||
onPress={() => navigation.navigate('NotifSettings')}
|
||||
title="Open notifications screen"
|
||||
/>
|
||||
<Button
|
||||
onPress={() => navigation.navigate('SettingsTab')}
|
||||
title="Go to settings tab"
|
||||
/>
|
||||
<Button onPress={() => navigation.goBack(null)} title="Go back" />
|
||||
</SafeAreaView>
|
||||
<StatusBar barStyle="default" />
|
||||
</ScrollView>
|
||||
);
|
||||
|
||||
const MyHomeScreen = ({ navigation }) => (
|
||||
<MyNavScreen banner="Home Screen" navigation={navigation} />
|
||||
);
|
||||
|
||||
const MyProfileScreen = ({ navigation }) => (
|
||||
<MyNavScreen
|
||||
banner={`${navigation.state.params.name}s Profile`}
|
||||
navigation={navigation}
|
||||
/>
|
||||
);
|
||||
|
||||
const MyNotificationsSettingsScreen = ({ navigation }) => (
|
||||
<MyNavScreen banner="Notifications Screen" navigation={navigation} />
|
||||
);
|
||||
|
||||
const MySettingsScreen = ({ navigation }) => (
|
||||
<MyNavScreen banner="Settings Screen" navigation={navigation} />
|
||||
);
|
||||
|
||||
const TabNav = TabNavigator(
|
||||
{
|
||||
MainTab: {
|
||||
screen: MyHomeScreen,
|
||||
path: '/',
|
||||
navigationOptions: {
|
||||
title: 'Welcome',
|
||||
tabBarLabel: 'Home',
|
||||
tabBarIcon: ({ tintColor, focused }) => (
|
||||
<Ionicons
|
||||
name={focused ? 'ios-home' : 'ios-home-outline'}
|
||||
size={26}
|
||||
style={{ color: tintColor }}
|
||||
/>
|
||||
),
|
||||
},
|
||||
},
|
||||
SettingsTab: {
|
||||
screen: MySettingsScreen,
|
||||
path: '/settings',
|
||||
navigationOptions: {
|
||||
title: 'Settings',
|
||||
tabBarIcon: ({ tintColor, focused }) => (
|
||||
<Ionicons
|
||||
name={focused ? 'ios-settings' : 'ios-settings-outline'}
|
||||
size={26}
|
||||
style={{ color: tintColor }}
|
||||
/>
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
tabBarPosition: 'bottom',
|
||||
animationEnabled: false,
|
||||
swipeEnabled: false,
|
||||
}
|
||||
);
|
||||
|
||||
const StacksOverTabs = StackNavigator({
|
||||
Root: {
|
||||
screen: TabNav,
|
||||
},
|
||||
NotifSettings: {
|
||||
screen: MyNotificationsSettingsScreen,
|
||||
navigationOptions: {
|
||||
title: 'Notifications',
|
||||
},
|
||||
},
|
||||
Profile: {
|
||||
screen: MyProfileScreen,
|
||||
path: '/people/:name',
|
||||
navigationOptions: ({ navigation }) => {
|
||||
title: `${navigation.state.params.name}'s Profile!`;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default StacksOverTabs;
|
||||
@ -1,127 +0,0 @@
|
||||
/**
|
||||
* @flow
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Animated, Button, ScrollView, StatusBar } from 'react-native';
|
||||
import { StackNavigator, TabNavigator } from 'react-navigation';
|
||||
|
||||
import Ionicons from 'react-native-vector-icons/Ionicons';
|
||||
import SampleText from './SampleText';
|
||||
|
||||
const MyNavScreen = ({ navigation, banner }) => (
|
||||
<ScrollView>
|
||||
<SampleText>{banner}</SampleText>
|
||||
<Button
|
||||
onPress={() => navigation.navigate('Profile', { name: 'Jordan' })}
|
||||
title="Open profile screen"
|
||||
/>
|
||||
<Button
|
||||
onPress={() => navigation.navigate('NotifSettings')}
|
||||
title="Open notifications screen"
|
||||
/>
|
||||
<Button
|
||||
onPress={() => navigation.navigate('SettingsTab')}
|
||||
title="Go to settings tab"
|
||||
/>
|
||||
<Button onPress={() => navigation.goBack(null)} title="Go back" />
|
||||
<StatusBar barStyle="default" />
|
||||
</ScrollView>
|
||||
);
|
||||
|
||||
const MyHomeScreen = ({ navigation }) => (
|
||||
<MyNavScreen banner="Home Screen" navigation={navigation} />
|
||||
);
|
||||
|
||||
const MyProfileScreen = ({ navigation }) => (
|
||||
<MyNavScreen
|
||||
banner={`${navigation.state.params.name}s Profile`}
|
||||
navigation={navigation}
|
||||
/>
|
||||
);
|
||||
|
||||
const MyNotificationsSettingsScreen = ({ navigation }) => (
|
||||
<MyNavScreen banner="Notifications Screen" navigation={navigation} />
|
||||
);
|
||||
|
||||
const MySettingsScreen = ({ navigation }) => (
|
||||
<MyNavScreen banner="Settings Screen" navigation={navigation} />
|
||||
);
|
||||
|
||||
const MainTab = StackNavigator({
|
||||
Home: {
|
||||
screen: MyHomeScreen,
|
||||
path: '/',
|
||||
navigationOptions: {
|
||||
title: 'Welcome',
|
||||
},
|
||||
},
|
||||
Profile: {
|
||||
screen: MyProfileScreen,
|
||||
path: '/people/:name',
|
||||
navigationOptions: ({ navigation }) => ({
|
||||
title: `${navigation.state.params.name}'s Profile!`,
|
||||
}),
|
||||
},
|
||||
});
|
||||
|
||||
const SettingsTab = StackNavigator({
|
||||
Settings: {
|
||||
screen: MySettingsScreen,
|
||||
path: '/',
|
||||
navigationOptions: () => ({
|
||||
title: 'Settings',
|
||||
}),
|
||||
},
|
||||
NotifSettings: {
|
||||
screen: MyNotificationsSettingsScreen,
|
||||
navigationOptions: {
|
||||
title: 'Notifications',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const TabAnimations = TabNavigator(
|
||||
{
|
||||
MainTab: {
|
||||
screen: MainTab,
|
||||
path: '/',
|
||||
navigationOptions: {
|
||||
tabBarLabel: 'Home',
|
||||
tabBarIcon: ({ tintColor, focused }) => (
|
||||
<Ionicons
|
||||
name={focused ? 'ios-home' : 'ios-home-outline'}
|
||||
size={26}
|
||||
style={{ color: tintColor }}
|
||||
/>
|
||||
),
|
||||
},
|
||||
},
|
||||
SettingsTab: {
|
||||
screen: SettingsTab,
|
||||
path: '/settings',
|
||||
navigationOptions: {
|
||||
tabBarLabel: 'Settings',
|
||||
tabBarIcon: ({ tintColor, focused }) => (
|
||||
<Ionicons
|
||||
name={focused ? 'ios-settings' : 'ios-settings-outline'}
|
||||
size={26}
|
||||
style={{ color: tintColor }}
|
||||
/>
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
tabBarPosition: 'bottom',
|
||||
animationEnabled: true,
|
||||
configureTransition: (currentTransitionProps,nextTransitionProps) => ({
|
||||
timing: Animated.spring,
|
||||
tension: 1,
|
||||
friction: 35,
|
||||
}),
|
||||
swipeEnabled: false,
|
||||
}
|
||||
);
|
||||
|
||||
export default TabAnimations;
|
||||
@ -1,45 +0,0 @@
|
||||
/**
|
||||
* @flow
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Button, Platform, ScrollView } from 'react-native';
|
||||
import { TabNavigator, DrawerNavigator } from 'react-navigation';
|
||||
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
|
||||
import SimpleTabs from './SimpleTabs';
|
||||
import StacksOverTabs from './StacksOverTabs';
|
||||
|
||||
const TabsInDrawer = DrawerNavigator({
|
||||
SimpleTabs: {
|
||||
screen: SimpleTabs,
|
||||
navigationOptions: {
|
||||
drawer: () => ({
|
||||
label: 'Simple Tabs',
|
||||
icon: ({ tintColor }) => (
|
||||
<MaterialIcons
|
||||
name="filter-1"
|
||||
size={24}
|
||||
style={{ color: tintColor }}
|
||||
/>
|
||||
),
|
||||
}),
|
||||
},
|
||||
},
|
||||
StacksOverTabs: {
|
||||
screen: StacksOverTabs,
|
||||
navigationOptions: {
|
||||
drawer: () => ({
|
||||
label: 'Stacks Over Tabs',
|
||||
icon: ({ tintColor }) => (
|
||||
<MaterialIcons
|
||||
name="filter-2"
|
||||
size={24}
|
||||
style={{ color: tintColor }}
|
||||
/>
|
||||
),
|
||||
}),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default TabsInDrawer;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
@ -1,40 +0,0 @@
|
||||
{
|
||||
"name": "NavigationPlayground",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
|
||||
"scripts": {
|
||||
"postinstall":
|
||||
"rm -rf node_modules/react-navigation/{node_modules,examples}",
|
||||
"start": "react-native-scripts start",
|
||||
"eject": "react-native-scripts eject",
|
||||
"android": "react-native-scripts android",
|
||||
"ios": "react-native-scripts ios",
|
||||
"test": "node node_modules/jest/bin/jest.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"expo": "^24.0.2",
|
||||
"react": "16.0.0",
|
||||
"react-native": "^0.51.0",
|
||||
"react-navigation": "file:../.."
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-jest": "^21.0.0",
|
||||
"flow-bin": "^0.56.0",
|
||||
"jest": "^21.0.1",
|
||||
"jest-expo": "^24.0.0",
|
||||
"react-native-scripts": "^1.5.0",
|
||||
"react-test-renderer": "16.0.0"
|
||||
},
|
||||
"jest": {
|
||||
"preset": "jest-expo",
|
||||
"moduleFileExtensions": ["web.js", "js", "json", "jsx", "node"],
|
||||
"modulePathIgnorePatterns": [
|
||||
"/node_modules/.*/react-native/",
|
||||
"/node_modules/.*/react/"
|
||||
],
|
||||
"transformIgnorePatterns": [
|
||||
"/node_modules/(?!react-native|react-navigation)/"
|
||||
]
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,5 +0,0 @@
|
||||
# Examples
|
||||
|
||||
## Usage
|
||||
|
||||
Please see the [Contributors Guide](https://reactnavigation.org/docs/guides/contributors#Run-the-Example-App) for instructions on running these example apps.
|
||||
@ -1,8 +0,0 @@
|
||||
{
|
||||
"presets": ["babel-preset-expo"],
|
||||
"env": {
|
||||
"development": {
|
||||
"plugins": ["transform-react-jsx-source"]
|
||||
}
|
||||
}
|
||||
}
|
||||
3
examples/ReduxExample/.gitignore
vendored
3
examples/ReduxExample/.gitignore
vendored
@ -1,3 +0,0 @@
|
||||
node_modules/
|
||||
.expo/
|
||||
npm-debug.*
|
||||
@ -1 +0,0 @@
|
||||
{}
|
||||
@ -1,27 +0,0 @@
|
||||
/**
|
||||
* @flow
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { AppRegistry } from 'react-native';
|
||||
import { Provider } from 'react-redux';
|
||||
import { createStore } from 'redux';
|
||||
|
||||
import AppReducer from './src/reducers';
|
||||
import AppWithNavigationState from './src/navigators/AppNavigator';
|
||||
|
||||
class ReduxExampleApp extends React.Component {
|
||||
store = createStore(AppReducer);
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Provider store={this.store}>
|
||||
<AppWithNavigationState />
|
||||
</Provider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
AppRegistry.registerComponent('ReduxExample', () => ReduxExampleApp);
|
||||
|
||||
export default ReduxExampleApp;
|
||||
@ -1,9 +0,0 @@
|
||||
import React from 'react';
|
||||
import App from './App';
|
||||
|
||||
import renderer from 'react-test-renderer';
|
||||
|
||||
it('renders without crashing', () => {
|
||||
const rendered = renderer.create(<App />).toJSON();
|
||||
expect(rendered).toBeTruthy();
|
||||
});
|
||||
@ -1,5 +0,0 @@
|
||||
# Redux example
|
||||
|
||||
## Usage
|
||||
|
||||
Please see the [Contributors Guide](https://reactnavigation.org/docs/guides/contributors#Run-the-Example-App) for instructions on running these example apps.
|
||||
@ -1,27 +0,0 @@
|
||||
{
|
||||
"expo": {
|
||||
"name": "ReduxExample",
|
||||
"description": "Try out react-navigation with this awesome Redux example",
|
||||
"version": "1.0.0",
|
||||
"slug": "ReduxExample",
|
||||
"privacy": "public",
|
||||
"orientation": "portrait",
|
||||
"primaryColor": "#cccccc",
|
||||
"icon": "./assets/icons/react-navigation.png",
|
||||
"loading": {
|
||||
"icon": "./assets/icons/react-navigation.png",
|
||||
"hideExponentText": false
|
||||
},
|
||||
"sdkVersion": "23.0.0",
|
||||
"entryPoint": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
|
||||
"packagerOpts": {
|
||||
"assetExts": [
|
||||
"ttf",
|
||||
"mp4"
|
||||
]
|
||||
},
|
||||
"ios": {
|
||||
"supportsTablet": true
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
@ -1,41 +0,0 @@
|
||||
{
|
||||
"name": "ReduxExample",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
|
||||
"scripts": {
|
||||
"postinstall":
|
||||
"rm -rf node_modules/react-navigation/{node_modules,examples}",
|
||||
"start": "react-native-scripts start",
|
||||
"eject": "react-native-scripts eject",
|
||||
"android": "react-native-scripts android",
|
||||
"ios": "react-native-scripts ios",
|
||||
"test": "node node_modules/jest/bin/jest.js"
|
||||
},
|
||||
"jest": {
|
||||
"preset": "jest-expo",
|
||||
"modulePathIgnorePatterns": [
|
||||
"/node_modules/.*/react-native/",
|
||||
"/node_modules/.*/react/"
|
||||
],
|
||||
"transformIgnorePatterns": [
|
||||
"/node_modules/(?!react-native|react-navigation)/"
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"expo": "^23.0.0",
|
||||
"prop-types": "^15.5.10",
|
||||
"react": "16.0.0",
|
||||
"react-native": "^0.50.3",
|
||||
"react-redux": "^5.0.6",
|
||||
"redux": "^3.7.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-jest": "^21.0.0",
|
||||
"jest": "^21.0.1",
|
||||
"jest-expo": "^23.0.0",
|
||||
"react-native-scripts": "^1.3.1",
|
||||
"react-navigation": "file:../..",
|
||||
"react-test-renderer": "16.0.0"
|
||||
}
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { Button } from 'react-native';
|
||||
import { NavigationActions } from 'react-navigation';
|
||||
|
||||
const AuthButton = ({ logout, loginScreen, isLoggedIn }) => (
|
||||
<Button
|
||||
title={isLoggedIn ? 'Log Out' : 'Open Login Screen'}
|
||||
onPress={isLoggedIn ? logout : loginScreen}
|
||||
/>
|
||||
);
|
||||
|
||||
AuthButton.propTypes = {
|
||||
isLoggedIn: PropTypes.bool.isRequired,
|
||||
logout: PropTypes.func.isRequired,
|
||||
loginScreen: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
isLoggedIn: state.auth.isLoggedIn,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
logout: () => dispatch({ type: 'Logout' }),
|
||||
loginScreen: () =>
|
||||
dispatch(NavigationActions.navigate({ routeName: 'Login' })),
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(AuthButton);
|
||||
@ -1,42 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button, StyleSheet, Text, View } from 'react-native';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#F5FCFF',
|
||||
},
|
||||
welcome: {
|
||||
fontSize: 20,
|
||||
textAlign: 'center',
|
||||
margin: 10,
|
||||
},
|
||||
});
|
||||
|
||||
const LoginScreen = ({ navigation }) => (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.welcome}>
|
||||
Screen A
|
||||
</Text>
|
||||
<Text style={styles.instructions}>
|
||||
This is great
|
||||
</Text>
|
||||
<Button
|
||||
onPress={() => navigation.dispatch({ type: 'Login' })}
|
||||
title="Log in"
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
|
||||
LoginScreen.propTypes = {
|
||||
navigation: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
LoginScreen.navigationOptions = {
|
||||
title: 'Log In',
|
||||
};
|
||||
|
||||
export default LoginScreen;
|
||||
@ -1,42 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { Button, StyleSheet, Text, View } from 'react-native';
|
||||
import { NavigationActions } from 'react-navigation';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
welcome: {
|
||||
fontSize: 20,
|
||||
textAlign: 'center',
|
||||
margin: 10,
|
||||
},
|
||||
});
|
||||
|
||||
const LoginStatusMessage = ({ isLoggedIn, dispatch }) => {
|
||||
if (!isLoggedIn) {
|
||||
return <Text>Please log in</Text>;
|
||||
}
|
||||
return (
|
||||
<View>
|
||||
<Text style={styles.welcome}>
|
||||
{'You are "logged in" right now'}
|
||||
</Text>
|
||||
<Button
|
||||
onPress={() =>
|
||||
dispatch(NavigationActions.navigate({ routeName: 'Profile' }))}
|
||||
title="Profile"
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
LoginStatusMessage.propTypes = {
|
||||
isLoggedIn: PropTypes.bool.isRequired,
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
isLoggedIn: state.auth.isLoggedIn,
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps)(LoginStatusMessage);
|
||||
@ -1,27 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet, View } from 'react-native';
|
||||
|
||||
import LoginStatusMessage from './LoginStatusMessage';
|
||||
import AuthButton from './AuthButton';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#F5FCFF',
|
||||
},
|
||||
});
|
||||
|
||||
const MainScreen = () => (
|
||||
<View style={styles.container}>
|
||||
<LoginStatusMessage />
|
||||
<AuthButton />
|
||||
</View>
|
||||
);
|
||||
|
||||
MainScreen.navigationOptions = {
|
||||
title: 'Home Screen',
|
||||
};
|
||||
|
||||
export default MainScreen;
|
||||
@ -1,30 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet, Text, View } from 'react-native';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#F5FCFF',
|
||||
},
|
||||
welcome: {
|
||||
fontSize: 20,
|
||||
textAlign: 'center',
|
||||
margin: 10,
|
||||
},
|
||||
});
|
||||
|
||||
const ProfileScreen = () => (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.welcome}>
|
||||
Profile Screen
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
|
||||
ProfileScreen.navigationOptions = {
|
||||
title: 'Profile',
|
||||
};
|
||||
|
||||
export default ProfileScreen;
|
||||
@ -1,29 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { addNavigationHelpers, StackNavigator } from 'react-navigation';
|
||||
|
||||
import LoginScreen from '../components/LoginScreen';
|
||||
import MainScreen from '../components/MainScreen';
|
||||
import ProfileScreen from '../components/ProfileScreen';
|
||||
|
||||
export const AppNavigator = StackNavigator({
|
||||
Login: { screen: LoginScreen },
|
||||
Main: { screen: MainScreen },
|
||||
Profile: { screen: ProfileScreen },
|
||||
});
|
||||
|
||||
const AppWithNavigationState = ({ dispatch, nav }) => (
|
||||
<AppNavigator navigation={addNavigationHelpers({ dispatch, state: nav })} />
|
||||
);
|
||||
|
||||
AppWithNavigationState.propTypes = {
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
nav: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
nav: state.nav,
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps)(AppWithNavigationState);
|
||||
@ -1,57 +0,0 @@
|
||||
import { combineReducers } from 'redux';
|
||||
import { NavigationActions } from 'react-navigation';
|
||||
|
||||
import { AppNavigator } from '../navigators/AppNavigator';
|
||||
|
||||
// Start with two routes: The Main screen, with the Login screen on top.
|
||||
const firstAction = AppNavigator.router.getActionForPathAndParams('Main');
|
||||
const tempNavState = AppNavigator.router.getStateForAction(firstAction);
|
||||
const secondAction = AppNavigator.router.getActionForPathAndParams('Login');
|
||||
const initialNavState = AppNavigator.router.getStateForAction(
|
||||
secondAction,
|
||||
tempNavState
|
||||
);
|
||||
|
||||
function nav(state = initialNavState, action) {
|
||||
let nextState;
|
||||
switch (action.type) {
|
||||
case 'Login':
|
||||
nextState = AppNavigator.router.getStateForAction(
|
||||
NavigationActions.back(),
|
||||
state
|
||||
);
|
||||
break;
|
||||
case 'Logout':
|
||||
nextState = AppNavigator.router.getStateForAction(
|
||||
NavigationActions.navigate({ routeName: 'Login' }),
|
||||
state
|
||||
);
|
||||
break;
|
||||
default:
|
||||
nextState = AppNavigator.router.getStateForAction(action, state);
|
||||
break;
|
||||
}
|
||||
|
||||
// Simply return the original `state` if `nextState` is null or undefined.
|
||||
return nextState || state;
|
||||
}
|
||||
|
||||
const initialAuthState = { isLoggedIn: false };
|
||||
|
||||
function auth(state = initialAuthState, action) {
|
||||
switch (action.type) {
|
||||
case 'Login':
|
||||
return { ...state, isLoggedIn: true };
|
||||
case 'Logout':
|
||||
return { ...state, isLoggedIn: false };
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
const AppReducer = combineReducers({
|
||||
nav,
|
||||
auth,
|
||||
});
|
||||
|
||||
export default AppReducer;
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,8 +0,0 @@
|
||||
{
|
||||
"presets": ["babel-preset-expo"],
|
||||
"env": {
|
||||
"development": {
|
||||
"plugins": ["transform-react-jsx-source"]
|
||||
}
|
||||
}
|
||||
}
|
||||
3
examples/SafeAreaExample/.gitignore
vendored
3
examples/SafeAreaExample/.gitignore
vendored
@ -1,3 +0,0 @@
|
||||
node_modules/**/*
|
||||
.expo/*
|
||||
npm-debug.*
|
||||
@ -1 +0,0 @@
|
||||
{}
|
||||
@ -1,244 +0,0 @@
|
||||
import React from 'react';
|
||||
import { ScrollView, StyleSheet, Text, View } from 'react-native';
|
||||
import { StackNavigator, withNavigation } from 'react-navigation';
|
||||
import { Constants } from 'expo';
|
||||
import Touchable from 'react-native-platform-touchable';
|
||||
import TabsScreen from './screens/TabsScreen';
|
||||
import DrawerScreen from './screens/DrawerScreen';
|
||||
import createDumbStack from './screens/createDumbStack';
|
||||
import createDumbTabs from './screens/createDumbTabs';
|
||||
|
||||
export default class App extends React.Component {
|
||||
render() {
|
||||
return <RootStack />;
|
||||
}
|
||||
}
|
||||
|
||||
@withNavigation
|
||||
class ExampleItem extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
borderBottomColor: '#eee',
|
||||
borderBottomWidth: 1,
|
||||
}}>
|
||||
<Touchable
|
||||
onPress={this._handlePress}
|
||||
style={{
|
||||
height: 50,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: this.props.common ? '#fffcd3' : '#fff',
|
||||
}}>
|
||||
<Text style={{ fontSize: 15 }}>
|
||||
{this.props.title} {this.props.common ? '(commonly used)' : null}
|
||||
</Text>
|
||||
</Touchable>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
_handlePress = () => {
|
||||
this.props.navigation.navigate(this.props.route);
|
||||
};
|
||||
}
|
||||
|
||||
class ExampleListScreen extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<View style={{ flex: 1 }}>
|
||||
<ScrollView
|
||||
style={{ flex: 1 }}
|
||||
contentContainerStyle={{ paddingTop: 50, backgroundColor: '#fff' }}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 25,
|
||||
textAlign: 'center',
|
||||
marginBottom: 20,
|
||||
paddingBottom: 20,
|
||||
}}>
|
||||
SafeAreaView Examples
|
||||
</Text>
|
||||
|
||||
<ExampleItem title="Basic Tabs" route="tabs" common />
|
||||
{/* <ExampleItem title="Basic Drawer" route="drawer" /> */}
|
||||
<ExampleItem title="Header height" route="headerHeight" common />
|
||||
<ExampleItem title="Header padding" route="headerPadding" />
|
||||
<ExampleItem
|
||||
title="Header height and padding"
|
||||
route="headerHeightAndPadding"
|
||||
/>
|
||||
<ExampleItem
|
||||
title="Header padding as percent"
|
||||
route="headerPaddingPercent"
|
||||
/>
|
||||
<ExampleItem title="Header with margin" route="headerMargin" />
|
||||
<ExampleItem title="Tab bar height" route="tabBarHeight" common />
|
||||
<ExampleItem title="Tab bar padding" route="tabBarPadding" common />
|
||||
<ExampleItem
|
||||
common
|
||||
title="Tab bar height and padding"
|
||||
route="tabBarHeightAndPadding"
|
||||
/>
|
||||
<ExampleItem title="Tab bar margin" route="tabBarMargin" />
|
||||
</ScrollView>
|
||||
<View
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: Constants.statusBarHeight,
|
||||
backgroundColor: '#fff',
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const StackWithHeaderHeight = createDumbStack({
|
||||
title: 'height: 150',
|
||||
headerStyle: { height: 150 },
|
||||
});
|
||||
const StackWithHeaderPadding = createDumbStack({
|
||||
title: 'padding: 100',
|
||||
headerStyle: { padding: 100 },
|
||||
});
|
||||
const StackWithHeaderHeightAndPadding = createDumbStack({
|
||||
title: 'height: 150, padding: 100',
|
||||
headerStyle: { height: 150, padding: 100 },
|
||||
});
|
||||
const StackWithHeaderPaddingPercent = createDumbStack({
|
||||
title: 'padding: 60%',
|
||||
headerStyle: { padding: '60%' },
|
||||
});
|
||||
const StackWithHeaderMargin = createDumbStack({
|
||||
title: 'margin: 20 (but why? :/)',
|
||||
headerStyle: { margin: 20 },
|
||||
});
|
||||
|
||||
const TabBarWithHeight = createDumbTabs(
|
||||
{
|
||||
tabBarLabel: 'label!',
|
||||
tabBarOptions: {
|
||||
style: {
|
||||
height: 100,
|
||||
},
|
||||
},
|
||||
},
|
||||
createDumbStack({
|
||||
title: 'tabBar height 100',
|
||||
})
|
||||
);
|
||||
|
||||
const TabBarWithPadding = createDumbTabs(
|
||||
{
|
||||
tabBarLabel: 'label!',
|
||||
tabBarOptions: {
|
||||
style: {
|
||||
padding: 20,
|
||||
},
|
||||
},
|
||||
},
|
||||
createDumbStack({
|
||||
title: 'tabBar padding 20',
|
||||
})
|
||||
);
|
||||
|
||||
const TabBarWithHeightAndPadding = createDumbTabs(
|
||||
{
|
||||
tabBarLabel: 'label!',
|
||||
tabBarOptions: {
|
||||
style: {
|
||||
padding: 20,
|
||||
height: 100,
|
||||
},
|
||||
},
|
||||
},
|
||||
createDumbStack({
|
||||
title: 'tabBar height 100 padding 20',
|
||||
})
|
||||
);
|
||||
|
||||
const TabBarWithMargin = createDumbTabs(
|
||||
{
|
||||
tabBarLabel: 'label!',
|
||||
tabBarOptions: {
|
||||
style: {
|
||||
margin: 20,
|
||||
},
|
||||
},
|
||||
},
|
||||
createDumbStack({
|
||||
title: 'tabBar margin 20',
|
||||
})
|
||||
);
|
||||
|
||||
const RootStack = StackNavigator(
|
||||
{
|
||||
exampleList: {
|
||||
screen: ExampleListScreen,
|
||||
},
|
||||
tabs: {
|
||||
screen: TabsScreen,
|
||||
},
|
||||
headerHeight: {
|
||||
screen: StackWithHeaderHeight,
|
||||
},
|
||||
headerPadding: {
|
||||
screen: StackWithHeaderPadding,
|
||||
},
|
||||
headerHeightAndPadding: {
|
||||
screen: StackWithHeaderHeightAndPadding,
|
||||
},
|
||||
headerPaddingPercent: {
|
||||
screen: StackWithHeaderPaddingPercent,
|
||||
},
|
||||
headerMargin: {
|
||||
screen: StackWithHeaderMargin,
|
||||
},
|
||||
tabBarHeight: {
|
||||
screen: TabBarWithHeight,
|
||||
},
|
||||
tabBarPadding: {
|
||||
screen: TabBarWithPadding,
|
||||
},
|
||||
tabBarHeightAndPadding: {
|
||||
screen: TabBarWithHeightAndPadding,
|
||||
},
|
||||
tabBarMargin: {
|
||||
screen: TabBarWithMargin,
|
||||
},
|
||||
},
|
||||
{
|
||||
headerMode: 'none',
|
||||
cardStyle: {
|
||||
backgroundColor: '#fff',
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
// basic tabs (different navbar color, different tabbar color)
|
||||
// different header height
|
||||
// different header padding
|
||||
// different header height and padding
|
||||
// different header margin
|
||||
// different tabbar height
|
||||
// different tabbar padding
|
||||
// different tabbar height and padding
|
||||
// different tabbar margin
|
||||
// without navbar, without safeareaview in one tab and with safeareaview in another tab
|
||||
// all should be able to toggle between landscape and portrait
|
||||
|
||||
// basic drawer (different navbar color, mess around with drawer options)
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#fff',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
});
|
||||
@ -1,23 +0,0 @@
|
||||
{
|
||||
"expo": {
|
||||
"name": "SafeAreaExample",
|
||||
"description": "An empty new project",
|
||||
"slug": "SafeAreaExample",
|
||||
"privacy": "public",
|
||||
"sdkVersion": "22.0.0",
|
||||
"version": "1.0.0",
|
||||
"primaryColor": "#cccccc",
|
||||
"icon": "./assets/icon.png",
|
||||
"splash": {
|
||||
"image": "./assets/splash.png",
|
||||
"resizeMode": "contain",
|
||||
"backgroundColor": "#ffffff"
|
||||
},
|
||||
"packagerOpts": {
|
||||
"assetExts": ["ttf", "mp4"]
|
||||
},
|
||||
"ios": {
|
||||
"supportsTablet": true
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB |
@ -1,15 +0,0 @@
|
||||
{
|
||||
"main": "node_modules/expo/AppEntry.js",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"expo": "^23.0.0",
|
||||
"react": "16.0.0",
|
||||
"react-native": "^0.50.3",
|
||||
"react-native-platform-touchable": "^1.1.1",
|
||||
"react-navigation": "file:../.."
|
||||
},
|
||||
"name": "SafeAreaExample",
|
||||
"version": "0.0.0",
|
||||
"description": "Hello Expo!",
|
||||
"author": null
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
import createDumbStack from './createDumbStack';
|
||||
|
||||
export default createDumbStack();
|
||||
@ -1,3 +0,0 @@
|
||||
import createDumbTabs from './createDumbTabs';
|
||||
|
||||
export default createDumbTabs();
|
||||
@ -1,99 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StackNavigator } from 'react-navigation';
|
||||
import {
|
||||
Dimensions,
|
||||
Button,
|
||||
Platform,
|
||||
ScrollView,
|
||||
Text,
|
||||
View,
|
||||
StatusBar,
|
||||
} from 'react-native';
|
||||
import { ScreenOrientation } from 'expo';
|
||||
|
||||
const Separator = () => (
|
||||
<View
|
||||
style={{
|
||||
width: Dimensions.get('window').width - 100,
|
||||
height: 1,
|
||||
backgroundColor: '#ccc',
|
||||
marginHorizontal: 50,
|
||||
marginTop: 15,
|
||||
marginBottom: 15,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
const Spacer = () => (
|
||||
<View
|
||||
style={{
|
||||
marginBottom: Platform.OS === 'android' ? 20 : 5,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
export default (navigationOptions = {}) => {
|
||||
class DumbScreen extends React.Component {
|
||||
static navigationOptions = {
|
||||
title: 'Title!',
|
||||
...navigationOptions,
|
||||
headerStyle: {
|
||||
backgroundColor: '#6b52ae',
|
||||
...navigationOptions.headerStyle,
|
||||
},
|
||||
headerTitleStyle: {
|
||||
color: '#fff',
|
||||
...navigationOptions.headerTitleStyle,
|
||||
},
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ScrollView style={{ flex: 1 }}>
|
||||
<View
|
||||
style={{
|
||||
paddingTop: 30,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}>
|
||||
<Button onPress={this._goBack} title="Go back" />
|
||||
<Separator />
|
||||
<Button onPress={this._setPortrait} title="Set portrait" />
|
||||
<Spacer />
|
||||
<Button onPress={this._setLandscape} title="Set landscape" />
|
||||
<Separator />
|
||||
<Button onPress={this._hideStatusBar} title="Hide status bar" />
|
||||
<Spacer />
|
||||
<Button onPress={this._showStatusBar} title="Show status bar" />
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
_goBack = () => {
|
||||
this.props.navigation.goBack(null);
|
||||
};
|
||||
|
||||
_setPortrait = () => {
|
||||
ScreenOrientation.allow(ScreenOrientation.Orientation.PORTRAIT);
|
||||
};
|
||||
|
||||
_setLandscape = () => {
|
||||
ScreenOrientation.allow(ScreenOrientation.Orientation.LANDSCAPE);
|
||||
};
|
||||
|
||||
_hideStatusBar = () => {
|
||||
StatusBar.setHidden(true, 'slide');
|
||||
};
|
||||
|
||||
_showStatusBar = () => {
|
||||
StatusBar.setHidden(false, 'slide');
|
||||
};
|
||||
}
|
||||
|
||||
return StackNavigator({
|
||||
dumb: {
|
||||
screen: DumbScreen,
|
||||
},
|
||||
});
|
||||
};
|
||||
@ -1,69 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Platform, View } from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { TabNavigator, TabBarBottom } from 'react-navigation';
|
||||
import createDumbStack from './createDumbStack';
|
||||
|
||||
export default (navigationOptions = {}, DumbStack = createDumbStack()) => {
|
||||
return TabNavigator(
|
||||
{
|
||||
Home: {
|
||||
screen: DumbStack,
|
||||
},
|
||||
Links: {
|
||||
screen: DumbStack,
|
||||
},
|
||||
Settings: {
|
||||
screen: DumbStack,
|
||||
},
|
||||
},
|
||||
{
|
||||
navigationOptions: ({ navigation }) => ({
|
||||
...navigationOptions,
|
||||
tabBarIcon: ({ focused }) => {
|
||||
const { routeName } = navigation.state;
|
||||
let iconName;
|
||||
switch (routeName) {
|
||||
case 'Home':
|
||||
iconName =
|
||||
Platform.OS === 'ios'
|
||||
? `ios-information-circle${focused ? '' : '-outline'}`
|
||||
: 'md-information-circle';
|
||||
break;
|
||||
case 'Links':
|
||||
iconName =
|
||||
Platform.OS === 'ios'
|
||||
? `ios-link${focused ? '' : '-outline'}`
|
||||
: 'md-link';
|
||||
break;
|
||||
case 'Settings':
|
||||
iconName =
|
||||
Platform.OS === 'ios'
|
||||
? `ios-options${focused ? '' : '-outline'}`
|
||||
: 'md-options';
|
||||
}
|
||||
return (
|
||||
<Ionicons
|
||||
name={iconName}
|
||||
size={28}
|
||||
style={{ marginBottom: -3 }}
|
||||
color={focused ? '#6b52ae' : '#ccc'}
|
||||
/>
|
||||
);
|
||||
},
|
||||
}),
|
||||
tabBarOptions: {
|
||||
activeTintColor: '#6b52ae',
|
||||
...navigationOptions.tabBarOptions,
|
||||
style: {
|
||||
backgroundColor: '#F5F1FF',
|
||||
...(navigationOptions.tabBarOptions ? navigationOptions.tabBarOptions.style : {}),
|
||||
}
|
||||
},
|
||||
tabBarComponent: TabBarBottom,
|
||||
tabBarPosition: 'bottom',
|
||||
animationEnabled: false,
|
||||
swipeEnabled: false,
|
||||
}
|
||||
);
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user