slide-rn v1.0.3

Project in development process

slide-rn is an Simple module to React Native

Install

  yarn add slide-rn

View

Usage

  import SlideRN from 'slide-rn';

Props:

• slideAuto: type boolean run slide auto
• time: type number, duration between each transiction in miliseconds
• slideAmount: type number, amount of slide or item.
• render: component that will be rendered
• nextStep: boolean, pass the value true to pass to next item
• scrollBall: show or not scroll
• activeColor: color of scroll
• disabledColor: color when item not is active.
• containerStyle: an objeto of style from StyleSheet to apply style in container,
• height: number,
• style?: an objeto of style from StyleSheet,

Code Example:

import React, { useState } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import SlideRN from 'slide-rn';

export default function () {
  const [nextStep, setNextStep] = useState(false);

  function next() {
    setNextStep(true);
    setTimeout(() => {
      setNextStep(false);
    }, 100);
  }
  return (
    <>
      <SlideRN
        render={
          <>
            <View>
              <Text>Text Example</Text>
            </View>

            <View>
              <Text>Text Example</Text>
            </View>

            <View>
              <Text>Text Example</Text>
            </View>
          </>
        }
        containerStyle={styles.slider}
        slideAmount={3}
        scrollBall={true}
        activeColor="blue"
        disabledColor="white"
        slideAuto={false}
        nextStep={nextStep}
        time={2000}
      />
      <TouchableOpacity onPress={next}>
        <Text>Next</Text>
      </TouchableOpacity>
    </>
  );
}

Author

👤 Marcelo Silva

• Twitter: @marcelxsilva
• Github: @marcelxsilva

Show your support

Give a ⭐️ if this project helped you!