├── .babelrc ├── .flowconfig ├── .gitignore ├── .history ├── AnimatedHeader_20170726113149.js ├── AnimatedHeader_20171015144537.js ├── AnimatedHeader_20171015144657.js ├── AnimatedHeader_20171015145255.js ├── AnimatedHeader_20171015145825.js ├── AnimatedHeader_20171015145912.js ├── AnimatedHeader_20171015145913.js ├── AnimatedHeader_20171015145915.js ├── AnimatedHeader_20171015145941.js ├── AnimatedHeader_20171015150215.js ├── AnimatedHeader_20171015150343.js ├── AnimatedHeader_20171015150344.js ├── AnimatedHeader_20171015150411.js ├── AnimatedHeader_20171015150435.js ├── AnimatedHeader_20171015150440.js ├── AnimatedHeader_20171015150441.js ├── AnimatedHeader_20171015150447.js ├── AnimatedHeader_20171015150448.js ├── AnimatedHeader_20171015150450.js ├── AnimatedHeader_20171015150851.js ├── AnimatedHeader_20171015150853.js ├── AnimatedHeader_20171015150916.js ├── AnimatedHeader_20171015151627.js ├── AnimatedHeader_20171015151646.js ├── AnimatedHeader_20171015152436.js ├── AnimatedHeader_20171015152443.js ├── AnimatedHeader_20171015152444.js ├── AnimatedHeader_20171015152447.js ├── AnimatedHeader_20171015152501.js ├── AnimatedHeader_20171015152504.js ├── AnimatedHeader_20171015152506.js ├── AnimatedHeader_20171015152552.js ├── AnimatedHeader_20171015152622.js ├── AnimatedHeader_20171015152659.js ├── AnimatedHeader_20171015152743.js ├── AnimatedHeader_20171015152747.js ├── AnimatedHeader_20171015152752.js ├── AnimatedHeader_20171015152816.js ├── AnimatedHeader_20171015152827.js ├── AnimatedHeader_20171015152841.js ├── AnimatedHeader_20171015152914.js ├── AnimatedHeader_20171015163951.js ├── AnimatedHeader_20171015163957.js ├── AnimatedHeader_20171015164007.js ├── AnimatedHeader_20171015164008.js ├── AnimatedHeader_20171015164052.js ├── AnimatedHeader_20171015164054.js ├── AnimatedHeader_20171015164057.js ├── AnimatedHeader_20171015164059.js ├── AnimatedHeader_20171015164101.js ├── AnimatedHeader_20171015164103.js ├── AnimatedHeader_20171015164105.js ├── AnimatedHeader_20171015164106.js ├── AnimatedHeader_20171015164109.js ├── AnimatedHeader_20171015164113.js ├── AnimatedHeader_20171015164115.js ├── AnimatedHeader_20171015164116.js ├── AnimatedHeader_20171015164120.js ├── AnimatedHeader_20171015164141.js ├── AnimatedHeader_20171015164144.js ├── AnimatedHeader_20171015164146.js ├── AnimatedHeader_20171015164148.js ├── AnimatedHeader_20171015164149.js ├── AnimatedHeader_20171015164235.js ├── AnimatedHeader_20171015164253.js ├── AnimatedHeader_20171015164255.js ├── AnimatedHeader_20171015164322.js ├── Demo_20170726113152.js ├── Demo_20171015144931.js ├── Demo_20171015144935.js ├── Demo_20171015145016.js ├── Demo_20171015145020.js ├── Demo_20171015145028.js ├── Demo_20171015145031.js ├── Demo_20171015145033.js ├── Demo_20171015145035.js ├── Demo_20171015145037.js ├── Demo_20171015145051.js ├── Demo_20171015145100.js ├── Demo_20171015145101.js ├── Demo_20171015145139.js ├── Demo_20171015145404.js ├── Demo_20171015145406.js ├── Demo_20171015145413.js ├── Demo_20171015150016.js ├── Demo_20171015151506.js ├── Demo_20171015151525.js ├── Demo_20171015152330.js ├── Demo_20171015152424.js ├── Demo_20171015152518.js ├── Demo_20171015152627.js ├── Demo_20171015152631.js ├── Demo_20171015153139.js ├── Demo_20171015153140.js ├── Demo_20171015153142.js ├── Demo_20171015153144.js ├── Demo_20171015153145.js ├── Demo_20171015153201.js ├── Demo_20171015153202.js ├── Demo_20171015153206.js ├── Demo_20171015153213.js ├── Demo_20171015153214.js ├── Demo_20171015153221.js ├── Demo_20171015153226.js ├── Demo_20171015153239.js ├── Demo_20171015153243.js ├── Demo_20171015153245.js ├── Demo_20171015153249.js ├── Demo_20171015153253.js ├── Demo_20171015153257.js ├── Demo_20171015153321.js ├── Demo_20171015153324.js ├── Demo_20171015153356.js ├── Demo_20171015153359.js ├── Demo_20171015153441.js ├── Demo_20171015153522.js ├── Demo_20171015153723.js ├── Demo_20171015153726.js ├── Demo_20171015153743.js ├── Demo_20171015153750.js ├── Demo_20171015153752.js ├── Demo_20171015153755.js ├── Demo_20171015153757.js ├── Demo_20171015153758.js ├── Demo_20171015154041.js ├── Demo_20171015154139.js ├── Demo_20171015154219.js ├── Demo_20171015154308.js ├── Demo_20171015154407.js ├── Demo_20171015163826.js ├── Demo_20171015163829.js ├── Demo_20171015163907.js ├── Demo_20171015163908.js ├── Demo_20171015163909.js ├── Demo_20171015163913.js ├── Demo_20171015163917.js ├── Demo_20171015163918.js └── Demo_20171015163922.js ├── .watchmanconfig ├── AnimatedHeader.js ├── AnimatedImage.js ├── AnimatedText.js ├── App.js ├── App.test.js ├── Demo.js ├── ItemInScroll.js ├── README.md ├── app.json ├── gif └── animatedHeader.gif ├── img └── dog.png ├── package.json ├── utils ├── buildTransform.js └── selfMeasureBehavior.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["babel-preset-expo"], 3 | "env": { 4 | "development": { 5 | "plugins": ["transform-react-jsx-source"] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | ; We fork some components by platform 3 | .*/*[.]android.js 4 | 5 | ; Ignore "BUCK" generated dirs 6 | /\.buckd/ 7 | 8 | ; Ignore unexpected extra "@providesModule" 9 | .*/node_modules/.*/node_modules/fbjs/.* 10 | 11 | ; Ignore duplicate module providers 12 | ; For RN Apps installed via npm, "Libraries" folder is inside 13 | ; "node_modules/react-native" but in the source repo it is in the root 14 | .*/Libraries/react-native/React.js 15 | .*/Libraries/react-native/ReactNative.js 16 | 17 | ; Additional create-react-native-app ignores 18 | 19 | ; Ignore duplicate module providers 20 | .*/node_modules/fbemitter/lib/* 21 | 22 | ; Ignore misbehaving dev-dependencies 23 | .*/node_modules/xdl/build/* 24 | .*/node_modules/reqwest/tests/* 25 | 26 | ; Ignore missing expo-sdk dependencies (temporarily) 27 | ; https://github.com/expo/expo/issues/162 28 | .*/node_modules/expo/src/* 29 | 30 | ; Ignore react-native-fbads dependency of the expo sdk 31 | .*/node_modules/react-native-fbads/* 32 | 33 | [include] 34 | 35 | [libs] 36 | node_modules/react-native/Libraries/react-native/react-native-interface.js 37 | node_modules/react-native/flow 38 | flow/ 39 | 40 | [options] 41 | module.system=haste 42 | 43 | emoji=true 44 | 45 | experimental.strict_type_args=true 46 | 47 | munge_underscores=true 48 | 49 | 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' 50 | 51 | suppress_type=$FlowIssue 52 | suppress_type=$FlowFixMe 53 | suppress_type=$FixMe 54 | 55 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-9]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) 56 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-9]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ 57 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 58 | suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError 59 | 60 | unsafe.enable_getters_and_setters=true 61 | 62 | [version] 63 | ^0.49.1 64 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .expo/ 3 | npm-debug.* 4 | .history -------------------------------------------------------------------------------- /.history/AnimatedHeader_20170726113149.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | top:0, 29 | left: 0, 30 | height: 172, 31 | width: '100%', 32 | backgroundColor: 'white', 33 | zIndex: 2 34 | }, 35 | headerBackground: { 36 | position: 'absolute', 37 | top:0, 38 | left: 0, 39 | height: 172, 40 | width: '100%', 41 | backgroundColor: 'white', 42 | zIndex: 2, 43 | } 44 | }); 45 | 46 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015144537.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | top:0, 29 | left: 0, 30 | height: 172, 31 | width: '100%', 32 | backgroundColor: 'red', 33 | zIndex: 2 34 | }, 35 | headerBackground: { 36 | position: 'absolute', 37 | top:0, 38 | left: 0, 39 | height: 172, 40 | width: '100%', 41 | backgroundColor: 'white', 42 | zIndex: 2, 43 | } 44 | }); 45 | 46 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015144657.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | top:0, 29 | left: 0, 30 | height: 172, 31 | width: '100%', 32 | backgroundColor: 'white', 33 | zIndex: 2 34 | }, 35 | headerBackground: { 36 | position: 'absolute', 37 | top:0, 38 | left: 0, 39 | height: 172, 40 | width: '100%', 41 | backgroundColor: 'white', 42 | zIndex: 2, 43 | } 44 | }); 45 | 46 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015145255.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | top:0, 29 | left: 0, 30 | height: 172, 31 | width: '100%', 32 | backgroundColor: 'white', 33 | zIndex: 2 34 | }, 35 | headerBackground: { 36 | position: 'absolute', 37 | top:0, 38 | left: 0, 39 | height: 172, 40 | width: '100%', 41 | backgroundColor: 'red', 42 | zIndex: 2, 43 | } 44 | }); 45 | 46 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015145825.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | top:0, 29 | left: 0, 30 | height: 172, 31 | width: '100%', 32 | backgroundColor: 'white', 33 | zIndex: 2 34 | }, 35 | headerBackground: { 36 | position: 'absolute', 37 | flex: 0, 38 | top:0, 39 | left: 0, 40 | height: 172, 41 | width: '100%', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015145912.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | top:0, 29 | left: 0, 30 | height: 172, 31 | width: '100%', 32 | backgroundColor: 'white', 33 | zIndex: 2 34 | }, 35 | headerBackground: { 36 | position: 'absolute', 37 | flex: 0, 38 | top:0, 39 | left: 0, 40 | height: 172, 41 | width: '100', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015145913.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | top:0, 29 | left: 0, 30 | height: 172, 31 | width: '100%', 32 | backgroundColor: 'white', 33 | zIndex: 2 34 | }, 35 | headerBackground: { 36 | position: 'absolute', 37 | flex: 0, 38 | top:0, 39 | left: 0, 40 | height: 172, 41 | width: '100, 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015145915.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | top:0, 29 | left: 0, 30 | height: 172, 31 | width: '100%', 32 | backgroundColor: 'white', 33 | zIndex: 2 34 | }, 35 | headerBackground: { 36 | position: 'absolute', 37 | flex: 0, 38 | top:0, 39 | left: 0, 40 | height: 172, 41 | width: 100, 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015145941.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | // position: 'absolute', 28 | // top:0, 29 | // left: 0, 30 | // height: 172, 31 | // width: '100%', 32 | // backgroundColor: 'white', 33 | // zIndex: 2 34 | // }, 35 | headerBackground: { 36 | position: 'absolute', 37 | flex: 0, 38 | top:0, 39 | left: 0, 40 | height: 172, 41 | width: 100, 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015150215.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | // position: 'absolute', 28 | // top:0, 29 | // left: 0, 30 | // height: 172, 31 | // width: '100%', 32 | // backgroundColor: 'white', 33 | // zIndex: 2 34 | // }, 35 | headerBackground: { 36 | position: 'absolute', 37 | flex: 0, 38 | top:0, 39 | left: 0, 40 | height: 172, 41 | width: 300, 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015150343.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | // position: 'absolute', 28 | // top:0, 29 | // left: 0, 30 | // height: 172, 31 | // width: '100%', 32 | // backgroundColor: 'white', 33 | // zIndex: 2 34 | // }, 35 | headerBackground: { 36 | position: 'absolute', 37 | flex: 0, 38 | top:0, 39 | left: 0, 40 | height: 172, 41 | width: 300, 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015150344.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | // position: 'absolute', 28 | // top:0, 29 | // left: 0, 30 | // height: 172, 31 | // width: '100%', 32 | // backgroundColor: 'white', 33 | // zIndex: 2 34 | // }, 35 | headerBackground: { 36 | position: 'absolute', 37 | flex: 0, 38 | top:0, 39 | left: 0, 40 | height: 172, 41 | width: 300, 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015150411.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | // position: 'absolute', 28 | // top:0, 29 | // left: 0, 30 | // height: 172, 31 | // width: '100%', 32 | // backgroundColor: 'white', 33 | // zIndex: 2 34 | // }, 35 | headerBackground: { 36 | position: 'absolute', 37 | flex: 0, 38 | top:0, 39 | left: 0, 40 | height: 172, 41 | width: 300, 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015150435.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | // position: 'absolute', 28 | // top:0, 29 | // left: 0, 30 | // height: 172, 31 | // width: '100%', 32 | // backgroundColor: 'white', 33 | // zIndex: 2 34 | // }, 35 | headerBackground: { 36 | position: 'absolute', 37 | // flex: 0, 38 | top:0, 39 | left: 0, 40 | height: 172, 41 | width: 300, 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015150440.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | // position: 'absolute', 28 | // top:0, 29 | // left: 0, 30 | // height: 172, 31 | // width: '100%', 32 | // backgroundColor: 'white', 33 | // zIndex: 2 34 | // }, 35 | headerBackground: { 36 | position: 'absolute', 37 | // flex: 0, 38 | // top:0, 39 | left: 0, 40 | height: 172, 41 | width: 300, 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015150441.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | // position: 'absolute', 28 | // top:0, 29 | // left: 0, 30 | // height: 172, 31 | // width: '100%', 32 | // backgroundColor: 'white', 33 | // zIndex: 2 34 | // }, 35 | headerBackground: { 36 | position: 'absolute', 37 | // flex: 0, 38 | // top:0, 39 | // left: 0, 40 | height: 172, 41 | width: 300, 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015150447.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | // position: 'absolute', 28 | // top:0, 29 | // left: 0, 30 | // height: 172, 31 | // width: '100%', 32 | // backgroundColor: 'white', 33 | // zIndex: 2 34 | // }, 35 | headerBackground: { 36 | position: 'absolute', 37 | // flex: 0, 38 | // top:0, 39 | // left: 0, 40 | height: 172, 41 | width: '300', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015150448.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | // position: 'absolute', 28 | // top:0, 29 | // left: 0, 30 | // height: 172, 31 | // width: '100%', 32 | // backgroundColor: 'white', 33 | // zIndex: 2 34 | // }, 35 | headerBackground: { 36 | position: 'absolute', 37 | // flex: 0, 38 | // top:0, 39 | // left: 0, 40 | height: 172, 41 | width: '100', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015150450.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | // position: 'absolute', 28 | // top:0, 29 | // left: 0, 30 | // height: 172, 31 | // width: '100%', 32 | // backgroundColor: 'white', 33 | // zIndex: 2 34 | // }, 35 | headerBackground: { 36 | position: 'absolute', 37 | // flex: 0, 38 | // top:0, 39 | // left: 0, 40 | height: 172, 41 | width: '100%', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015150851.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | // position: 'absolute', 28 | // top:0, 29 | // left: 0, 30 | // height: 172, 31 | // width: '100%', 32 | // backgroundColor: 'white', 33 | // zIndex: 2 34 | // }, 35 | headerBackground: { 36 | position: 'absolute', 37 | flex: 0, 38 | // top:0, 39 | // left: 0, 40 | height: 172, 41 | width: '100%', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015150853.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | // position: 'absolute', 28 | // top:0, 29 | // left: 0, 30 | // height: 172, 31 | // width: '100%', 32 | // backgroundColor: 'white', 33 | // zIndex: 2 34 | // }, 35 | headerBackground: { 36 | position: 'absolute', 37 | flex: 1, 38 | // top:0, 39 | // left: 0, 40 | height: 172, 41 | width: '100%', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015150916.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | // position: 'absolute', 28 | // top:0, 29 | // left: 0, 30 | // height: 172, 31 | // width: '100%', 32 | // backgroundColor: 'white', 33 | // zIndex: 2 34 | // }, 35 | headerBackground: { 36 | position: 'absolute', 37 | // flex: 0, 38 | // top:0, 39 | // left: 0, 40 | height: 172, 41 | width: '100%', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015151627.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | // transform: [ 7 | // { 8 | // translateY: animationRange.interpolate({ 9 | // inputRange: [0, 1], 10 | // outputRange: [0, -101], 11 | // }), 12 | // }, 13 | // ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | // position: 'absolute', 28 | // top:0, 29 | // left: 0, 30 | // height: 172, 31 | // width: '100%', 32 | // backgroundColor: 'white', 33 | // zIndex: 2 34 | // }, 35 | headerBackground: { 36 | position: 'absolute', 37 | // flex: 0, 38 | // top:0, 39 | // left: 0, 40 | height: 172, 41 | width: '100%', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015151646.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | // position: 'absolute', 28 | // top:0, 29 | // left: 0, 30 | // height: 172, 31 | // width: '100%', 32 | // backgroundColor: 'white', 33 | // zIndex: 2 34 | // }, 35 | headerBackground: { 36 | position: 'absolute', 37 | // flex: 0, 38 | // top:0, 39 | // left: 0, 40 | height: 172, 41 | width: '100%', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015152436.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | top:0, 29 | left: 0, 30 | height: 172, 31 | width: '100%', 32 | backgroundColor: 'white', 33 | zIndex: 2 34 | }, 35 | headerBackground: { 36 | position: 'absolute', 37 | // flex: 0, 38 | // top:0, 39 | // left: 0, 40 | height: 172, 41 | width: '100%', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015152443.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | top:0, 29 | left: 0, 30 | height: 172, 31 | width: '100%', 32 | backgroundColor: 'white', 33 | zIndex: 2 34 | }, 35 | headerBackground: { 36 | position: 'absolute', 37 | // flex: 0, 38 | // top:0, 39 | // left: 0, 40 | height: 172, 41 | width: '100%', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015152444.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | top:0, 29 | left: 0, 30 | height: 172, 31 | width: '100%', 32 | backgroundColor: 'white', 33 | zIndex: 2 34 | }, 35 | headerBackground: { 36 | position: 'absolute', 37 | // flex: 0, 38 | // top:0, 39 | // left: 0, 40 | height: 172, 41 | width: '100%', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015152447.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | top:0, 29 | left: 0, 30 | height: 172, 31 | width: '100%', 32 | backgroundColor: 'white', 33 | zIndex: 2 34 | }, 35 | headerBackground: { 36 | position: 'absolute', 37 | // flex: 0, 38 | // top:0, 39 | // left: 0, 40 | height: 172, 41 | width: '100%', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015152501.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | top:0, 29 | left: 0, 30 | height: 172, 31 | width: '100%', 32 | backgroundColor: 'white', 33 | zIndex: 2 34 | }, 35 | headerBackground: { 36 | position: 'absolute', 37 | // flex: 0, 38 | // top:0, 39 | // left: 0, 40 | height: 172, 41 | width: '100%', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015152504.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | top:0, 29 | left: 0, 30 | height: 172, 31 | width: '100%', 32 | backgroundColor: 'white', 33 | zIndex: 2 34 | }, 35 | headerBackground: { 36 | position: 'absolute', 37 | // flex: 0, 38 | // top:0, 39 | // left: 0, 40 | height: 172, 41 | width: '100%', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015152506.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | top:0, 29 | left: 0, 30 | height: 172, 31 | width: '100%', 32 | backgroundColor: 'white', 33 | zIndex: 2 34 | }, 35 | headerBackground: { 36 | position: 'absolute', 37 | // flex: 0, 38 | // top:0, 39 | // left: 0, 40 | height: 172, 41 | width: '100%', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015152552.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | // position: 'absolute', 28 | // top:0, 29 | // left: 0, 30 | // height: 172, 31 | // width: '100%', 32 | // backgroundColor: 'white', 33 | // zIndex: 2 34 | // }, 35 | headerBackground: { 36 | position: 'absolute', 37 | // flex: 0, 38 | // top:0, 39 | // left: 0, 40 | height: 172, 41 | width: '100%', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015152622.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | // position: 'absolute', 28 | // top:0, 29 | // left: 0, 30 | // height: 172, 31 | // width: '100%', 32 | // backgroundColor: 'white', 33 | // zIndex: 2 34 | // }, 35 | headerBackground: { 36 | position: 'absolute', 37 | // flex: 0, 38 | // top:0, 39 | // left: 0, 40 | height: 50, 41 | width: '100%', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015152659.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | // position: 'absolute', 28 | // top:0, 29 | // left: 0, 30 | // height: 172, 31 | // width: '100%', 32 | // backgroundColor: 'white', 33 | // zIndex: 2 34 | // }, 35 | headerBackground: { 36 | position: 'absolute', 37 | // flex: 0, 38 | // top:0, 39 | // left: 0, 40 | height: 100, 41 | width: '100%', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015152743.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | top:0, 29 | left: 0, 30 | height: 172, 31 | width: '100%', 32 | backgroundColor: 'white', 33 | zIndex: 2 34 | }, 35 | headerBackground: { 36 | position: 'absolute', 37 | // flex: 0, 38 | // top:0, 39 | // left: 0, 40 | height: 100, 41 | width: '100%', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015152747.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | top:0, 29 | left: 0, 30 | height: 172, 31 | width: '100%', 32 | backgroundColor: 'white', 33 | zIndex: 2 34 | }, 35 | headerBackground: { 36 | position: 'absolute', 37 | // flex: 0, 38 | // top:0, 39 | // left: 0, 40 | height: 100, 41 | width: '100%', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015152752.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | top:0, 29 | left: 0, 30 | height: 172, 31 | width: '100%', 32 | backgroundColor: 'white', 33 | zIndex: 2 34 | }, 35 | headerBackground: { 36 | position: 'absolute', 37 | // flex: 0, 38 | // top:0, 39 | // left: 0, 40 | height: 100, 41 | width: '100%', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015152816.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | top:0, 29 | left: 0, 30 | height: 172, 31 | width: '100%', 32 | backgroundColor: 'white', 33 | zIndex: 2 34 | }, 35 | headerBackground: { 36 | position: 'absolute', 37 | // flex: 0, 38 | // top:0, 39 | // left: 0, 40 | height: 100, 41 | width: '100%', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015152827.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | top:0, 29 | left: 0, 30 | height: 172, 31 | width: '100%', 32 | backgroundColor: 'white', 33 | zIndex: 2 34 | }, 35 | headerBackground: { 36 | position: 'absolute', 37 | // flex: 0, 38 | top:0, 39 | left: 0, 40 | height: 100, 41 | width: '100%', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015152841.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | top:0, 29 | left: 0, 30 | height: 172, 31 | width: '100%', 32 | backgroundColor: 'white', 33 | zIndex: 2 34 | }, 35 | headerBackground: { 36 | position: 'absolute', 37 | // flex: 0, 38 | top:300, 39 | left: 0, 40 | height: 100, 41 | width: '100%', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015152914.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | top:0, 29 | left: 0, 30 | height: 172, 31 | width: '100%', 32 | backgroundColor: 'white', 33 | zIndex: 2 34 | }, 35 | headerBackground: { 36 | position: 'absolute', 37 | // flex: 0, 38 | top:50, 39 | left: 0, 40 | height: 100, 41 | width: '100%', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015163951.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | // position: 'absolute', 28 | // top:0, 29 | // left: 0, 30 | // height: 172, 31 | // width: '100%', 32 | // backgroundColor: 'white', 33 | // zIndex: 2 34 | // }, 35 | headerBackground: { 36 | position: 'absolute', 37 | // flex: 0, 38 | top:50, 39 | left: 0, 40 | height: 100, 41 | width: '100%', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015163957.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | // position: 'absolute', 28 | // top:0, 29 | // left: 0, 30 | // height: 172, 31 | // width: '100%', 32 | // backgroundColor: 'white', 33 | // zIndex: 2 34 | // }, 35 | headerBackground: { 36 | position: 'absolute', 37 | flex: 0, 38 | top:50, 39 | left: 0, 40 | height: 100, 41 | width: '100%', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015164007.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | // position: 'absolute', 28 | // top:0, 29 | // left: 0, 30 | // height: 172, 31 | // width: '100%', 32 | // backgroundColor: 'white', 33 | // zIndex: 2 34 | // }, 35 | headerBackground: { 36 | position: 'absolute', 37 | flex: 0, 38 | // top:50, 39 | left: 0, 40 | height: 100, 41 | width: '100%', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015164008.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | // position: 'absolute', 28 | // top:0, 29 | // left: 0, 30 | // height: 172, 31 | // width: '100%', 32 | // backgroundColor: 'white', 33 | // zIndex: 2 34 | // }, 35 | headerBackground: { 36 | position: 'absolute', 37 | flex: 0, 38 | // top:50, 39 | // left: 0, 40 | height: 100, 41 | width: '100%', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015164052.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | position: 'absolute', 28 | top:0, 29 | left: 0, 30 | height: 172, 31 | width: '100%', 32 | backgroundColor: 'white', 33 | zIndex: 2 34 | // }, 35 | headerBackground: { 36 | position: 'absolute', 37 | flex: 0, 38 | // top:50, 39 | // left: 0, 40 | height: 100, 41 | width: '100%', 42 | backgroundColor: 'red', 43 | zIndex: 2, 44 | } 45 | }); 46 | 47 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015164054.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | position: 'absolute', flex: 0, zIndex: 10, height:300, width:300, backgroundColor: 'green' 28 | // }, 29 | headerBackground: { 30 | position: 'absolute', 31 | flex: 0, 32 | // top:50, 33 | // left: 0, 34 | height: 100, 35 | width: '100%', 36 | backgroundColor: 'red', 37 | zIndex: 2, 38 | } 39 | }); 40 | 41 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015164057.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | position: 'absolute', 28 | flex: 0, zIndex: 10, height:300, width:300, backgroundColor: 'green' 29 | // }, 30 | headerBackground: { 31 | position: 'absolute', 32 | flex: 0, 33 | // top:50, 34 | // left: 0, 35 | height: 100, 36 | width: '100%', 37 | backgroundColor: 'red', 38 | zIndex: 2, 39 | } 40 | }); 41 | 42 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015164059.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | position: 'absolute', 28 | flex: 0, 29 | zIndex: 10, height:300, width:300, backgroundColor: 'green' 30 | // }, 31 | headerBackground: { 32 | position: 'absolute', 33 | flex: 0, 34 | // top:50, 35 | // left: 0, 36 | height: 100, 37 | width: '100%', 38 | backgroundColor: 'red', 39 | zIndex: 2, 40 | } 41 | }); 42 | 43 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015164101.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | position: 'absolute', 28 | flex: 0, 29 | zIndex: 10, 30 | height:300, width:300, backgroundColor: 'green' 31 | // }, 32 | headerBackground: { 33 | position: 'absolute', 34 | flex: 0, 35 | // top:50, 36 | // left: 0, 37 | height: 100, 38 | width: '100%', 39 | backgroundColor: 'red', 40 | zIndex: 2, 41 | } 42 | }); 43 | 44 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015164103.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | position: 'absolute', 28 | flex: 0, 29 | zIndex: 10, 30 | height:300, 31 | width:300, backgroundColor: 'green' 32 | // }, 33 | headerBackground: { 34 | position: 'absolute', 35 | flex: 0, 36 | // top:50, 37 | // left: 0, 38 | height: 100, 39 | width: '100%', 40 | backgroundColor: 'red', 41 | zIndex: 2, 42 | } 43 | }); 44 | 45 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015164105.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | position: 'absolute', 28 | flex: 0, 29 | zIndex: 10, 30 | height:300, 31 | width:300, 32 | backgroundColor: 'green' 33 | // }, 34 | headerBackground: { 35 | position: 'absolute', 36 | flex: 0, 37 | // top:50, 38 | // left: 0, 39 | height: 100, 40 | width: '100%', 41 | backgroundColor: 'red', 42 | zIndex: 2, 43 | } 44 | }); 45 | 46 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015164106.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | // container: { 27 | position: 'absolute', 28 | flex: 0, 29 | zIndex: 10, 30 | height:300, 31 | width:300, 32 | backgroundColor: 'green' 33 | }, 34 | headerBackground: { 35 | position: 'absolute', 36 | flex: 0, 37 | // top:50, 38 | // left: 0, 39 | height: 100, 40 | width: '100%', 41 | backgroundColor: 'red', 42 | zIndex: 2, 43 | } 44 | }); 45 | 46 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015164109.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | flex: 0, 29 | zIndex: 10, 30 | height:300, 31 | width:300, 32 | backgroundColor: 'green' 33 | }, 34 | headerBackground: { 35 | position: 'absolute', 36 | flex: 0, 37 | // top:50, 38 | // left: 0, 39 | height: 100, 40 | width: '100%', 41 | backgroundColor: 'red', 42 | zIndex: 2, 43 | } 44 | }); 45 | 46 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015164113.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | flex: 0, 29 | zIndex: 10, 30 | height:300, 31 | width:300, 32 | backgroundColor: 'green' 33 | }, 34 | headerBackground: { 35 | position: 'absolute', 36 | flex: 0, 37 | // top:50, 38 | // left: 0, 39 | height: 100, 40 | width: '100%', 41 | backgroundColor: 'red', 42 | zIndex: 2, 43 | } 44 | }); 45 | 46 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015164115.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | flex: 0, 29 | zIndex: 10, 30 | height:300, 31 | width:300, 32 | backgroundColor: 'green' 33 | }, 34 | headerBackground: { 35 | position: 'absolute', 36 | flex: 0, 37 | // top:50, 38 | // left: 0, 39 | height: 100, 40 | width: '100%', 41 | backgroundColor: 'red', 42 | zIndex: 2, 43 | } 44 | }); 45 | 46 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015164116.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | flex: 0, 29 | zIndex: 10, 30 | height:300, 31 | width:300, 32 | backgroundColor: 'green' 33 | }, 34 | headerBackground: { 35 | position: 'absolute', 36 | flex: 0, 37 | // top:50, 38 | // left: 0, 39 | height: 100, 40 | width: '100%', 41 | backgroundColor: 'red', 42 | zIndex: 2, 43 | } 44 | }); 45 | 46 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015164120.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | flex: 0, 29 | zIndex: 10, 30 | height:300, 31 | width:300, 32 | backgroundColor: 'green' 33 | }, 34 | headerBackground: { 35 | position: 'absolute', 36 | flex: 0, 37 | // top:50, 38 | // left: 0, 39 | height: 100, 40 | width: '100%', 41 | backgroundColor: 'red', 42 | zIndex: 2, 43 | } 44 | }); 45 | 46 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015164141.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | flex: 0, 29 | zIndex: 10, 30 | height:170, 31 | width:300, 32 | backgroundColor: 'green' 33 | }, 34 | headerBackground: { 35 | position: 'absolute', 36 | flex: 0, 37 | // top:50, 38 | // left: 0, 39 | height: 100, 40 | width: '100%', 41 | backgroundColor: 'red', 42 | zIndex: 2, 43 | } 44 | }); 45 | 46 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015164144.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | flex: 0, 29 | zIndex: 10, 30 | height:172, 31 | width:300, 32 | backgroundColor: 'green' 33 | }, 34 | headerBackground: { 35 | position: 'absolute', 36 | flex: 0, 37 | // top:50, 38 | // left: 0, 39 | height: 100, 40 | width: '100%', 41 | backgroundColor: 'red', 42 | zIndex: 2, 43 | } 44 | }); 45 | 46 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015164146.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | flex: 0, 29 | zIndex: 10, 30 | height:172, 31 | width:'300', 32 | backgroundColor: 'green' 33 | }, 34 | headerBackground: { 35 | position: 'absolute', 36 | flex: 0, 37 | // top:50, 38 | // left: 0, 39 | height: 100, 40 | width: '100%', 41 | backgroundColor: 'red', 42 | zIndex: 2, 43 | } 44 | }); 45 | 46 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015164148.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | flex: 0, 29 | zIndex: 10, 30 | height:172, 31 | width:'100', 32 | backgroundColor: 'green' 33 | }, 34 | headerBackground: { 35 | position: 'absolute', 36 | flex: 0, 37 | // top:50, 38 | // left: 0, 39 | height: 100, 40 | width: '100%', 41 | backgroundColor: 'red', 42 | zIndex: 2, 43 | } 44 | }); 45 | 46 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015164149.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | flex: 0, 29 | zIndex: 10, 30 | height:172, 31 | width:'100%', 32 | backgroundColor: 'green' 33 | }, 34 | headerBackground: { 35 | position: 'absolute', 36 | flex: 0, 37 | // top:50, 38 | // left: 0, 39 | height: 100, 40 | width: '100%', 41 | backgroundColor: 'red', 42 | zIndex: 2, 43 | } 44 | }); 45 | 46 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015164235.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | flex: 0, 29 | zIndex: 10, 30 | height:172, 31 | width:'100%', 32 | backgroundColor: 'green' 33 | }, 34 | headerBackground: { 35 | position: 'absolute', 36 | flex: 0, 37 | // top:50, 38 | // left: 0, 39 | height: 172, 40 | width: '100%', 41 | backgroundColor: 'red', 42 | zIndex: 2, 43 | } 44 | }); 45 | 46 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015164253.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | flex: 0, 29 | zIndex: 10, 30 | height:172, 31 | width:'100%', 32 | backgroundColor: 't' 33 | }, 34 | headerBackground: { 35 | position: 'absolute', 36 | flex: 0, 37 | // top:50, 38 | // left: 0, 39 | height: 172, 40 | width: '100%', 41 | backgroundColor: 'red', 42 | zIndex: 2, 43 | } 44 | }); 45 | 46 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015164255.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | flex: 0, 29 | zIndex: 10, 30 | height:172, 31 | width:'100%', 32 | backgroundColor: 'transparent' 33 | }, 34 | headerBackground: { 35 | position: 'absolute', 36 | flex: 0, 37 | // top:50, 38 | // left: 0, 39 | height: 172, 40 | width: '100%', 41 | backgroundColor: 'red', 42 | zIndex: 2, 43 | } 44 | }); 45 | 46 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/AnimatedHeader_20171015164322.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | 4 | const HeaderBackground = ({animationRange}) => { 5 | const animateHeader = { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -101], 11 | }), 12 | }, 13 | ], 14 | }; 15 | 16 | return ; 17 | }; 18 | 19 | 20 | const AnimatedHeader = ({animationRange}) => 21 | 22 | 23 | 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | position: 'absolute', 28 | flex: 0, 29 | zIndex: 10, 30 | height:172, 31 | width:'100%', 32 | backgroundColor: 'transparent' 33 | }, 34 | headerBackground: { 35 | position: 'absolute', 36 | flex: 0, 37 | height: 172, 38 | width: '100%', 39 | backgroundColor: 'red', 40 | zIndex: 2, 41 | } 42 | }); 43 | 44 | export default AnimatedHeader; -------------------------------------------------------------------------------- /.history/Demo_20170726113152.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | 26 | {/* {HeaderPlaceholder} */} 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.history/Demo_20171015144931.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | 26 | {/* {HeaderPlaceholder} */} 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | const styles = StyleSheet.create({ 42 | container: { 43 | flex: 1 44 | }, 45 | }); 46 | 47 | const enhance = compose( 48 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 49 | withProps(({scrollY}) => ({ 50 | animationRange: scrollY.interpolate({ 51 | inputRange: [0, scrollRangeForAnimation], 52 | outputRange: [0, 1], 53 | extrapolate: 'clamp', 54 | }), 55 | })) 56 | ); 57 | 58 | export default enhance(Demo); 59 | -------------------------------------------------------------------------------- /.history/Demo_20171015144935.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | 14 | 27 | {/* {HeaderPlaceholder} */} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.history/Demo_20171015145016.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | 14 | 27 | {{HeaderPlaceholder}} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.history/Demo_20171015145020.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | 14 | 27 | {HeaderPlaceholder} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.history/Demo_20171015145028.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | 14 | 27 | {{HeaderPlaceholder}} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.history/Demo_20171015145031.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | 14 | 27 | {HeaderPlaceholder}} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.history/Demo_20171015145033.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | 14 | 27 | HeaderPlaceholder}} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.history/Demo_20171015145035.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | 14 | 27 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.history/Demo_20171015145037.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | 14 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.history/Demo_20171015145051.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | 14 | 27 | {HeaderPlaceholder} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.history/Demo_20171015145100.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | 14 | 27 | {{HeaderPlaceholder} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.history/Demo_20171015145101.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | 14 | 27 | {{HeaderPlaceholder}} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.history/Demo_20171015145139.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | 14 | 27 | {HeaderPlaceholder} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.history/Demo_20171015145404.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | 14 | 27 | /* {HeaderPlaceholder} */ 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.history/Demo_20171015145406.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | 14 | 27 | {HeaderPlaceholder} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.history/Demo_20171015145413.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | 14 | 27 | {/* {HeaderPlaceholder} */} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.history/Demo_20171015150016.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | 14 | 27 | {/* {HeaderPlaceholder} */} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.history/Demo_20171015151506.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | 14 | 27 | {{HeaderPlaceholder}} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.history/Demo_20171015151525.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | 14 | 27 | {HeaderPlaceholder} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.history/Demo_20171015152330.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | {/* */} 14 | 27 | {HeaderPlaceholder} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.history/Demo_20171015152424.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | { } 14 | 27 | {HeaderPlaceholder} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.history/Demo_20171015152518.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | {/* */} 14 | 27 | {HeaderPlaceholder} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.history/Demo_20171015152627.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | { } 14 | 27 | {HeaderPlaceholder} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.history/Demo_20171015152631.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | 14 | 27 | {HeaderPlaceholder} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.history/Demo_20171015153139.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | 14 | 15 | 28 | {HeaderPlaceholder} 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | const styles = StyleSheet.create({ 44 | container: { 45 | flex: 1 46 | }, 47 | }); 48 | 49 | const enhance = compose( 50 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 51 | withProps(({scrollY}) => ({ 52 | animationRange: scrollY.interpolate({ 53 | inputRange: [0, scrollRangeForAnimation], 54 | outputRange: [0, 1], 55 | extrapolate: 'clamp', 56 | }), 57 | })) 58 | ); 59 | 60 | export default enhance(Demo); 61 | -------------------------------------------------------------------------------- /.history/Demo_20171015153140.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | 14 | 27 | {HeaderPlaceholder} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.history/Demo_20171015153142.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | /* */ 14 | 27 | {HeaderPlaceholder} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.history/Demo_20171015153144.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | 14 | 27 | {HeaderPlaceholder} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.history/Demo_20171015153145.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | {/* */} 14 | 27 | {HeaderPlaceholder} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.history/Demo_20171015153201.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | {/* */} 14 | 28 | {HeaderPlaceholder} 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | const styles = StyleSheet.create({ 44 | container: { 45 | flex: 1 46 | }, 47 | }); 48 | 49 | const enhance = compose( 50 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 51 | withProps(({scrollY}) => ({ 52 | animationRange: scrollY.interpolate({ 53 | inputRange: [0, scrollRangeForAnimation], 54 | outputRange: [0, 1], 55 | extrapolate: 'clamp', 56 | }), 57 | })) 58 | ); 59 | 60 | export default enhance(Demo); 61 | -------------------------------------------------------------------------------- /.history/Demo_20171015153202.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | {/* */} 14 | 15 | 28 | {HeaderPlaceholder} 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | const styles = StyleSheet.create({ 44 | container: { 45 | flex: 1 46 | }, 47 | }); 48 | 49 | const enhance = compose( 50 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 51 | withProps(({scrollY}) => ({ 52 | animationRange: scrollY.interpolate({ 53 | inputRange: [0, scrollRangeForAnimation], 54 | outputRange: [0, 1], 55 | extrapolate: 'clamp', 56 | }), 57 | })) 58 | ); 59 | 60 | export default enhance(Demo); 61 | -------------------------------------------------------------------------------- /.history/Demo_20171015153206.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | {/* */} 14 | 15 | 28 | {HeaderPlaceholder} 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | const styles = StyleSheet.create({ 44 | container: { 45 | flex: 1 46 | }, 47 | }); 48 | 49 | const enhance = compose( 50 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 51 | withProps(({scrollY}) => ({ 52 | animationRange: scrollY.interpolate({ 53 | inputRange: [0, scrollRangeForAnimation], 54 | outputRange: [0, 1], 55 | extrapolate: 'clamp', 56 | }), 57 | })) 58 | ); 59 | 60 | export default enhance(Demo); 61 | -------------------------------------------------------------------------------- /.history/Demo_20171015153213.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | {/* */} 14 | 15 | 28 | {HeaderPlaceholder} 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | const styles = StyleSheet.create({ 44 | container: { 45 | flex: 1 46 | }, 47 | }); 48 | 49 | const enhance = compose( 50 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 51 | withProps(({scrollY}) => ({ 52 | animationRange: scrollY.interpolate({ 53 | inputRange: [0, scrollRangeForAnimation], 54 | outputRange: [0, 1], 55 | extrapolate: 'clamp', 56 | }), 57 | })) 58 | ); 59 | 60 | export default enhance(Demo); 61 | -------------------------------------------------------------------------------- /.history/Demo_20171015153214.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | {/* */} 14 | 15 | 28 | {HeaderPlaceholder} 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | const styles = StyleSheet.create({ 44 | container: { 45 | flex: 1 46 | }, 47 | }); 48 | 49 | const enhance = compose( 50 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 51 | withProps(({scrollY}) => ({ 52 | animationRange: scrollY.interpolate({ 53 | inputRange: [0, scrollRangeForAnimation], 54 | outputRange: [0, 1], 55 | extrapolate: 'clamp', 56 | }), 57 | })) 58 | ); 59 | 60 | export default enhance(Demo); 61 | -------------------------------------------------------------------------------- /.history/Demo_20171015153221.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | {/* */} 14 | 15 | 28 | {HeaderPlaceholder} 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | const styles = StyleSheet.create({ 44 | container: { 45 | flex: 1 46 | }, 47 | }); 48 | 49 | const enhance = compose( 50 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 51 | withProps(({scrollY}) => ({ 52 | animationRange: scrollY.interpolate({ 53 | inputRange: [0, scrollRangeForAnimation], 54 | outputRange: [0, 1], 55 | extrapolate: 'clamp', 56 | }), 57 | })) 58 | ); 59 | 60 | export default enhance(Demo); 61 | -------------------------------------------------------------------------------- /.history/Demo_20171015153226.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | {/* */} 14 | 15 | 28 | {HeaderPlaceholder} 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | const styles = StyleSheet.create({ 44 | container: { 45 | flex: 1 46 | }, 47 | }); 48 | 49 | const enhance = compose( 50 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 51 | withProps(({scrollY}) => ({ 52 | animationRange: scrollY.interpolate({ 53 | inputRange: [0, scrollRangeForAnimation], 54 | outputRange: [0, 1], 55 | extrapolate: 'clamp', 56 | }), 57 | })) 58 | ); 59 | 60 | export default enhance(Demo); 61 | -------------------------------------------------------------------------------- /.history/Demo_20171015153239.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | {/* */} 14 | 27 | {HeaderPlaceholder} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.history/Demo_20171015153243.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | 14 | {/* */} 15 | 28 | {HeaderPlaceholder} 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | const styles = StyleSheet.create({ 44 | container: { 45 | flex: 1 46 | }, 47 | }); 48 | 49 | const enhance = compose( 50 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 51 | withProps(({scrollY}) => ({ 52 | animationRange: scrollY.interpolate({ 53 | inputRange: [0, scrollRangeForAnimation], 54 | outputRange: [0, 1], 55 | extrapolate: 'clamp', 56 | }), 57 | })) 58 | ); 59 | 60 | export default enhance(Demo); 61 | -------------------------------------------------------------------------------- /.history/Demo_20171015153245.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | 14 | {/* */} 15 | 28 | {HeaderPlaceholder} 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | const styles = StyleSheet.create({ 44 | container: { 45 | flex: 1 46 | }, 47 | }); 48 | 49 | const enhance = compose( 50 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 51 | withProps(({scrollY}) => ({ 52 | animationRange: scrollY.interpolate({ 53 | inputRange: [0, scrollRangeForAnimation], 54 | outputRange: [0, 1], 55 | extrapolate: 'clamp', 56 | }), 57 | })) 58 | ); 59 | 60 | export default enhance(Demo); 61 | -------------------------------------------------------------------------------- /.history/Demo_20171015153249.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | 14 | 15 | {/* */} 16 | 29 | {HeaderPlaceholder} 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | const styles = StyleSheet.create({ 45 | container: { 46 | flex: 1 47 | }, 48 | }); 49 | 50 | const enhance = compose( 51 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 52 | withProps(({scrollY}) => ({ 53 | animationRange: scrollY.interpolate({ 54 | inputRange: [0, scrollRangeForAnimation], 55 | outputRange: [0, 1], 56 | extrapolate: 'clamp', 57 | }), 58 | })) 59 | ); 60 | 61 | export default enhance(Demo); 62 | -------------------------------------------------------------------------------- /.history/Demo_20171015153253.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | 14 | 15 | {/* */} 16 | 29 | {HeaderPlaceholder} 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | const styles = StyleSheet.create({ 45 | container: { 46 | flex: 1 47 | }, 48 | }); 49 | 50 | const enhance = compose( 51 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 52 | withProps(({scrollY}) => ({ 53 | animationRange: scrollY.interpolate({ 54 | inputRange: [0, scrollRangeForAnimation], 55 | outputRange: [0, 1], 56 | extrapolate: 'clamp', 57 | }), 58 | })) 59 | ); 60 | 61 | export default enhance(Demo); 62 | -------------------------------------------------------------------------------- /.history/Demo_20171015153321.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | 14 | {/* */} 15 | 28 | {HeaderPlaceholder} 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | const styles = StyleSheet.create({ 44 | container: { 45 | flex: 1 46 | }, 47 | }); 48 | 49 | const enhance = compose( 50 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 51 | withProps(({scrollY}) => ({ 52 | animationRange: scrollY.interpolate({ 53 | inputRange: [0, scrollRangeForAnimation], 54 | outputRange: [0, 1], 55 | extrapolate: 'clamp', 56 | }), 57 | })) 58 | ); 59 | 60 | export default enhance(Demo); 61 | -------------------------------------------------------------------------------- /.history/Demo_20171015153324.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | {/* */} 14 | 15 | 28 | {HeaderPlaceholder} 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | const styles = StyleSheet.create({ 44 | container: { 45 | flex: 1 46 | }, 47 | }); 48 | 49 | const enhance = compose( 50 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 51 | withProps(({scrollY}) => ({ 52 | animationRange: scrollY.interpolate({ 53 | inputRange: [0, scrollRangeForAnimation], 54 | outputRange: [0, 1], 55 | extrapolate: 'clamp', 56 | }), 57 | })) 58 | ); 59 | 60 | export default enhance(Demo); 61 | -------------------------------------------------------------------------------- /.history/Demo_20171015153356.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | {/* */} 14 | 15 | 28 | {HeaderPlaceholder} 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | const styles = StyleSheet.create({ 44 | container: { 45 | flex: 1 46 | }, 47 | }); 48 | 49 | const enhance = compose( 50 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 51 | withProps(({scrollY}) => ({ 52 | animationRange: scrollY.interpolate({ 53 | inputRange: [0, scrollRangeForAnimation], 54 | outputRange: [0, 1], 55 | extrapolate: 'clamp', 56 | }), 57 | })) 58 | ); 59 | 60 | export default enhance(Demo); 61 | -------------------------------------------------------------------------------- /.history/Demo_20171015153359.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | {/* */} 14 | 15 | 28 | {HeaderPlaceholder} 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | const styles = StyleSheet.create({ 44 | container: { 45 | // flex: 1 46 | }, 47 | }); 48 | 49 | const enhance = compose( 50 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 51 | withProps(({scrollY}) => ({ 52 | animationRange: scrollY.interpolate({ 53 | inputRange: [0, scrollRangeForAnimation], 54 | outputRange: [0, 1], 55 | extrapolate: 'clamp', 56 | }), 57 | })) 58 | ); 59 | 60 | export default enhance(Demo); 61 | -------------------------------------------------------------------------------- /.history/Demo_20171015153441.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | {/* */} 14 | 15 | 28 | {HeaderPlaceholder} 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | const styles = StyleSheet.create({ 44 | container: { 45 | // flex: 1 46 | }, 47 | }); 48 | 49 | const enhance = compose( 50 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 51 | withProps(({scrollY}) => ({ 52 | animationRange: scrollY.interpolate({ 53 | inputRange: [0, scrollRangeForAnimation], 54 | outputRange: [0, 1], 55 | extrapolate: 'clamp', 56 | }), 57 | })) 58 | ); 59 | 60 | export default enhance(Demo); 61 | -------------------------------------------------------------------------------- /.history/Demo_20171015153522.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | {/* */} 14 | 15 | 28 | {HeaderPlaceholder} 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | const styles = StyleSheet.create({ 44 | container: { 45 | // flex: 1 46 | }, 47 | }); 48 | 49 | const enhance = compose( 50 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 51 | withProps(({scrollY}) => ({ 52 | animationRange: scrollY.interpolate({ 53 | inputRange: [0, scrollRangeForAnimation], 54 | outputRange: [0, 1], 55 | extrapolate: 'clamp', 56 | }), 57 | })) 58 | ); 59 | 60 | export default enhance(Demo); 61 | -------------------------------------------------------------------------------- /.history/Demo_20171015153723.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | {/* */} 14 | 15 | 28 | {HeaderPlaceholder} 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | const styles = StyleSheet.create({ 44 | container: { 45 | // flex: 1 46 | }, 47 | }); 48 | 49 | const enhance = compose( 50 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 51 | withProps(({scrollY}) => ({ 52 | animationRange: scrollY.interpolate({ 53 | inputRange: [0, scrollRangeForAnimation], 54 | outputRange: [0, 1], 55 | extrapolate: 'clamp', 56 | }), 57 | })) 58 | ); 59 | 60 | export default enhance(Demo); 61 | -------------------------------------------------------------------------------- /.history/Demo_20171015153726.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | {/* */} 14 | 15 | 28 | {HeaderPlaceholder} 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | const styles = StyleSheet.create({ 44 | container: { 45 | // flex: 1 46 | }, 47 | }); 48 | 49 | const enhance = compose( 50 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 51 | withProps(({scrollY}) => ({ 52 | animationRange: scrollY.interpolate({ 53 | inputRange: [0, scrollRangeForAnimation], 54 | outputRange: [0, 1], 55 | extrapolate: 'clamp', 56 | }), 57 | })) 58 | ); 59 | 60 | export default enhance(Demo); 61 | -------------------------------------------------------------------------------- /.history/Demo_20171015154219.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | {/* */} 14 | 15 | 28 | {HeaderPlaceholder} 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | const styles = StyleSheet.create({ 44 | container: { 45 | flex: 1 46 | }, 47 | }); 48 | 49 | const enhance = compose( 50 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 51 | withProps(({scrollY}) => ({ 52 | animationRange: scrollY.interpolate({ 53 | inputRange: [0, scrollRangeForAnimation], 54 | outputRange: [0, 1], 55 | extrapolate: 'clamp', 56 | }), 57 | })) 58 | ); 59 | 60 | export default enhance(Demo); 61 | -------------------------------------------------------------------------------- /.history/Demo_20171015163826.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | {/* */} 14 | 27 | {HeaderPlaceholder} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.history/Demo_20171015163913.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import {compose, withState, withProps} from 'recompose'; 4 | import AnimatedHeader from './AnimatedHeader'; 5 | import ItemInScroll from './ItemInScroll'; 6 | 7 | export const scrollRangeForAnimation = 100; 8 | 9 | const HeaderPlaceholder = ; 10 | 11 | const Demo = ({scrollY, animationRange}) => 12 | 13 | 26 | {HeaderPlaceholder} 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | {/* */} 40 | 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1 45 | }, 46 | }); 47 | 48 | const enhance = compose( 49 | withState('scrollY', 'setScrollY', () => new Animated.Value(0)), 50 | withProps(({scrollY}) => ({ 51 | animationRange: scrollY.interpolate({ 52 | inputRange: [0, scrollRangeForAnimation], 53 | outputRange: [0, 1], 54 | extrapolate: 'clamp', 55 | }), 56 | })) 57 | ); 58 | 59 | export default enhance(Demo); 60 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /AnimatedHeader.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | import AnimatedText from './AnimatedText'; 4 | import AnimatedImage from './AnimatedImage'; 5 | 6 | const HeaderBackground = ({animationRange}) => { 7 | const animateHeader = { 8 | transform: [ 9 | { 10 | translateY: animationRange.interpolate({ 11 | inputRange: [0, 1], 12 | outputRange: [0, -100], 13 | }), 14 | }, 15 | ], 16 | }; 17 | 18 | return ; 19 | }; 20 | 21 | 22 | const AnimatedHeader = ({animationRange}) => 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | const styles = StyleSheet.create({ 32 | container: { 33 | position: 'absolute', 34 | flex: 0, 35 | zIndex: 2, 36 | height:200, 37 | width:'100%', 38 | backgroundColor: 'transparent', 39 | 40 | justifyContent: 'center', 41 | alignItems: 'center' 42 | }, 43 | headerBackground: { 44 | position: 'absolute', 45 | flex: 0, 46 | height: 200, 47 | width: '100%', 48 | backgroundColor: 'white', 49 | zIndex: 2, 50 | } 51 | }); 52 | 53 | export default AnimatedHeader; -------------------------------------------------------------------------------- /AnimatedImage.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | import {withSelfMeasure} from './utils/selfMeasureBehavior'; 4 | import {compose} from 'recompose'; 5 | import buildTransform from './utils/buildTransform'; 6 | 7 | 8 | const AnimatedImage = ({ 9 | animationRange, 10 | onLayoutSetMeasurements, 11 | elementX, 12 | elementY, 13 | elementHeight, 14 | elementWidth,}) => { 15 | 16 | const animateImage = buildTransform(animationRange, elementX, elementY, elementHeight, elementWidth, 20, 40, 0.5); 17 | return ( 18 | onLayoutSetMeasurements(event)} /> 22 | ) 23 | } 24 | 25 | const styles = StyleSheet.create({ 26 | image: { 27 | marginTop: 20, 28 | width: 50, 29 | height: 50 30 | } 31 | }); 32 | 33 | const enhance = compose(withSelfMeasure); 34 | 35 | export default enhance(AnimatedImage); -------------------------------------------------------------------------------- /AnimatedText.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Animated } from 'react-native'; 3 | import {withSelfMeasure} from './utils/selfMeasureBehavior'; 4 | import {compose} from 'recompose'; 5 | import buildTransform from './utils/buildTransform'; 6 | 7 | 8 | const AnimatedText = ({ 9 | animationRange, 10 | onLayoutSetMeasurements, 11 | elementX, 12 | elementY, 13 | elementHeight, 14 | elementWidth,}) => { 15 | 16 | const animateText = buildTransform(animationRange, elementX, elementY, elementHeight, elementWidth, 20, 70, 0.7); 17 | const animateOpacity = { 18 | opacity: animationRange.interpolate({ 19 | inputRange: [0, 0.9, 1], 20 | outputRange: [1, 0, 1], 21 | }), 22 | }; 23 | 24 | return ( 25 | onLayoutSetMeasurements(event)} > 28 | This is Animated Text 29 | 30 | ) 31 | } 32 | 33 | const styles = StyleSheet.create({ 34 | text: { 35 | fontSize: 20, 36 | color: '#696969', 37 | fontWeight: 'bold' 38 | } 39 | }); 40 | 41 | const enhance = compose(withSelfMeasure); 42 | 43 | export default enhance(AnimatedText); -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ScrollView, Animated } from 'react-native'; 3 | import Demo from './Demo'; 4 | 5 | export default class App extends React.Component { 6 | render() { 7 | return ( 8 | 9 | ); 10 | } 11 | } -------------------------------------------------------------------------------- /App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import App from './App'; 3 | 4 | import renderer from 'react-test-renderer'; 5 | 6 | it('renders without crashing', () => { 7 | const rendered = renderer.create().toJSON(); 8 | expect(rendered).toBeTruthy(); 9 | }); 10 | -------------------------------------------------------------------------------- /ItemInScroll.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View } from 'react-native'; 3 | 4 | const calcColor = (numberOfItem) => { 5 | if (numberOfItem%2 === 0) { 6 | return '#b1b1c1'; 7 | } 8 | else { 9 | return '#d1d1d8'; 10 | } 11 | } 12 | 13 | const getColorStyle =(numberOfItem) => { 14 | return { 15 | backgroundColor: calcColor(numberOfItem) 16 | } 17 | } 18 | 19 | const ItemInScroll = ({numberOfItem}) => 20 | 21 | {'Item #' + numberOfItem} 22 | 23 | 24 | const styles = StyleSheet.create({ 25 | container: { 26 | width: '100%', 27 | height: 100, 28 | alignItems: 'center', 29 | justifyContent: 'center' 30 | }, 31 | item: { 32 | fontSize: 30 33 | } 34 | }); 35 | 36 | export default ItemInScroll; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is an example of an animated header that contains components who animate based on the scroll position of a ScrollView. 2 | Using React Native Animated library. 3 | 4 | Read more about it at How I linked animated headers to scroll position in React Native 5 | 6 | ![](https://github.com/zoharlevin/react-native-animated-header-example/blob/master/gif/animatedHeader.gif) 7 | 8 |
Doggy icon made by Freepik from www.flaticon.com is licensed by CC 3.0 BY
9 | 10 | This project was bootstrapped with [Create React Native App](https://github.com/react-community/create-react-native-app). 11 | 12 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "sdkVersion": "21.0.0" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /gif/animatedHeader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zoharlevin/react-native-animated-header-example/4167b840fd367095d3eb4c22b2ed19e82913c4f5/gif/animatedHeader.gif -------------------------------------------------------------------------------- /img/dog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zoharlevin/react-native-animated-header-example/4167b840fd367095d3eb4c22b2ed19e82913c4f5/img/dog.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "AnimatedHeader", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-native-scripts": "1.5.0", 7 | "jest-expo": "^21.0.2", 8 | "react-test-renderer": "16.0.0-alpha.12" 9 | }, 10 | "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js", 11 | "scripts": { 12 | "start": "react-native-scripts start", 13 | "eject": "react-native-scripts eject", 14 | "android": "react-native-scripts android", 15 | "ios": "react-native-scripts ios", 16 | "test": "node node_modules/jest/bin/jest.js --watch" 17 | }, 18 | "jest": { 19 | "preset": "jest-expo" 20 | }, 21 | "dependencies": { 22 | "expo": "^21.0.0", 23 | "react": "16.0.0-alpha.12", 24 | "react-native": "^0.48.4", 25 | "recompose": "0.26.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /utils/buildTransform.js: -------------------------------------------------------------------------------- 1 | const buildTransform = (animationRange, startX, startY, startHeight, startWidth, endX, endY, scaleTo) => { 2 | const complementScaling = 1 - scaleTo; 3 | const verticalScalingDiff = complementScaling * startHeight / 2; 4 | const horizontalScalingDiff = complementScaling * startWidth / 2; 5 | return { 6 | transform: [ 7 | { 8 | translateY: animationRange.interpolate({ 9 | inputRange: [0, 1], 10 | outputRange: [0, -(startY - endY) - verticalScalingDiff], 11 | }), 12 | }, 13 | { 14 | translateX: animationRange.interpolate({ 15 | inputRange: [0, 1], 16 | outputRange: [0, -(startX - endX) - horizontalScalingDiff], 17 | }), 18 | }, 19 | { 20 | scale: animationRange.interpolate({ 21 | inputRange: [0, 1], 22 | outputRange: [1, scaleTo], 23 | }), 24 | }, 25 | ], 26 | }; 27 | }; 28 | 29 | export default buildTransform; 30 | -------------------------------------------------------------------------------- /utils/selfMeasureBehavior.js: -------------------------------------------------------------------------------- 1 | import {compose, withState, withProps} from 'recompose'; 2 | 3 | const withMeasurements = compose( 4 | withState('elementX', 'setX', 0), 5 | withState('elementY', 'setY', 0), 6 | withState('elementWidth', 'setWidth', 0), 7 | withState('elementHeight', 'setHeight', 0) 8 | ); 9 | 10 | const withOnLayout = withProps(({setX, setY, setWidth, setHeight}) => ({ 11 | onLayoutSetMeasurements: event => { 12 | setX(event.nativeEvent.layout.x); 13 | setY(event.nativeEvent.layout.y); 14 | setWidth(event.nativeEvent.layout.width); 15 | setHeight(event.nativeEvent.layout.height); 16 | }, 17 | })); 18 | 19 | export const withSelfMeasure = compose(withMeasurements, withOnLayout); 20 | --------------------------------------------------------------------------------