t.touchableOpacity.setOpacityTo is not a function

[dcangulo]

If you touch the switch once, it works just fine. But if you hold the switch and swipe it, it will throw the error t.touchableOpacity.setOpacityTo is not a function.

This issue occurs on iOS and Android but works fine on the web.

RN Version:

"react-native": "0.63.2"

The error occurs on both vanilla and expo react-native projects.

Commenting these lines will suppress the error without a noticeable difference: https://github.com/prsn/react-native-toggle-switch/blob/master/scrollview-switch.js#L70 https://github.com/prsn/react-native-toggle-switch/blob/master/scrollview-switch.js#L74

Reproduce: https://snack.expo.io/@dcangulo/rn-toggle-switch-error

Related references: https://github.com/facebook/react-native/issues/29272 https://github.com/expo/expo/issues/9026

[dcangulo]

Temporary workaround:

import React from 'react';
import ToggleSwitch from 'rn-toggle-switch';

class Toggle extends ToggleSwitch {
  onDragEnd = (e) => {
    const { contentOffset } = e.nativeEvent;
    if(contentOffset.x > (this.props.width ) / 2) {
      this.scrollRef.scrollToEnd();
      this.updateState(false);
    } else {
      this.scrollRef.scrollTo({x: 0, y: 0, animated: true});
      this.updateState(true);
    }
  }

  onDragStart = () => {}
}

export default function App() {
  return (
    <Toggle
      text={{on: 'PRESENT', off: 'ABSENT', activeTextColor: 'white', inactiveTextColor: '#B7B8BA'}}
      textStyle={{fontWeight: 'bold'}}
      color={{ indicator: 'white', active: 'rgba(32, 193, 173, 1)', inactive:  'rgba( 247, 247, 247, 1)', activeBorder: '#41B4A4', inactiveBorder: '#E9E9E9'}}
      active={true}
      disabled={false}
      width={80}
      radius={25}
      onValueChange={(val) => {
          /* your handler function... */
      }}
    />
  );
}

[lucas-goldner]

Thanks for the temporary fix helped me at this moment haha