Skip to content

Commit

Permalink
[Web LA] Add skipEntering (#6425)
Browse files Browse the repository at this point in the history
## 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

<details>
<summary>Tested on example from docs:</summary>

```tsx
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',
  },
});
```

</details>
  • Loading branch information
m-bert authored Aug 21, 2024
1 parent e100e1b commit 2e6b558
Showing 1 changed file with 11 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -178,11 +178,17 @@ export function createAnimatedComponent(
return;
}

startWebLayoutAnimation(
this.props,
this._component as ReanimatedHTMLElement,
LayoutAnimationType.ENTERING
);
const skipEntering = this.context?.current;

if (!skipEntering) {
startWebLayoutAnimation(
this.props,
this._component as ReanimatedHTMLElement,
LayoutAnimationType.ENTERING
);
} else {
(this._component as HTMLElement).style.visibility = 'initial';
}
}

this._isFirstRender = false;
Expand Down

0 comments on commit 2e6b558

Please sign in to comment.