[Bug🐛] Skeleton + New Architecture

[tcloudAce]

Is there an existing issue for this?

• I have searched the existing issues

Do you want this issue prioritized?

• Yes, I have sponsored
• Not urgent

Current Behavior

However, I am observing that the Skeleton component remains static and does not exhibit any shimmering or loading animation. The component appears as a plain, unanimated block regardless of the set color mode or any other state changes.

Expected Behavior

The Skeleton component should show a shimmering effect to indicate content is loading. This animation should work seamlessly, reflecting changes when toggling between light and dark modes.

Steps To Reproduce

Steps to reproduce:

1. Initialize a new project with npx create-expo-app@latest -e with-new-arch.
2. Install React Native Reanimated with npx expo install react-native-reanimated.
3. Install Moti with npm install moti.
4. Run npx expo prebuild --clean to clean and prebuild the project.
5. Start the project on a device with either expo run:ios --device or expo run:android --device depending on your testing environment.
6. Copy and paste the provided code into the project and run the code:

import { useReducer } from 'react';
import { StyleSheet, Pressable, View } from 'react-native';
import { MotiView } from 'moti';
import { Skeleton } from 'moti/skeleton';

export default function HelloWorld() {
  const [dark, toggle] = useReducer((s) => !s, true);

  const colorMode = dark ? 'dark' : 'light';

  return (
    <Pressable onPress={toggle} style={styles.container}>
      <MotiView
        transition={{
          type: 'timing',
        }}
        style={[styles.container, styles.padded]}
        animate={{ backgroundColor: dark ? '#000000' : '#ffffff' }}
      >
        <Skeleton colorMode={colorMode} radius="round" height={75} width={75} />
        <Spacer />
        <Skeleton colorMode={colorMode} width={250} />
        <Spacer height={8} />
        <Skeleton colorMode={colorMode} width={'100%'} />
        <Spacer height={8} />
        <Skeleton colorMode={colorMode} width={'100%'} />
      </MotiView>
    </Pressable>
  );
}

const Spacer = ({ height = 16 }) => <View style={{ height }} />;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  padded: {
    padding: 16,
  },
});

### Versions

```markdown
**Environment**:
- Expo version: 50.0.8 with new-arch
- React Native version: 0.73.4
- React Native Reanimated version: 3.7.1
- Moti version: 0.28
- Platform(s): iOS, Android
- Device info: ALL

Screenshots

No response

Reproduction

import { useReducer } from 'react';
import { StyleSheet, Pressable, View } from 'react-native';
import { MotiView } from 'moti';
import { Skeleton } from 'moti/skeleton';

export default function HelloWorld() {
  const [dark, toggle] = useReducer((s) => !s, true);

  const colorMode = dark ? 'dark' : 'light';

  return (
    <Pressable onPress={toggle} style={styles.container}>
      <MotiView
        transition={{
          type: 'timing',
        }}
        style={[styles.container, styles.padded]}
        animate={{ backgroundColor: dark ? '#000000' : '#ffffff' }}
      >
        <Skeleton colorMode={colorMode} radius="round" height={75} width={75} />
        <Spacer />
        <Skeleton colorMode={colorMode} width={250} />
        <Spacer height={8} />
        <Skeleton colorMode={colorMode} width={'100%'} />
        <Spacer height={8} />
        <Skeleton colorMode={colorMode} width={'100%'} />
      </MotiView>
    </Pressable>
  );
}

const Spacer = ({ height = 16 }) => <View style={{ height }} />;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  padded: {
    padding: 16,
  },
});