Skip to content

Commit fdb7c42

Browse files
Monte9Monte9
committed
added a few more props; updated readme; expo app looking good
1 parent 20b04b2 commit fdb7c42

File tree

4 files changed

+121
-28
lines changed

4 files changed

+121
-28
lines changed

‎README.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,17 +79,21 @@ import ParallaxScrollView from 'react-native-scroll-view';
7979
| backgroundSource | http://i.imgur.com/6Iej2c3.png | string | The background image for the header (url) |
8080
| windowHeight | SCREEN_HEIGHT * 0.5 | number | The height of the header window |
8181
| navBarTitle | Katy Friedson | string | The title to be display on the NavBar header |
82+
| navBarTitleColor | 'white' | string | Color of the navBar title when displayed |
83+
| navBarColor | 'rgba(0, 0, 0, 1.0)' | string | Color of the navbar when shown |
8284
| userName | Katy Friedson | string | The user name displayed in the collapsable header view |
8385
| userImage | http://i.imgur.com/uma9OfG.jpg | string | The user image displayed in the collapsable header view |
8486
| userTitle | Engineering Manager | string | The user title displayed in the collapsable header view |
8587
| headerView | Profile View | custom object | Pass in a custom object to override the default header view |
8688
| leftIcon | menu | object | Pass in the left icon name and type as an object. ```leftIcon={{name: 'rocket', color: 'red', size: 30, type: 'font-awesome'}}```|
89+
| leftIconOnPress | none | callback | Callback function when the left icon is pressed |
8790
| rightIcon | present | object | Pass in the right icon name and type etc as an object. ```rightIcon={{name: 'user', color: 'blue', size: 30, type: 'font-awesome'}}```|
91+
| rightIconOnPress | none | callback | Callback function when the right icon is pressed |
8892
| *children* | List View | React Components | Render any react views/components as children and these will be rendered below the headerView |
8993

9094
## Try it out
9195

92-
You can try it out with Exponent [here](https://exp.host/@monte9/react-native-graphql-todolist).
96+
You can try it out with Exponent [here](https://exp.host/@monte9/parallax-scrollview-example)
9397

9498
### Example
9599

‎example/beta-src/ParallaxScrollView.js

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ export default class ParallaxScrollView extends Component {
9898
}
9999

100100
renderNavBarTitle() {
101-
var { windowHeight, backgroundSource } = this.props;
101+
var { windowHeight, backgroundSource, navBarTitleColor } = this.props;
102102
var { scrollY } = this.state;
103103
if (!windowHeight || !backgroundSource) {
104104
return null;
@@ -113,15 +113,18 @@ export default class ParallaxScrollView extends Component {
113113
})
114114
}}
115115
>
116-
<Text style={{ fontSize: 22, fontWeight: '600', color: 'white' }}>
116+
<Text style={{ fontSize: 22, fontWeight: '600', color: navBarTitleColor || 'white' }}>
117117
{this.props.navBarTitle || USER.name}
118118
</Text>
119119
</Animated.View>
120120
);
121121
}
122122

