react-native-screens-swiper

Simple screens' swiper library with scrollable or static tab navigation. Fully supported on iOS and Android.

Scrollable Pills	Static Pills

:grey_exclamation: Attention :grey_exclamation:

We working on the new version of swiper ! In new version we will make:

1. Fix all problems of our sticky header container with childrens to make it more looks like in instagram profile. :fire:
2. Cleanup and simplify huge part of components. :fire:
3. New animation for nav. :fire:
4. TypeScript support. :fire:
5. Big docs. update for better understanding and user experience.

:collision: For now it is all ! But if you have any proposal about performance or improvements of this lib. just write to us. :collision:

New version will be available shortly :watch:

Installation

expo: expo install react-native-screens-swiper
npm: npm i react-native-screens-swiper
yarn: yarn add react-native-screens-swiper

Basic usage

1import Swiper from "react-native-screens-swiper";
2import FirstScreen from "./FirstScreen";
3import SecondScreen from "./SecondScreen";
4
5export default function YourComponent() {
6    /**
7     * Create an array with your screens' data - title, component and additional props.
8     * Title is a string to be put inside of pill.
9     * Props is an object with additional data for a particular screen.
10     * Component can be either React component, render function or JSX element.
11     * If it is a component or function, it will receive above-mentioned props and additional 'index' props
12     */
13    const data = [
14        {
15            tabLabel: 'Valid component in form of JSX element',
16            component: <FirstScreen/>,
17        },
18        {
19            tabLabel: 'Valid component in form of React component',
20            component: SecondScreen,
21            props: {}, // (optional) additional props
22        },
23        {
24            tabLabel: 'Valid component in form of render function',
25            component: ({index, ...props}) => {
26                return null;
27            },
28            props: {}, // (optional) additional props
29        },
30    ];
31
32    return (
33        <Swiper
34            data={data}
35            isStaticPills={true}
36            style={styles}
37            // FlatList props
38        />
39    );
40}
41
42// more about styling below
43const styles = {};

Custom styling

1export default function App() {
2    return (
3        <Swiper 
4            data={data}
5            style={styles}
6        />
7    );
8}
9
10const styles = {
11    // [View] Pills container
12    pillContainer: {},
13
14    // [View] Static pills container
15    staticPillsContainer: {},
16
17    // [View] Button
18    pillButton: {},
19
20    // [View] Active button
21    pillActive: {},
22    
23    // [Text] Button's text
24    pillLabel: {},
25    
26    // [Text] Active button's text
27    activeLabel: {},
28    
29    // [View] Border of active pill (:warning: opacity will override animation's opacity)
30    borderActive: {},
31    
32    // [View] Overflow container for pills container
33    pillsOverflow: {
34       // Needed if you want to add only bottom shadow
35       // Just add the shadow for pillContainer and here add the overflow: 'hidden', and height 
36    }
37};

Example for scrollable pills

1const styles = { 2 pillButton: { 3 backgroundColor: 'white', 4 }, 5 pillActive: { 6 backgroundColor: 'yellow', 7 }, 8 pillLabel: { 9 color: 'gray', 10 }, 11 activeLabel: { 12 color: 'white', 13 }, 14};

Example for static pills

1const styles = { 2 borderActive: { 3 borderColor: 'pink', 4 }, 5 pillLabel: { 6 color: 'gray', 7 }, 8 activeLabel: { 9 color: '#ba2d65', 10 }, 11};

Sticky header and children

You can use sticky header only when scrollableContainer={true} so you need to pass it first. And after adding stickyHeaderEnabled={true} and stickyHeaderIndex={1} you can see the magic !

1<Swiper 2 data={Screens} 3 style={styles} 4 isStaticPills={true} 5 stickyHeaderEnabled={true} 6 scrollableContainer={true} 7 stickyHeaderIndex={1} 8> 9 <View 10 style={{ 11 height: 350, 12 backgroundColor: 'white', 13 }} 14 > 15 // other childrens here 16 17 </View> 18</Swiper>

Props

Below are the props you can pass to the React Component.

Prop	Type	Default	Example	Description
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
isStaticPills	boolean	false	isStaticPills={true}	When you need static navigation without scroll
stickyHeaderEnabled	boolean	false	stickyHeaderEnabled={true}	Can used only with scrollableContainer={true}. Give header possibility to stick to top of the screen.
scrollableContainer	boolean	false	scrollableContainer={true}	Added scrollable container.
children	component		<Swiper><YourComponent/></Swiper>	You can add your own top component in swiper. For example profile info.
style	object		{pillContainer: {backgroundColor: 'black', height: 50}}	The styles object for styling the swiper details. More about styling in Custom styling step.
initialScrollIndex	int		initialScrollIndex={1}	Screen index which will be opened on first open.
stickyHeaderIndex	int		stickyHeaderIndex={1}	An index of child indices determining which children get docked to the top of the screen when scrolling.