Search code examples
javascriptreactjsreact-nativereact-native-ui-kitten

onValueChange not working on existing component


I'm using RkSwitch component from react-native-ui-kitten. The package is just bunch of ui component I can use.

the developers no longer support the component and my RkSwitch component is not working as I expected.

My problem is RkSwitch's onValueChange doesn't do anything.

render function for android <- doesn't work. (Problem)

render function for iOS <- haven't tested yet but I think it should work.

I called RkSwitch. Since RkSwitch is a wrapper class of react native's <Animated.View>, it can't pass onValueChange.

<RkSwitch
    style={styles.switch}
    value={this.state.onlyMe}
    name="Push"
    onValueChange={
        (onlyMe) => {
            console.log('helloworld'); // it can't print helloworld
        }
    }
/> 

Here is RkSwitch's actual code. (this is android version). Doc Link

_onPanResponderRelease = (evt, gestureState) => {
    let {toggleable} = this.state;
    let {disabled, onValueChange} = this.props;

    if (toggleable && !disabled) {
      if (onValueChange) { // calls onValueChange and..?
        this.toggleSwitch(onValueChange) // call toggle switch
      }
    }
  };

toggleSwitch = (result, callback = () => null) => {
    let {value, switchAnimation} = this.state;
    let toValue = !value;

    this.animateHandler(this.handlerSize);

    this.animateSwitch(toValue, () => {
      callback(toValue);
      this.setState({
        value: toValue,
        left: toValue ? onLeftValue : offLeftValue
      });
     switchAnimation.setValue(toValue ? -1 : 1)
    })

It seems they are handling onValueChange props but it doesn't work. Is there any good Javascript or React expert???


Solution

  • I haven't tried this but maybe go into the RKSwitch code and add a <TouchableOpacity> around the Animated.View and feed the onValueChange prop into the TouchableOpacity's onPress function.