Skip to content

Commit 2414c0a

Browse files
author
amoreno
committed
Update dependencies and README.md
1 parent 015d746 commit 2414c0a

File tree

10 files changed

+2375
-258
lines changed

10 files changed

+2375
-258
lines changed

‎2018-09-13_09.10.51.png‎

429 KB
Loading

‎README.md‎

Lines changed: 29 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -13,41 +13,41 @@ $ yarn add react-native-js-app-tutorial
1313
`react-native-js-app-tutorial` has ready templates to show pages. You can import `Slide`, a template prepared to show a slide with a default style. If you prefer, you can provide your own template. Just make sure that it belongs to `IntroSlider` component (as child).
1414

1515
<p align="center">
16-
<img src="./template.png" alt="Stepper" width="400">
16+
<img src="./2018-09-13_09.10.51.png" alt="Stepper" width="340">
1717
</p>
1818

1919
You can also override the default skip button, passing a `skipButton` prop to `IntroSlider`.
2020

2121
```js
2222
/* @flow */
2323

24-
import React, { Component } from 'react'
25-
import { StyleSheet } from 'react-native'
26-
import { IntroSlider, Slide } from 'react-native-js-app-tutorial'
24+
import React, { Component } from 'react';
25+
import { StyleSheet } from 'react-native';
26+
import { IntroSlider, Slide } from 'react-native-js-app-tutorial';
2727

2828
type Props = {
2929
navigator: Object
30-
}
30+
};
3131

3232
class Example extends Component<Props> {
3333
_onSkip = () => {
34-
console.log('onSkip pressed')
35-
}
34+
console.log('onSkip pressed');
35+
};
3636

3737
render() {
3838
return (
3939
<IntroSlider
4040
onSkip={this._onSkip}
4141
activeDotStyle={styles.activeDot}
4242
showSkipButton={true}
43-
skipTitleButton="SALTAR"
44-
skipLastTitleButton="SIGUIENTE"
43+
skipTitleButton="SKIP"
44+
skipLastTitleButton="NEXT"
4545
tintStatusBar={true}
46-
animationType={'Pager'}>
46+
animationType={'Parallax'}>
4747
<Slide
4848
image={{
4949
uri:
50-
'https://www.electricasollerense.es/media/gasb2c/filer_public_thumbnails/filer_public/2014/04/11/fibra-logo-domestica.png__1618x1231_q85_crop_subsampling-2_upscale.png'
50+
'https://images.pexels.com/photos/259600/pexels-photo-259600.jpeg?cs=srgb&dl=architecture-facade-house-259600.jpg&fm=jpg'
5151
}}
5252
title="Welcome"
5353
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel mollis risus. Nam dignissim porttitor suscipit."
@@ -59,7 +59,7 @@ class Example extends Component<Props> {
5959
<Slide
6060
image={{
6161
uri:
62-
'https://www.electricasollerense.es/media/gasb2c/filer_public_thumbnails/filer_public/2014/04/11/fibra-logo-domestica.png__1618x1231_q85_crop_subsampling-2_upscale.png'
62+
'https://images.pexels.com/photos/259600/pexels-photo-259600.jpeg?cs=srgb&dl=architecture-facade-house-259600.jpg&fm=jpg'
6363
}}
6464
title="Welcome 2"
6565
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel mollis risus. Nam dignissim porttitor suscipit."
@@ -71,7 +71,7 @@ class Example extends Component<Props> {
7171
<Slide
7272
image={{
7373
uri:
74-
'https://www.electricasollerense.es/media/gasb2c/filer_public_thumbnails/filer_public/2014/04/11/fibra-logo-domestica.png__1618x1231_q85_crop_subsampling-2_upscale.png'
74+
'https://images.pexels.com/photos/259600/pexels-photo-259600.jpeg?cs=srgb&dl=architecture-facade-house-259600.jpg&fm=jpg'
7575
}}
7676
title="Welcome 3"
7777
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel mollis risus. Nam dignissim porttitor suscipit."
@@ -81,7 +81,7 @@ class Example extends Component<Props> {
8181
descriptionStyle={styles.description}
8282
/>
8383
</IntroSlider>
84-
)
84+
);
8585
}
8686
}
8787

@@ -96,32 +96,27 @@ const styles = StyleSheet.create({
9696
fontFamily: 'Avenir Next'
9797
},
9898
image: {
99-
width: 250,
100-
height: 250
99+
width: '80%',
100+
height: 200
101101
}
102-
})
102+
});
103103

104-
export default Example
104+
export default Example;
105105
```
106106

107107
## API
108108

109-
| Prop | Type | Required | Description |
110-
| :-----------------: | :-----------: | :------: | :-------------------------------------------------------------------------------------------------------------------------------------------: |
111-
| page | number | No | Index of initial page that should be selected |
112-
| onSkip | Function | No | Function to execute when default skip button is pressed |
113-
| activeDotStyle | Object | No | Styles object of active dot at the bottom |
114-
| inactiveDotStyle | Object | No | Styles object of inactive dot at the bottom |
115-
| skipTitleButton | string | No | Title of the skip button |
116-
| skipLastTitleButton | string | No | Title of the skip button when last page is displayed |
117-
| skipButton | React.Element | No | Display a custom skip button component to override the default template |
118-
| animationType | string | No | Choose a predefined animation to apply on ScrollView's children (default: `Pager`, types: Pager, ZoomOut, TranslateY, RotateX, RotateY, Flip) |
119-
| customAnimation | Object | No | Custom animation to apply on ScrollView's children |
120-
121-
## TODO
122-
123-
* [x] Default and custom animations
124-
* [ ] Tests
109+
| Prop | Type | Required | Description |
110+
| :-----------------: | :-----------: | :------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------: |
111+
| page | number | No | Index of initial page that should be selected |
112+
| onSkip | Function | No | Function to execute when default skip button is pressed |
113+
| activeDotStyle | Object | No | Styles object of active dot at the bottom |
114+
| inactiveDotStyle | Object | No | Styles object of inactive dot at the bottom |
115+
| skipTitleButton | string | No | Title of the skip button |
116+
| skipLastTitleButton | string | No | Title of the skip button when last page is displayed |
117+
| skipButton | React.Element | No | Display a custom skip button component to override the default template |
118+
| animationType | string | No | Choose a predefined animation to apply on ScrollView's children (default: `Parallax`, types: Parallax, Pager, ZoomOut, TranslateY, RotateX, RotateY, Flip & FadeIn) |
119+
| customAnimation | Object | No | Custom animation to apply on ScrollView's children |
125120

126121
## License
127122

0 commit comments

Comments
 (0)