Invariant Violation: Element type is invalid, check the render method of `InputToolbar`

[erbud]

Issue Description

On render an screen (with React Navigagtion 4.x) thats contains a GiftedChat component, in iOS crashes the app, in Android not. You have not reproduced the incidence?

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of InputToolbar.

This error is located at: in RCTView (at InputToolbar.js:96) in RCTView (at InputToolbar.js:91) in InputToolbar (at Thread.js:652) in RCTView (at GiftedChat.js:402) in RCTView (at ActionSheet/index.ios.tsx:17) in ActionSheet (at ActionSheetProvider.tsx:30) in ActionSheetProvider (at GiftedChat.js:401) in RCTSafeAreaView (at SafeAreaView.js:55) in SafeAreaView (at GiftedChat.js:400) in GiftedChat (at Thread.js:703) in RCTView (at Container.js:12) in Container (at connectStyle.js:392) in Styled(Container) (at Thread.js:698) in RCTView (at Root.js:14) in Root (at connectStyle.js:392) in Styled(Root) (at Thread.js:697) in Thread (at Thread.js:136) in ThreadContainer (created by NamespacesConsumerComponent) in NamespacesConsumerComponent (created by WithMergedOptions) in WithMergedOptions (created by Context.Consumer) in WithMergedOptions(NamespacesConsumerComponent) (created by LoadNamespace) in LoadNamespace (created by WithMergedOptions) in WithMergedOptions (created by Context.Consumer) in LoadNamespace(ThreadContainer) (created by Connect(LoadNamespace(ThreadContainer))) in Connect(LoadNamespace(ThreadContainer)) (at SceneView.js:9) in SceneView (at StackViewLayout.tsx:889) in RCTView (at StackViewLayout.tsx:888) in RCTView (at StackViewLayout.tsx:887) in RCTView (at createAnimatedComponent.js:151) in AnimatedComponent (at StackViewCard.tsx:106) in RNSScreen (at createAnimatedComponent.js:151) in AnimatedComponent (at screens.native.js:78) in Screen (at StackViewCard.tsx:93) in Card (at createPointerEventsContainer.tsx:95) in Container (at StackViewLayout.tsx:975) in RNSScreenContainer (at screens.native.js:103) in ScreenContainer (at StackViewLayout.tsx:384) in RCTView (at createAnimatedComponent.js:151) in AnimatedComponent (at StackViewLayout.tsx:374) in PanGestureHandler (at StackViewLayout.tsx:367) in StackViewLayout (at withOrientation.js:30) in withOrientation (at StackView.tsx:104) in RCTView (at Transitioner.tsx:267) in Transitioner (at StackView.tsx:41) in StackView (at createNavigator.js:80) in Navigator (at createKeyboardAwareNavigator.js:12) in KeyboardAwareNavigator (at SceneView.js:9) in SceneView (at DrawerView.tsx:183) in RNSScreen (at createAnimatedComponent.js:151) in AnimatedComponent (at screens.native.js:78) in Screen (at ResourceSavingScene.tsx:21) in ResourceSavingScene (at DrawerView.tsx:175) in RNSScreenContainer (at screens.native.js:103) in ScreenContainer (at DrawerView.tsx:164) in RCTView (at createAnimatedComponent.js:222) in AnimatedComponent (at Drawer.tsx:539) in RCTView (at createAnimatedComponent.js:222) in AnimatedComponent (at Drawer.tsx:535) in PanGestureHandler (at Drawer.tsx:525) in DrawerView (at DrawerView.tsx:251) in DrawerView (at createNavigator.js:80) in Navigator (at component/index.js:357) in RCTView (at component/index.js:355) in ErrorBoundaryContainer (created by NamespacesConsumerComponent) in NamespacesConsumerComponent (created by WithMergedOptions) in WithMergedOptions (created by Context.Consumer) in WithMergedOptions(NamespacesConsumerComponent) (created by LoadNamespace) in LoadNamespace (created by WithMergedOptions) in WithMergedOptions (created by Context.Consumer) in LoadNamespace(ErrorBoundaryContainer) (created by Connect(LoadNamespace(ErrorBoundaryContainer))) in Connect(LoadNamespace(ErrorBoundaryContainer)) (at component/index.js:354) in AppContainer (created by NamespacesConsumerComponent) in NamespacesConsumerComponent (created by WithMergedOptions) in WithMergedOptions (created by Context.Consumer) in WithMergedOptions(NamespacesConsumerComponent) (created by LoadNamespace) in LoadNamespace (created by WithMergedOptions) in WithMergedOptions (created by Context.Consumer) in LoadNamespace(AppContainer) (created by Connect(LoadNamespace(AppContainer))) in Connect(LoadNamespace(AppContainer)) (at SceneView.js:9) in SceneView (at SwitchView.js:12) in SwitchView (at createNavigator.js:80) in Navigator (at App.js:26) in NavigationStack (at createAppContainer.js:430) in NavigationContainer (created by NamespacesConsumerComponent) in NamespacesConsumerComponent (created by WithMergedOptions) in WithMergedOptions (created by Context.Consumer) in WithMergedOptions(NamespacesConsumerComponent) (created by LoadNamespace) in LoadNamespace (created by WithMergedOptions) in WithMergedOptions (created by Context.Consumer) in LoadNamespace(NavigationContainer) (at App.js:62) in RCTView (at ActionSheet/index.ios.tsx:17) in ActionSheet (at ActionSheetProvider.tsx:30) in ActionSheetProvider (at App.js:61) in I18nextProvider (at App.js:60) in PersistGate (at App.js:59) in Provider (at App.js:58) in App (at withExpoRoot.js:26) in RootErrorBoundary (at withExpoRoot.js:25) in ExpoRoot (at renderApplication.js:40) in RCTView (at AppContainer.js:101) in DevAppContainer (at AppContainer.js:115) in RCTView (at AppContainer.js:119) in AppContainer (at renderApplication.js:39)

