Skip to content

Commit fd26e52

Browse files
Monte9Monte9
committedMay 18, 2017
init repo; added readme
1 parent 85db579 commit fd26e52

File tree

6 files changed

+160
-2
lines changed

6 files changed

+160
-2
lines changed
 

‎.babelrc

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"presets": [
3+
"react-native"
4+
]
5+
}

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
.DS_Store
3+
*.log

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2017 Monte Thakkar
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.

‎README.md

+74-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,74 @@
1-
# react-native-scroll-view
2-
The Parallax ScrollView component we all deserve. :rocket:
1+
<p align="center">
2+
<a href="https://github.com/Monte9/react-native-scroll-view">
3+
<img alt="react-native-scroll-view" src="" width="450">
4+
</a>
5+
</p>
6+
7+
<p align="center">
8+
The (Parallax) ScrollView component we all deserve. :rocket:
9+
</p>
10+
11+
<p align="center">
12+
<a href="https://www.npmjs.com/package/react-native-scroll-view"><img src="https://img.shields.io/npm/v/react-native-scroll-view.svg?style=flat-square"></a>
13+
<a href="https://www.npmjs.com/package/react-native-scroll-view"><img src="https://img.shields.io/npm/dm/react-native-scroll-view.svg?style=flat-square"></a>
14+
</p>
15+
16+
## Demo
17+
18+
![Demo gif]()
19+
20+
## Installation
21+
22+
Install the package using yarn or npm:
23+
24+
```yarn add react-native-scroll-view``` or ```npm i react-native-scroll-view```
25+
26+
## Usage
27+
28+
``` js
29+
import ParallaxScrollView from 'react-native-scroll-view';
30+
31+
<ParallaxScrollView />
32+
```
33+
34+
## API
35+
36+
| prop | default | type | description |
37+
| ---- | ---- | ----| ---- |
38+
| **onFinishRating** | none | function | Callback method when the user finishes rating. Gives you the final rating value as a whole number **(required)** |
39+
| type | star | string | Choose one of the built-in types: `star`, `rocket`, `bell`, `heart` or use type `custom` to render a custom image (optional) |
40+
| ratingImage | star | string | Pass in a custom image source; use this along with `type='custom'` prop above (optional) |
41+
| ratingColor | #f1c40f | string (color) | Pass in a custom fill-color for the rating icon; use this along with `type='custom'` prop above (optional) |
42+
| ratingBackgroundColor | white | string (color) | Pass in a custom background-fill-color for the rating icon; use this along with `type='custom'` prop above (optional) |
43+
| ratingCount | 5 | number | The number of rating images to display (optional) |
44+
| imageSize | 50 | number | The size of each rating image (optional) |
45+
| showRating | none | boolean | Displays the Built-in Rating UI to show the rating value in real-time (optional) |
46+
| style | none | function | Exposes style prop to add additonal styling to the container view (optional) |
47+
48+
49+
## Try it out
50+
51+
You can try it out with Exponent [here](https://exp.host/@monte9/react-native-graphql-todolist).
52+
53+
### Example
54+
55+
Look at the [`example`](https://github.com/Monte9/react-native-scroll-view/tree/master/example) folder to run the expo app locally.
56+
57+
## Motivation
58+
59+
There are only two packages that provide a similar parallax scroll view ([here](https://github.com/jaysoo/react-native-parallax-scroll-view) and [here](https://github.com/lelandrichardson/react-native-parallax-view)) and both of them are not maintained.
60+
61+
I really liked [react-native-parallax-view](https://github.com/lelandrichardson/react-native-parallax-view) but there were a coupe things I didn't like about it:
62+
1. It was outdated and not maintained.
63+
2. It didn't have a Sticky NavBar when scrolling
64+
65+
So I set out to create a Parallax ScrollView (using [react-native-parallax-view](https://github.com/lelandrichardson/react-native-parallax-view) as a base) with
66+
1. Sticky headers,
67+
2. Super simple usage
68+
3. Flexible and comprehensive API.
69+
70+
aka it's a (Parallax) ScrollView component for React Native that we truly deserve with. :tada:
71+
72+
## Feedback
73+
74+
This repo is being actvely manitained. Feel free to open a new Issue with a `Feature Request` or submit a PR with an `Enhancement`.

‎package.json

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "react-native-scroll-view",
3+
"version": "0.0.1",
4+
"description": "The (Parallax) ScrollView component we all deserve.",
5+
"main": "./src",
6+
"repository": {
7+
"type": "git",
8+
"url": "git+ssh://git@github.com/Monte9/react-native-scroll-view.git"
9+
},
10+
"keywords": [
11+
"react-native",
12+
"reactjs",
13+
"reactnative",
14+
"gestures",
15+
"scrollview",
16+
"ios",
17+
"android",
18+
"parallax",
19+
"ui-components"
20+
],
21+
"scripts": {
22+
"lint": "eslint src/"
23+
},
24+
"peerDependencies": {
25+
"react": "16.0.0-alpha.6"
26+
},
27+
"author": "Monte Thakkar",
28+
"license": "MIT",
29+
"bugs": {
30+
"url": "https://github.com/Monte9/react-native-scroll-view/issues"
31+
},
32+
"homepage": "https://github.com/Monte9/eact-native-scroll-view#readme",
33+
"devDependencies": {
34+
"react": "16.0.0-alpha.6",
35+
"react-native": "https://github.com/expo/react-native/archive/sdk-16.0.0.tar.gz"
36+
}
37+
}

‎src/parallax_scroll_view.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React, { Component } from 'react';
2+
import { StyleSheet, Text, View } from 'react-native';
3+
4+
export default class ParallaxScrollView extends Component {
5+
render() {
6+
return (
7+
<View style={styles.container}>
8+
<Text>Hello World!</Text>
9+
</View>
10+
);
11+
}
12+
}
13+
14+
const styles = StyleSheet.create({
15+
container: {
16+
flex: 1,
17+
justifyContent: 'center',
18+
alignItems: 'center'
19+
}
20+
});

0 commit comments

Comments
 (0)
Please sign in to comment.