Skip to content

Commit 5974fd1

Browse files
NhacsamNhacsam
authored
Merge pull request #1 from bamlab/version_0_2_1
Version 0 2 1
2 parents 01b3f98 + d853723 commit 5974fd1

File tree

13 files changed

+343
-168
lines changed

13 files changed

+343
-168
lines changed

‎README.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,15 @@ render() {
2525
return (
2626
<HeaderImageScrollView
2727
maxHeight={200}
28-
minHeight={50}
28+
minHeight={MIN_HEIGHT}
2929
renderHeader={() => (
30-
<Image source={require('image.jpg')} style={styles.image} />
30+
<Image source={require('../assets/NZ.jpg')} style={styles.image} />
3131
)}
3232
>
3333
<View style={{ height: 1000 }}>
34-
<TriggeringView onHide={() => console.log('text hidden')}}>
35-
<Text>Scroll Me!</Text>
36-
</TriggeringView>
34+
<TriggeringView onHide={() => console.log('text hidden')} >
35+
<Text>Scroll Me!</Text>
36+
</TriggeringView>
3737
</View>
3838
</HeaderImageScrollView>
3939
);

‎example/Pages/BasicUsage.js

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react';
2+
import { StyleSheet, Text, Image, TouchableOpacity, StatusBar, View, Dimensions } from 'react-native';
3+
import { NavigationBar } from '@exponent/ex-navigation';
4+
5+
import HeaderImageScrollView, { TriggeringView } from 'react-native-image-header-scroll-view';
6+
7+
const MIN_HEIGHT = NavigationBar.DEFAULT_HEIGHT;
8+
9+
const styles = StyleSheet.create({
10+
container: {
11+
marginTop: -MIN_HEIGHT,
12+
flex: 1,
13+
},
14+
image: {
15+
height: 200,
16+
width: Dimensions.get('window').width,
17+
},
18+
});
19+
20+
21+
class BasicUsage extends React.Component {
22+
render() {
23+
return (
24+
<View style={styles.container} >
25+
<HeaderImageScrollView
26+
maxHeight={200}
27+
minHeight={MIN_HEIGHT}
28+
renderHeader={() => (
29+
<Image source={require('../assets/NZ.jpg')} style={styles.image} />
30+
)}
31+
>
32+
<View style={{ height: 1000 }}>
33+
<TriggeringView onHide={() => console.log('text hidden')} >
34+
<Text>Scroll Me!</Text>
35+
</TriggeringView>
36+
</View>
37+
</HeaderImageScrollView>
38+
</View>
39+
);
40+
}
41+
}
42+
43+
BasicUsage.route = {
44+
navigationBar: {
45+
tintColor: 'white',
46+
backgroundColor: 'transparent',
47+
borderBottomWidth: 0,
48+
statusBarHeight: 0,
49+
elevation: 0,
50+
},
51+
};
52+
53+
export default BasicUsage;

‎example/Pages/Menu.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import React from 'react';
2+
import { StyleSheet, Text, Image, TouchableOpacity, StatusBar, View, Dimensions } from 'react-native';
3+
import { withNavigation } from '@exponent/ex-navigation';
4+
import { Router } from '../main';
5+
6+
import tvShowContent from '../assets/tvShowContent';
7+
8+
const styles = StyleSheet.create({
9+
page: {
10+
flex: 1,
11+
alignItems: 'stretch',
12+
padding: 30,
13+
},
14+
button: {
15+
height: 100,
16+
width: Dimensions.get('window').width - 60,
17+
borderRadius: 10,
18+
marginVertical: 15,
19+
},
20+
buttonText: {
21+
color: 'white',
22+
backgroundColor: 'transparent',
23+
fontSize: 20,
24+
fontWeight: 'bold',
25+
},
26+
overlay: {
27+
backgroundColor: 'rgba(0,0,0,0.3)',
28+
flex: 1,
29+
alignSelf: 'stretch',
30+
justifyContent: 'center',
31+
alignItems: 'center',
32+
}
33+
});
34+
35+
@withNavigation
36+
class Button extends React.Component {
37+
render() {
38+
const props = this.props;
39+
return (
40+
<TouchableOpacity activeOpacity={0.7} onPress={() => {
41+
this.props.navigator.push(Router.getRoute(props.target));
42+
}}>
43+
<Image style={styles.button} source={props.image}>
44+
<View style={styles.overlay}>
45+
<Text style={styles.buttonText}>{ props.text }</Text>
46+
</View>
47+
</Image>
48+
</TouchableOpacity>
49+
);
50+
}
51+
}
52+
53+
const Menu = () => (
54+
<View style={styles.page}>
55+
<StatusBar />
56+
<Button image={require('../assets/NZ.jpg')} text="BasicUsage" target="basicUsage" />
57+
<Button image={tvShowContent.image} text="TV Show" target="tvShow" />
58+
</View>
59+
);
60+
61+
Menu.route = {
62+
navigationBar: {
63+
title: 'ImageHeaderScrollView',
64+
},
65+
};
66+
67+
export default Menu;

‎example/Pages/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export { default as Menu } from './Menu';
2+
export { default as TvShow } from './TvShow';
3+
export { default as BasicUsage } from './BasicUsage';

