Nutritious Pumpkin Masses

    slide-button

    1.0.4 • Public • Published

    SLIDE_BUTTON

    ts

    Node.js



    Arwy Syahputra Siregar's DEV Profile

    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
    

    Copyright ©

    by Arwy Syahputra Siregar

    Install

    npm i slide-button

    DownloadsWeekly Downloads

    0

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    1.18 MB

    Total Files

    9

    Last publish

    Collaborators

    • arwysyah