1.2.0 • Published 3 years ago
react-native-swiper-view v1.2.0
Demo
Quick Start
import React from "react";
import { Text } from "react-native";
import ScrollTabView from "./src";
const textStyle = { color: "#f57791", fontSize: 50 };
const App = () => {
return (
<ScrollTabView
tabList={[
{ name: "ALL", component: <Text style={textStyle}>ALL</Text> },
{
name: "SKIN CARE",
component: <Text style={textStyle}>SKIN CARE</Text>,
},
{ name: "MAKE UP", component: <Text style={textStyle}>MAKE UP</Text> },
{
name: "CLEANSING",
component: <Text style={textStyle}>CLEANSING</Text>,
},
{ name: "MASK", component: <Text style={textStyle}>MASK</Text> },
{ name: "BODY", component: <Text style={textStyle}>BODY</Text> },
{ name: "HAIR", component: <Text style={textStyle}>HAIR</Text> },
{ name: "NEW", component: <Text style={textStyle}>NEW</Text> },
{ name: "BEST", component: <Text style={textStyle}>BEST</Text> },
{ name: "BRAND", component: <Text style={textStyle}>BRAND</Text> },
{ name: "EVENT", component: <Text style={textStyle}>EVENT</Text> },
]}
/>
);
};
Options
Prop | Default | Type | Description |
---|---|---|---|
tabList | [] | Tab[] | Tab and view pair object array { name:'', component: '' } |
tabHeaderStyles | {} | object | Tab header style |
tabButtonStyles | {} | object | Tab button style |
tabButtonActiveStyles | {} | object | Tab button style (selected) |
tabButtonTextStyles | {} | object | Tab button text style |
tabButtonTextActiveStyles | {} | object | Tab button text style (selected) |
tabBarContainerStyles | {} | object | Tab bar container style |
tabBarLineStyles | {} | object | Tab bar line style |
tabBarStyles | {} | object | Tab bar style |
<View>
<View style={tabHeaderStyles}>
<ScrollView>
<View>
<TouchableOpacity
style={
isSelected
? [tabButtonStyles, tabButtonActiveStyles]
: [tabButtonStyles]
}
>
<Text
style={
isSelected
? [tabButtonTextStyles, tabButtonTextActiveStyles]
: [tabButtonTextStyles]
}
></Text>
</TouchableOpacity>
</View>
<View style={tabBarContainerStyles}>
<View style={tabBarLineStyles}></View>
<View style={tabBarStyles}></View>
</View>
</ScrollView>
</View>
</View>