fix: lack of transform in keyframes on web caused crash

[patrycjakalinska]

Summary

Fixes #6951

Cannot read properties of undefined (reading 'map') error crashed a site every time user called entering or exiting animation w/o transform prop. It was caused by calling addPxToTransform (and therefore calling map), before checking if transform is not an empty prop.

Test plan

minimal repro to run on web

import React, { useState } from 'react';
import { View, Pressable, Text, Dimensions } from 'react-native';
import Animated, { SlideInRight } from 'react-native-reanimated';

const { width } = Dimensions.get('window');

export default function App() {
  const [visible, setVisible] = useState(false);

  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        minHeight: 200,
      }}>
      {visible && (
        <Animated.View
          entering={SlideInRight.delay(0)
            .duration(400)
            .withInitialValues({ originX: width + 50 })}
          style={{
            width: 100,
            height: 100,
            backgroundColor: '#82cab2',
            borderRadius: 20,
            position: 'absolute',
          }}
        />
      )}
      <Pressable onPress={() => setVisible((prev) => !prev)}>
        <Text
          style={{
            color: 'white',
            backgroundColor: '#b58df1',
            paddingHorizontal: 16,
            paddingVertical: 8,
            borderRadius: 10,
          }}>
          Toggle
        </Text>
      </Pressable>
    </View>
  );
}

[m-bert]

Correct me if I'm wrong, but it is enough to move this line inside

if (transform) {
...

instead of adding this check 😅

[patrycjakalinska]

@m-bert yes...