4

In my React Native project I'm using the Switch component. It can be switched directly by pressing it, but I also want to let the user change it by pressing nearby related items.

It of course animates the switching when pressed, but when I changed its state using setState() it just jumps directly to the other position without animation.

Is there a way I can programmatically trigger the animation when changing its state from code?

(There is a question with a similar wording but it seems to be to an unrelated problem I can't quite work out.)

hippietrail
  • 15,848
  • 18
  • 99
  • 158

1 Answers1

-1

Depends a little on the approach you're taking, but I'd say your best bet is with Animated (which is part of React Native).

You can do something like this:

render(){
    var animVal = new Animated.Value(0);   
    Animated.timing(animVal, {toValue: 1, duration: 300}).start();
    var animatedViewStyles =
        {
             marginLeft: animVal.interpolate({
                 inputRange: [0, 1],
                 outputRange: this.state.switchOn ? [100, 0] : [0, 100],
             }),
             // add some other styles here
             color: 'green'
        };
    }

    return (
        <Animated.View style={animatedViewStyles}>
            <TouchableHighlight onPress(() => this.setState({switchOn: !this.state.switchOn}))><Text>This is my switch</Text></TouchableHighlight>
        </Animated.View>
    );

See the docs https://facebook.github.io/react-native/docs/animated.html for more info.

Gee
  • 1,058
  • 9
  • 12
  • Unless I'm missing something it doesn't seem like you're using the [React Native Switch component](https://facebook.github.io/react-native/docs/switch.html) at all here? \-: – hippietrail Sep 26 '17 at 01:01
  • 1
    No, you're right - I didn't realise you were using a Switch component, I thought you'd created your own. (Which might just be easier for adding animation!) – Gee Sep 27 '17 at 00:42
  • 2
    No that native Switch component already animates. I just didn't know if there's a way to programatically trigger that animation. I guess there is not )-: – hippietrail Sep 27 '17 at 02:34
  • 1
    Yeah I misread that completely. It uses UISwitch (https://developer.apple.com/documentation/uikit/uiswitch) under the hood, which does support it but it doesn't look like there's been an explicit link set up. The source code for the RN Switch is here https://github.com/facebook/react-native/blob/1e8f3b11027fe0a7514b4fc97d0798d3c64bc895/Libraries/Components/Switch/Switch.js - it uses RCTSwitch which is a wrapper on UISwitch, but I'm not sure there's a way of triggering the function on UISwitch that you need – Gee Sep 27 '17 at 19:58
  • 1
    Yeah I looked at the code that wraps iOS or Android but I never coded either directly so didn't fully grok it, yet I came to the same conclusion as you. Thanks! – hippietrail Sep 28 '17 at 00:52
  • 1
    @hippietrail FWIW, we also came to the conclusion that there's no easy way to programmatically animate the switch. – Freewalker Apr 13 '18 at 17:43