moti: TypeError: Object.values requires that input parameter not be null or undefined

Trying to use MotiView causes the following error…

TypeError: Object.values requires that input parameter not be null or undefined

This error is located at:
    in ForwardRef(Moti) (at Splash.tsx:11)
    in RCTView (at View.js:34)
    in View (at Splash.tsx:10)
    in Splash (at SceneView.tsx:126)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:119)
    in EnsureSingleNavigator (at SceneView.tsx:118)
    in SceneView (at useDescriptors.tsx:209)
    in RCTView (at View.js:34)
    in View (at DebugContainer.native.tsx:27)
    in DebugContainer (at NativeStackView.native.tsx:71)
    in MaybeNestedStack (at NativeStackView.native.tsx:228)
    in RNSScreen (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at src/index.native.tsx:147)
    in Screen (at NativeStackView.native.tsx:175)
    in SceneView (at NativeStackView.native.tsx:276)
    in RNSScreenStack (at NativeStackView.native.tsx:267)
    in NativeStackViewInner (at NativeStackView.native.tsx:321)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:76)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:38)
    in SafeAreaProviderCompat (at NativeStackView.native.tsx:320)
    in NativeStackView (at createNativeStackNavigator.tsx:67)
    in NativeStackNavigator (at src/index.tsx:30)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:429)
    in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:132)
    in ThemeProvider (at NavigationContainer.tsx:131)
    in ForwardRef(NavigationContainerInner) (at src/index.tsx:29)
    in _App (created by Connect(_App))
    in Connect(_App) (at App.tsx:37)
    in RCTView (at View.js:34)
    in View (at App.tsx:36)
    in Provider (at App.tsx:35)
    in Unknown (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)

What could I be doing wrong?

My code:

import { View, StyleSheet, Dimensions } from 'react-native';
import { View as MotiView } from 'moti';

import { Logo } from 'src/components';
import { colors, padding } from 'src/constants';

export const Splash = () => {
  return (
    <View style={S.Splash}>
      <MotiView from={{ translateX: 200 }} animate={{ translateX: 0 }}>
        <Logo style={S.logo} />
      </MotiView>
    </View>
  );
};

const S = StyleSheet.create({
  Splash: {
    height: '100%',
    padding: padding.md,
    backgroundColor: colors.white
  },
  logo: {
    position: 'absolute',
    top: 0,
    left: 0
  }
});

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 20 (7 by maintainers)

Most upvoted comments

Ok. I just fixed it. Found a similar issue: https://github.com/software-mansion/react-native-reanimated/issues/1245#issuecomment-694664417 All I needed do was to clear expo cache on start with expo start --clear as the reanimated plugin wasn’t picked up (after I added it) in my babel.config.js. I’m so happy now. I can now use Moti!😎 Thank you! 🙌🏼

Alright. I’ll try reproducing on Snack.