Moti animations not displayed on react native application

Question

I am new to react native and was trying to play with Moti animations, I am not sure why the animations are not getting loaded, the code is :

import { MotiView, MotiText } from "moti"
import React, { useState, useEffect } from "react";
import { View } from 'react-native';
export default function App() {

  return (
    <View>
      <Text>Hello world</Text>
      <MotiView
        from={{ opacity: 0, scale: 0.5 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{
          // default settings for all style values
          type: 'timing',
          duration: 350,
          // set a custom transition for scale
          scale: {
            type: 'spring',
            delay: 100,
          },
        }}
      />
    </View>

  )
}

In above code the text "hello world" is displayed, but the motiview is not getting displayed.

babel.config.js file looks like this

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

package.json versions:

"react-native-reanimated": "~2.9.1",
"moti": "^0.21.0",

Need some help, can anyone tell where I am going wrong.

Answer 1

The style property was missing from MotiView properties, we need to set width and height of the view.