├── .gitignore
├── Examples
    ├── Example1
    │   ├── Example1.tsx
    │   └── style.ts
    ├── Example2
    │   ├── Example2.tsx
    │   └── style.ts
    ├── Example3
    │   ├── Example3.tsx
    │   └── style.ts
    ├── Example4
    │   ├── Example4.tsx
    │   └── style.ts
    ├── assets
    │   └── img
    │   │   ├── 150.png
    │   │   ├── Example1.gif
    │   │   ├── Example2.gif
    │   │   ├── Example3.gif
    │   │   ├── Example4.gif
    │   │   └── header-img.jpg
    └── index.ts
├── LICENSE
├── README.md
├── package.json
├── src
    ├── AnimatedScreenCollapsibleElement
    │   ├── AnimatedScreenCollapsibleElement.tsx
    │   └── index.ts
    ├── AnimatedScreenContext.tsx
    ├── AnimatedScreenElement
    │   ├── AnimatedScreenElement.tsx
    │   └── index.ts
    ├── AnimatedScreenFlatList
    │   ├── AnimatedScreenFlatList.tsx
    │   ├── index.ts
    │   └── styles.ts
    ├── AnimatedScreenHeader
    │   ├── AnimatedScreenHeader.tsx
    │   ├── index.ts
    │   └── style.ts
    ├── AnimatedScreenScrollView
    │   ├── AnimatedScreenScrollView.tsx
    │   └── index.ts
    ├── AnimatedScreenSectionList
    │   ├── AnimatedScreenSectionList.tsx
    │   └── index.ts
    ├── AnimatedScreenWrapper
    │   ├── AnimatedScreenWrapper.tsx
    │   └── index.ts
    └── index.ts
├── tsconfig.json
└── tslint.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | # OSX
 2 | #
 3 | .DS_Store
 4 | 
 5 | # build
 6 | #
 7 | lib/
 8 | 
 9 | # node.js
10 | #
11 | node_modules/
12 | npm-debug.log
13 | yarn-error.log
14 | package-lock.json
15 | 
16 | .npmrc
17 | 


--------------------------------------------------------------------------------
/Examples/Example1/Example1.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Image, Text, View } from 'react-native';
 3 | import img1 from '../assets/img/150.png';
 4 | import AnimatedScreen from '../../src';
 5 | import style from './style';
 6 | 
 7 | const Example1: React.FC = () => {
 8 |   return (
 9 |     <AnimatedScreen.Wrapper disableParallaxEffect>
10 |       <AnimatedScreen.Header backgroundColor="#f1f1f1" withShadow>
11 |         <View style={style.container}>
12 |           <Text style={style.title}>Example 1</Text>
13 |           <AnimatedScreen.CollapsibleElement>
14 |             <Text style={style.subtitle}>Simple header with ScrollView</Text>
15 |           </AnimatedScreen.CollapsibleElement>
16 |         </View>
17 |       </AnimatedScreen.Header>
18 |       <AnimatedScreen.ScrollView>
19 |         <View style={style.body}>
20 |           <View style={style.container}>
21 |             <Text>
22 |               Fusce fermentum. Pellentesque egestas, neque sit amet convallis
23 |               pulvinar, justo nulla eleifend augue, ac auctor orci leo non est.
24 |               In turpis. Cras ultricies mi eu turpis hendrerit fringilla.
25 |               Maecenas nec odio et ante tincidunt tempus. Aliquam lobortis.
26 |               Etiam vitae tortor. Suspendisse pulvinar, augue ac venenatis
27 |               condimentum, sem libero volutpat nibh, nec pellentesque velit pede
28 |               quis nunc. Etiam vitae tortor. Cras ultricies mi eu turpis
29 |               hendrerit fringilla. Morbi mattis ullamcorper velit. Proin
30 |               viverra, ligula sit amet ultrices semper, ligula arcu tristique
31 |               sapien, a accumsan nisi mauris ac eros. Vivamus elementum semper
32 |               nisi. Praesent metus tellus, elementum eu, semper a, adipiscing
33 |               nec, purus. Etiam vitae tortor.
34 |             </Text>
35 |             <View style={style.imgWrapper}>
36 |               <Image source={img1} />
37 |             </View>
38 |             <Text>
39 |               Fusce fermentum. Pellentesque egestas, neque sit amet convallis
40 |               pulvinar, justo nulla eleifend augue, ac auctor orci leo non est.
41 |               In turpis. Cras ultricies mi eu turpis hendrerit fringilla.
42 |               Maecenas nec odio et ante tincidunt tempus. Aliquam lobortis.
43 |               Etiam vitae tortor. Suspendisse pulvinar, augue ac venenatis
44 |               condimentum, sem libero volutpat nibh, nec pellentesque velit pede
45 |               quis nunc. Etiam vitae tortor. Cras ultricies mi eu turpis
46 |               hendrerit fringilla. Morbi mattis ullamcorper velit. Proin
47 |               viverra, ligula sit amet ultrices semper, ligula arcu tristique
48 |               sapien, a accumsan nisi mauris ac eros. Vivamus elementum semper
49 |               nisi. Praesent metus tellus, elementum eu, semper a, adipiscing
50 |               nec, purus. Etiam vitae tortor.
51 |             </Text>
52 |           </View>
53 |         </View>
54 |       </AnimatedScreen.ScrollView>
55 |     </AnimatedScreen.Wrapper>
56 |   );
57 | };
58 | 
59 | export default React.memo(Example1);
60 | 


--------------------------------------------------------------------------------
/Examples/Example1/style.ts:
--------------------------------------------------------------------------------
 1 | import { StyleSheet } from 'react-native';
 2 | 
 3 | export default StyleSheet.create({
 4 |   container: {
 5 |     paddingHorizontal: 10,
 6 |   },
 7 |   title: {
 8 |     fontSize: 30,
 9 |     fontWeight: '900',
10 |   },
11 |   subtitle: {
12 |     fontSize: 20,
13 |     fontWeight: '400',
14 |   },
15 |   body: {
16 |     paddingVertical: 10,
17 |   },
18 |   imgWrapper: {
19 |     padding: 10,
20 |     justifyContent: 'center',
21 |     alignItems: 'center',
22 |   },
23 | });
24 | 


--------------------------------------------------------------------------------
/Examples/Example2/Example2.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useCallback } from 'react';
 2 | import { Image, Text, View } from 'react-native';
 3 | import img1 from '../assets/img/150.png';
 4 | import AnimatedScreen from '../../src';
 5 | import style from './style';
 6 | 
 7 | const Example2: React.FC = () => {
 8 |   const renderItem = useCallback(({ index }) => {
 9 |     return (
10 |       <View style={style.item}>
11 |         <Image source={img1} resizeMode="contain" style={style.image} />
12 |         <Text style={style.text}>FlatList item {index}</Text>
13 |       </View>
14 |     );
15 |   }, []);
16 |   return (
17 |     <AnimatedScreen.Wrapper disableParallaxEffect>
18 |       <AnimatedScreen.Header backgroundColor="#f1f1f1" withShadow>
19 |         <View style={style.container}>
20 |           <Text style={style.title}>Example 2</Text>
21 |           <AnimatedScreen.CollapsibleElement>
22 |             <Text style={style.subtitle}>Simple header with FlatList</Text>
23 |           </AnimatedScreen.CollapsibleElement>
24 |         </View>
25 |       </AnimatedScreen.Header>
26 |       <AnimatedScreen.FlatList
27 |         data={new Array(50).fill('')}
28 |         renderItem={renderItem}
29 |         contentContainerStyle={style.body}
30 |       />
31 |     </AnimatedScreen.Wrapper>
32 |   );
33 | };
34 | 
35 | export default React.memo(Example2);
36 | 


--------------------------------------------------------------------------------
/Examples/Example2/style.ts:
--------------------------------------------------------------------------------
 1 | import { StyleSheet } from 'react-native';
 2 | 
 3 | export default StyleSheet.create({
 4 |   container: {
 5 |     paddingHorizontal: 10,
 6 |   },
 7 |   title: {
 8 |     fontSize: 30,
 9 |     fontWeight: '900',
10 |   },
11 |   subtitle: {
12 |     fontSize: 20,
13 |     fontWeight: '400',
14 |   },
15 |   body: {
16 |     paddingVertical: 10,
17 |   },
18 |   item: {
19 |     height: 60,
20 |     borderWidth: 1,
21 |     borderRadius: 5,
22 |     margin: 10,
23 |     marginTop: 0,
24 |     padding: 10,
25 |     flexDirection: 'row',
26 |     alignItems: 'center',
27 |   },
28 |   text: {
29 |     flex: 1,
30 |     textAlign: 'center',
31 |   },
32 |   image: {
33 |     width: 40,
34 |     height: 40,
35 |   },
36 | });
37 | 


