├── LICENSE
├── README.md
├── package.json
├── screenshot
    ├── 1.gif
    └── 2.gif
├── src
    ├── index.js
    └── styles.js
└── test
    ├── index.js
    └── nav.png


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## React Native CollapsingToolbar
 2 | 
 3 | ## Screen Shot
 4 | 
 5 | <img src="https://github.com/sanpyaelin/react-native-collapsingtoolbar/blob/master/screenshot/1.gif" width="285">    <img src="https://github.com/sanpyaelin/react-native-collapsingtoolbar/blob/master/screenshot/2.gif" width="285">
 6 | 
 7 | 
 8 | ## Getting Started
 9 | ```bash
10 | $ npm i react-native-collapsingtoolbar
11 | ```
12 | 
13 | ## Usage
14 | 
15 | Import the component:
16 | ```js
17 |     import CollapsingToolbar from 'react-native-collapsingtoolbar';
18 |     import Icon from 'react-native-vector-icons/Ionicons';
19 | 
20 |     <CollapsingToolbar 
21 |         leftItem={<Icon name="md-menu" size={30} color="#fff" />}
22 |         rightItem={<Icon name="md-create" size={30}  color="#fff" />}   
23 |         toolbarColor='#2196f3'  
24 |         title='Demo Toolbar'
25 |         src={require('../../../images/drawer6.png')}>
26 |         <Text>
27 |             Create             
28 |         </Text>
29 |     </CollapsingToolbar>
30 | ```
31 | 
32 | ## Props
33 | 
34 | Prop | Type | Default | description
35 | -----|------|---------|------------
36 | src | object | | require('img.png') or {uri: url}
37 | title| string | Home | toolbar title
38 | titleColor| string | #fff | toolbar title text color
39 | toolbarColor | string | #e91e63 | toolbar background color
40 | toolbarMaxHeight | number | 300 | maximum height of toolbar
41 | toolbarMinHeight | number | 55 | minimum height of toolbar
42 | leftItem | PropTypes.element | | toolbar left menu item
43 | leftItemPress | func | | 
44 | leftItem | PropTypes.element | | toolbar right item
45 | rightItemPress | func | | 
46 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-collapsingtoolbar",
 3 |   "version": "1.0.2",
 4 |   "description": "react native collapsing Toolbar",
 5 |   "main": "./src",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "react-native-react-native-collapsingToolbar"
12 |   },
13 |   "keywords": [
14 |     "Toolbar",
15 |     "react native",
16 |     "nav bar",
17 |     "App bar",
18 |     "collapsing toolbar",
19 |     "collapsing",
20 |     "header"
21 |   ],
22 |   "author": "San Pyae Lin",
23 |   "license": ""
24 | }
25 | 


--------------------------------------------------------------------------------
/screenshot/1.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sanpyaelin/react-native-collapsingtoolbar/ea404767799b0fcf67c876bd57d318bd0c045072/screenshot/1.gif


