commit 31281d6b68c402bbb88fc3e2f1d7cfc05e8fb170 Author: Krzysztof Magiera Date: Fri Aug 3 13:34:09 2018 +0200 Initial commit. diff --git a/.babelrc b/.babelrc new file mode 100644 index 00000000..8df53fe4 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ +"presets": ["react-native"] +} \ No newline at end of file diff --git a/.buckconfig b/.buckconfig new file mode 100644 index 00000000..934256cb --- /dev/null +++ b/.buckconfig @@ -0,0 +1,6 @@ + +[android] + target = Google Inc.:Google APIs:23 + +[maven_repositories] + central = https://repo1.maven.org/maven2 diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 00000000..7a35885f --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,19 @@ +module.exports = { + parser: 'babel-eslint', + extends: [ + 'standard', + 'prettier', + 'prettier/flowtype', + 'prettier/react', + 'prettier/standard', + ], + plugins: ['react', 'react-native', 'import', 'jest'], + env: { + 'react-native/react-native': true, + 'jest/globals': true, + }, + rules: { + 'import/no-unresolved': 2, + 'react/jsx-uses-vars': 2, + }, +}; diff --git a/.flowconfig b/.flowconfig new file mode 100644 index 00000000..09f07764 --- /dev/null +++ b/.flowconfig @@ -0,0 +1,53 @@ +[ignore] +; We fork some components by platform +.*/*[.]android.js + +; 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/.* + +; Ignore any possible duplicates from within our Example folder +.*/Example/node_modules/.* + +[include] + +[libs] +node_modules/react-native/Libraries/react-native/react-native-interface.js +node_modules/react-native/flow/ + +[options] +emoji=true + +module.system=haste + +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 diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..1f940650 --- /dev/null +++ b/.gitignore @@ -0,0 +1,48 @@ +# OSX +# +.DS_Store + +# Xcode +# +build/ +*.pbxuser +!default.pbxuser +*.mode1v3 +!default.mode1v3 +*.mode2v3 +!default.mode2v3 +*.perspectivev3 +!default.perspectivev3 +xcuserdata +*.xccheckout +*.moved-aside +DerivedData +*.hmap +*.ipa +*.xcuserstate +project.xcworkspace + +# Android/IJ +# +*.iml +.idea +.gradle +local.properties + +# node.js +# +node_modules/ +npm-debug.log +package-lock.json + +# vscode +jsconfig.json +.project +.vscode + +# BUCK +buck-out/ +bin/ +\.buckd/ +android/app/libs +android/keystores/debug.keystore diff --git a/.npmignore b/.npmignore new file mode 100644 index 00000000..057840cd --- /dev/null +++ b/.npmignore @@ -0,0 +1 @@ +Example/ diff --git a/.watchmanconfig b/.watchmanconfig new file mode 100644 index 00000000..9e26dfee --- /dev/null +++ b/.watchmanconfig @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/Example/.babelrc b/Example/.babelrc new file mode 100644 index 00000000..a9ce1369 --- /dev/null +++ b/Example/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["react-native"] +} diff --git a/Example/.buckconfig b/Example/.buckconfig new file mode 100644 index 00000000..934256cb --- /dev/null +++ b/Example/.buckconfig @@ -0,0 +1,6 @@ + +[android] + target = Google Inc.:Google APIs:23 + +[maven_repositories] + central = https://repo1.maven.org/maven2 diff --git a/Example/.flowconfig b/Example/.flowconfig new file mode 100644 index 00000000..3c0adb56 --- /dev/null +++ b/Example/.flowconfig @@ -0,0 +1,67 @@ +[ignore] +; We fork some components by platform +.*/*[.]android.js + +; Ignore "BUCK" generated dirs +/\.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/.* + +; Ignore metro +.*/node_modules/metro/.* + +[include] + +[libs] +node_modules/react-native/Libraries/react-native/react-native-interface.js +node_modules/react-native/flow/ +node_modules/react-native/flow-github/ + +[options] +emoji=true + +module.system=haste +module.system.haste.use_name_reducers=true +# get basename +module.system.haste.name_reducers='^.*/\([a-zA-Z0-9$_.-]+\.js\(\.flow\)?\)$' -> '\1' +# strip .js or .js.flow suffix +module.system.haste.name_reducers='^\(.*\)\.js\(\.flow\)?$' -> '\1' +# strip .ios suffix +module.system.haste.name_reducers='^\(.*\)\.ios$' -> '\1' +module.system.haste.name_reducers='^\(.*\)\.android$' -> '\1' +module.system.haste.name_reducers='^\(.*\)\.native$' -> '\1' +module.system.haste.paths.blacklist=.*/__tests__/.* +module.system.haste.paths.blacklist=.*/__mocks__/.* +module.system.haste.paths.blacklist=/node_modules/react-native/Libraries/Animated/src/polyfills/.* +module.system.haste.paths.whitelist=/node_modules/react-native/Libraries/.* + +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_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) +suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ +suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy +suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError + +[version] +^0.75.0 diff --git a/Example/.gitattributes b/Example/.gitattributes new file mode 100644 index 00000000..d42ff183 --- /dev/null +++ b/Example/.gitattributes @@ -0,0 +1 @@ +*.pbxproj -text diff --git a/Example/.gitignore b/Example/.gitignore new file mode 100644 index 00000000..5d647565 --- /dev/null +++ b/Example/.gitignore @@ -0,0 +1,56 @@ +# OSX +# +.DS_Store + +# Xcode +# +build/ +*.pbxuser +!default.pbxuser +*.mode1v3 +!default.mode1v3 +*.mode2v3 +!default.mode2v3 +*.perspectivev3 +!default.perspectivev3 +xcuserdata +*.xccheckout +*.moved-aside +DerivedData +*.hmap +*.ipa +*.xcuserstate +project.xcworkspace + +# Android/IntelliJ +# +build/ +.idea +.gradle +local.properties +*.iml + +# node.js +# +node_modules/ +npm-debug.log +yarn-error.log + +# BUCK +buck-out/ +\.buckd/ +*.keystore + +# fastlane +# +# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the +# screenshots whenever they are needed. +# For more information about the recommended setup visit: +# https://docs.fastlane.tools/best-practices/source-control/ + +*/fastlane/report.xml +*/fastlane/Preview.html +*/fastlane/screenshots + +# Bundle artifact +*.jsbundle diff --git a/Example/.watchmanconfig b/Example/.watchmanconfig new file mode 100644 index 00000000..9e26dfee --- /dev/null +++ b/Example/.watchmanconfig @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/Example/App.js b/Example/App.js new file mode 100644 index 00000000..1301b655 --- /dev/null +++ b/Example/App.js @@ -0,0 +1,196 @@ +import React, { Component } from 'react'; +import { + StyleSheet, + Button, + View, + TextInput, + Animated, + Easing, +} from 'react-native'; +import { Screen, ScreenContainer, ScreenStack } from 'react-native-screens'; + +const COLORS = ['azure', 'pink', 'cyan']; + +export class Stack extends Component { + constructor(props) { + super(props); + + const progress = new Animated.Value(0); + const slideIn = progress.interpolate({ + inputRange: [0, 1], + outputRange: [320, 0], + }); + const slideOut = progress.interpolate({ + inputRange: [0, 1], + outputRange: [0, 320], + }); + const backSlideIn = progress.interpolate({ + inputRange: [0, 1], + outputRange: [-50, 0], + }); + const backSlideOut = progress.interpolate({ + inputRange: [0, 1], + outputRange: [0, -50], + }); + + this.state = { + stack: ['azure'], + transitioning: 0, + progress, + slideIn, + slideOut, + backSlideIn, + backSlideOut, + }; + } + push(key) { + this.setState({ stack: [...this.state.stack, key], transitioning: 1 }); + this.state.progress.setValue(0); + Animated.timing(this.state.progress, { + duration: 5000, + easing: Easing.out(Easing.quad), + toValue: 1, + useNativeDriver: true, + }).start(() => { + this.setState({ transitioning: 0 }); + }); + } + pop() { + this.setState({ transitioning: -1 }); + this.state.progress.setValue(0); + Animated.timing(this.state.progress, { + duration: 5000, + easing: Easing.out(Easing.quad), + toValue: 1, + useNativeDriver: true, + }).start(() => { + this.setState({ + transitioning: 0, + stack: this.state.stack.slice(0, -1), + }); + }); + } + renderScreen = (key, index) => { + let style = StyleSheet.absoluteFill; + const { stack, transitioning } = this.state; + if (index === stack.length - 1) { + if (transitioning > 0) { + style = { + ...StyleSheet.absoluteFillObject, + transform: [{ translateX: this.state.slideIn }], + }; + } else if (transitioning < 0) { + style = { + ...StyleSheet.absoluteFillObject, + transform: [{ translateX: this.state.slideOut }], + }; + } + } else if (index === stack.length - 2) { + if (transitioning > 0) { + style = { + ...StyleSheet.absoluteFillObject, + transform: [{ translateX: this.state.backSlideOut }], + }; + } else if (transitioning < 0) { + style = { + ...StyleSheet.absoluteFillObject, + transform: [{ translateX: this.state.backSlideIn }], + }; + } + } + const active = + index === stack.length - 1 || + (transitioning !== 0 && index === stack.length - 2); + return ( + + {this.props.renderScreen(key)} + + ); + }; + render() { + const screens = this.state.stack.map(this.renderScreen); + return ( + + {screens} + + ); + // return ( + // {screens} + // ); + } +} + +// class Inner extends Component { +// state = { size: 20, display: 'flex' }; +// componentDidMount() { +// setInterval(() => { +// this.setState({ size: Math.random() * 10 + 10 }); +// }, 1500); +// setTimeout(() => this.setState({ display: 'none' }), 2000); +// } +// render() { +// return ( +// +// +// +// ); +// } +// } + +class App extends Component { + renderScreen = key => { + const index = COLORS.indexOf(key); + const color = key; + const pop = index > 0 ? () => this.stack.pop() : null; + const push = index < 2 ? () => this.stack.push(COLORS[index + 1]) : null; + return ( + + {pop &&