rn-slidetop

    1.0.3 • Public • Published

    rn-slidetop

    Node.js



    Arwy Syahputra Siregar's DEV Profile

    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

    Install

    npm i rn-slidetop

    DownloadsWeekly Downloads

    0

    Version

    1.0.3

    License

    ISC

    Unpacked Size

    39.4 kB

    Total Files

    6

    Last publish

    Collaborators

    • arwysyah