Skip to content

Commit bb84c4b

Browse files
RichardRNStudioRichardRNStudio
authored
Update README.md
1 parent 8629cd6 commit bb84c4b

File tree

1 file changed

+32
-189
lines changed

1 file changed

+32
-189
lines changed

‎README.md‎

Lines changed: 32 additions & 189 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,7 @@ yarn example android
4242

4343
<h3>Basic example</h3>
4444

45-
<p>Make your own data array and pass it to <b>SliderIntro</b>.</p>
46-
47-
```js
45+
```ts
4846
import React from 'react';
4947
import SliderIntro from 'react-native-slider-intro';
5048

@@ -77,192 +75,37 @@ export default BasicExample;
7775

7876
<h2>Properties</h2>
7977

80-
<table>
81-
<thead align="center">
82-
<tr>
83-
<td width="25%"><b>Name</b></td>
84-
<td width="25%"><b>Type</b></td>
85-
<td width="25%"><b>Default value</b></td>
86-
<td width="25%"><b>Description</b></td>
87-
</tr>
88-
</thead>
89-
<tbody>
90-
<tr>
91-
<td>data</td>
92-
<td><b>array</b></td>
93-
<td>none, <b><i>required</i></b></td>
94-
<td>Array of objects, which represents your slider items. Each item should contain a unique <i>key</i>.</td>
95-
</tr>
96-
<tr>
97-
<td>renderItem</td>
98-
<td><b>function</b></td>
99-
<td>Default item renderer</td>
100-
<td></td>
101-
</tr>
102-
<tr>
103-
<td>navigationBarBottom</td>
104-
<td><b>number</b></td>
105-
<td>0</td>
106-
<td>Custom value of dot navigation container bottom position</td>
107-
</tr>
108-
<tr>
109-
<td>navigationBarHeight</td>
110-
<td><b>number</b></td>
111-
<td>70</td>
112-
<td>Height of dot navigation container</td>
113-
</tr>
114-
<tr>
115-
<td>animateSlideSpeed</td>
116-
<td><b>number</b></td>
117-
<td>15</td>
118-
<td>Speed of slider animation</td>
119-
</tr>
120-
<tr>
121-
<td>navContainerMaxSizePercent</td>
122-
<td><b>number</b></td>
123-
<td>0.5</td>
124-
<td>Percent value of navigation container's width</td>
125-
</tr>
126-
<tr>
127-
<td>dotWidth</td>
128-
<td><b>number</b></td>
129-
<td>12</td>
130-
<td>The radius of the 'dot' circle of navigation</td>
131-
</tr>
132-
<tr>
133-
<td>fixDotOpacity</td>
134-
<td><b>number</b></td>
135-
<td>0.35</td>
136-
<td>Each dots opacity which don't have animation</td>
137-
</tr>
138-
<tr>
139-
<td>fixDotBackgroundColor</td>
140-
<td><b>string</b></td>
141-
<td>grey</td>
142-
<td>Each dots background which don't have an animation</td>
143-
</tr>
144-
<tr>
145-
<td>animatedDotBackgroundColor</td>
146-
<td><b>string</b></td>
147-
<td>white</td>
148-
<td>Each dots background which have an animation</td>
149-
</tr>
150-
<tr>
151-
<td>animateDotSpeed</td>
152-
<td><b>number</b></td>
153-
<td>8</td>
154-
<td>Speed of dot animation</td>
155-
</tr>
156-
<tr>
157-
<td>animateDotBouncing</td>
158-
<td><b>number</b></td>
159-
<td>2</td>
160-
<td>The 'bounciness' value of all animations. (<a href="https://reactnative.dev/docs/animated#spring">https://reactnative.dev/docs/animated#spring</a>)</td>
161-
</tr>
162-
<tr>
163-
<td>hasReactNavigation</td>
164-
<td><b>boolean</b></td>
165-
<td>false</td>
166-
<td>There is a trouble with backButton behaviour when you're using react-navigation. You should use <b>useFocusEffect</b> in this case for reach the expected behaviour. More info: <a href="https://reactnavigation.org/docs/custom-android-back-button-handling/#why-not-use-component-lifecycle-methods">https://reactnavigation.org/docs/custom-android-back-button-handling/#why-not-use-component-lifecycle-methods</a></td>
167-
</tr>
168-
<tr>
169-
<td>useCustomBackHandlerEffect</td>
170-
<td><b>function</b></td>
171-
<td>none</td>
172-
<td>As I mentioned above, sometimes we should rewrite the basic <b>backHandler</b> behaviour. This property will be a custom hook. See the example for more info: <a href="https://github.com/RichardRNStudio/react-native-slider-intro/blob/main/example/src/ReactNavigationExample.js">React navigation custom hook example</a></td>
173-
</tr>
174-
<tr>
175-
<td>backHandlerBehaviour</td>
176-
<td><b>string</b></td>
177-
<td>activeMinusOne</td>
178-
<td>This prop can controls the backButton behaviour. The value should be <i>activeMinusOne</i> or 'previous'</td>
179-
</tr>
180-
<tr>
181-
<td>skipLabel</td>
182-
<td><b>string</b></td>
183-
<td>Skip</td>
184-
<td>Custom label of skip button</td>
185-
</tr>
186-
<tr>
187-
<td>nextLabel</td>
188-
<td><b>string</b></td>
189-
<td>Next</td>
190-
<td>Custom label of next button</td>
191-
</tr>
192-
<tr>
193-
<td>doneLabel</td>
194-
<td><b>string</b></td>
195-
<td>Done</td>
196-
<td>Custom label of done button</td>
197-
</tr>
198-
<tr>
199-
<td>renderSkipButton</td>
200-
<td><b>function</b></td>
201-
<td>Default skip/previous button renderer</td>
202-
<td>Use to supply your own skip/previous button.</td>
203-
</tr>
204-
<tr>
205-
<td>renderNextButton</td>
206-
<td><b>function</b></td>
207-
<td>Default next button renderer</td>
208-
<td>Use to supply your own next button.</td>
209-
</tr>
210-
<tr>
211-
<td>renderDoneButton</td>
212-
<td><b>function</b></td>
213-
<td>Default done button renderer</td>
214-
<td>Use to supply your own done button.</td>
215-
</tr>
216-
<tr>
217-
<td>onDone</td>
218-
<td><b>function</b></td>
219-
<td>none</td>
220-
<td>Behaviour of done button</td>
221-
</tr>
222-
<tr>
223-
<td>onSkip</td>
224-
<td><b>function</b></td>
225-
<td>none</td>
226-
<td>Behaviour of skip button</td>
227-
</tr>
228-
<tr>
229-
<td>showLeftButton</td>
230-
<td><b>boolean</b></td>
231-
<td>true</td>
232-
<td>Show skip or previous button on the left side</td>
233-
</tr>
234-
<tr>
235-
<td>leftButtonType</td>
236-
<td><b>string</b></td>
237-
<td>skip</td>
238-
<td>The button type on the left side should be <b>skip</b> or <b>previous</b></td>
239-
</tr>
240-
<tr>
241-
<td>columnButtonStyle</td>
242-
<td><b>boolean</b></td>
243-
<td>false</td>
244-
<td>Buttons will show up in a column</td>
245-
</tr>
246-
<tr>
247-
<td>showStatusBar</td>
248-
<td><b>boolean</b></td>
249-
<td>false</td>
250-
<td>Show status bar on top of screen. Otherwise, you can make your own status bar outside of this component</td>
251-
</tr>
252-
<tr>
253-
<td>statusBarColor</td>
254-
<td><b>string</b></td>
255-
<td>#febe29</td>
256-
<td>Background color of status bar</td>
257-
</tr>
258-
<tr>
259-
<td>renderStatusBar</td>
260-
<td><b>function</b></td>
261-
<td>Default status bar renderer</td>
262-
<td>Use to supply your own status bar component.</td>
263-
</tr>
264-
</tbody>
265-
</table>
78+
| Name | Type | Default value | Description |
79+
| ---------------------------- | -------- | ------------------------------------- | -------------------------------------------------------------------------------------------- |
80+
| `data` | array | none, required | Array of objects, which represents your slider items. Each item should contain a unique key. |
81+
| `renderItem` | function | default item renderer | |
82+
| `navigationBarBottom` | number | 0 | Custom value of dot navigation container bottom position |
83+
| `navigationBarHeight` | number | 70 | Height of dot navigation container |
84+
| `animateSlideSpeed` | number | 15 | Speed of slider animation |
85+
| `navContainerMaxSizePercent` | number | 0.5 | Percent value of navigation container's width |
86+
| `dotWidth` | number | 12 | The radius of the 'dot' circle of navigation |
87+
| `fixDotOpacity` | number | 0.35 | Each dots opacity which don't have animation |
88+
| `fixDotBackgroundColor` | color | grey | Each dots background which don't have an animation |
89+
| `animatedDotBackgroundColor` | color | white | Each dots background which have an animation |
90+
| `animateDotSpeed` | number | 8 | Speed of dot animation |
91+
| `animateDotBouncing` | number | 2 | The 'bounciness' value of all animations. https://reactnative.dev/docs/animated#spring |
92+
| `hasReactNavigation` | boolean | false | There is a trouble with backButton behaviour when you're using react-navigation. You should use `useFocusEffect` in this case for reach the expected behaviour. More info: https://reactnavigation.org/docs/custom-android-back-button-handling/#why-not-use-component-lifecycle-methods |
93+
| `useCustomBackHandlerEffect` | function | none | As I mentioned above, sometimes we should rewrite the basic <b>backHandler</b> behaviour. This property will be a custom hook. See the example for more info: <a href="https://github.com/RichardRNStudio/react-native-slider-intro/blob/main/example/src/ReactNavigationExample.js">React navigation custom hook example</a>|
94+
| `backHandlerBehaviour` | string | activeMinusOne | This prop can controls the backButton behaviour. The value should be `activeMinusOne` or `previous`|
95+
| `skipLabel` | string | Skip | Custom label of skip button |
96+
| `nextLabel` | string | Next | Custom label of next button |
97+
| `doneLabel` | string | Done | Custom label of done button |
98+
| `renderSkipButton` | function | Default skip/previous button renderer | Use to supply your own skip/previous button |
99+
| `renderNextButton` | function | Default next button renderer | Use to supply your own next button |
100+
| `renderDoneButton` | function | Default done button renderer | Use to supply your own done button |
101+
| `onDone` | function | none | Behaviour of done button |
102+
| `onSkip` | function | none | Behaviour of skip button |
103+
| `showLeftButton` | boolean | true | Show skip or previous button on the left side |
104+
| `leftButtonType` | string | skip | The button type on the left side should be `skip` or `previous` |
105+
| `columnButtonStyle` | boolean | false | Buttons will show up in a column |
106+
| `showStatusBar` | boolean | false | Show status bar on top of screen. You can make your own status bar outside of this component |
107+
| `statusBarColor` | color | #febe29 | Background color of status bar |
108+
| `renderStatusBar` | function | Default status bar renderer | Use to supply your own status bar component |
266109

267110
<h2>Examples</h2>
268111
<ul>

0 commit comments

Comments
 (0)