Any imported Moti components break in React Native because of a userAgent check used by framer-motion

[avivash]

Is there an existing issue for this?

• [X] I have searched the existing issues

Do you want this issue prioritized?

• [ ] Yes, I have sponsored
• [x] Not urgent

Current Behavior

When I import any Moti component into my react native app, I see this error that userAgent is undefined. I traced it back to the framer-motion library, which I didn't think was used on native?

Expected Behavior

I should be able to import components.

Steps To Reproduce

1. add reanimated imports to my App.tsx

   import 'react-native-reanimated'
   import 'react-native-gesture-handler

2. Import any Moti component into my app and I get the navigator.userAgent undefined error because of framer-motion

Versions

- Moti: 0.29.0
- Reanimated: 3.6.3
- React Native: 0.72.3

Screenshots

Reproduction

will add

[avivash]

I was able to get this working by polyfilling navigator.userAgent for now, but I wonder if there's a better way?

if (!global?.navigator?.userAgent) {
  global.navigator = {
    ...global.navigator,
    userAgent: 'React Native',
  }
}

[nandorojo]

might be a framer version issue

[avivash]

might be a framer version issue

thanks 👍🏼 i'll try to diagnose further