123123
rendernavBar() {
124-
var { windowHeight, backgroundSource, leftIcon, rightIcon} = this.props;
124+
var {
125+
windowHeight, backgroundSource, leftIcon,
126+
rightIcon, leftIconOnPress, rightIconOnPress, navBarColor
127+
} = this.props;
125128
var { scrollY } = this.state;
126129
if (!windowHeight || !backgroundSource) {
127130
return null;
@@ -135,7 +138,7 @@ export default class ParallaxScrollView extends Component {
135138
flexDirection: 'row',
136139
backgroundColor: scrollY.interpolate({
137140
inputRange: [-windowHeight, windowHeight * DEFAULT_WINDOW_MULTIPLIER, windowHeight * 0.8],
138-
outputRange: ['transparent', 'transparent', 'rgba(0, 0, 0, 1.0)']
141+
outputRange: ['transparent', 'transparent', navBarColor || 'rgba(0, 0, 0, 1.0)']
139142
})
140143
}}
141144
>
@@ -147,7 +150,14 @@ export default class ParallaxScrollView extends Component {
147150
alignItems: 'center'
148151
}}
149152
>
150-
<Icon name={leftIcon && leftIcon.name || 'menu'} type={leftIcon && leftIcon.type || 'simple-line-icon'} color={leftIcon && leftIcon.color || 'white'} size={leftIcon && leftIcon.size || 23} />
153+
<Icon
154+
name={leftIcon && leftIcon.name || 'menu'}
155+
type={leftIcon && leftIcon.type || 'simple-line-icon'}
156+
color={leftIcon && leftIcon.color || 'white'}
157+
size={leftIcon && leftIcon.size || 23}
158+
onPress={leftIconOnPress}
159+
underlayColor='transparent'
160+
/>
151161
</View>
152162
<View
153163
style={{
@@ -168,7 +178,14 @@ export default class ParallaxScrollView extends Component {
168178
alignItems: 'center'
169179
}}
170180
>
171-
<Icon name={rightIcon && rightIcon.name || 'present'} type={rightIcon && rightIcon.type || 'simple-line-icon'} color={rightIcon && rightIcon.color || 'white'} size={rightIcon && rightIcon.size || 23} />
181+
<Icon
182+
name={rightIcon && rightIcon.name || 'present'}
183+
type={rightIcon && rightIcon.type || 'simple-line-icon'}
184+
color={rightIcon && rightIcon.color || 'white'}
185+
size={rightIcon && rightIcon.size || 23}
186+
onPress={rightIconOnPress}
187+
underlayColor='transparent'
188+
/>
172189
</View>
173190
</Animated.View>
174191
);
@@ -254,13 +271,17 @@ export default class ParallaxScrollView extends Component {
254271
ParallaxScrollView.defaultProps = {
255272
backgroundSource: 'http://i.imgur.com/6Iej2c3.png',
256273
windowHeight: SCREEN_HEIGHT * DEFAULT_WINDOW_MULTIPLIER,
274+
leftIconOnPress: () => console.log('Left icon pressed'),
275+
rightIconOnPress: () => console.log('Right icon pressed')
257276
};
258277

259278
ParallaxScrollView.propTypes = {
260279
...ScrollViewPropTypes,
261280
backgroundSource: React.PropTypes.string,
262281
windowHeight: React.PropTypes.number,
263282
navBarTitle: React.PropTypes.string,
283+
navBarTitleColor: React.PropTypes.string,
284+
navBarColor: React.PropTypes.string,
264285
userImage: React.PropTypes.string,
265286
userName: React.PropTypes.string,
266287
userTitle: React.PropTypes.string,

‎example/main.js

Lines changed: 62 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,36 @@ import ParallaxScrollView from './beta-src/ParallaxScrollView';
77
export const SCREEN_HEIGHT = Dimensions.get('window').height;
88

99
class App extends React.Component {
10+
constructor() {
11+
super()
12+
13+
this.state = {
14+
index: 0
15+
}
16+
}
17+
1018
customView() {
1119
return (
1220
<ParallaxScrollView
13-
windowHeight={SCREEN_HEIGHT * 0.4}
14-
backgroundSource='http://i.imgur.com/UyjQBkJ.png'
15-
navBarTitle='John Oliver'
16-
userName='John Oliver'
17-
userTitle='Comedian'
18-
userImage='http://i.imgur.com/RQ1iLOs.jpg'
19-
leftIcon={{name: 'rocket', color: 'rgba(193, 193, 193, 1)', size: 30, type: 'font-awesome'}}
20-
rightIcon={{name: 'user', color: 'rgba(193, 193, 193, 1)', size: 30, type: 'font-awesome'}}
21+
windowHeight={SCREEN_HEIGHT}
22+
backgroundSource='http://i.imgur.com/sKR3Fkb.png'
23+
navBarTitle='Custom Title'
24+
navBarTitleColor='black'
25+
navBarColor='white'
26+
headerView={(
27+
<View style={styles.headerView}>
28+
<View style={styles.headerTextView}>
29+
<Text style={styles.headerTextViewTitle}>My App</Text>
30+
<Text style={styles.headerTextViewSubtitle}>
31+
Custom Header View
32+
</Text>
33+
</View>
34+
</View>
35+
)}
36+
leftIcon={{name: 'rocket', color: 'black', size: 30, type: 'font-awesome'}}
37+
leftIconOnPress={() => this.setState({index: (this.state.index + 1 ) % 3})}
38+
rightIcon={{name: 'user', color: 'black', size: 30, type: 'font-awesome'}}
39+
rightIconOnPress={() => this.setState({index: (this.state.index + 1 ) % 3})}
2140
>
2241
<ScrollView style={{flex: 1, backgroundColor: 'rgba(228, 117, 125, 1)'}}>
2342
<View style={{height: 300, justifyContent: 'center', alignItems: 'center'}}>
@@ -42,7 +61,10 @@ class App extends React.Component {
4261

4362
defaultView() {
4463
return (
45-
<ParallaxScrollView />
64+
<ParallaxScrollView
65+
leftIconOnPress={() => this.setState({index: (this.state.index + 1 ) % 3})}
66+
rightIconOnPress={() => this.setState({index: (this.state.index + 1 ) % 3})}
67+
/>
4668
)
4769
}
4870

@@ -56,18 +78,43 @@ class App extends React.Component {
5678
userTitle='Comedian'
5779
userImage='http://i.imgur.com/RQ1iLOs.jpg'
5880
leftIcon={{name: 'rocket', color: 'rgba(131, 175, 41, 1)', size: 30, type: 'font-awesome'}}
81+
leftIconOnPress={() => this.setState({index: (this.state.index + 1 ) % 3})}
5982
rightIcon={{name: 'user', color: 'rgba(193, 193, 193, 1)', size: 30, type: 'font-awesome'}}
83+
rightIconOnPress={() => this.setState({index: (this.state.index + 1 ) % 3})}
6084
/>
61-
)
85+
);
6286
}
6387

6488
render() {
65-
return (
66-
<View style={{flex: 1}}>
67-
{this.customView()}
68-
</View>
69-
)
89+
const { index } = this.state
90+
91+
switch(index) {
92+
case 0:
93+
return this.defaultView()
94+
case 1:
95+
return this.johnOliverView()
96+
case 2:
97+
return this.customView()
98+
}
7099
}
71100
}
72101

102+
const styles = StyleSheet.create ({
103+
headerTextView: {
104+
backgroundColor: 'transparent',
105+
},
106+
headerTextViewTitle: {
107+
fontSize: 35,
108+
color: 'white',
109+
fontWeight: '300',
110+
paddingBottom: 10,
111+
textAlign: 'center'
112+
},
113+
headerTextViewSubtitle: {
114+
fontSize: 20,
115+
color: 'white',
116+
fontWeight: '300'
117+
},
118+
})
119+
73120
Expo.registerRootComponent(App);

‎src/ParallaxScrollView.js

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ export default class ParallaxScrollView extends Component {
9898
}
9999

100100
renderNavBarTitle() {
101-
var { windowHeight, backgroundSource } = this.props;
101+
var { windowHeight, backgroundSource, navBarTitleColor } = this.props;
102102
var { scrollY } = this.state;
103103
if (!windowHeight || !backgroundSource) {
104104
return null;
@@ -113,15 +113,18 @@ export default class ParallaxScrollView extends Component {
113113
})
114114
}}
115115
>
116-
<Text style={{ fontSize: 22, fontWeight: '600', color: 'white' }}>
116+
<Text style={{ fontSize: 22, fontWeight: '600', color: navBarTitleColor || 'white' }}>
117117
{this.props.navBarTitle || USER.name}
118118
</Text>
119119
</Animated.View>
120120
);
121121
}
122122

