Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Enable callbacks in withSequence with reduce motion enabled #6895

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

patrycjakalinska
Copy link
Contributor

Summary

Fixes #6714. Before, callbacks did not execute within withSequence animations when ReduceMotion was enabled. After discussion, we decided to allow callbacks to run in this scenario. To implement this I removed findNextNonReducedMotionAnimationIndex function, which prevented callbacks from running.

Test plan

Cases:

  1. ReduceMotion is enabled in all animations in withSequence -> callbacks should fire, step should increase
  2. ReduceMotion is disabled in all animations in withSequence -> callbacks should fire, step should increase with animation
  3. There are some animations that have ReduceMotion and some that don't (current code) -> callbacks should fire, step should increse, animations without ReduceMotion should run
Example code
import React, { useCallback, useState } from 'react';
import { Text, SafeAreaView, StyleSheet, TouchableOpacity } from 'react-native';
import Animated, {
  ReduceMotion,
  useSharedValue,
  withTiming,
  useAnimatedStyle,
  withSequence,
  runOnJS,
} from 'react-native-reanimated';

export default function App() {
  const [disableAnimations, setDisableAnimations] = useState(false);
  const [step, setStep] = useState(1);

  const fadeAnimation = useSharedValue(1);

  const fadeToStep = useCallback(
    (nextStep: any) => {
      console.log('nextStep', nextStep);
      fadeAnimation.value = withSequence(
        withTiming(
          0.1,
          {
            duration: 500,
            reduceMotion: disableAnimations
              ? ReduceMotion.Always
              : ReduceMotion.Never,
          },
          () => {
            runOnJS(setStep)(nextStep);
            console.log('first withTiming');
          }
        ),
        withTiming(
          2,
          {
            duration: 500,
          },
          () => {
            console.log('-------');
            console.log('third withTiming');
          }
        ),
        withTiming(
          4,
          {
            duration: 500,
            reduceMotion: disableAnimations
              ? ReduceMotion.Always
              : ReduceMotion.Never,
          },
          () => {
            console.log('-------');
            console.log('fourth withTiming');
          }
        )
      );
    },
    [fadeAnimation, disableAnimations]
  );
  const fadeToNextStep = () => {
    fadeToStep(step + 1);
  };
  const fadeAnimatedStyles = useAnimatedStyle(() => {
    return {
      opacity: fadeAnimation.value,
    };
  });

  return (
    <>
      <SafeAreaView style={styles.container}>
        <TouchableOpacity style={styles.button} onPress={fadeToNextStep}>
          <Text>Go to next step of onboarding</Text>
        </TouchableOpacity>

        <Animated.Text style={[styles.step, fadeAnimatedStyles]}>
          Step #{step}
        </Animated.Text>

        <TouchableOpacity
          style={styles.button}
          onPress={() => setDisableAnimations(!disableAnimations)}>
          <Text>Toggle Animations</Text>
        </TouchableOpacity>
        {disableAnimations && (
          <Text>
            {' '}
            Animations are disabled, callback should still trigger but it
            doesn't{' '}
          </Text>
        )}
      </SafeAreaView>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  step: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  button: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',

    marginHorizontal: 40,
    marginVertical: 5,
    backgroundColor: '#aeb',
    height: 20,
  },
});

@patrycjakalinska patrycjakalinska changed the title rmv findNextNonReducedMotionAnimationIndex func feat: Enable callbacks in withSequence with reduce motion enabled Jan 14, 2025
@patrycjakalinska patrycjakalinska marked this pull request as ready for review January 14, 2025 09:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Callbacks are not working while reduceMotion is active
1 participant