--------------------------------------------------------------------------------
/Examples/Example3/Example3.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useCallback } from 'react';
 2 | import { Image, Text, View } from 'react-native';
 3 | import img1 from '../assets/img/150.png';
 4 | import AnimatedScreen from '../../src';
 5 | import style from './style';
 6 | 
 7 | const sections = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'];
 8 | 
 9 | const Example3: React.FC = () => {
10 |   const renderItem = useCallback(({ item }) => {
11 |     return (
12 |       <View style={style.item}>
13 |         <Image source={img1} resizeMode="contain" style={style.image} />
14 |         <Text style={style.text}>{item}</Text>
15 |       </View>
16 |     );
17 |   }, []);
18 |   const renderSectionHeader = useCallback(({ section }) => {
19 |     return (
20 |       <View style={style.section}>
21 |         <Text>{section.title}</Text>
22 |       </View>
23 |     );
24 |   }, []);
25 |   return (
26 |     <AnimatedScreen.Wrapper disableParallaxEffect>
27 |       <AnimatedScreen.Header backgroundColor="#f1f1f1" withShadow>
28 |         <View style={style.container}>
29 |           <Text style={style.title}>Example 3</Text>
30 |           <AnimatedScreen.CollapsibleElement>
31 |             <Text style={style.subtitle}>Simple header with SectionList</Text>
32 |           </AnimatedScreen.CollapsibleElement>
33 |         </View>
34 |       </AnimatedScreen.Header>
35 |       <AnimatedScreen.SectionList
36 |         sections={sections.map(section => ({
37 |           title: section,
38 |           data: new Array(Math.floor(Math.random() * 5) + 1).fill(
39 |             `Element in ${section} section`,
40 |           ),
41 |         }))}
42 |         renderSectionHeader={renderSectionHeader}
43 |         renderItem={renderItem}
44 |       />
45 |     </AnimatedScreen.Wrapper>
46 |   );
47 | };
48 | 
49 | export default React.memo(Example3);
50 | 


--------------------------------------------------------------------------------
/Examples/Example3/style.ts:
--------------------------------------------------------------------------------
 1 | import { StyleSheet } from 'react-native';
 2 | 
 3 | export default StyleSheet.create({
 4 |   container: {
 5 |     paddingHorizontal: 10,
 6 |   },
 7 |   title: {
 8 |     fontSize: 30,
 9 |     fontWeight: '900',
10 |   },
11 |   subtitle: {
12 |     fontSize: 20,
13 |     fontWeight: '400',
14 |   },
15 |   section: {
16 |     backgroundColor: '#e0e0e0',
17 |     padding: 10,
18 |   },
19 |   item: {
20 |     height: 60,
21 |     borderWidth: 1,
22 |     borderRadius: 5,
23 |     marginVertical: 5,
24 |     marginHorizontal: 10,
25 |     padding: 10,
26 |     flexDirection: 'row',
27 |     alignItems: 'center',
28 |   },
29 |   text: {
30 |     flex: 1,
31 |     textAlign: 'center',
32 |   },
33 |   image: {
34 |     width: 40,
35 |     height: 40,
36 |   },
37 | });
38 | 


--------------------------------------------------------------------------------
/Examples/Example4/Example4.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useCallback } from 'react';
  2 | import { Animated, Image, Text, TextInput, View } from 'react-native';
  3 | import { widthPercentageToDP } from 'react-native-responsive-screen';
  4 | import img1 from '../assets/img/150.png';
  5 | import AnimatedScreen from '../../src';
  6 | import style from './style';
  7 | 
  8 | const sections = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'];
  9 | 
 10 | const Example4: React.FC = () => {
 11 |   const renderItem = useCallback(({ item }) => {
 12 |     return (
 13 |       <View style={style.item}>
 14 |         <Image source={img1} resizeMode="contain" style={style.image} />
 15 |         <Text style={style.text}>{item}</Text>
 16 |       </View>
 17 |     );
 18 |   }, []);
 19 |   const renderSectionHeader = useCallback(({ section }) => {
 20 |     return (
 21 |       <View style={style.section}>
 22 |         <Text>{section.title}</Text>
 23 |       </View>
 24 |     );
 25 |   }, []);
 26 |   const getBackgroundOpacity = useCallback(
 27 |     (scrollY: Animated.Value) => ({
 28 |       backgroundColor: scrollY.interpolate({
 29 |         inputRange: [0, 200],
 30 |         outputRange: ['#236979', '#6c2379'],
 31 |         extrapolate: 'clamp',
 32 |       }),
 33 |     }),
 34 |     [],
 35 |   );
 36 |   const renderBackground = useCallback(
 37 |     (scrollY: Animated.Value) => (
 38 |       <Animated.View
 39 |         style={[style.background, getBackgroundOpacity(scrollY)]}
 40 |       />
 41 |     ),
 42 |     [getBackgroundOpacity],
 43 |   );
 44 |   const headerAnimatedStyle = useCallback(
 45 |     scrollY => ({
 46 |       transform: [
 47 |         {
 48 |           scale: scrollY.interpolate({
 49 |             inputRange: [0, 200],
 50 |             outputRange: [0, 1],
 51 |             extrapolate: 'clamp',
 52 |           }),
 53 |         },
 54 |       ],
 55 |     }),
 56 |     [],
 57 |   );
 58 |   return (
 59 |     <AnimatedScreen.Wrapper
 60 |       disableParallaxEffect
 61 |       headerMaxHeight={200}
 62 |       headerMinHeight={100}
 63 |     >
 64 |       <AnimatedScreen.Header
 65 |         renderBackground={renderBackground}
 66 |         withShadow
 67 |         style={style.header}
 68 |       >
 69 |         <View style={style.container}>
 70 |           <View style={style.smallHeader}>
 71 |             <AnimatedScreen.Element
 72 |               interpolate={{ width: [widthPercentageToDP(100) - 20, 30] }}
 73 |               style={style.logoWrapper}
 74 |             >
 75 |               <Image source={img1} style={style.logo} />
 76 |             </AnimatedScreen.Element>
 77 |             <AnimatedScreen.Element
 78 |               interpolate={{ opacity: [0, 1] }}
 79 |               animatedStyle={headerAnimatedStyle}
 80 |             >
 81 |               <Text style={style.title}>Example 4</Text>
 82 |             </AnimatedScreen.Element>
 83 |           </View>
 84 |           <AnimatedScreen.CollapsibleElement interpolate={{ height: [40, 0] }}>
 85 |             <Text style={style.title}>Example 4</Text>
 86 |             <Text style={style.subtitle}>OnScroll Animated Header</Text>
 87 |           </AnimatedScreen.CollapsibleElement>
 88 |           <AnimatedScreen.Element interpolate={{ height: [20, 5] }}>
 89 |             <View />
 90 |           </AnimatedScreen.Element>
 91 |           <AnimatedScreen.Element>
 92 |             <TextInput style={style.input} placeholder="Search..." />
 93 |           </AnimatedScreen.Element>
 94 |         </View>
 95 |       </AnimatedScreen.Header>
 96 |       <AnimatedScreen.SectionList
 97 |         sections={sections.map(section => ({
 98 |           title: section,
 99 |           data: new Array(Math.floor(Math.random() * 5) + 1).fill(
100 |             `Element in ${section} section`,
101 |           ),
102 |         }))}
103 |         renderSectionHeader={renderSectionHeader}
104 |         renderItem={renderItem}
105 |       />
106 |     </AnimatedScreen.Wrapper>
107 |   );
108 | };
109 | 
110 | export default React.memo(Example4);
111 | 