123123
rendernavBar() {
124-
var { windowHeight, backgroundSource, leftIcon, rightIcon} = this.props;
124+
var {
125+
windowHeight, backgroundSource, leftIcon,
126+
rightIcon, leftIconOnPress, rightIconOnPress, navBarColor
127+
} = this.props;
125128
var { scrollY } = this.state;
126129
if (!windowHeight || !backgroundSource) {
127130
return null;
@@ -135,7 +138,7 @@ export default class ParallaxScrollView extends Component {
135138
flexDirection: 'row',
136139
backgroundColor: scrollY.interpolate({
137140
inputRange: [-windowHeight, windowHeight * DEFAULT_WINDOW_MULTIPLIER, windowHeight * 0.8],
138-
outputRange: ['transparent', 'transparent', 'rgba(0, 0, 0, 1.0)']
141+
outputRange: ['transparent', 'transparent', navBarColor || 'rgba(0, 0, 0, 1.0)']
139142
})
140143
}}
141144
>
@@ -147,7 +150,14 @@ export default class ParallaxScrollView extends Component {
147150
alignItems: 'center'
148151
}}
149152
>
150-
<Icon name={leftIcon && leftIcon.name || 'menu'} type={leftIcon && leftIcon.type || 'simple-line-icon'} color={leftIcon && leftIcon.color || 'white'} size={leftIcon && leftIcon.size || 23} />
153+
<Icon
154+
name={leftIcon && leftIcon.name || 'menu'}
155+
type={leftIcon && leftIcon.type || 'simple-line-icon'}
156+
color={leftIcon && leftIcon.color || 'white'}
157+
size={leftIcon && leftIcon.size || 23}
158+
onPress={leftIconOnPress}
159+
underlayColor='transparent'
160+
/>
151161
</View>
152162
<View
153163
style={{
@@ -168,7 +178,14 @@ export default class ParallaxScrollView extends Component {
168178
alignItems: 'center'
169179
}}
170180
>
171-
<Icon name={rightIcon && rightIcon.name || 'present'} type={rightIcon && rightIcon.type || 'simple-line-icon'} color={rightIcon && rightIcon.color || 'white'} size={rightIcon && rightIcon.size || 23} />
181+
<Icon
182+
name={rightIcon && rightIcon.name || 'present'}
183+
type={rightIcon && rightIcon.type || 'simple-line-icon'}
184+
color={rightIcon && rightIcon.color || 'white'}
185+
size={rightIcon && rightIcon.size || 23}
186+
onPress={rightIconOnPress}
187+
underlayColor='transparent'
188+
/>
172189
</View>
173190
</Animated.View>
174191
);
@@ -254,13 +271,17 @@ export default class ParallaxScrollView extends Component {
254271
ParallaxScrollView.defaultProps = {
255272
backgroundSource: 'http://i.imgur.com/6Iej2c3.png',
256273
windowHeight: SCREEN_HEIGHT * DEFAULT_WINDOW_MULTIPLIER,
274+
leftIconOnPress: () => console.log('Left icon pressed'),
275+
rightIconOnPress: () => console.log('Right icon pressed')
257276
};
258277

259278
ParallaxScrollView.propTypes = {
260279
...ScrollViewPropTypes,
261280
backgroundSource: React.PropTypes.string,
262281
windowHeight: React.PropTypes.number,
263282
navBarTitle: React.PropTypes.string,
283+
navBarTitleColor: React.PropTypes.string,
284+
navBarColor: React.PropTypes.string,
264285
userImage: React.PropTypes.string,
265286
userName: React.PropTypes.string,
266287
userTitle: React.PropTypes.string,

0 commit comments

Comments
 (0)