--------------------------------------------------------------------------------
/screenshot/2.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sanpyaelin/react-native-collapsingtoolbar/ea404767799b0fcf67c876bd57d318bd0c045072/screenshot/2.gif


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import {
  4 |   Animated,
  5 |   Platform,
  6 |   StatusBar,
  7 |   StyleSheet,
  8 |   Text,
  9 |   View,
 10 |   TouchableOpacity
 11 | } from 'react-native';
 12 | import styles from "./styles";
 13 | 
 14 | const propTypes = {
 15 |   children: PropTypes.node.isRequired,
 16 |   src: PropTypes.oneOfType([
 17 |     PropTypes.object,
 18 |     PropTypes.number,
 19 |   ]).isRequired,
 20 |   title: PropTypes.string,
 21 |   titleColor: PropTypes.string,
 22 |   leftItem: PropTypes.element,
 23 |   leftItemPress: PropTypes.func,
 24 |   rightItem: PropTypes.element,
 25 |   rightItemPress: PropTypes.func,
 26 |   toolbarColor: PropTypes.string,
 27 |   toolbarMaxHeight: PropTypes.number,
 28 |   toolbarMinHeight: PropTypes.number,
 29 | }
 30 | const defaultProps = {
 31 |   leftItem: null,
 32 |   leftItemPress: null,
 33 |   rightItem: null,
 34 |   rightItemPress: null,
 35 |   title: 'Home',
 36 |   titleColor: '#fff',
 37 |   toolbarColor: '#e91e63',
 38 |   toolbarMaxHeight: 300,
 39 |   toolbarMinHeight: 55,
 40 | };
 41 | 
 42 | class CollapsingToolbar extends Component {
 43 |   constructor(props) {
 44 |     super(props);
 45 | 
 46 |     this.state = {
 47 |       scrollY: new Animated.Value(0),
 48 |     };
 49 |   }
 50 | 
 51 |   render() {
 52 |     const { children,src,leftItem,leftItemPress,rightItem,rightItemPress,title,titleColor,toolbarColor,toolbarMaxHeight,toolbarMinHeight } = this.props;
 53 |     const scrollDistance = toolbarMaxHeight - toolbarMinHeight;
 54 |     const headerTranslate = this.state.scrollY.interpolate({
 55 |       inputRange: [0, scrollDistance],
 56 |       outputRange: [0, -scrollDistance],
 57 |       extrapolate: 'clamp',
 58 |     });
 59 | 
 60 |     const imageOpacity = this.state.scrollY.interpolate({
 61 |       inputRange: [0, scrollDistance / 2, scrollDistance],
 62 |       outputRange: [1, 1, 0],
 63 |       extrapolate: 'clamp',
 64 |     });
 65 |     const imageTranslate = this.state.scrollY.interpolate({
 66 |       inputRange: [0, scrollDistance],
 67 |       outputRange: [0, 100],
 68 |       extrapolate: 'clamp',
 69 |     });
 70 | 
 71 |     const titleScale = this.state.scrollY.interpolate({
 72 |       inputRange: [0, scrollDistance / 2, scrollDistance],
 73 |       outputRange: [1, 1, 0.8],
 74 |       extrapolate: 'clamp',
 75 |     });
 76 |     const titleTranslate = this.state.scrollY.interpolate({
 77 |       inputRange: [0, scrollDistance / 2, scrollDistance],
 78 |       outputRange: [0, 0, -8],
 79 |       extrapolate: 'clamp',
 80 |     });
 81 | 
 82 |     return (
 83 |       <View style={styles.fill}>
 84 |         
 85 |         <Animated.ScrollView
 86 |           style={styles.fill}
 87 |           scrollEventThrottle={1}
 88 |           onScroll={Animated.event(
 89 |             [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
 90 |             { useNativeDriver: true },
 91 |           )}>
 92 |           <View style={{marginTop: toolbarMaxHeight, minHeight: 700}}>
 93 |             {children}
 94 |           </View>
 95 |         </Animated.ScrollView>
 96 |         <Animated.View
 97 |           style={[
 98 |             styles.header,
 99 |             { 
100 |               backgroundColor: toolbarColor,
101 |               height: toolbarMaxHeight,
102 |               transform: [{ translateY: headerTranslate }] 
103 |             },
104 |           ]}
105 |         >
106 |           <Animated.Image
107 |             style={[
108 |               styles.backgroundImage,
109 |               {
110 |                 height: toolbarMaxHeight,
111 |                 opacity: imageOpacity,
112 |                 transform: [{ translateY: imageTranslate }],
113 |               },
114 |             ]}
115 |             source={src}
116 |           />
117 |           <Animated.View
118 |             style={[
119 |               styles.action,
120 |               {
121 |                 backgroundColor: 'transparent',
122 |                 transform: [
123 |                   { scale: titleScale },
124 |                 ],
125 |               },
126 |             ]}
127 |           >
128 |             <Text style={[styles.title,{color: titleColor}]}>{title}</Text>
129 |           </Animated.View>
130 |         </Animated.View>
131 |         <Animated.View style={styles.bar}>
132 |           <TouchableOpacity onPress={leftItemPress}>
133 |             <View style={styles.left}>{leftItem}</View>
134 |           </TouchableOpacity>
135 |           <TouchableOpacity onPress={rightItemPress}>
136 |             <View style={styles.right}>{rightItem}</View>
137 |           </TouchableOpacity>
138 |         </Animated.View>
139 | 
140 |       </View>
141 |     );
142 |   }
143 | }
144 | 
145 | CollapsingToolbar.propTypes = propTypes;
146 | CollapsingToolbar.defaultProps = defaultProps;
147 | export default CollapsingToolbar;
148 | 


--------------------------------------------------------------------------------
/src/styles.js:
--------------------------------------------------------------------------------
 1 | const React = require('react-native');
 2 | const { StyleSheet } = React;
 3 | 
 4 | const styles = StyleSheet.create({
 5 |     fill: {
 6 |         flex: 1,
 7 |       },
 8 |       content: {
 9 |         flex: 1,
10 |       },
11 |       header: {
12 |         top: 0,
13 |         left: 0,
14 |         right: 0,
15 |         overflow: 'hidden',
16 |         position: 'absolute',
17 |       },
18 |       backgroundImage: {
19 |         position: 'absolute',
20 |         top: 0,
21 |         left: 0,
22 |         right: 0,
23 |         width: null,
24 |         resizeMode: 'cover',
25 |       },
26 |       action: {
27 |         left: 0,
28 |         right: 0,
29 |         bottom: 0,
30 |         height: 60,
31 |         flexDirection: 'row',
32 |         alignItems: 'center',
33 |         paddingHorizontal: 40,
34 |         position: 'absolute',
35 |       },
36 |       bar: {
37 |         top: 0,
38 |         left: 0,
39 |         right: 0,
40 |         height: 56,
41 |         position: 'absolute',
42 |         flexDirection: "row",
43 |         justifyContent: 'space-between',
44 |         backgroundColor: 'transparent',
45 |       },
46 |       left: {
47 |         top: 0,
48 |         left: 0,
49 |         width: 50,
50 |         height: 56,
51 |         alignItems: 'center',
52 |         justifyContent: 'center',
53 |       },
54 |       right: {
55 |         top: 0,
56 |         right: 0,
57 |         height: 56,
58 |         minWidth: 56,
59 |         alignItems: 'center',
60 |         justifyContent: 'center',
61 |       },
62 |       title: {
63 |         fontFamily: 'Roboto_medium',
64 |         fontSize: 25,
65 |       },
66 |       scrollViewContent: {
67 |         paddingTop: 30,
68 |       },
69 |       row: {
70 |         height: 40,
71 |         margin: 16,
72 |         backgroundColor: '#D3D3D3',
73 |         alignItems: 'center',
74 |         justifyContent: 'center',
75 |       },
76 | });
77 | export default styles;
78 | 


--------------------------------------------------------------------------------
/test/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import { connect } from "react-redux";
 3 | import { Text } from "react-native";
 4 | import CollapsingToolbar from '../react-native-collapsingtoolbar/';
 5 | import Icon from 'react-native-vector-icons/Ionicons';
 6 | 
 7 | class Demo extends Component {
 8 | 
 9 |   render() {
10 |     return (
11 |           <CollapsingToolbar 
12 |             leftItem={<Icon name="md-menu" size={30} color="#fff" />}
13 |             rightItem={<Icon name="md-create" size={30}  color="#fff" />}
14 |             title='Demo Toolbar'
15 |             src={require('./nav.png')}>
16 |             <Text>
17 |               Create             
18 |             </Text>
19 |           </CollapsingToolbar>
20 |     );
21 |   }
22 | }
23 | 
24 | export default Demo;
25 | 


--------------------------------------------------------------------------------
/test/nav.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sanpyaelin/react-native-collapsingtoolbar/ea404767799b0fcf67c876bd57d318bd0c045072/test/nav.png


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