--------------------------------------------------------------------------------
/Examples/Example4/style.ts:
--------------------------------------------------------------------------------
 1 | import { StyleSheet } from 'react-native';
 2 | 
 3 | export default StyleSheet.create({
 4 |   container: {
 5 |     paddingHorizontal: 10,
 6 |   },
 7 |   title: {
 8 |     fontSize: 30,
 9 |     fontWeight: '900',
10 |   },
11 |   subtitle: {
12 |     fontSize: 20,
13 |     fontWeight: '400',
14 |   },
15 |   section: {
16 |     backgroundColor: '#e0e0e0',
17 |     padding: 10,
18 |   },
19 |   header: {
20 |     justifyContent: 'flex-start',
21 |     flexDirection: 'column',
22 |   },
23 |   spacer: {
24 |     height: 40,
25 |   },
26 |   smallHeader: {
27 |     flexDirection: 'row',
28 |     alignItems: 'center',
29 |   },
30 |   logoWrapper: {
31 |     alignItems: 'center',
32 |     marginRight: 10,
33 |   },
34 |   logo: {
35 |     width: 30,
36 |     height: 30,
37 |     borderRadius: 30,
38 |   },
39 |   input: {
40 |     width: '100%',
41 |     height: 30,
42 |     backgroundColor: '#e0e0e0',
43 |     opacity: 0.8,
44 |     borderRadius: 15,
45 |     paddingVertical: 0,
46 |     paddingHorizontal: 15,
47 |   },
48 |   background: {
49 |     position: 'absolute',
50 |     width: '100%',
51 |     height: '100%',
52 |   },
53 |   item: {
54 |     height: 60,
55 |     borderWidth: 1,
56 |     borderRadius: 5,
57 |     marginVertical: 5,
58 |     marginHorizontal: 10,
59 |     padding: 10,
60 |     flexDirection: 'row',
61 |     alignItems: 'center',
62 |   },
63 |   text: {
64 |     flex: 1,
65 |     textAlign: 'center',
66 |   },
67 |   image: {
68 |     width: 40,
69 |     height: 40,
70 |   },
71 | });
72 | 


--------------------------------------------------------------------------------
/Examples/assets/img/150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/giovannidavi/react-native-animated-screen/2e8c0b27a6238fe141101e88f63e5d2bb61bc32d/Examples/assets/img/150.png


--------------------------------------------------------------------------------
/Examples/assets/img/Example1.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/giovannidavi/react-native-animated-screen/2e8c0b27a6238fe141101e88f63e5d2bb61bc32d/Examples/assets/img/Example1.gif


--------------------------------------------------------------------------------
/Examples/assets/img/Example2.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/giovannidavi/react-native-animated-screen/2e8c0b27a6238fe141101e88f63e5d2bb61bc32d/Examples/assets/img/Example2.gif


--------------------------------------------------------------------------------
/Examples/assets/img/Example3.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/giovannidavi/react-native-animated-screen/2e8c0b27a6238fe141101e88f63e5d2bb61bc32d/Examples/assets/img/Example3.gif


--------------------------------------------------------------------------------
/Examples/assets/img/Example4.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/giovannidavi/react-native-animated-screen/2e8c0b27a6238fe141101e88f63e5d2bb61bc32d/Examples/assets/img/Example4.gif


--------------------------------------------------------------------------------
/Examples/assets/img/header-img.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/giovannidavi/react-native-animated-screen/2e8c0b27a6238fe141101e88f63e5d2bb61bc32d/Examples/assets/img/header-img.jpg


