[SDK49] _reactNative.DeviceEventEmitter.removeListener

Expo Development Tools
1

Please provide the following:

  1. SDK Version: 49.0.0
  2. Platforms(Android/iOS/web/all): Android/iOS

After upgrading from version 33 to 49, my application gave the following error

image
image1314×2572 102 KB

TypeError: _reactNative.DeviceEventEmitter.removeListener is not a function (it is undefined)

This error is located at:
    in ReactNativeModal (created by UiModalConfirm)
    in UiModalConfirm (created by Main)
    in Main (created by App)
    in PersistGate (created by App)
    in Provider (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent), js engine: hermes
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:105:15 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:150:4 in handleException
at node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:54:4 in showErrorDialog
at http://192.168.0.12:19000/index.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:null in logCapturedError
at http://192.168.0.12:19000/index.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:null in commitRootImpl
at http://192.168.0.12:19000/index.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:null in performSyncWorkOnRoot
at src/screens/Main/index.js:71:15 in api.profile.then._catch$argument_0
- ... 8 more stack frames from framework internals

this is my UiModalConfirm file

import React, {useEffect, useState} from 'react'
import Modal from 'react-native-modal'
import {
  ModalContainer, Container, Row, Title, Message,
  ButtonWrapper, ButtonText, ModalBody
} from './styles'
import {ActivityIndicator, Dimensions,Image} from 'react-native'
import UiButton from "../UiButton";
import UiRow from "../UiRow";
import {theme} from "../../constants";

const {width, height} = Dimensions.get('window')

export default function UiModalConfirm(
  {
    id = 0,
    title = null,
    show = false,
    message = '',
    image_url= "",
    buttonConfirmText = 'Sim',
    buttonCancelText = 'Não',
    buttonConfirmColor = 'danger',
    buttonCancelColor = 'gray2',
    onClose = () => false,
    onConfirm = () => 0,
    onCancel = () => 0,
    closeOnConfirm = true,
    closeOnCancel = true,
    processing = false
  }
) {
  const [isVisible, setIsVisible] = useState(show)

  useEffect(() => {
    setIsVisible(show)
  }, [show]);

  function closeAction() {
    setIsVisible(false)
    onClose(false)
  }

  function cancelAction() {
    onCancel(id)
    if (closeOnCancel)
      closeAction()
  }

  function confirmAction() {
    onConfirm(id)
    if (closeOnConfirm)
      closeAction()
  }

  return (
    <Modal
      onBackButtonPress={() => closeAction()}
      onBackdropPress={() => closeAction()}
      useNativeDriver={true}
      hasBackdrop={true}
      backdropColor={'black'}
      backdropOpacity={.70}
      isVisible={isVisible}
      animationInTiming={400}
      animationOutTiming={400}
      deviceWidth={width}
      deviceHeight={height}
      style={{
        justifyContent: 'center',
        margin: 0,
      }}
    >
      <ModalContainer>
        <Container>
          <ModalBody>
            <Row paddingY={20}>
              {title ?
                <Row paddingX={20}>
                  <Title style={{fontFamily: 'Avenir-Medium'}}>{title}</Title>
                </Row>
                : null}
              <Row paddingX={20}>
                <Image
                    source={{ uri: "https://api-portaldocliente.vectraconstrutora.com.br/media/" + image_url }}
                    style={{width: 300, height: 300}}
                />
              </Row>
              <Row paddingX={20}>
                <Message style={{fontFamily: 'Avenir-Light', textAlign: 'center', fontSize: 16, marginTop: 20, marginBottom: 30}}>{message}</Message>
              </Row>
            </Row>
            <Row paddingX={15} style={{marginBottom: 15}}>
              <UiRow styleRow={{paddingBottom: 40}}>
                <ButtonWrapper type={buttonCancelColor} onPress={() => cancelAction()}>
                  <ButtonText bold textColor={buttonCancelColor}>{buttonCancelText}</ButtonText>
                </ButtonWrapper>
                {buttonConfirmText && (<ButtonWrapper type={buttonConfirmColor} onPress={() => confirmAction()}>
                  <ButtonText bold textColor={buttonConfirmColor}>{buttonConfirmText}</ButtonText>
                </ButtonWrapper>)}
              </UiRow>
            </Row>

            {processing &&
            <Row paddingX={15} paddingY={15}>
              <ActivityIndicator color={theme.colors.primary}/>
            </Row>
            }
          </ModalBody>
        </Container>
      </ModalContainer>
    </Modal>
  )
}

I can’t figure out how to find the error that is causing this exception.

Can you help me with any tips for following the stack tracer?