Skip to content

Commit b1d810c

Browse files
committed
Merge branch 'master' of https://github.com/GeorgeHop/react-native-swiper into master
2 parents f4eca8d + cef12a7 commit b1d810c

File tree

1 file changed

+32
-1
lines changed

1 file changed

+32
-1
lines changed

README.md

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,19 +147,50 @@ const styles = {
147147
},
148148
};
149149
```
150-
151150
</td>
152151
<td>
153152
<img src="https://user-images.githubusercontent.com/47904385/112871240-5b4f2980-90bf-11eb-9f15-d9673f247ad6.gif" alt="drawing" height="500"/>
154153
</td>
155154
</tr>
156155
</table>
157156

157+
### Sticky header and children
158+
<table>
159+
<tr>
160+
<td>
161+
162+
```JS
163+
<Swiper
164+
data={Screens}
165+
style={styles}
166+
isStaticPills={true}
167+
stickyHeaderEnabled={true}
168+
>
169+
<View
170+
style={{
171+
height: 350,
172+
backgroundColor: 'white',
173+
}}
174+
>
175+
// other childrens here
176+
177+
</View>
178+
</Swiper>
179+
```
180+
</td>
181+
<td>
182+
<img src="https://user-images.githubusercontent.com/47904385/116812046-da1b0480-ab4c-11eb-9b9b-46e37611c0c2.gif" alt="drawing" height="500"/>
183+
</td>
184+
</tr>
185+
</table>
186+
158187
## Props
159188
Below are the props you can pass to the React Component.
160189

161190
| Prop | Type | Default | Example | Description |
162191
| ------------- | ------------- | ------------- | ------------- | ------------- |
163192
| data | array | | [{component: 'your first screen component', tabLabel: 'first screen tabLabel'}, {component: 'your second screen component', tabLabel: 'second screen tabLabel'}] | Put array of screens with tab labels for displaying inside the component |
164193
| isStaticPills | boolean | false | isStaticPills={true} | When you need static navigation without scroll |
194+
| stickyHeaderEnabled | boolean | false | stickyHeaderEnabled={true} | Give header possibility to stick to top of the screen. |
195+
| children | component | | ``` <Swiper><YourComponent/></Swiper> ``` | You can add your own top component in swiper. For example profile info. |
165196
| style | object | | {pillContainer: {backgroundColor: 'black', height: 50}} | The styles object for styling the swiper details. More about styling in Custom styling step.|

0 commit comments

Comments
 (0)