react-native-scrollable-tab-menu
A variation of 'react-native-scrollable-tab-view' with a menu interface.
Installation
with yarn:
yarn add react-native-scrollable-tab-view
yarn add react-native-linear-gradient
react-native link
With npm:
npm install --save react-native-scrollable-tab-view
npm install --save react-native-linear-gradient
react-native link
Simple Usage
import ScrollableTabMenu from 'react-native-scrollable-tab-menu'
...
render() {
return (
<ScrollableTabMenu>
<Component1 title={"Rook"}/>
<Component2 title={"Bishop"}/>
<Component3 title={"Queen}/>
<Component4 title={"King"}/>
<Component5 title={"Pawn"}/>
</ScrollableTabMenu>
)
}
...
Usage With Custom Props
import ScrollableTabMenu from 'react-native-scrollable-tab-menu'
...
render() {
return (
<ScrollableTabMenu
locations={[0.0, 0.5, 1.0]}
colors={["transparent", "white", "blue"]} tabColor="red"
backgroundImage={require('../images/myImage1.png')}
menuBackgroundColor={Scheme.white(1.0)}
menuImage={require('../images/myImage2.png')}
menuFontStyle={{color: "red", fontSize: 20}}
tabColor={"gray"}
>
<Component1 title={"Basketball"}/>
<Component2 title={"Baseball"}/>
<Component3 title={"Hockey}/>
<Component4 title={"Football"}/>
<Component5 title={"Soccer"}/>
</ScrollableTabMenu>
)
}
...
PropTypes
menuImage PropTypes.any
backgroundImage PropTypes.any
tabColor PropTypes.string
menuFontStyle Text.propTypes.style
menuContainerStyle View.propTypes.style
menuGradientlocations PropTypes.array
menuGradientColors PropTypes.array
blendDuration React.PropTypes.number
isAnimated React.PropTypes.bool