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