Animation Definitions Must Have At Least Two Values

Installing the library via yarn and importing it into my app like so causes it to crash, the code is:

import React from 'react'
import { SafeAreaView, Text } from 'react-native'
import styled from 'styled-components/native'
import metrics from 'styles/metrics'
import Modal from 'react-native-modal'

type CardOverlayProps = {
  visible: boolean,
}

const CardOverlay = ({ visible }: CardOverlayProps) => {
  return (
    <Modal isVisible={visible}>
      <Container>
        <Card>
          <Text>A</Text>
        </Card>
      </Container>
    </Modal>
  )
}

When I add the “import Modal” line the app crashes with an error along the lines:

Animation definitions must have at least two values. Once I remove it, everything works. The original Modal component works to.

[jesster2k10]

Okay,

So I found how to fix this. The error in fact was with the react-native-animatable library in the registry.js file in this particular function

export function initializeRegistryWithDefinitions(definitions)

I found for some reason that {__esModule:true } was being included in that definitions array which led to the whole two values error as that was a boolean.

So to fix it I just added a check in the function there

 export function initializeRegistryWithDefinitions(definitions) {
  Object.keys(definitions).forEach(animationName => {
    console.log(definitions);
    if (animationName !== '__esModule') { // this got rid of the crash
      registerAnimation(
        animationName,
        createAnimation(definitions[animationName]),
      );
    }
  });
}

I’ll close this and open a PR in the original library

[jesster2k10]

Yeah I’ve had a number of problems with that plugin and other libraries but without enabling it my hot reloading wouldn’t work so I went ahead and made a fork of the library including the change so I can keep using this and my hot reloading

On Tue 30 Jul 2019 at 16:54, Roman Kuzkokov [e-mail] wrote:

Hi, @jesster2k10 https://github.com/jesster2k10 I faced the same problem. It seems, that the problem isn’t in any of the libraries, but rather in the @babel/plugin-transform-modules-commonjs. It’s adding __esModule: true to exported object, this why this error is happening. Probably, there are some settings for this module, but so far I just removed it from my babel.config.js, and Modal is working great.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/react-native-community/react-native-modal/issues/309?email_source=notifications&email_token=ABRHYDTEUUNCRL2MEHQRLOLQCBP2LA5CNFSM4HN35FJ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3EN65A#issuecomment-516480884, or mute the thread https://github.com/notifications/unsubscribe-auth/ABRHYDWCLZKLXCNYE7RSMGTQCBP2LANCNFSM4HN35FJQ .