rn-slidetop

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

Copyright ©

by Arwy Syahputra Siregar