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

[Web LA] Add skipEntering #6425

Merged
merged 1 commit into from
Aug 21, 2024
Merged

[Web LA] Add skipEntering #6425

merged 1 commit into from
Aug 21, 2024

Conversation

m-bert
Copy link
Contributor

@m-bert m-bert commented Aug 17, 2024

Summary

This PR adds partial support for LayoutAnimationConfig, i.e. skipEntering.

Note

skipExiting is not added in this PR as waiting for children animation is not yet supported on web.

Test plan

Tested on example from docs:
import React from 'react';
import Animated, {
  LayoutAnimationConfig,
  PinwheelIn,
  PinwheelOut,
} from 'react-native-reanimated';
import { Button, StyleSheet, View } from 'react-native';

export default function App() {
  const [outer, setOuter] = React.useState<boolean>(true);
  const [inner, setInner] = React.useState<boolean>(true);

  return (
    <View style={styles.container}>
      <View style={styles.buttonColumn}>
        <Button
          onPress={() => {
            setOuter(!outer);
          }}
          title={toggleString(outer) + ' outer'}
        />
        <Button
          disabled={!outer}
          onPress={() => {
            setInner(!inner);
          }}
          title={toggleString(inner) + ' inner'}
        />
      </View>
      <LayoutAnimationConfig skipEntering>
        {outer && (
          <Animated.View
            entering={PinwheelIn}
            exiting={PinwheelOut}
            style={styles.outerBox}>
            <LayoutAnimationConfig skipEntering skipExiting>
              {inner && (
                <Animated.View
                  style={styles.box}
                  entering={PinwheelIn}
                  exiting={PinwheelOut}
                />
              )}
            </LayoutAnimationConfig>
          </Animated.View>
        )}
      </LayoutAnimationConfig>
    </View>
  );
}

function toggleString(value: boolean) {
  return value ? 'Hide' : 'Show';
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'flex-start',
    height: 220,
  },
  buttonColumn: {
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'space-around',
    height: 90,
  },
  outerBox: {
    width: 150,
    height: 150,
    backgroundColor: '#b58df1',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 20,
    margin: 20,
  },
  box: {
    width: 80,
    height: 80,
    backgroundColor: '#782aeb',
  },
});

@m-bert m-bert requested a review from tjzel August 17, 2024 20:44
@m-bert m-bert added this pull request to the merge queue Aug 21, 2024
Merged via the queue into main with commit 2e6b558 Aug 21, 2024
9 checks passed
@m-bert m-bert deleted the @mbert/layout-animation-config branch August 21, 2024 07:00
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.

4 participants