--------------------------------------------------------------------------------
/Examples/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Example1 } from './Example1/Example1';
2 | export { default as Example2 } from './Example2/Example2';
3 | export { default as Example3 } from './Example3/Example3';
4 | export { default as Example4 } from './Example4/Example4';
5 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright 2020 Giovanni Davì
2 | 
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 | 
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 | 
7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React Native Animated Screen 
  2 | 
  3 | [![Version](https://img.shields.io/npm/v/react-native-animated-screen)](https://www.npmjs.com/package/react-native-animated-screen) [![License](https://img.shields.io/npm/l/react-native-animated-screen)](https://www.npmjs.com/package/react-native-animated-screen) [![Build Status](https://img.shields.io/github/repo-size/giovannidavi/react-native-animated-screen)](https://github.com/giovannidavi/react-native-animated-screen)
  4 | 
  5 | ![](https://raw.githubusercontent.com/giovannidavi/react-native-animated-screen/master/Examples/assets/img/header-img.jpg)
  6 | 
  7 | 
  8 | This module includes all the necessary components to generate outstanding **scroll-based** **animated screens** and **screens header**.
  9 | 
 10 |   
 11 | 
 12 | The package is both **Android** and **iOS** compatible.
 13 | 
 14 | ## Try it out
 15 | 
 16 | You can play with our ready-to-use **examples** from our GitHub repository
 17 | 
 18 | 
 19 | 
 20 | |Example 1|Example 2|Example 3|Example 4|
 21 | |---|---|---|---|
 22 | |![](https://raw.githubusercontent.com/giovannidavi/react-native-animated-screen/master/Examples/assets/img/Example1.gif)|![](https://raw.githubusercontent.com/giovannidavi/react-native-animated-screen/master/Examples/assets/img/Example2.gif)|![](https://raw.githubusercontent.com/giovannidavi/react-native-animated-screen/master/Examples/assets/img/Example3.gif)|![](https://raw.githubusercontent.com/giovannidavi/react-native-animated-screen/master/Examples/assets/img/Example4.gif)|
 23 | 
 24 | 
 25 | ```
 26 | 
 27 | $ git clone https://github.com/giovannidavi/react-native-animated-screen.git
 28 | 
 29 | ```
 30 | 
 31 |   
 32 | You can check the examples code here [examples](https://github.com/giovannidavi/react-native-animated-screen/tree/master/Examples)
 33 |   
 34 | 
 35 | ## Installation
 36 | 
 37 | With npm
 38 | 
 39 | ```
 40 | $ npm install react-native-animated-screen
 41 | 
 42 | ```
 43 | 
 44 | With yarn
 45 | 
 46 | ```
 47 | $ yarn add react-native-animated-screen
 48 | ```
 49 | 
 50 |   
 51 | 
 52 | The solution is implemented in JavaScript so no native module linking is required.
 53 | 
 54 |   
 55 | 
 56 | ## Usage
 57 | 
 58 |  By default the component exposes 7 sub-components to help you creating the stage. 
 59 | 
 60 |  - AnimatedScreen.Wrapper
 61 |  - AnimatedScreen.Header
 62 |  - AnimatedScreen.ScrollView
 63 |  - AnimatedScreen.FlatList
 64 |  - AnimatedScreen.SectionList
 65 |  - AnimatedScreen.Element
 66 |  - AniamtedScreen.CollapsibleElement
 67 | 
 68 | For the animation to work properly you need to wrap your entire view in an AnimatedScreen.Wrapper component which will include the AnimatedScreen.Header and at least one of the scrollable elements:
 69 | 
 70 |  - AnimatedScreen.ScrollView
 71 |  - AnimatedScreen.FlatList
 72 |  - AnimatedScreen.SectionList
 73 | 
 74 | 
 75 |   
 76 | 
 77 | ```javascript
 78 | 
 79 | import  React  from  'react';
 80 | import { Image, Text, View } from  'react-native';
 81 | import AnimatedScreen from  'react-native-animated-screen';
 82 | 
 83 | const  Component = () => {
 84 |    return (
 85 |      <AnimatedScreen.Wrapper>
 86 |        <AnimatedScreen.Header>
 87 |          <View>
 88 |            <Text>Title</Text>
 89 |            <AnimatedScreen.CollapsibleElement>
 90 |              <Text>Subtitle</Text>
 91 |            </AnimatedScreen.CollapsibleElement>
 92 |          </View>
 93 |        </AnimatedScreen.Header>
 94 |        <AnimatedScreen.ScrollView>
 95 |          <View  style={{ height: '300%' }}>
 96 |            <View>
 97 |              <Text>Body</Text>
 98 |            </View>
 99 |          </View>
100 |        </AnimatedScreen.ScrollView>
101 |      </AnimatedScreen.Wrapper>
102 |    );
103 | };
104 | ```
105 | 
106 |   
107 | 
108 | ### AnimatedScreen.Wrapper
109 | 
110 |   Is  the main component and the wrapper of the entire animated screen, **required**
111 | 
112 |   
113 | 
114 | #### Basic parameters
115 | 
116 |   
117 | ```javascript
118 | 
119 | <AnimatedScreen.Wrapper
120 |   // Set header max and min height (before and after scroll)
121 |   
122 |   // headerMaxHeight?: number; (default: 200)
123 |   hederMaxHeight={200}
124 |   // headerMinHeight?: number; (default: 70)
125 |   headerMinHeight={70}
126 | 
127 |   // Select if the screen should take care of avoiding safe area
128 |   // avoidSafeArea?: boolean; (default: false)
129 |   avoidSafeArea={true}
130 | 
131 |   // Select if want your body and header to scroll with a parallax effect or not
132 |   // disableParallaxEffect?: boolean; (default: false)
133 |   disableParallaxEffect={false}
134 | 
135 |   // Function triggered on scroll event taking the `event` object as a parameter
136 |   // onScroll?: (e: NativeSyntheticEvent<NativeScrollEvent>) =>  void;
137 |   onScroll={() => null}
138 | 
139 | >
140 |   // at least an AnimatedScreen.Header and an AnimatedScreen scrollable element required as children
141 |   { children }
142 | </AnimatedScreen.Wrapper>
143 | 
144 | ```
145 | 
146 |   ### AnimatedScreen.Header
147 | 
148 |   Is one of the children of the **Wrapper**, is required, and it contains all the header elements. Its dimensions are inherited from the wrapper and define the scroll animation behaviours. 
149 |   It expect at least one child component.
150 | 
151 |   
152 | 
153 | #### Basic parameters
154 | 
155 |   
156 | ```javascript
157 | 
158 | <AnimatedScreen.Header
159 |   // if the header content has to wrapped in boxed content
160 |   // boxed?: boolean; (default: false)
161 |   boxed={true}
162 |   
163 |   // Expects a callback returning a style object that can interpolate the Animated.Value
164 |   // animatedStyle?: (scrollY: Animated.Value) =>  ViewStyle;
165 |   animatedStyle={ scrollY => ({
166 |    opacity: scrollY.interpolate({
167 |      inputRange: [0, 200], // from 0 scrolled to headerMaxHeight scrolled
168 |      outputRange: [1, 0]
169 |     })
170 |    })
171 |   }
172 | 
173 |   // Expects a callback returning the component to be used as background
174 |   // renderBackground?: (scrollY: Animated.Value) =>  JSX.Element;
175 |   renderBackground={ scrollY => (
176 |     <Animated.View style={[style.background, getBackgroundOpacity(scrollY)]}/>
177 |   )
178 | 
179 |   // Set if your header should generate a shadow on scroll
180 |   // withShadow?: boolean; (default: false)
181 |   withShadow={ true }
182 | 
183 |   // Set if your header should have a translucent blured effect on scroll
184 |   // (ONLY Android - not recommended in iOS)
185 |   // blur?: boolean; (default: false)
186 |   blur={ false }
187 | 
188 |   // Expects a string or undefined containing the background color to be passed to the style
189 |   // backgroundColor?: string; (default: undefined)
190 |   backgroundColor="#303030"
191 | 
192 |   // Select if the header should take care of SafeArea
193 |   // withSafeArea?: boolean; (default: true)
194 |   withSafeArea={ true }
195 | 
196 |   // Expect a style object that can extend the header style
197 |   // (preferred to animatedStyle if static)
198 |   // style?: ViewStyle; (default: undefined)
199 |   style={{ paddingBottom: 10 }}
200 | >
201 |   // at least one child is required, can be any component (AnimatedScreen.CollapsibleElement and AnimatedScreen.Element are provided to create animated effects)
202 |   { children }
203 | </AnimatedScreen.Header>
204 | 
205 | ```
206 | 
207 | 
208 |   ### AnimatedScreen.ScrollView
209 | 
210 | Extends the react-native **ScrollView** and can be used as scrollable element for the screen.
211 | For the entire list of possible props refer to react-native ScrollView documentation.
212 | Never to be used in combination with AnimatedScreen.FlatList or AnimatedScreen.SectionList.
213 |   
214 | 
215 | #### Basic parameters
216 | 
217 |   
218 | ```javascript
219 | 
220 | <AnimatedScreen.ScrollView
221 |   // Expects a callback returning a style object that can interpolate the Animated.Value
222 |   // animatedStyle?: (scrollY: Animated.Value) =>  ViewStyle;
223 |   animatedStyle={ scrollY => ({
224 |    opacity: scrollY.interpolate({
225 |      inputRange: [0, 200], // from 0 scrolled to headerMaxHeight scrolled
226 |      outputRange: [1, 0]
227 |     })
228 |    })
229 |   }
230 | 
231 |   // Expect a style object that can extend the header style
232 |   // (preferred to animatedStyle if static)
233 |   // style?: ViewStyle; (default: undefined)
234 |   style={{ paddingBottom: 10 }}
235 | 
236 |   // Expect a React.RefObject to be attached to the ScrollView
237 |   // scrollViewRef?: React.RefObject<ScrollView>;
238 |   scrollViewRef={ scrollViewRef }
239 | >
240 |   { children }
241 | </AnimatedScreen.ScrollView>
242 | 
243 | ```
244 | 
245 | 
246 |   ### AnimatedScreen.FlatList
247 | 
248 | Extends the react-native **FlatList** and can be used as scrollable element for the screen.
249 | For the entire list of possible props refer to react-native FlatList documentation.
250 | Never to be used in combination with AnimatedScreen.ScrollView or AnimatedScreen.SectionList.
251 |   
252 | 
253 | #### Basic parameters
254 | 
255 |   
256 | ```javascript
257 | 
258 | <AnimatedScreen.FlatList
259 |   // Expects a callback returning a style object that can interpolate the Animated.Value
260 |   // animatedStyle?: (scrollY: Animated.Value) =>  ViewStyle;
261 |   animatedStyle={ scrollY => ({
262 |    opacity: scrollY.interpolate({
263 |      inputRange: [0, 200], // from 0 scrolled to headerMaxHeight scrolled
264 |      outputRange: [1, 0]
265 |     })
266 |    })
267 |   }
268 | 
269 |   // Expect a style object that can extend the header style
270 |   // (preferred to animatedStyle if static)
271 |   // style?: ViewStyle; (default: undefined)
272 |   style={{ paddingBottom: 10 }}
273 | 
274 |   // Expect a React.RefObject to be attached to the ScrollView
275 |   // flatlistRef?: React.RefObject<FlatList<T>>;
276 |   flatlistRef={ flatlistRef }
277 | 
278 |   { ...restOfFlatListProps }
279 | />
280 | 
281 | ```
282 | 
283 |   
284 |   ### AnimatedScreen.SectionList
285 | 
286 | Extends the react-native **SectionList** and can be used as scrollable element for the screen.
287 | For the entire list of possible props refer to react-native SectionList documentation.
288 | Never to be used in combination with AnimatedScreen.ScrollView or AnimatedScreen.FlatList.
289 |   
290 | 
291 | #### Basic parameters
292 | 
293 |   
294 | ```javascript
295 | 
296 | <AnimatedScreen.SectionList
297 |   // Expects a callback returning a style object that can interpolate the Animated.Value
298 |   // animatedStyle?: (scrollY: Animated.Value) =>  ViewStyle;
299 |   animatedStyle={ scrollY => ({
300 |    opacity: scrollY.interpolate({
301 |      inputRange: [0, 200], // from 0 scrolled to headerMaxHeight scrolled
302 |      outputRange: [1, 0]
303 |     })
304 |    })
305 |   }
306 | 
307 |   // Expect a style object that can extend the header style
308 |   // (preferred to animatedStyle if static)
309 |   // style?: ViewStyle; (default: undefined)
310 |   style={{ paddingBottom: 10 }}
311 | 
312 |   // Expect a React.RefObject to be attached to the ScrollView
313 |   // sectionlistRef?: React.RefObject<SectionList<T>>;
314 |   sectionlistRef={ sectionlistRef }
315 | 
316 |   { ...restOfSectionListProps }
317 | />
318 | 
319 | ```
320 | 
321 |     
322 |   ### AnimatedScreen.CollapsibleElement
323 | 
324 | Can only be used as a **child of AnimatedScreen.Header**, it can wrap any type of component that you want to **disappear** while scrolling
325 |   
326 | 
327 | #### Basic parameters
328 | 
329 |   
330 | ```javascript
331 | 
332 | <AnimatedScreen.CollapsibleElement
333 |   // Expects a callback returning a style object that can interpolate the Animated.Value
334 |   // animatedStyle?: (scrollY: Animated.Value) =>  ViewStyle;
335 |   animatedStyle={ scrollY => ({
336 |    opacity: scrollY.interpolate({
337 |      inputRange: [0, 200], // from 0 scrolled to headerMaxHeight scrolled
338 |      outputRange: [1, 0]
339 |     })
340 |    })
341 |   }
342 | 
343 |   // Expect a style object that can extend the header style
344 |   // (preferred to animatedStyle if static)
345 |   // style?: ViewStyle; (default: undefined)
346 |   style={{ paddingBottom: 10 }}
347 | 
348 |   // Set if you want the content of the element to overflow the boxed header (and take full-width)
349 |   // only to be used if AnimatedScreen.Header is set to `boxed`
350 |   // unboxed?: boolean; (default: false)
351 |   unboxed={ true }
352 | 
353 |   // Expects an object containing all the style elements to interpolate on scroll, can be considered as a shortcut for animatedStyle
354 |   // interpolate?: { [key: string]: string[] | number[] };
355 |   interpolate={ height: [200, 0] } // will interpolated from an height of 200 to an height of 0 while scrolling
356 | >
357 |   { children }
358 | </AnimatedScreen.CollapsibleElement>
359 | 
360 | ```
361 | 
362 | 
363 |   ### AnimatedScreen.Element
364 | 
365 | As the CollapsibleElement can only be used as a **child of AnimatedScreen.Header**  but it should wrap element that you **don't want to disappear**  while scrolling
366 |   
367 | 
368 | #### Basic parameters
369 | 
370 |   
371 | ```javascript
372 | 
373 | <AnimatedScreen.Element
374 |   // Expects a callback returning a style object that can interpolate the Animated.Value
375 |   // animatedStyle?: (scrollY: Animated.Value) =>  ViewStyle;
376 |   animatedStyle={ scrollY => ({
377 |    opacity: scrollY.interpolate({
378 |      inputRange: [0, 200], // from 0 scrolled to headerMaxHeight scrolled
379 |      outputRange: [1, 0]
380 |     })
381 |    })
382 |   }
383 | 
384 |   // Expect a style object that can extend the header style
385 |   // (preferred to animatedStyle if static)
386 |   // style?: ViewStyle; (default: undefined)
387 |   style={{ paddingBottom: 10 }}
388 | 
389 |   // Set if you want the content of the element to overflow the boxed header (and take full-width)
390 |   // only to be used if AnimatedScreen.Header is set to `boxed`
391 |   // unboxed?: boolean; (default: false)
392 |   unboxed={ true }
393 | 
394 |   // Expects an object containing all the style elements to interpolate on scroll, can be considered as a shortcut for animatedStyle
395 |   // interpolate?: { [key: string]: string[] | number[] };
396 |   interpolate={ height: [200, 0] } // will interpolated from an height of 200 to an height of 0 while scrolling
397 | >
398 |   { children }
399 | </AnimatedScreen.Element>
400 | 
401 | ```
402 | 
403 | 
404 | ## Author
405 | 
406 | * [Giovanni Davì](https://github.com/giovannidavi)
407 | 
408 | 
409 | ## Contributing
410 | 
411 |   
412 | 
413 | Pull requests are most welcome!
414 | 
415 | Don't forget to add a **title** and a **description** that explain the issue you're trying to solve and your suggested solution. Screenshots and gifs are very helpful.
416 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-animated-screen",
 3 |   "version": "1.1.1",
 4 |   "description": "React Native Animated Screens made easy",
 5 |   "main": "lib/index.js",
 6 |   "types": "lib/index.d.ts",
 7 |   "scripts": {
 8 |     "build": "rm -rf ./lib && tsc --project ./tsconfig.json"
 9 |   },
10 |   "dependencies": {
11 |     "@react-native-community/blur": "^3.6.0",
12 |     "@types/react": "^16.9.56",
13 |     "@types/react-native": "^0.63.33",
14 |     "react-native-responsive-screen": "^1.4.1",
15 |     "react-native-safe-area-context": "^3.1.1"
16 |   },
17 |   "devDependencies": {
18 |     "@react-native-community/eslint-config": "^1.1.0",
19 |     "tslint": "^6.1.3",
20 |     "tslint-config-prettier": "^1.18.0",
21 |     "tslint-react": "^5.0.0",
22 |     "typescript": "^3.8.3"
23 |   },
24 |   "peerDependencies": {
25 |     "react": "*",
26 |     "react-dom": "*",
27 |     "react-native": "*"
28 |   },
29 |   "files": [
30 |     "lib/**/*"
31 |   ],
32 |   "keywords": [
33 |     "animated screen",
34 |     "parallax header",
35 |     "animated header"
36 |   ],
37 |   "homepage": "https://github.com/giovannidavi/react-native-animated-screen",
38 |   "author": "Giovanni Davì",
39 |   "license": "MIT"
40 | }
41 | 


--------------------------------------------------------------------------------
/src/AnimatedScreenCollapsibleElement/AnimatedScreenCollapsibleElement.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext, useMemo } from 'react';
 2 | import { Animated, ViewStyle } from 'react-native';
 3 | import { widthPercentageToDP } from 'react-native-responsive-screen';
 4 | import AnimatedScreenContext from '../AnimatedScreenContext';
 5 | 
 6 | type Props = {
 7 |   animatedStyle?: (scrollY: Animated.Value) => ViewStyle;
 8 |   children: JSX.Element | JSX.Element[];
 9 |   unboxed?: boolean;
10 |   style?: ViewStyle;
11 |   interpolate?: { [key: string]: string[] | number[] };
12 | };
13 | 
14 | type Interpolations = {
15 |   [key: string]: Animated.AnimatedInterpolation;
16 | };
17 | 
18 | const AnimatedScreenCollapsibleElement: React.FC<Props> = ({
19 |   animatedStyle,
20 |   children,
21 |   unboxed,
22 |   interpolate,
23 |   style,
24 | }) => {
25 |   const { scrollY, headerMaxHeight } = useContext(AnimatedScreenContext);
26 |   const interpolations = useMemo(() => {
27 |     const interpolationsStyle: Interpolations = {};
28 |     if (interpolate) {
29 |       Object.keys(interpolate).forEach(property => {
30 |         interpolationsStyle[property] = scrollY.interpolate({
31 |           inputRange: [0, headerMaxHeight],
32 |           outputRange: interpolate[property],
33 |           extrapolate: 'clamp',
34 |         });
35 |       });
36 |     }
37 |     return interpolationsStyle;
38 |   }, [headerMaxHeight, interpolate, scrollY]);
39 |   return (
40 |     <>
41 |       {React.Children.map(children, (child: JSX.Element) => (
42 |         <Animated.View
43 |           style={[
44 |             {
45 |               width: unboxed ? widthPercentageToDP('116%') : '100%',
46 |               opacity: scrollY.interpolate({
47 |                 inputRange: [0, headerMaxHeight],
48 |                 outputRange: [1, 0],
49 |                 extrapolate: 'clamp',
50 |               }),
51 |               maxHeight: scrollY.interpolate({
52 |                 inputRange: [0, headerMaxHeight],
53 |                 outputRange: [50, 0],
54 |                 extrapolate: 'clamp',
55 |               }),
56 |             },
57 |             style && style,
58 |             interpolate && interpolations,
59 |             animatedStyle && animatedStyle(scrollY),
60 |           ]}
61 |         >
62 |           {React.cloneElement(child)}
63 |         </Animated.View>
64 |       ))}
65 |     </>
66 |   );
67 | };
68 | 
69 | export default React.memo(AnimatedScreenCollapsibleElement);
70 | 


--------------------------------------------------------------------------------
/src/AnimatedScreenCollapsibleElement/index.ts:
--------------------------------------------------------------------------------
1 | import AnimatedScreenCollapsibleElement from './AnimatedScreenCollapsibleElement';
2 | 
3 | export default AnimatedScreenCollapsibleElement;
4 | 


--------------------------------------------------------------------------------
/src/AnimatedScreenContext.tsx:
--------------------------------------------------------------------------------
 1 | import { createContext } from 'react';
 2 | import {
 3 |   Animated,
 4 |   NativeSyntheticEvent,
 5 |   NativeScrollEvent,
 6 | } from 'react-native';
 7 | import { heightPercentageToDP as hp } from 'react-native-responsive-screen';
 8 | 
 9 | type Props = {
10 |   headerMaxHeight?: number;
11 |   headerMinHeight?: number;
12 | };
13 | 
14 | type Context = {
15 |   headerMaxHeight: number;
16 |   headerMinHeight: number;
17 |   onScroll?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
18 |   scrollY: Animated.Value;
19 |   disableParallaxEffect?: boolean;
20 | };
21 | 
22 | const AnimatedScreenContext = createContext<Context>({
23 |   headerMaxHeight: hp(30),
24 |   headerMinHeight: 100,
25 |   scrollY: new Animated.Value(0),
26 | });
27 | 
28 | export default AnimatedScreenContext;
29 | 


--------------------------------------------------------------------------------
/src/AnimatedScreenElement/AnimatedScreenElement.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext, useMemo } from 'react';
 2 | import { widthPercentageToDP } from 'react-native-responsive-screen';
 3 | import { Animated, ViewStyle, StyleProp } from 'react-native';
 4 | import AnimatedScreenContext from '../AnimatedScreenContext';
 5 | 
 6 | type Props = {
 7 |   animatedStyle?: (
 8 |     scrollY: Animated.Value,
 9 |   ) => Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
10 |   children: JSX.Element | JSX.Element[];
11 |   unboxed?: boolean;
12 |   interpolate?: { [key: string]: string[] | number[] };
13 |   style?: ViewStyle;
14 | };
15 | 
16 | type Interpolations = {
17 |   [key: string]: Animated.AnimatedInterpolation;
18 | };
19 | 
20 | const AnimatedScreenElement: React.FC<Props> = ({
21 |   animatedStyle,
22 |   children,
23 |   unboxed,
24 |   interpolate,
25 |   style,
26 | }) => {
27 |   const { scrollY, headerMaxHeight } = useContext(AnimatedScreenContext);
28 |   const interpolations = useMemo(() => {
29 |     const interpolationsStyle: Interpolations = {};
30 |     if (interpolate) {
31 |       Object.keys(interpolate).forEach(property => {
32 |         interpolationsStyle[property] = scrollY.interpolate({
33 |           inputRange: [0, headerMaxHeight],
34 |           outputRange: interpolate[property],
35 |           extrapolate: 'clamp',
36 |         });
37 |       });
38 |     }
39 |     return interpolationsStyle;
40 |   }, [headerMaxHeight, interpolate, scrollY]);
41 |   return (
42 |     <>
43 |       {React.Children.map(children, (child: JSX.Element) => (
44 |         <Animated.View
45 |           style={[
46 |             { width: unboxed ? widthPercentageToDP('116%') : '100%' },
47 |             {
48 |               marginHorizontal: unboxed
49 |                 ? -widthPercentageToDP('8%')
50 |                 : undefined,
51 |             },
52 |             style && style,
53 |             interpolate && interpolations,
54 |             animatedStyle && animatedStyle(scrollY),
55 |           ]}
56 |         >
57 |           {React.cloneElement(child)}
58 |         </Animated.View>
59 |       ))}
60 |     </>
61 |   );
62 | };
63 | 
64 | export default React.memo(AnimatedScreenElement);
65 | 


--------------------------------------------------------------------------------
/src/AnimatedScreenElement/index.ts:
--------------------------------------------------------------------------------
1 | import AnimatedScreenElement from './AnimatedScreenElement';
2 | 
3 | export default AnimatedScreenElement;
4 | 


--------------------------------------------------------------------------------
/src/AnimatedScreenFlatList/AnimatedScreenFlatList.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useContext, useState, useMemo, useCallback } from 'react';
  2 | import {
  3 |   Animated,
  4 |   NativeSyntheticEvent,
  5 |   NativeScrollEvent,
  6 |   ViewStyle,
  7 |   FlatListProps,
  8 |   View,
  9 |   FlatList,
 10 | } from 'react-native';
 11 | import AnimatedScreenContext from '../AnimatedScreenContext';
 12 | import styles from './styles';
 13 | 
 14 | type Props<T = any> = Animated.AnimatedProps<FlatListProps<T>> & {
 15 |   animatedStyle?: (scrollY: Animated.Value) => ViewStyle;
 16 |   style?: ViewStyle;
 17 |   ListFooterComponent?: () => JSX.Element | null;
 18 |   contentContainerStyle?: ViewStyle;
 19 |   flatlistRef?: React.RefObject<FlatList<T>>;
 20 | };
 21 | 
 22 | const AnimatedScreenFlatList: React.FC<Props> = ({
 23 |   animatedStyle,
 24 |   style,
 25 |   ListFooterComponent = () => null,
 26 |   contentContainerStyle = {},
 27 |   onScroll: onScrollFromProps,
 28 |   flatlistRef,
 29 |   ...flatListProps
 30 | }) => {
 31 |   const [contentHeight, setContentHeight] = useState(0);
 32 |   const [containerHeight, setContainerHeight] = useState(0);
 33 |   const {
 34 |     scrollY,
 35 |     onScroll,
 36 |     headerMaxHeight,
 37 |     headerMinHeight,
 38 |     disableParallaxEffect,
 39 |   } = useContext(AnimatedScreenContext);
 40 | 
 41 |   const shouldScroll = useMemo(
 42 |     () => contentHeight > containerHeight - headerMaxHeight,
 43 |     [contentHeight, containerHeight, headerMaxHeight],
 44 |   );
 45 |   const handleSetContent = useCallback(
 46 |     (_, height) => setContentHeight(height),
 47 |     [],
 48 |   );
 49 |   const handleSetContainer = useCallback(
 50 |     e => setContainerHeight(e.nativeEvent.layout.height),
 51 |     [],
 52 |   );
 53 |   const contentStyle = useMemo(
 54 |     () => ({
 55 |       minHeight: shouldScroll ? containerHeight + headerMaxHeight : undefined,
 56 |       ...contentContainerStyle,
 57 |     }),
 58 |     [shouldScroll, containerHeight, headerMaxHeight, contentContainerStyle],
 59 |   );
 60 |   const offSet = disableParallaxEffect
 61 |     ? headerMaxHeight + headerMinHeight
 62 |     : headerMinHeight;
 63 | 
 64 |   const listFooter = useMemo(() => {
 65 |     return (
 66 |       <>
 67 |         <ListFooterComponent />
 68 |         <View style={{ height: offSet }} />
 69 |       </>
 70 |     );
 71 |   }, [ListFooterComponent, offSet]);
 72 | 
 73 |   const flatListStyle = useMemo(() => {
 74 |     return [
 75 |       animatedStyle && animatedStyle(scrollY),
 76 |       {
 77 |         paddingTop: scrollY.interpolate({
 78 |           inputRange: [0, headerMaxHeight],
 79 |           outputRange: [headerMaxHeight, offSet],
 80 |           extrapolate: 'clamp',
 81 |         }),
 82 |       },
 83 |       style,
 84 |     ];
 85 |   }, [animatedStyle, headerMaxHeight, headerMinHeight, scrollY, style]);
 86 | 
 87 |   const handleScroll = (e: NativeSyntheticEvent<NativeScrollEvent>): void => {
 88 |     if (onScroll) {
 89 |       onScroll(e);
 90 |     }
 91 | 
 92 |     if (onScrollFromProps) {
 93 |       onScrollFromProps(e);
 94 |     }
 95 | 
 96 |     scrollY.setValue(e.nativeEvent.contentOffset.y);
 97 |   };
 98 | 
 99 |   return (
100 |     <Animated.FlatList
101 |       ref={flatlistRef}
102 |       onScroll={handleScroll}
103 |       scrollEventThrottle={16}
104 |       bounces={false}
105 |       onLayout={handleSetContainer}
106 |       onContentSizeChange={handleSetContent}
107 |       contentContainerStyle={contentStyle}
108 |       scrollEnabled={shouldScroll}
109 |       ListFooterComponent={listFooter}
110 |       style={flatListStyle}
111 |       {...flatListProps}
112 |     />
113 |   );
114 | };
115 | 
116 | export default React.memo(AnimatedScreenFlatList);
117 | 


--------------------------------------------------------------------------------
/src/AnimatedScreenFlatList/index.ts:
--------------------------------------------------------------------------------
1 | import AnimatedScreenFlatList from './AnimatedScreenFlatList';
2 | 
3 | export default AnimatedScreenFlatList;
4 | 


--------------------------------------------------------------------------------
/src/AnimatedScreenFlatList/styles.ts:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 | 
3 | export default StyleSheet.create({
4 |   wrapper: {
5 |     height: 200,
6 |   },
7 | });
8 | 


--------------------------------------------------------------------------------
/src/AnimatedScreenHeader/AnimatedScreenHeader.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from 'react';
 2 | import { View, Animated, ViewStyle, SafeAreaView } from 'react-native';
 3 | import { BlurView } from '@react-native-community/blur';
 4 | import AnimatedScreenContext from '../AnimatedScreenContext';
 5 | import useStyle from './style';
 6 | 
 7 | type Props = {
 8 |   boxed?: boolean;
 9 |   children?: JSX.Element | JSX.Element[];
10 |   animatedStyle?: (scrollY: Animated.Value) => ViewStyle;
11 |   renderBackground?: (scrollY: Animated.Value) => JSX.Element;
12 |   withShadow?: boolean;
13 |   blur?: boolean;
14 |   backgroundColor?: string;
15 |   withSafeArea?: boolean;
16 |   style?: ViewStyle;
17 | };
18 | 
19 | const AnimatedScreenHeader: React.FC<Props> = ({
20 |   children,
21 |   boxed,
22 |   animatedStyle,
23 |   blur,
24 |   withShadow,
25 |   backgroundColor = 'white',
26 |   renderBackground,
27 |   withSafeArea = true,
28 |   style,
29 | }) => {
30 |   const { scrollY, headerMaxHeight, headerMinHeight } = useContext(
31 |     AnimatedScreenContext,
32 |   );
33 |   const styles = useStyle({
34 |     boxed,
35 |     blur,
36 |     withShadow,
37 |     backgroundColor,
38 |   });
39 | 
40 |   const shadowOpacity = scrollY.interpolate({
41 |     inputRange: [0, headerMaxHeight],
42 |     outputRange: [0, 0.3],
43 |     extrapolate: 'clamp',
44 |   });
45 | 
46 |   const elevation = scrollY.interpolate({
47 |     inputRange: [0, headerMaxHeight],
48 |     outputRange: [0, 14],
49 |     extrapolate: 'clamp',
50 |   });
51 | 
52 |   return (
53 |     <Animated.View
54 |       style={[
55 |         styles.animatedWrapper,
56 |         {
57 |           height: scrollY.interpolate({
58 |             inputRange: [0, headerMaxHeight],
59 |             outputRange: [headerMaxHeight, headerMinHeight],
60 |             extrapolate: 'clamp',
61 |           }),
62 |         },
63 |         withShadow && { elevation, shadowOpacity },
64 |         style && style,
65 |         animatedStyle && animatedStyle(scrollY),
66 |       ]}
67 |     >
68 |       {blur ? (
69 |         <BlurView
70 |           blurAmount={36}
71 |           blurType="light"
72 |           style={styles.headerBackground}
73 |         />
74 |       ) : (
75 |           <View style={styles.headerBackground} />
76 |         )}
77 |       {renderBackground && renderBackground(scrollY)}
78 |       {withSafeArea ? <SafeAreaView>{children}</SafeAreaView> : <>{children}</>}
79 |     </Animated.View>
80 |   );
81 | };
82 | 
83 | export default React.memo(AnimatedScreenHeader);
84 | 


--------------------------------------------------------------------------------
/src/AnimatedScreenHeader/index.ts:
--------------------------------------------------------------------------------
1 | import AnimatedScreenHeader from './AnimatedScreenHeader';
2 | 
3 | export default AnimatedScreenHeader;
4 | 


--------------------------------------------------------------------------------
/src/AnimatedScreenHeader/style.ts:
--------------------------------------------------------------------------------
 1 | import { StyleSheet, ViewStyle } from 'react-native';
 2 | import { widthPercentageToDP } from 'react-native-responsive-screen';
 3 | 
 4 | type AnimatedScreen = {
 5 |   animatedWrapper: ViewStyle;
 6 |   headerBackground: ViewStyle;
 7 | };
 8 | 
 9 | type Props = {
10 |   backgroundColor: string;
11 |   boxed?: boolean;
12 |   blur?: boolean;
13 |   withShadow?: boolean;
14 | };
15 | 
16 | export default ({
17 |   boxed,
18 |   blur,
19 |   withShadow,
20 |   backgroundColor,
21 | }: Props): AnimatedScreen =>
22 |   StyleSheet.create({
23 |     animatedWrapper: {
24 |       paddingHorizontal: boxed ? widthPercentageToDP('8%') : undefined,
25 |       position: 'absolute',
26 |       width: '100%',
27 |       zIndex: 5,
28 |       justifyContent: 'center',
29 |       backgroundColor: withShadow ? backgroundColor : undefined,
30 |       shadowColor: '#000',
31 |       shadowRadius: 6.68,
32 |       shadowOffset: {
33 |         width: 0,
34 |         height: 2,
35 |       },
36 |     },
37 |     headerBackground: {
38 |       position: 'absolute',
39 |       height: '100%',
40 |       width: boxed ? widthPercentageToDP('116%') : '100%',
41 |       backgroundColor: blur ? 'rgba(255, 255, 255, 0.5)' : backgroundColor,
42 |     },
43 |   });
44 | 


--------------------------------------------------------------------------------
/src/AnimatedScreenScrollView/AnimatedScreenScrollView.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from 'react';
 2 | import {
 3 |   Animated,
 4 |   NativeSyntheticEvent,
 5 |   NativeScrollEvent,
 6 |   ViewStyle,
 7 |   ScrollViewProps,
 8 |   View,
 9 |   ScrollView,
10 | } from 'react-native';
11 | import AnimatedScreenContext from '../AnimatedScreenContext';
12 | 
13 | type Props = Animated.AnimatedProps<ScrollViewProps> & {
14 |   animatedStyle?: (scrollY: Animated.Value) => ViewStyle;
15 |   children: JSX.Element | JSX.Element[] | null;
16 |   style?: ViewStyle;
17 |   scrollViewRef?: React.RefObject<ScrollView>;
18 | };
19 | 
20 | const AnimatedScreenScrollView: React.FC<Props> = ({
21 |   animatedStyle,
22 |   children,
23 |   style,
24 |   scrollViewRef,
25 |   ...scrollViewProps
26 | }) => {
27 |   const {
28 |     scrollY,
29 |     onScroll,
30 |     headerMaxHeight,
31 |     headerMinHeight,
32 |     disableParallaxEffect,
33 |   } = useContext(AnimatedScreenContext);
34 |   const offSet = disableParallaxEffect
35 |     ? headerMaxHeight + headerMinHeight
36 |     : headerMinHeight;
37 | 
38 |   const handleScroll = (e: NativeSyntheticEvent<NativeScrollEvent>): void => {
39 |     if (onScroll) {
40 |       onScroll(e);
41 |     }
42 |     scrollY.setValue(e.nativeEvent.contentOffset.y);
43 |   };
44 | 
45 |   return (
46 |     <Animated.ScrollView
47 |       ref={scrollViewRef}
48 |       onScroll={handleScroll}
49 |       showsVerticalScrollIndicator={false}
50 |       scrollEventThrottle={16}
51 |       bounces={false}
52 |       style={[
53 |         animatedStyle && animatedStyle(scrollY),
54 |         {
55 |           paddingTop: scrollY.interpolate({
56 |             inputRange: [0, headerMaxHeight],
57 |             outputRange: [headerMaxHeight, offSet],
58 |             extrapolate: 'clamp',
59 |           }),
60 |         },
61 |         style,
62 |       ]}
63 |       {...scrollViewProps}
64 |     >
65 |       {children}
66 |       <View style={{ height: offSet }} />
67 |     </Animated.ScrollView>
68 |   );
69 | };
70 | 
71 | export default React.memo(AnimatedScreenScrollView);
72 | 


--------------------------------------------------------------------------------
/src/AnimatedScreenScrollView/index.ts:
--------------------------------------------------------------------------------
1 | import AnimatedScreenScrollView from './AnimatedScreenScrollView';
2 | 
3 | export default AnimatedScreenScrollView;
4 | 


--------------------------------------------------------------------------------
/src/AnimatedScreenSectionList/AnimatedScreenSectionList.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext, useState, useMemo, useCallback } from 'react';
 2 | import {
 3 |   Animated,
 4 |   NativeSyntheticEvent,
 5 |   NativeScrollEvent,
 6 |   SectionListProps,
 7 |   ViewStyle,
 8 |   View,
 9 |   SectionList,
10 | } from 'react-native';
11 | import AnimatedScreenContext from '../AnimatedScreenContext';
12 | 
13 | type Props<T = any> = Animated.AnimatedProps<SectionListProps<T>> & {
14 |   animatedStyle?: (scrollY: Animated.Value) => ViewStyle;
15 |   style?: ViewStyle;
16 |   ListFooterComponent?: () => JSX.Element | null;
17 |   sectionlistRef?: React.RefObject<SectionList<T>>;
18 | };
19 | 
20 | const AnimatedScreenSectionList: React.FC<Props> = ({
21 |   animatedStyle,
22 |   style,
23 |   ListFooterComponent = () => null,
24 |   sectionlistRef,
25 |   ...sectionListProps
26 | }) => {
27 |   const [contentHeight, setContentHeight] = useState(0);
28 |   const [containerHeight, setContainerHeight] = useState(0);
29 |   const { scrollY, onScroll, headerMaxHeight, headerMinHeight } = useContext(
30 |     AnimatedScreenContext,
31 |   );
32 |   const shouldScroll = useMemo(
33 |     () => contentHeight > containerHeight - headerMaxHeight,
34 |     [contentHeight, containerHeight, headerMaxHeight],
35 |   );
36 |   const handleSetContent = useCallback(
37 |     (_, height) => setContentHeight(height),
38 |     [],
39 |   );
40 |   const handleSetContainer = useCallback(
41 |     e => setContainerHeight(e.nativeEvent.layout.height),
42 |     [],
43 |   );
44 |   const contentStyle = useMemo(
45 |     () => ({
46 |       minHeight: shouldScroll ? containerHeight + headerMaxHeight : undefined,
47 |     }),
48 |     [shouldScroll, containerHeight, headerMaxHeight],
49 |   );
50 | 
51 |   const handleScroll = (e: NativeSyntheticEvent<NativeScrollEvent>): void => {
52 |     if (onScroll) {
53 |       onScroll(e);
54 |     }
55 |     scrollY.setValue(e.nativeEvent.contentOffset.y);
56 |   };
57 | 
58 |   return (
59 |     <>
60 |       <Animated.SectionList
61 |         ref={sectionlistRef}
62 |         onScroll={handleScroll}
63 |         scrollEventThrottle={16}
64 |         stickySectionHeadersEnabled
65 |         bounces={false}
66 |         onLayout={handleSetContainer}
67 |         onContentSizeChange={handleSetContent}
68 |         contentContainerStyle={contentStyle}
69 |         scrollEnabled={shouldScroll}
70 |         ListFooterComponent={
71 |           <>
72 |             <ListFooterComponent />
73 |             <View style={{ height: headerMinHeight }} />
74 |           </>
75 |         }
76 |         style={[
77 |           animatedStyle && animatedStyle(scrollY),
78 |           {
79 |             paddingTop: scrollY.interpolate({
80 |               inputRange: [0, headerMaxHeight],
81 |               outputRange: [headerMaxHeight, headerMinHeight],
82 |               extrapolate: 'clamp',
83 |             }),
84 |           },
85 |           style,
86 |         ]}
87 |         // eslint-disable-next-line react/jsx-props-no-spreading
88 |         {...sectionListProps}
89 |       />
90 |     </>
91 |   );
92 | };
93 | 
94 | export default React.memo(AnimatedScreenSectionList);
95 | 


--------------------------------------------------------------------------------
/src/AnimatedScreenSectionList/index.ts:
--------------------------------------------------------------------------------
1 | import AnimatedScreenSectionList from './AnimatedScreenSectionList';
2 | 
3 | export default AnimatedScreenSectionList;
4 | 


--------------------------------------------------------------------------------
/src/AnimatedScreenWrapper/AnimatedScreenWrapper.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, ReactElement } from 'react';
 2 | import { initialWindowMetrics } from 'react-native-safe-area-context';
 3 | import {
 4 |   Animated,
 5 |   NativeSyntheticEvent,
 6 |   NativeScrollEvent,
 7 | } from 'react-native';
 8 | import AnimatedScreenContext from '../AnimatedScreenContext';
 9 | import AnimatedScreenHeader from '../AnimatedScreenHeader';
