Skip to content

Commit defe374

Browse files
NhacsamNhacsam
committed
Create example, demo and documentation
1 parent 81552eb commit defe374

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+2543
-4
lines changed

‎README.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,43 @@ A ScrollView-like component that:
44
- Has a fixed image header
55
- Keep the image as a nav bar
66
- Works on iOS and Android
7+
8+
## Installation
9+
10+
```
11+
$ npm install react-native-image-header-scroll-view --save
12+
```
13+
14+
## Demo
15+
16+
![react-native-image-header-scroll-view demo](./demo.gif)
17+
18+
## Basic Usage
19+
20+
```jsx
21+
import HeaderImageScrollView from 'react-native-image-header-scroll-view';
22+
23+
// Inside of a component's render() method:
24+
render() {
25+
return (
26+
<HeaderImageScrollView
27+
maxHeight={200}
28+
minHeight={50}
29+
renderHeader={() => (
30+
<Image source={require('image.jpg')} style={styles.image} />
31+
)}
32+
>
33+
<View style={{ height: 1000 }}>
34+
<Text>Scroll Me!</Text>
35+
</View>
36+
</HeaderImageScrollView>
37+
);
38+
}
39+
```
40+
41+
## Other open-source modules by the folks at [BAM](http://github.com/bamlab)
42+
43+
* [generator-rn-toolbox](https://github.com/bamlab/generator-rn-toolbox)
44+
* [react-native-image-resizer](https://github.com/bamlab/react-native-image-resizer)
45+
* [react-native-numberpicker-dialog](https://github.com/bamlab/react-native-numberpicker-dialog)
46+
* [react-native-animated-picker](https://github.com/bamlab/react-native-animated-picker)

‎demo.gif‎

1.52 MB
Loading

‎exemples/.babelrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["react-native"]
3+
}

‎exemples/.buckconfig‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
[android]
3+
target = Google Inc.:Google APIs:23
4+
5+
[maven_repositories]
6+
central = https://repo1.maven.org/maven2

‎exemples/.flowconfig‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
[ignore]
2+
; We fork some components by platform
3+
.*/*[.]android.js
4+
5+
; Ignore "BUCK" generated dirs
6+
<PROJECT_ROOT>/\.buckd/
7+
8+
; Ignore unexpected extra "@providesModule"
9+
.*/node_modules/.*/node_modules/fbjs/.*
10+
11+
; Ignore duplicate module providers
12+
; For RN Apps installed via npm, "Libraries" folder is inside
13+
; "node_modules/react-native" but in the source repo it is in the root
14+
.*/Libraries/react-native/React.js
15+
.*/Libraries/react-native/ReactNative.js
16+
17+
[include]
18+
19+
[libs]
20+
node_modules/react-native/Libraries/react-native/react-native-interface.js
21+
node_modules/react-native/flow
22+
flow/
23+
24+
[options]
25+
module.system=haste
26+
27+
experimental.strict_type_args=true
28+
29+
munge_underscores=true
30+
31+
module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
32+
33+
suppress_type=$FlowIssue
34+
suppress_type=$FlowFixMe
35+
suppress_type=$FixMe
36+
37+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-6]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
38+
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-6]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
39+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
40+
41+
unsafe.enable_getters_and_setters=true
42+
43+
[version]
44+
^0.36.0

‎exemples/.gitattributes‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
*.pbxproj -text

‎exemples/.gitignore‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# OSX
2+
#
3+
.DS_Store
4+
5+
# Xcode
6+
#
7+
build/
8+
*.pbxuser
9+
!default.pbxuser
10+
*.mode1v3
11+
!default.mode1v3
12+
*.mode2v3
13+
!default.mode2v3
14+
*.perspectivev3
15+
!default.perspectivev3
16+
xcuserdata
17+
*.xccheckout
18+
*.moved-aside
19+
DerivedData
20+
*.hmap
21+
*.ipa
22+
*.xcuserstate
23+
project.xcworkspace
24+
25+
# Android/IntelliJ
26+
#
27+
build/
28+
.idea
29+
.gradle
30+
local.properties
31+
*.iml
32+
33+
# node.js
34+
#
35+
node_modules/
36+
npm-debug.log
37+
38+
# BUCK
39+
buck-out/
40+
\.buckd/
41+
android/app/libs
42+
*.keystore
43+
44+
# fastlane
45+
#
46+
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
47+
# screenshots whenever they are needed.
48+
# For more information about the recommended setup visit:
49+
# https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md
50+
51+
fastlane/report.xml
52+
fastlane/Preview.html
53+
fastlane/screenshots

‎exemples/.watchmanconfig‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎exemples/TvShow.js‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import React, { Component } from 'react';
2+
import {
3+
StyleSheet,
4+
Text,
5+
View,
6+
Image,
7+
Dimensions,
8+
StatusBar
9+
} from 'react-native';
10+
11+
import HeaderImageScrollView from 'react-native-image-header-scroll-view';
12+
import tvShowContent from './assets/tvShowContent';
13+
14+
15+
const TvShow = () => (
16+
<View style={{ flex:1 }}>
17+
<StatusBar barStyle="light-content" />
18+
<HeaderImageScrollView
19+
maxHeight={200}
20+
minHeight={50}
21+
renderHeader={() => (
22+
<Image source={tvShowContent.image} style={styles.image} />
23+
)}
24+
>
25+
<View style={styles.section}>
26+
<Text style={styles.title}>
27+
<Text style={styles.name}>{tvShowContent.title}</Text>, ({tvShowContent.year})
28+
</Text>
29+
</View>
30+
<View style={styles.section}>
31+
<Text style={styles.sectionTitle}>Overview</Text>
32+
<Text style={styles.sectionContent}>{tvShowContent.overview}</Text>
33+
</View>
34+
<View style={styles.section}>
35+
<Text style={styles.sectionTitle}>Keywords</Text>
36+
<View style={styles.keywords}>
37+
{tvShowContent.keywords.map((keyword) => (
38+
<View style={styles.keywordContainer} key={keyword}>
39+
<Text style={styles.keyword}>{keyword}</Text>
40+
</View>
41+
))}
42+
</View>
43+
</View>
44+
</HeaderImageScrollView>
45+
</View>
46+
);
47+
48+
const styles = StyleSheet.create({
49+
image: {
50+
height: 200,
51+
width: Dimensions.get('window').width,
52+
alignSelf: 'stretch',
53+
resizeMode: 'cover',
54+
},
55+
title: {
56+
fontSize: 20,
57+
},
58+
name: {
59+
fontWeight: 'bold',
60+
},
61+
section: {
62+
padding: 20,
63+
borderBottomWidth: 1,
64+
borderBottomColor: '#cccccc',
65+
},
66+
sectionTitle: {
67+
fontSize: 18,
68+
fontWeight: 'bold',
69+
},
70+
sectionContent: {
71+
fontSize: 16,
72+
textAlign: 'justify',
73+
},
74+
keywords: {
75+
flexDirection: 'row',
76+
justifyContent: 'flex-start',
77+
alignItems: 'flex-start',
78+
flexWrap: 'wrap',
79+
},
80+
keywordContainer: {
81+
backgroundColor: '#999999',
82+
borderRadius: 10,
83+
margin: 10,
84+
padding: 10,
85+
},
86+
keyword: {
87+
fontSize: 16,
88+
color: 'white',
89+
},
90+
});
91+
92+
export default TvShow;

‎exemples/__tests__/index.android.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import 'react-native';
2+
import React from 'react';
3+
import Index from '../index.android.js';
4+
5+
// Note: test renderer must be required after react-native.
6+
import renderer from 'react-test-renderer';
7+
8+
it('renders correctly', () => {
9+
const tree = renderer.create(
10+
<Index />
11+
);
12+
});

0 commit comments

Comments
 (0)