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

[power-f-GOD]

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
  }
});

[nandorojo]

Try reproducing this on expo snack maybe?

Did you follow the instructions to install reanimated 2? Is the Babel plugin setup?

[nandorojo]

I missed the code on first read here, let's see

[nandorojo]

Could you see if you can reproduce this on expo snack? I'm not sure why this would happen other than issues with installing reanimated v2 properly and using the latest version or Moti...

Which platform is this? And are you using expo?

[power-f-GOD]

Try reproducing this on expo snack maybe?

Did you follow the instructions to install reanimated 2? Is the Babel plugin setup?

Yeah. Here's my babel.config.js

const path = require('path');

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module-resolver',
        {
          root: ['./'],
          alias: {
            src: './src'
          }
        }
      ],
      'react-native-reanimated/plugin'
    ]
  };
};

[power-f-GOD]

And yes, I'm using Expo.

[power-f-GOD]

Alright. I'll try reproducing on Snack.

[nandorojo]

Which versions are you using?

[power-f-GOD]

Psst! Turns out Snack doesn't support TypeScript!

Versions? Humm...

My package.json...

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@expo-google-fonts/poppins": "^0.2.0",
    "@react-navigation/native": "^6.0.1",
    "@react-navigation/native-stack": "^6.0.1",
    "@react-navigation/stack": "^6.0.1",
    "expo": "^42.0.3",
    "expo-app-loading": "^1.1.2",
    "expo-font": "~9.2.1",
    "expo-secure-store": "~10.2.0",
    "expo-status-bar": "~1.0.3",
    "hermes-engine": "^0.8.1",
    "moti": "^0.11.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-reanimated": "~2.2.0",
    "react-native-screens": "~3.4.0",
    "react-native-web": "^0.17.1",
    "react-redux": "^7.2.4",
    "redux": "^4.1.1",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@types/react": "~16.9.35",
    "@types/react-dom": "~16.9.8",
    "@types/react-native": "~0.63.2",
    "typescript": "~4.0.0"
  },
  "private": true
}

[power-f-GOD]

My index or (ideally App).js

import 'react-native-gesture-handler';
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import React, { FC, useEffect } from 'react';
// import { StyleSheet, Platform, StatusBar, View } from 'react-native';
import { connect } from 'react-redux';

import { AuthProps } from 'src/types';
import { Login, Splash, Register, Home } from 'src/screens';
import { dispatch } from 'src/state/store';
import { auth } from 'src/state/actions';

const Stack = createNativeStackNavigator();

const _App: FC<{ auth: AuthProps }> = ({ auth: _auth }) => {
  const { authenticated, status: authStatus } = _auth;

  useEffect(() => {
    setTimeout(() => {
      dispatch(auth({ status: 'fulfilled' }));
    }, 2000);
  }, []);

  // if (authStatus !== 'fulfilled') {
  //   return <Splash />;
  // }

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {(() => {
          if (authStatus !== 'fulfilled') {
            return (
              <Stack.Screen
                name='Splash'
                component={Splash}
                options={{
                  // animation: 'none',
                  headerShown: false
                  // statusBarAnimation: 'none'
                  // animationTypeForReplace: 'push'
                }}
              />
            );
          } else if (!authenticated) {
            return (
              <>
                <Stack.Screen
                  name='Login'
                  component={Login}
                  options={{
                    headerShown: false,
                    animation: 'none'
                  }}
                />
                <Stack.Screen name='Register' component={Register} />
              </>
            );
          } else {
            return (
              <>
                <Stack.Screen name='Home' component={Home} />
              </>
            );
          }
        })()}
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default connect((state: { auth: AuthProps }) => ({ auth: state.auth }))(
  _App
);

[nandorojo]

Can you just reproduce it on snack? Moti works on snack

[power-f-GOD]

Could there be an issue with using Moti inside of a Stack? 'cause it seems like whenever I remove MotiView from the two screens (Splash and Login), the errors cease.

[power-f-GOD]

Psst! Turns out Snack doesn't support TypeScript!

Versions? Humm...

My package.json...

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@expo-google-fonts/poppins": "^0.2.0",
    "@react-navigation/native": "^6.0.1",
    "@react-navigation/native-stack": "^6.0.1",
    "@react-navigation/stack": "^6.0.1",
    "expo": "^42.0.3",
    "expo-app-loading": "^1.1.2",
    "expo-font": "~9.2.1",
    "expo-secure-store": "~10.2.0",
    "expo-status-bar": "~1.0.3",
    "hermes-engine": "^0.8.1",
    "moti": "^0.11.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-reanimated": "~2.2.0",
    "react-native-screens": "~3.4.0",
    "react-native-web": "^0.17.1",
    "react-redux": "^7.2.4",
    "redux": "^4.1.1",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@types/react": "~16.9.35",
    "@types/react-dom": "~16.9.8",
    "@types/react-native": "~0.63.2",
    "typescript": "~4.0.0"
  },
  "private": true
}

I mentioned earlier that TypeScript doesn't work on there, so I cannot reproduce there.

[nandorojo]

Just ignore the typescript errors on snack, it still works

[power-f-GOD]

Oh. Ok. I'll try again.

[power-f-GOD]

I'll just forego doing so for now. Time is against me.

I'll get back to it when I'm, probably, done with project.

Kindly leave the issue open.

Thanks so much for your time.

[nandorojo]

I'll reopen if there's activity, since there's no reproduction or actionable thing I can do to help

[power-f-GOD]

Alright.

[power-f-GOD]

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! 🙌🏼

[ngima]

I was also having the same issue. Clearing expo cache on start with expo start --clear solved it.

[gustavo3245]

I was also having the same issue. Clearing expo cache on start with expo start --clear solved it.