Skip to content

Commit

Permalink
update demos
Browse files Browse the repository at this point in the history
  • Loading branch information
@z4o4z
z4o4z committed Sep 28, 2017
1 parent 7f2fefe commit b59d0e9
Show file tree
Hide file tree
Showing 14 changed files with 111 additions and 60 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Expand Up @@ -12,7 +12,7 @@ $ npm install @monterosa/react-native-elastic-stack --save

## Demo

| ![](./demo/demo-1.gif) | ![](./demo/demo-2.gif) | ![](./demo/demo-3.gif) | ![](./demo/demo-4.gif) |
| ![](./demo/ios-demo-1.gif) | ![](./demo/ios-demo-2.gif) | ![](./demo/ios-demo-3.gif) | ![](./demo/ios-demo-4.gif) |

## Basic Usage

Expand Down
Binary file removed demo/demo-1.gif
View file
Binary file not shown.
Binary file removed demo/demo-2.gif
View file
Binary file not shown.
Binary file added demo/ios-demo-1.gif
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file renamed demo/demo-4.gif → demo/ios-demo-2.gif
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file renamed demo/demo-3.gif → demo/ios-demo-3.gif
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo/ios-demo-4.gif
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 16 additions & 16 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 2 additions & 3 deletions package.json
View file
Expand Up @@ -14,8 +14,7 @@
"adb-reverse-7007": "adb reverse tcp:7007 tcp:7007",
"lint": "eslint -c ./.eslintrc ./src/index.js",
"format": "prettier-eslint --write ./src/index.js ./storybook/**/*.js",
"storybook": "storybook start -p 7007",
"storybook-ios": "storybook start -p 7007 -h 10.94.4.147"
"storybook": "storybook start -p 7007"
},
"dependencies": {},
"author": {
Expand All @@ -25,7 +24,7 @@
},
"devDependencies": {
"@kadira/react-native-storybook": "^2.0.0",
"@monterosa/react-native-parallax-scroll": "^1.3.2",
"@monterosa/react-native-parallax-scroll": "^1.4.2",
"babel-eslint": "^7.2.2",
"babel-preset-react-native": "1.9.1",
"eslint": "^3.19.0",
Expand Down
2 changes: 1 addition & 1 deletion storybook/index.ios.js
View file
Expand Up @@ -7,5 +7,5 @@ configure(() => {
require('./stories');
}, module);

const StorybookUI = getStorybookUI({ port: 7007, host: '10.94.4.147' });
const StorybookUI = getStorybookUI({ port: 7007, host: 'localhost' });
AppRegistry.registerComponent('ElasticStack', () => StorybookUI);
2 changes: 1 addition & 1 deletion storybook/stories/Card/index.js
View file
Expand Up @@ -7,7 +7,7 @@ import { View, Image, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
wrapper: {
borderRadius: 5,
backgroundColor: '#fff',
backgroundColor: '#515151',
},
image: {
borderRadius: 5,
Expand Down
Binary file added storybook/stories/Wrapper/bg.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
79 changes: 59 additions & 20 deletions storybook/stories/Wrapper/index.js
View file
Expand Up @@ -5,14 +5,16 @@ import { Text, View, Image, Platform, Dimensions, StyleSheet } from 'react-nativ
import ParallaxScroll from '@monterosa/react-native-parallax-scroll';
/* eslint-enable import/no-extraneous-dependencies */

import bg from './bg.png';

const ANDROID_STATUS_BAR_HEIGHT = 24;

const IS_IOS = Platform.OS === 'ios';

const window = Dimensions.get('window');
const styles = StyleSheet.create({
wrapper: {
backgroundColor: '#eee',
backgroundColor: 'rgba(0,0,0,0.5)',
},
header: {
flex: 1,
Expand All @@ -28,46 +30,83 @@ const styles = StyleSheet.create({
left: 0,
right: 0,
bottom: 0,
opacity: 0.8,
},
background: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
width: null,
height: null,
},
contentContainerStyle: {
width: window.width,
padding: 10,
alignItems: 'center',
justifyContent: 'center',
zIndex: 20,
},
});

const height = window.height - (IS_IOS ? 0 : ANDROID_STATUS_BAR_HEIGHT);

export default function Wrapper({ children, headerImage, parallaxHeight }) {
export default function Wrapper({
children,
headerImage,
disableScroll,
parallaxHeight,
withPaddingBottom,
}) {
const contentContainerStyle = {
minHeight: height - parallaxHeight,
};

return (
<ParallaxScroll
style={styles.wrapper}
height={height}
renderHeader={() => (
<View style={styles.header}>
<Text style={styles.headerText}>Welcome to RN Elastic Stack</Text>
</View>
)}
parallaxHeight={parallaxHeight}
headerBackgroundColor={'rgba(51, 51, 51, 0.6)'}
alwaysBounceVertical={false}
contentContainerStyle={[styles.contentContainerStyle, contentContainerStyle]}
directionalLockEnabled
renderParallaxBackground={() => <Image style={styles.image} source={{ uri: headerImage }} />}
headerFixedBackgroundColor={'rgba(51, 51, 51, 1)'}
>
{children}
</ParallaxScroll>
<View>
<Image style={styles.background} source={bg} />

<ParallaxScroll
style={styles.wrapper}
height={height}
renderHeader={() => (
<View style={styles.header}>
<Text style={styles.headerText}>Welcome to RN Elastic Stack</Text>
</View>
)}
scrollEnabled={!disableScroll}
parallaxHeight={parallaxHeight}
useNativeDriver
headerBackgroundColor={'rgba(51, 51, 51, 0.6)'}
contentContainerStyle={[
styles.contentContainerStyle,
contentContainerStyle,
{ paddingBottom: withPaddingBottom ? 200 : 0 },
]}
directionalLockEnabled
renderParallaxBackground={() => (
<Image style={styles.image} source={{ uri: headerImage }} />
)}
headerFixedBackgroundColor={'rgba(51, 51, 51, 1)'}
parallaxBackgroundScrollSpeed={withPaddingBottom ? 0.5 : 5}
>

{children}
</ParallaxScroll>
</View>
);
}

Wrapper.defaultProps = {
disableScroll: false,
withPaddingBottom: false,
};

Wrapper.propTypes = {
children: PropTypes.element.isRequired,
headerImage: PropTypes.string.isRequired,
disableScroll: PropTypes.bool,
parallaxHeight: PropTypes.number.isRequired,
withPaddingBottom: PropTypes.bool,
};
49 changes: 31 additions & 18 deletions storybook/stories/index.js
View file
Expand Up @@ -13,13 +13,14 @@ const cardHeight = 300;
const renderCard = url => <Card image={url} width={cardWidth} height={cardHeight} />;

const items = Array.from({ length: 10 }).map(
(_, i) => `http://lorempixel.com/640/480/city/?item=${i}`,
(_, i) => `https://lorempixel.com/640/480/nightlife/?item=${i}`,
);

storiesOf('ParallaxScroll', module)
storiesOf('ElasticStack', module)
.add('Base', () => (
<Wrapper
headerImage={`http://lorempixel.com/640/480/city/?time${Date.now()}`}
headerImage={`https://lorempixel.com/640/480/nightlife/?time${Date.now()}`}
disableScroll
parallaxHeight={45}
>
<ElasticStack
Expand All @@ -38,12 +39,13 @@ storiesOf('ParallaxScroll', module)
))
.add('Infinite', () => (
<Wrapper
headerImage={`http://lorempixel.com/640/480/city/?time${Date.now()}`}
headerImage={`https://lorempixel.com/640/480/nightlife/?time${Date.now()}`}
disableScroll
parallaxHeight={45}
>
<ElasticStack
items={Array.from({ length: 3 }).map(
(_, i) => `http://lorempixel.com/640/480/city/?item=${i}`,
(_, i) => `https://lorempixel.com/640/480/nightlife/?item=${i}`,
)}
infinite
itemWidth={cardWidth}
Expand All @@ -54,7 +56,8 @@ storiesOf('ParallaxScroll', module)
))
.add('Dist of drag is 200', () => (
<Wrapper
headerImage={`http://lorempixel.com/640/480/city/?time${Date.now()}`}
headerImage={`https://lorempixel.com/640/480/nightlife/?time${Date.now()}`}
disableScroll
parallaxHeight={45}
>
<ElasticStack
Expand All @@ -68,7 +71,8 @@ storiesOf('ParallaxScroll', module)
))
.add('Only horizontal swipes', () => (
<Wrapper
headerImage={`http://lorempixel.com/640/480/city/?time${Date.now()}`}
headerImage={`https://lorempixel.com/640/480/nightlife/?time${Date.now()}`}
disableScroll
parallaxHeight={45}
>
<ElasticStack
Expand All @@ -82,7 +86,8 @@ storiesOf('ParallaxScroll', module)
))
.add('Only vertical swipes', () => (
<Wrapper
headerImage={`http://lorempixel.com/640/480/city/?time${Date.now()}`}
headerImage={`https://lorempixel.com/640/480/nightlife/?time${Date.now()}`}
disableScroll
parallaxHeight={45}
>
<ElasticStack
Expand All @@ -96,7 +101,8 @@ storiesOf('ParallaxScroll', module)
))
.add('Reduce scale by 0.1', () => (
<Wrapper
headerImage={`http://lorempixel.com/640/480/city/?time${Date.now()}`}
headerImage={`https://lorempixel.com/640/480/nightlife/?time${Date.now()}`}
disableScroll
parallaxHeight={45}
>
<ElasticStack
Expand All @@ -110,7 +116,8 @@ storiesOf('ParallaxScroll', module)
))
.add('Elastick range is 0.8', () => (
<Wrapper
headerImage={`http://lorempixel.com/640/480/city/?time${Date.now()}`}
headerImage={`https://lorempixel.com/640/480/nightlife/?time${Date.now()}`}
disableScroll
parallaxHeight={45}
>
<ElasticStack
Expand All @@ -122,23 +129,25 @@ storiesOf('ParallaxScroll', module)
/>
</Wrapper>
))
.add('Reduce opacity by 0.3', () => (
.add('Reduce opanightlife by 0.3', () => (
<Wrapper
headerImage={`http://lorempixel.com/640/480/city/?time${Date.now()}`}
headerImage={`https://lorempixel.com/640/480/nightlife/?time${Date.now()}`}
disableScroll
parallaxHeight={45}
>
<ElasticStack
items={items}
itemWidth={cardWidth}
itemHeight={cardHeight}
renderItem={renderCard}
reduceOpacityBy={0.3}
reduceOpanightlifeBy={0.3}
/>
</Wrapper>
))
.add('Active item index is 3', () => (
<Wrapper
headerImage={`http://lorempixel.com/640/480/city/?time${Date.now()}`}
headerImage={`https://lorempixel.com/640/480/nightlife/?time${Date.now()}`}
disableScroll
parallaxHeight={45}
>
<ElasticStack
Expand All @@ -152,7 +161,8 @@ storiesOf('ParallaxScroll', module)
))
.add('Elastick items count is 5', () => (
<Wrapper
headerImage={`http://lorempixel.com/640/480/city/?time${Date.now()}`}
headerImage={`https://lorempixel.com/640/480/nightlife/?time${Date.now()}`}
disableScroll
parallaxHeight={45}
>
<ElasticStack
Expand All @@ -167,7 +177,8 @@ storiesOf('ParallaxScroll', module)
))
.add('With handlers', () => (
<Wrapper
headerImage={`http://lorempixel.com/640/480/city/?time${Date.now()}`}
headerImage={`https://lorempixel.com/640/480/nightlife/?time${Date.now()}`}
disableScroll
parallaxHeight={45}
>
<ElasticStack
Expand All @@ -188,7 +199,8 @@ storiesOf('ParallaxScroll', module)
))
.add('With big header', () => (
<Wrapper
headerImage={`http://lorempixel.com/640/480/city/?time${Date.now()}`}
headerImage={`https://lorempixel.com/640/480/nightlife/?time${Date.now()}`}
disableScroll
parallaxHeight={250}
>
<ElasticStack
Expand All @@ -201,8 +213,9 @@ storiesOf('ParallaxScroll', module)
))
.add('With scroll', () => (
<Wrapper
headerImage={`http://lorempixel.com/640/480/city/?time${Date.now()}`}
headerImage={`https://lorempixel.com/640/480/nightlife/?time${Date.now()}`}
parallaxHeight={450}
withPaddingBottom
>
<ElasticStack
items={items}
Expand Down

0 comments on commit b59d0e9

Please sign in to comment.