renderRoot

runRootCallback

unstable_runWithPriority scheduler.development.js:643:23 callFunctionReturnFlushedQueue

Steps to Reproduce / Code Snippets

Render a screen with React Navigation 4.x thats contains a GiftedChat component, i.e.:

<Root>
  <Container>
    <GiftedChat
      loadEarlier={loadEarlier}
      isLoadingEarlier={isLoadingEarlier}
      …
    />
    <Modal
      animationType="slide"
      transparent={true}
      visible={isShowingStickers}
      onRequestClose={this.hideStickersMenu}
    >
        …
    </Modal>
    <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={80} />
  </Container>
</Root>

Expected Results

Open the screen with the React-Native-Gifted-Chat interface normally.

Additional Information

• Nodejs version: 10.16
• React version: 16.9
• React Native version: 0.61
• react-native-gifted-chat version: 0.13
• Platform(s) (iOS, Android, or both?): iOS
• TypeScript version: –

[erbud]

I've solved it by stopping use CustomActions component. In iOS I used it to a try an example code…, but I really don't need it.

_renderActions(props) {
  const { t } = this.props;

  /*if (Platform.OS === 'ios') {
    return (
      <CustomActions {...props} />
    );
  }*/
  const options = {
    [t('source:stickers')]: (props) => {
      this.showStickersMenu();
    },
    [t('source:imagesGallery')]: (props) => {
      this.pickImage(props);
    },
    [t('source:takePicture')]: (props) => {
      this.takePicture(props);
    },
    [t('common:cancel')]: () => {}
  };
  return (
    <Actions {...props} options={options} />
  );
};

Sorry for the false negative… (?)

[fukemy]

i got problem when setAccessoryBar, can u help?

const renderAccessory = () => (
    <AccessoryBar onSend={onSendFromUser} isTyping={setIsTyping} />
  )

  const onSendFromUser = (messages: IMessage[] = []) => {
    const createdAt = new Date()
    const messagesToUpload = messages.map(message => ({
      ...message,
      user,
      createdAt,
      _id: Math.round(Math.random() * 1000000),
    }))
    this.onSend(messagesToUpload)
  }