10 | 
11 | type Props = {
12 |   headerMaxHeight?: number;
13 |   headerMinHeight?: number;
14 |   avoidSafeArea?: boolean;
15 |   disableParallaxEffect?: boolean;
16 |   onScroll?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
17 |   children: [
18 |     ReactElement<React.ComponentProps<typeof AnimatedScreenHeader>>,
19 |     JSX.Element,
20 |   ];
21 | };
22 | 
23 | const AnimatedScreenWrapper: React.FC<Props> = ({
24 |   children,
25 |   onScroll,
26 |   headerMaxHeight = 200,
27 |   headerMinHeight = 70,
28 |   avoidSafeArea = false,
29 |   disableParallaxEffect,
30 | }) => {
31 |   const [scrollY] = useState<Animated.Value>(new Animated.Value(0));
32 |   const { top: safeTop } = initialWindowMetrics?.insets || { top: 0 };
33 | 
34 |   return (
35 |     <AnimatedScreenContext.Provider
36 |       value={{
37 |         headerMaxHeight: headerMaxHeight + (avoidSafeArea ? 0 : safeTop),
38 |         headerMinHeight,
39 |         onScroll,
40 |         scrollY,
41 |         disableParallaxEffect,
42 |       }}
43 |     >
44 |       {children}
45 |     </AnimatedScreenContext.Provider>
46 |   );
47 | };
48 | 
49 | export default React.memo(AnimatedScreenWrapper);
50 | 


