Skip to content

Commit bcb9f51

Browse files
NhacsamNhacsam
authored
Merge pull request #16 from bamlab/feature/fix-example-build
Feature/fix example build
2 parents dc820c3 + afbb050 commit bcb9f51

22 files changed

Lines changed: 1882 additions & 462 deletions

File tree

‎example/.eslintignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
**/node_modules
2+
**/android
3+
**/ios
4+
**/vendors
5+
**/coverage
6+
**/flow-coverage

‎example/.eslintrc‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"extends": [
3+
"react-app",
4+
"prettier",
5+
"prettier/flowtype",
6+
"prettier/react"
7+
],
8+
"plugins": [
9+
"flowtype",
10+
"react",
11+
"prettier"
12+
],
13+
"globals": {
14+
"__DEV__": true
15+
},
16+
"rules": {
17+
"no-use-before-define": 0,
18+
"no-unused-vars": "error",
19+
"prettier/prettier": [
20+
"error",
21+
{
22+
"trailingComma": "es5",
23+
"singleQuote": true,
24+
"printWidth": 100
25+
}
26+
]
27+
}
28+
}

‎example/.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,4 +52,4 @@ fastlane/report.xml
5252
fastlane/Preview.html
5353
fastlane/screenshots
5454

55-
ImageHeaderScrollView
55+
ImageHeaderScrollView/*.js

‎example/Pages/Avignon.js‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from 'react';
22
import { StyleSheet, Text, Image, TouchableOpacity, View, Dimensions } from 'react-native';
3-
import { NavigationBar } from '@exponent/ex-navigation';
43

4+
import { Header } from 'react-navigation';
55
import HeaderImageScrollView, { TriggeringView } from 'react-native-image-header-scroll-view';
66

7-
const MIN_HEIGHT = NavigationBar.DEFAULT_HEIGHT;
7+
const MIN_HEIGHT = Header.HEIGHT;
88
const MAX_HEIGHT = 200;
99

1010
class BasicUsage extends React.Component {
@@ -15,16 +15,14 @@ class BasicUsage extends React.Component {
1515
maxHeight={MAX_HEIGHT}
1616
minHeight={MIN_HEIGHT}
1717
minOverlayOpacity={0.4}
18-
renderHeader={() => (
19-
<Image source={require('../assets/avignon.jpg')} style={styles.image} />
20-
)}
21-
renderTouchableFixedForeground={() => (
18+
renderHeader={() =>
19+
<Image source={require('../assets/avignon.jpg')} style={styles.image} />}
20+
renderTouchableFixedForeground={() =>
2221
<View style={{ height: MAX_HEIGHT, justifyContent: 'center', alignItems: 'center' }}>
2322
<TouchableOpacity onPress={() => console.log('tap!!')} style={styles.button}>
2423
<Text style={styles.buttonText}>Discover Avignon now!</Text>
2524
</TouchableOpacity>
26-
</View>
27-
)}
25+
</View>}
2826
>
2927
<View style={{ height: 1000 }}>
3028
<TriggeringView onHide={() => console.log('text hidden')}>
@@ -41,7 +39,6 @@ class BasicUsage extends React.Component {
4139

4240
const styles = StyleSheet.create({
4341
container: {
44-
marginTop: -MIN_HEIGHT,
4542
flex: 1,
4643
},
4744
image: {

‎example/Pages/BasicUsage.js‎

Lines changed: 8 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import React from 'react';
22
import { StyleSheet, Text, Image, TouchableOpacity, View, Dimensions } from 'react-native';
3-
import { NavigationBar } from '@exponent/ex-navigation';
43

4+
import { Header } from 'react-navigation';
55
import HeaderImageScrollView, { TriggeringView } from 'react-native-image-header-scroll-view';
66

7-
const MIN_HEIGHT = NavigationBar.DEFAULT_HEIGHT;
7+
const MIN_HEIGHT = Header.HEIGHT;
88

99
const styles = StyleSheet.create({
1010
container: {
11-
marginTop: -MIN_HEIGHT,
1211
flex: 1,
1312
},
1413
image: {
@@ -17,27 +16,23 @@ const styles = StyleSheet.create({
1716
},
1817
});
1918

20-
2119
class BasicUsage extends React.Component {
2220
render() {
2321
return (
24-
<View style={styles.container} >
22+
<View style={styles.container}>
2523
<HeaderImageScrollView
2624
maxHeight={200}
2725
minHeight={MIN_HEIGHT}
28-
renderHeader={() => (
29-
<Image source={require('../assets/NZ.jpg')} style={styles.image} />
30-
)}
31-
renderForeground={() => (
26+
renderHeader={() => <Image source={require('../assets/NZ.jpg')} style={styles.image} />}
27+
renderForeground={() =>
3228
<View style={{ height: 150, justifyContent: 'center', alignItems: 'center' }}>
33-
<TouchableOpacity onPress={() => console.log('tap!!')} >
29+
<TouchableOpacity onPress={() => console.log('tap!!')}>
3430
<Text style={{ backgroundColor: 'transparent' }}>Tap Me!</Text>
3531
</TouchableOpacity>
36-
</View>
37-
)}
32+
</View>}
3833
>
3934
<View style={{ height: 1000 }}>
40-
<TriggeringView onHide={() => console.log('text hidden')} >
35+
<TriggeringView onHide={() => console.log('text hidden')}>
4136
<Text>Scroll Me!</Text>
4237
</TriggeringView>
4338
</View>
@@ -47,14 +42,4 @@ class BasicUsage extends React.Component {
4742
}
4843
}
4944

50-
BasicUsage.route = {
51-
navigationBar: {
52-
tintColor: 'white',
53-
backgroundColor: 'transparent',
54-
borderBottomWidth: 0,
55-
statusBarHeight: 0,
56-
elevation: 0,
57-
},
58-
};
59-
6045
export default BasicUsage;

‎example/Pages/Colors.js‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
import React from 'react';
22
import { StyleSheet, Image, View, Dimensions } from 'react-native';
3-
import { NavigationBar } from '@exponent/ex-navigation';
43

54
import HeaderImageScrollView from 'react-native-image-header-scroll-view';
65

7-
const MIN_HEIGHT = NavigationBar.DEFAULT_HEIGHT;
8-
96
const styles = StyleSheet.create({
107
image: {
118
height: 200,
@@ -16,14 +13,13 @@ const styles = StyleSheet.create({
1613
class ColorsPage extends React.Component {
1714
render() {
1815
return (
19-
<View style={{ flex: 1, marginTop: -MIN_HEIGHT }}>
16+
<View style={{ flex: 1 }}>
2017
<HeaderImageScrollView
2118
maxHeight={150}
2219
minHeight={80}
2320
fadeOutForeground
24-
renderHeader={() => (
25-
<Image source={require('../assets/cutecat.jpg')} style={styles.image} />
26-
)}
21+
renderHeader={() =>
22+
<Image source={require('../assets/cutecat.jpg')} style={styles.image} />}
2723
>
2824
<View style={{ height: 100, backgroundColor: 'blue' }} />
2925
<View style={{ height: 100, backgroundColor: 'red' }} />
@@ -39,14 +35,4 @@ class ColorsPage extends React.Component {
3935
}
4036
}
4137

42-
ColorsPage.route = {
43-
navigationBar: {
44-
tintColor: 'white',
45-
backgroundColor: 'transparent',
46-
borderBottomWidth: 0,
47-
statusBarHeight: 0,
48-
elevation: 0,
49-
},
50-
};
51-
5238
export default ColorsPage;

‎example/Pages/Menu.js‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,6 @@ import {
99
ScrollView,
1010
Dimensions,
1111
} from 'react-native';
12-
import { withNavigation } from '@exponent/ex-navigation';
13-
import { Router } from '../main';
14-
1512
import tvShowContent from '../assets/tvShowContent';
1613

1714
const styles = StyleSheet.create({
@@ -43,35 +40,41 @@ const styles = StyleSheet.create({
4340
},
4441
});
4542

46-
@withNavigation class Button extends React.Component {
43+
class Button extends React.Component {
4744
render() {
4845
const props = this.props;
4946
return (
5047
<TouchableOpacity
5148
activeOpacity={0.7}
5249
onPress={() => {
53-
this.props.navigator.push(Router.getRoute(props.target));
50+
this.props.navigation.navigate(props.target);
5451
}}
5552
>
5653
<Image style={styles.button} source={props.image}>
5754
<View style={styles.overlay}>
58-
<Text style={styles.buttonText}>{props.text}</Text>
55+
<Text style={styles.buttonText}>
56+
{props.text}
57+
</Text>
5958
</View>
6059
</Image>
6160
</TouchableOpacity>
6261
);
6362
}
6463
}
6564

66-
const Menu = () => (
65+
const Menu = props =>
6766
<ScrollView style={styles.page} contentContainerStyle={styles.pageContent}>
6867
<StatusBar />
69-
<Button image={require('../assets/NZ.jpg')} text="BasicUsage" target="basicUsage" />
70-
<Button image={tvShowContent.image} text="TV Show" target="tvShow" />
71-
<Button image={require('../assets/cutecat.jpg')} text="Cute cat" target="colors" />
72-
<Button image={require('../assets/avignon.jpg')} text="Forms and buttons" target="avignon" />
73-
</ScrollView>
74-
);
68+
<Button {...props} image={require('../assets/NZ.jpg')} text="BasicUsage" target="basicUsage" />
69+
<Button {...props} image={tvShowContent.image} text="TV Show" target="tvShow" />
70+
<Button {...props} image={require('../assets/cutecat.jpg')} text="Cute cat" target="colors" />
71+
<Button
72+
{...props}
73+
image={require('../assets/avignon.jpg')}
74+
text="Forms and buttons"
75+
target="avignon"
76+
/>
77+
</ScrollView>;
7578

7679
Menu.route = {
7780
navigationBar: {

‎example/Pages/TvShow.js‎

Lines changed: 26 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,12 @@
11
import React, { Component } from 'react';
2-
import {
3-
StyleSheet,
4-
Text,
5-
View,
6-
Image,
7-
Dimensions,
8-
StatusBar,
9-
} from 'react-native';
2+
import { StyleSheet, Text, View, Image, Dimensions, StatusBar } from 'react-native';
103
import * as Animatable from 'react-native-animatable';
11-
import { NavigationBar } from '@exponent/ex-navigation';
12-
4+
import { Header } from 'react-navigation';
135

146
import HeaderImageScrollView, { TriggeringView } from 'react-native-image-header-scroll-view';
157
import tvShowContent from '../assets/tvShowContent';
168

17-
const MIN_HEIGHT = NavigationBar.DEFAULT_HEIGHT;
9+
const MIN_HEIGHT = Header.HEIGHT;
1810
const MAX_HEIGHT = 250;
1911

2012
const styles = StyleSheet.create({
@@ -96,30 +88,32 @@ class TvShow extends Component {
9688

9789
render() {
9890
return (
99-
<View style={{ flex: 1, marginTop: -MIN_HEIGHT }}>
91+
<View style={{ flex: 1 }}>
10092
<StatusBar barStyle="light-content" />
10193
<HeaderImageScrollView
10294
maxHeight={MAX_HEIGHT}
10395
minHeight={MIN_HEIGHT}
10496
maxOverlayOpacity={0.6}
10597
minOverlayOpacity={0.3}
10698
fadeOutForeground
107-
renderHeader={() => (
108-
<Image source={tvShowContent.image} style={styles.image} />
109-
)}
110-
renderFixedForeground={() => (
99+
renderHeader={() => <Image source={tvShowContent.image} style={styles.image} />}
100+
renderFixedForeground={() =>
111101
<Animatable.View
112102
style={styles.navTitleView}
113-
ref={(navTitleView) => { this.navTitleView = navTitleView; }}
103+
ref={navTitleView => {
104+
this.navTitleView = navTitleView;
105+
}}
114106
>
115-
<Text style={styles.navTitle}>{tvShowContent.title}, ({tvShowContent.year})</Text>
116-
</Animatable.View>
117-
)}
118-
renderForeground={() => (
107+
<Text style={styles.navTitle}>
108+
{tvShowContent.title}, ({tvShowContent.year})
109+
</Text>
110+
</Animatable.View>}
111+
renderForeground={() =>
119112
<View style={styles.titleContainer}>
120-
<Text style={styles.imageTitle}>{tvShowContent.title}</Text>
121-
</View>
122-
)}
113+
<Text style={styles.imageTitle}>
114+
{tvShowContent.title}
115+
</Text>
116+
</View>}
123117
>
124118
<TriggeringView
125119
style={styles.section}
@@ -132,16 +126,20 @@ class TvShow extends Component {
132126
</TriggeringView>
133127
<View style={styles.section}>
134128
<Text style={styles.sectionTitle}>Overview</Text>
135-
<Text style={styles.sectionContent}>{tvShowContent.overview}</Text>
129+
<Text style={styles.sectionContent}>
130+
{tvShowContent.overview}
131+
</Text>
136132
</View>
137133
<View style={[styles.section, styles.sectionLarge]}>
138134
<Text style={styles.sectionTitle}>Keywords</Text>
139135
<View style={styles.keywords}>
140-
{tvShowContent.keywords.map(keyword => (
136+
{tvShowContent.keywords.map(keyword =>
141137
<View style={styles.keywordContainer} key={keyword}>
142-
<Text style={styles.keyword}>{keyword}</Text>
138+
<Text style={styles.keyword}>
139+
{keyword}
140+
</Text>
143141
</View>
144-
))}
142+
)}
145143
</View>
146144
</View>
147145
</HeaderImageScrollView>
@@ -150,14 +148,4 @@ class TvShow extends Component {
150148
}
151149
}
152150

153-
TvShow.route = {
154-
navigationBar: {
155-
tintColor: 'white',
156-
backgroundColor: 'transparent',
157-
borderBottomWidth: 0,
158-
statusBarHeight: 0,
159-
elevation: 0,
160-
},
161-
};
162-
163151
export default TvShow;

‎example/android/app/src/main/java/com/imageheaderscrollview/MainActivity.java‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
package com.imageheaderscrollview;
2+
3+
import com.facebook.react.ReactActivity;
4+
5+
public class MainActivity extends ReactActivity {
6+
7+
/**
8+
* Returns the name of the main component registered from JavaScript.
9+
* This is used to schedule rendering of the component.
10+
*/
11+
@Override
12+
protected String getMainComponentName() {
13+
return "imageHeaderScrollView";
14+
}
15+
}

0 commit comments

Comments
 (0)