react-native-screens-swiper

❕ Attention ❕

Installation

Basic usage

import Swiper from "react-native-screens-swiper";
import FirstScreen from "./FirstScreen";
import SecondScreen from "./SecondScreen";
export default function YourComponent() {
 /**
 * Create an array with your screens' data - title, component and additional props.
 * Title is a string to be put inside of pill.
 * Props is an object with additional data for a particular screen.
 * Component can be either React component, render function or JSX element.
 * If it is a component or function, it will receive above-mentioned props and additional 'index' props
 */
 const data = [
 {
 tabLabel: 'Valid component in form of JSX element',
 component: <FirstScreen/>,
 },
 {
 tabLabel: 'Valid component in form of React component',
 component: SecondScreen,
 props: {}, // (optional) additional props
 },
 {
 tabLabel: 'Valid component in form of render function',
 component: ({index, ...props}) => {
 return null;
 },
 props: {}, // (optional) additional props
 },
 ];
 return (
 <Swiper
 data={data}
 isStaticPills={true}
 style={styles}
 // FlatList props
 />
 );
}
// more about styling below
const styles = {};

Custom styling

export default function App() {
 return (
 <Swiper 
 data={data}
 style={styles}
 />
 );
}
const styles = {
 // [View] Pills container
 pillContainer: {},
 // [View] Static pills container
 staticPillsContainer: {},
 // [View] Button
 pillButton: {},
 // [View] Active button
 pillActive: {},
 
 // [Text] Button's text
 pillLabel: {},
 
 // [Text] Active button's text
 activeLabel: {},
 
 // [View] Border of active pill (:warning: opacity will override animation's opacity)
 borderActive: {},
 
 // [View] Overflow container for pills container
 pillsOverflow: {
 // Needed if you want to add only bottom shadow
 // Just add the shadow for pillContainer and here add the overflow: 'hidden', and height 
 }
};

Example for scrollable pills

Example for static pills

Sticky header and children

Props