--------------------------------------------------------------------------------
/src/AnimatedScreenWrapper/index.ts:
--------------------------------------------------------------------------------
1 | import AnimatedScreenWrapper from './AnimatedScreenWrapper';
2 | 
3 | export default AnimatedScreenWrapper;
4 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | import AnimatedScreenHeader from './AnimatedScreenHeader';
 2 | import AnimatedScreenWrapper from './AnimatedScreenWrapper';
 3 | import AnimatedScreenFlatList from './AnimatedScreenFlatList';
 4 | import AnimatedScreenSectionList from './AnimatedScreenSectionList';
 5 | import AnimatedScreenScrollView from './AnimatedScreenScrollView';
 6 | import AnimatedScreenCollapsibleElement from './AnimatedScreenCollapsibleElement';
 7 | import AnimatedScreenElement from './AnimatedScreenElement/AnimatedScreenElement';
 8 | 
 9 | const AnimatedScreen = {
10 |   Header: AnimatedScreenHeader,
11 |   Element: AnimatedScreenElement,
12 |   Wrapper: AnimatedScreenWrapper,
13 |   FlatList: AnimatedScreenFlatList,
14 |   ScrollView: AnimatedScreenScrollView,
15 |   SectionList: AnimatedScreenSectionList,
16 |   CollapsibleElement: AnimatedScreenCollapsibleElement,
17 | };
18 | 
19 | export default AnimatedScreen;
20 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | // `tsconfig.json` for react native TypeScript package
 2 | {
 3 |   "compilerOptions": {
 4 |     "module": "es6",
 5 |     "declaration": true,
 6 |     "outDir": "./lib",
 7 |     "skipLibCheck": true,
 8 |     "allowJs": true,
 9 |     "allowSyntheticDefaultImports": true,
10 |     "esModuleInterop": true,
11 |     "isolatedModules": true,
12 |     "jsx": "react",
13 |     "lib": [
14 |       "es6"
15 |     ],
16 |     "moduleResolution": "node",
17 |     "strict": true,
18 |     "target": "esnext"
19 |   },
20 |   "include": [
21 |     "src"
22 |   ],
23 |   "exclude": [
24 |     "node_modules",
25 |     "**/__tests__/*"
26 |   ]
27 | }


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": [
3 |     "tslint:recommended"
4 |   ]
5 | }


--------------------------------------------------------------------------------