Skip to content

Commit

Permalink
[Web LA] Fix default transitions. (#6124)
Browse files Browse the repository at this point in the history
## Summary

Yesterday we've discovered that some basic transitions don't work on web
anymore. Turns out that `animationName` was `undefined`, therefore
transitions were not created.

This PR adds `presetName` field into transitions, so we can easily
obtain their name.

> [!NOTE]
> Similar thing was done in #5562, so I believe that we can stick to
this convention.

## Test plan

<details>
<summary> Tested on the following code: </summary>

```jsx
import Animated, {
  BounceInLeft,
  FadeOutRight,
  FadingTransition,
} from 'react-native-reanimated';
import { Button, StyleSheet, View } from 'react-native';

import React from 'react';

export default function BasicLayoutAnimation() {
  const [state, setState] = React.useState(false);
  const [visible, setVisible] = React.useState(true);

  return (
    <View style={styles.container}>
      <Button onPress={() => setVisible(!visible)} title="Create/Remove" />
      <Button onPress={() => setState(!state)} title="Update" />
      {visible && (
        <Animated.View
          entering={BounceInLeft}
          layout={FadingTransition}
          exiting={FadeOutRight.duration(500)}
          style={[
            styles.box,
            {
              marginLeft: state ? 200 : 0,
              backgroundColor: state ? 'red' : 'blue',
            },
          ]}
        />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    marginTop: 300,
  },
  box: {
    width: 100,
    height: 100,
  },
});
```

</details>
  • Loading branch information
m-bert authored Jun 18, 2024
1 parent 19cdeb4 commit f483c75
Show file tree
Hide file tree
Showing 6 changed files with 12 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ export class CurvedTransition
extends BaseAnimationBuilder
implements ILayoutAnimationBuilder
{
static presetName = 'CurvedTransition';

easingXV: EasingFunction = Easing.in(Easing.ease);
easingYV: EasingFunction = Easing.out(Easing.ease);
easingWidthV: EasingFunction = Easing.in(Easing.exp);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ export class EntryExitTransition
extends BaseAnimationBuilder
implements ILayoutAnimationBuilder
{
static presetName = 'EntryExitTransition';

enteringV: BaseAnimationBuilder | typeof BaseAnimationBuilder = FadeIn;

exitingV: BaseAnimationBuilder | typeof BaseAnimationBuilder = FadeOut;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ export class FadingTransition
extends BaseAnimationBuilder
implements ILayoutAnimationBuilder
{
static presetName = 'FadingTransition';

static createInstance<T extends typeof BaseAnimationBuilder>(
this: T
): InstanceType<T> {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ export class JumpingTransition
extends BaseAnimationBuilder
implements ILayoutAnimationBuilder
{
static presetName = 'JumpingTransition';

static createInstance<T extends typeof BaseAnimationBuilder>(
this: T
): InstanceType<T> {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ export class LinearTransition
extends ComplexAnimationBuilder
implements ILayoutAnimationBuilder
{
static presetName = 'LinearTransition';

static createInstance<T extends typeof BaseAnimationBuilder>(
this: T
): InstanceType<T> {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ export class SequencedTransition
extends BaseAnimationBuilder
implements ILayoutAnimationBuilder
{
static presetName = 'SequencedTransition';

reversed = false;

static createInstance<T extends typeof BaseAnimationBuilder>(
Expand Down

0 comments on commit f483c75

Please sign in to comment.