victorkvarghese / rn-slider-switch

Multi slider switch component in React Native

Hi there 👋

I'm Victor Varghese, Senior Software Consultant, 7+ years of experience working on bleeding edge front end technologies.

Skills

📝 Top Blog Posts

• Super Cool Material UI components in React Native!
• Building Facebook Messenger Clone in React Native.
• 🐻 Bear necessities for state management with React Query & Zustand
• Watermelon Messenger #1 — Tabbar Transitions using React Navigation, Reanimated, Gesture Handler

rn-slider-switch's Issues

How to navigate to another screen when switch is moved

I want to add function onChange i tried but it can`t work please help to add function after moving slider

Animated: `useNativeDriver` was not specified. This is a required option and must be explicitly set to `true` or `false`

I am getting above warning, please let me know the solution.

Disable slider

Hi,

Is there a way to disable the slider? Im working with 2 sliders in the same view and i want to disable the second one if a certain state is set in the first slider.

Thanks

Can this component be used for React?

I am making a web application using React and I love the UI of this component. I was wondering if it can also be used for plain React js?

Rewrite library, unlimited number of sections, configurable animations, extensible, no magic numbers, typescript

I rewrote this library to make it more flexible. If one wanted to add X number of switches, that would be pretty easy to do.

Take a look!

import React, {useEffect, useRef, useState} from "react";
import {
  Animated,
  Dimensions,
  PanResponder,
  View,
  StyleProp,
  ViewStyle,
  EasingFunction,
} from "react-native";

interface ISwitchComponent {
  currentIndex?: number;
  animatedValue?: Animated.AnimatedInterpolation;
}

// Taken from here: https://github.com/victorkvarghese/rn-slider-switch
// And rewritten to follow functional components but also to allow to overwrite all of the hardcoded things.
interface IMultiSwitch {
  currentIndex: number;
  animate?: boolean;
  duration?: number;
  easing?: EasingFunction;
  width?: number;
  height?: number;
  switcherWidth?: number,
  borderWidth?: number,
  disableScroll?: (bool: boolean) => any;
  onIndexChanged?: (index: number) => any;
  disableSwitch?: boolean;
  containerStyle?: StyleProp<ViewStyle>;
  tabStyle?: StyleProp<ViewStyle>;
  useNativeDriver?: boolean;
  children?: any[];
  SwitchComponent: React.ComponentType<ISwitchComponent>;
  MultiSwitchHeader?: JSX.Element;
  MultiSwitchFooter?: JSX.Element;
}
const MultiSwitch = ({
  children,
  currentIndex,
  animate = true,
  duration = 100,
  easing,
  width = Dimensions.get("window").width - 30,
  height = 55,
  borderWidth = 1,
  switcherWidth = width / children.length,
  disableScroll,
  onIndexChanged,
  disableSwitch,
  containerStyle,
  tabStyle,
  useNativeDriver = true,
  SwitchComponent,
  MultiSwitchHeader,
  MultiSwitchFooter,
}: IMultiSwitch) => {
  const [posValue, setPosValue] = useState(0);
  const isParentScrollDisabledRef = useRef(false);
  const position = useRef(new Animated.Value(0)).current;
  const currentAnimationRef = useRef<Animated.CompositeAnimation>();

  const animateToIndex = (index: number) => {
    if (disableSwitch) return;
    currentAnimationRef.current?.stop(); // stop previous animation if was running

    const toValue = index * switcherWidth;
    if (animate) {
      currentAnimationRef.current = Animated.timing(position, {toValue, duration, easing, useNativeDriver});
      currentAnimationRef.current.start(() => setPosValue(toValue));
    } else {
      position.setValue(toValue);
      setPosValue(toValue)
    }

    onIndexChanged?.(index);
  };

  const animatedValue = position.interpolate({
    inputRange: [0, width - switcherWidth],
    outputRange: [0, 1],
  });

  useEffect(() => { animateToIndex(currentIndex); }, [currentIndex]);

  const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onStartShouldSetPanResponderCapture: () => true,
    onMoveShouldSetPanResponder: () => true,
    onMoveShouldSetPanResponderCapture: () => true,

    onPanResponderGrant: () => {
      // disable parent scroll if slider is inside a scrollview
      if (!isParentScrollDisabledRef.current) {
        disableScroll?.(true);
        isParentScrollDisabledRef.current = true;
      }
    },

    onPanResponderMove: (evt, gestureState) => {
      if (!disableSwitch) {
        let finalValue = gestureState.dx + posValue;
        if (finalValue >= 0 && finalValue <= (width - switcherWidth))
          position.setValue(posValue + gestureState.dx);
      }
    },

    onPanResponderTerminationRequest: () => true,

    onPanResponderRelease: (evt, gestureState) => {
      if (!disableSwitch) {
        let finalValue = gestureState.dx + posValue;
        isParentScrollDisabledRef.current = false;
        disableScroll?.(false);
        animateToIndex(Math.round(finalValue / switcherWidth));
      }
    },

    onPanResponderTerminate: () => {},
    // Returns whether this component should block native components from becoming the JS
    // responder. Returns true by default. Is currently only supported on android.
    onShouldBlockNativeResponder: () => true,
  });

  const selectorHeight = height - 2 * borderWidth;

  return <View style={[
    {
      width,
      height,
      flexDirection: "row",
      backgroundColor: "#efefef",
      alignItems: "center",
      justifyContent: "center",
      borderWidth,
      borderColor: "#efefef",
      overflow: "hidden",
      borderRadius: height / 2,
    },
    containerStyle,
  ]}>
    {MultiSwitchHeader}
    {children}
    <Animated.View
      {...panResponder.panHandlers}
      style={[
        {
          flexDirection: "row",
          position: "absolute",
          top: 0,
          left: 0,
          backgroundColor: "#FFF",
          borderRadius: selectorHeight / 2,
          height: selectorHeight,
          alignItems: "center",
          justifyContent: "center",
          width: switcherWidth,
          elevation: 4,
          shadowOpacity: 0.31,
          shadowRadius: 10,
          shadowColor: "#A69E9E",
          transform: [{ translateX: position }]
        },
        tabStyle,
      ]}
    >
      <SwitchComponent {...{animatedValue, currentIndex}} />
    </Animated.View>
    {MultiSwitchFooter}
  </View>
};

export {
  ISwitchComponent,
  IMultiSwitch,
  MultiSwitch,
}

Changing currentStatus to 'Complete' doesn't change the position of the slider

Hi,

it's a great library, but I don't understand the prop currentStatus={'Open'}, because when I change it to 'Complete', it doesn't change the initial position of the slider. Also, I don't see where there prop currentStatus is used, I think it always defaults to the first position (0), since position: new Animated.Value(0), and selectedPosition: 0,.

Thank you for help