SLIDE_BUTTON

BUILD SETUP

## Installation
Version 1.0.3

npm i slide-button
yarn add slide-button

USAGE

import React from "react";
import { View, Text, Image } from "react-native";
import SlideButton from "slide-button";
import { globalStyle, width, height } from "../styles/index";

export default function Check({ navigation }) {
  function renderFirstItem() {
    return (
      <View
        style={{
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <View
          style={{ height: 200, width: width, backgroundColor: "red" }}
        ></View>
        <Text style={{ color: "black" }}>ARTICLE</Text>
      </View>
    );
  }
  function renderSecondItem() {
    return (
      <View
        style={{
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <View
          style={{ height: 200, width: width, backgroundColor: "blue" }}
        ></View>
        <Text style={{ color: "black" }}>FOTO</Text>
      </View>
    );
  }
  function renderThirdItem() {
    return (
      <View
        style={{
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <View
          style={{ height: 200, width: width, backgroundColor: "green" }}
        ></View>
        <Text style={{ color: "black" }}>QUESTION</Text>
      </View>
    );
  }

  function renderFourthItem() {
    return (
      <View
        style={{
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <View
          style={{ height: 200, width: width, backgroundColor: "yellow" }}
        ></View>
        <Text style={{ color: "black" }}>FILTER</Text>
      </View>
    );
  }
  function renderFiveItem() {
    return (
      <View
        style={{
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <View
          style={{ height: 200, width: width, backgroundColor: "pink" }}
        ></View>
        <Text style={{ color: "black" }}>REQUEST</Text>
      </View>
    );
  }
  function renderSixItem() {
    return (
      <View
        style={{
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <View
          style={{ height: 200, width: width, backgroundColor: "grey" }}
        ></View>
        <Text style={{ color: "black" }}>DATA</Text>
      </View>
    );
  }
  function renderSevenItem() {
    return (
      <View
        style={{
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <View
          style={{ height: 200, width: width, backgroundColor: "brown" }}
        ></View>
        <Text style={{ color: "black" }}>TEST</Text>
      </View>
    );
  }
  function renderEightItem() {
    return (
      <View
        style={{
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <View
          style={{ height: 200, width: width, backgroundColor: "white" }}
        ></View>
        <Text style={{ color: "black" }}>SORT</Text>
      </View>
    );
  }
  const data = [
    "Article",
    "Foto",
    "Question",
    "Filter",
    "Request",
    "Data",
    "Test",
    "Sort",
  ];
  return (
    <View style={{ flex: 1 }}>
      <SlideButton
        title={data}
        renderFirstItem={renderFirstItem}
        renderSecondItem={renderSecondItem}
        renderThirdItem={renderThirdItem}
        renderFourthItem={renderFourthItem}
        renderFiveItem={renderFiveItem}
        renderSixItem={renderSixItem}
        renderSevenItem={renderSevenItem}
        renderEightItem={renderEightItem}
        buttonColor="blue"
        headerHeight={100}
      />
    </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 | Array (required) | button title | | buttonColor | string (optional) | color for button | | headerHeight | number | optional |

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

Project Documentation

• Author Account

Arwy Syahputra Siregar
github.com/arwysyah