1.0.3 • Published 3 years ago
rn-slidetop v1.0.3
rn-slidetop
BUILD SETUP
## Installation
Version 1.0.3
npm install rn-slidetop --save
USAGE
import React from 'react';
import {View, Text, Image} from 'react-native';
import {SlideButton} from 'rn-slidetop';
import {globalStyle, width, height} from '../components/styles';
export default function Check({navigation}) {
function renderFirstItem() {
return (
<View
style={{
justifyContent: 'center',
alignItems: 'center',
flex:1,
// top: width / 4,
}}>
<Image
source={require('../../assets/notfound.jpg')}
style={{
justifyContent: 'center',
height: height * 0.5,
resizeMode: 'center',
top: height / 7,
}}
/>
{/* <Text>hello render 1</Text> */}
</View>
);
}
function renderSecondItem() {
return (
<View
style={{
justifyContent: 'center',
alignItems: 'center',
top: width / 4,
}}>
<Text>Hello world2</Text>
</View>
);
}
function renderThirdItem() {
return (
<View
style={{
justifyContent: 'center',
alignItems: 'center',
top: width / 4,
}}>
<Text>Hello world3</Text>
<Text>I Just Built this package</Text>
</View>
);
}
function renderFourthItem() {
return (
<View
style={{
justifyContent: 'center',
alignItems: 'center',
top: width / 4,
}}>
<Text>Hello world4</Text>
<Text>I am Software Engineer</Text>
</View>
);
}
function renderFiveItem() {
return (
<View
style={{
justifyContent: 'center',
alignItems: 'center',
top: width / 4,
}}>
<Text>Hello world 5</Text>
<Text>I am Software Engineer</Text>
</View>
);
}
function renderSixItem() {
return (
<View
style={{
justifyContent: 'center',
alignItems: 'center',
top: width / 4,
}}>
<Text>Hello world 6</Text>
<Text>I am Software Engineer</Text>
</View>
);
}
function renderSevenItem() {
return (
<View
style={{
justifyContent: 'center',
alignItems: 'center',
top: width / 4,
}}>
<Text>Hello world 7</Text>
<Text>I am Software Engineer</Text>
</View>
);
}
function renderEighItem() {
return (
<View
style={{
justifyContent: 'center',
alignItems: 'center',
top: width / 4,
}}>
<Text>Hello world 8</Text>
<Text>I am Software Engineer</Text>
</View>
);
}
const data = ['article', 'foto','question','filter','request','data','Isee','filter',];
return (
<View style={{flex:1}}>
<SlideButton
title={data}
renderFirstItem={renderFirstItem}
renderSecondItem={renderSecondItem}
renderThirdItem={renderThirdItem}
renderFourthItem={renderFourthItem}
renderFiveItem={renderFiveItem}
renderSixItem={renderSixItem}
renderSevenItem={renderSevenItem}
renderEighItem={renderEighItem}
buttonColor='red'
/>
</View>
);
}
Current API(Property)
Property | Type | Description |
---|---|---|
renderFirstItem | function (required) | render component |
renderSecondItem | function (required) | render component |
renderThirdItem | function (required) | render component |
renderForthItem | function (required) | render component |
renderFiveItem | function (required) | render component |
renderSixItem | function (required) | render component |
renderSevenItem | function (optional) | render component |
renderEightItem | function (optional) | render component |
title | PropTypes.Array (required) | button title |
buttonColor | PropTypes.String (optional) | color for button |
note : the amount of render item must same with the length of title.
title must have length at least 6 and maximum 8 no animation move on this package, if you want to use animation ,better using https://www.npmjs.com/package/rn-topbutton-animation
Project Documentation
- Author Account
Arwy Syahputra Siregar
github.com/arwysyah