‎example/Pages/tvShow.js

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
import Exponent from 'exponent';
2+
import React, { Component } from 'react';
3+
import {
4+
StyleSheet,
5+
Text,
6+
View,
7+
Image,
8+
Dimensions,
9+
StatusBar,
10+
} from 'react-native';
11+
import * as Animatable from 'react-native-animatable';
12+
import { NavigationBar } from '@exponent/ex-navigation';
13+
14+
15+
import HeaderImageScrollView, { TriggeringView } from 'react-native-image-header-scroll-view';
16+
import tvShowContent from '../assets/tvShowContent';
17+
18+
const MIN_HEIGHT = NavigationBar.DEFAULT_HEIGHT;
19+
const MAX_HEIGHT = 250;
20+
21+
const styles = StyleSheet.create({
22+
image: {
23+
height: MAX_HEIGHT,
24+
width: Dimensions.get('window').width,
25+
alignSelf: 'stretch',
26+
resizeMode: 'cover',
27+
},
28+
title: {
29+
fontSize: 20,
30+
},
31+
name: {
32+
fontWeight: 'bold',
33+
},
34+
section: {
35+
padding: 20,
36+
borderBottomWidth: 1,
37+
borderBottomColor: '#cccccc',
38+
backgroundColor: 'white',
39+
},
40+
sectionTitle: {
41+
fontSize: 18,
42+
fontWeight: 'bold',
43+
},
44+
sectionContent: {
45+
fontSize: 16,
46+
textAlign: 'justify',
47+
},
48+
keywords: {
49+
flexDirection: 'row',
50+
justifyContent: 'flex-start',
51+
alignItems: 'flex-start',
52+
flexWrap: 'wrap',
53+
},
54+
keywordContainer: {
55+
backgroundColor: '#999999',
56+
borderRadius: 10,
57+
margin: 10,
58+
padding: 10,
59+
},
60+
keyword: {
61+
fontSize: 16,
62+
color: 'white',
63+
},
64+
titleContainer: {
65+
flex: 1,
66+
alignSelf: 'stretch',
67+
justifyContent: 'center',
68+
alignItems: 'center',
69+
},
70+
imageTitle: {
71+
color: 'white',
72+
backgroundColor: 'transparent',
73+
fontSize: 24,
74+
},
75+
navTitleView: {
76+
height: MIN_HEIGHT,
77+
justifyContent: 'center',
78+
alignItems: 'center',
79+
paddingTop: 16,
80+
opacity: 0,
81+
},
82+
navTitle: {
83+
color: 'white',
84+
fontSize: 18,
85+
backgroundColor: 'transparent',
86+
},
87+
});
88+
89+
class TvShow extends Component {
90+
constructor() {
91+
super();
92+
this.state = { showNavTitle: false };
93+
}
94+
95+
render() {
96+
return (
97+
<View style={{ flex: 1, marginTop: -MIN_HEIGHT }}>
98+
<StatusBar barStyle="light-content" />
99+
<HeaderImageScrollView
100+
maxHeight={MAX_HEIGHT}
101+
minHeight={MIN_HEIGHT}
102+
maxOverlayOpacity={0.6}
103+
minOverlayOpacity={0.3}
104+
fadeOutForeground
105+
renderHeader={() => (
106+
<Image source={tvShowContent.image} style={styles.image} />
107+
)}
108+
renderFixedForeground={() => (
109+
<Animatable.View
110+
style={styles.navTitleView}
111+
ref={(navTitleView) => { this.navTitleView = navTitleView; }}
112+
>
113+
<Text style={styles.navTitle}>{tvShowContent.title}, ({tvShowContent.year})</Text>
114+
</Animatable.View>
115+
)}
116+
renderForeground={() => (
117+
<View style={styles.titleContainer}>
118+
<Text style={styles.imageTitle}>{tvShowContent.title}</Text>
119+
</View>
120+
)}
121+
>
122+
<TriggeringView
123+
style={styles.section}
124+
onHide={() => this.navTitleView.fadeInUp(200)}
125+
onDisplay={() => this.navTitleView.fadeOut(100)}
126+
>
127+
<Text style={styles.title}>
128+
<Text style={styles.name}>{tvShowContent.title}</Text>, ({tvShowContent.year})
129+
</Text>
130+
</TriggeringView>
131+
<View style={styles.section}>
132+
<Text style={styles.sectionTitle}>Overview</Text>
133+
<Text style={styles.sectionContent}>{tvShowContent.overview}</Text>
134+
</View>
135+
<View style={styles.section}>
136+
<Text style={styles.sectionTitle}>Keywords</Text>
137+
<View style={styles.keywords}>
138+
{tvShowContent.keywords.map(keyword => (
139+
<View style={styles.keywordContainer} key={keyword}>
140+
<Text style={styles.keyword}>{keyword}</Text>
141+
</View>
142+
))}
143+
</View>
144+
</View>
145+
</HeaderImageScrollView>
146+
</View>
147+
);
148+
}
149+
}
150+
151+
TvShow.route = {
152+
navigationBar: {
153+
tintColor: 'white',
154+
backgroundColor: 'transparent',
155+
borderBottomWidth: 0,
156+
statusBarHeight: 0,
157+
elevation: 0,
158+
},
159+
};
160+
161+
export default TvShow;

‎example/assets/NZ.jpg

128 KB
Loading

0 commit comments

Comments
 (0)