renderMessageVideo and renderMessageAudio doesn't work on expo ~42.0.1.

I had to make changes to the library on the node_modules itself in order to implement audio and video messages functionality, I at first after looking at the messages that said, “You need to provide your own implementation by using renderMessageVideo/renderMessageAudio prop,” I thought I had some sign of hope, but later found out they don’t work . Later I checked on the main component, and found out that, these two functions don’t exist.

Steps to Reproduce / Code Snippets

<GiftedChat
            renderMessageVideo={yourRenderedComponentVideo}
            renderMessageAudio={yourRenderedComponentAudio}
/>

and they don’t work, we see some blank messages or the text message as written before…

Expected Results

Expected results are pretty simple that, the renderMessageVideo and renderMessageAudio props are supposed to be working, and by sending the _props, we could render the message.

Additional Information

• Nodejs version: v14.17.3
• React version: 16.13.1
• expo version: ~42.0.1
• react-native-gifted-chat version: ^0.16.3
• Platform(s) (iOS, Android, or both?): both

[DaanOolbekkink]

Are you using typescript? Because when I go to the defaultProp types I do see renderMessageImage but I do not see renderMessageVideo. This is on version 0.16.3

static defaultProps: {
        messages: never[];
        messagesContainerStyle: undefined;
        text: undefined;
        placeholder: string;
        disableComposer: boolean;
        messageIdGenerator: () => string;
        user: {};
        onSend: () => void;
        locale: null;
        timeFormat: string;
        dateFormat: string;
        loadEarlier: boolean;
        onLoadEarlier: () => void;
        isLoadingEarlier: boolean;
        renderLoading: null;
        renderLoadEarlier: null;
        renderAvatar: undefined;
        showUserAvatar: boolean;
        actionSheet: null;
        onPressAvatar: null;
        onLongPressAvatar: null;
        renderUsernameOnMessage: boolean;
        renderAvatarOnTop: boolean;
        renderBubble: null;
        renderSystemMessage: null;
        onLongPress: null;
        renderMessage: null;
        renderMessageText: null;
        renderMessageImage: null;
        imageProps: {};
        videoProps: {};
        audioProps: {};
        lightboxProps: {};
        textInputProps: {};
        listViewProps: {};
        renderCustomView: null;
        isCustomViewBottom: boolean;
        renderDay: null;
        renderTime: null;
        renderFooter: null;
        renderChatEmpty: null;
        renderChatFooter: null;
        renderInputToolbar: null;
        renderComposer: null;
        renderActions: null;
        renderSend: null;
        renderAccessory: null;
        isKeyboardInternallyHandled: boolean;
        onPressActionButton: null;
        bottomOffset: number;
        minInputToolbarHeight: number;
        keyboardShouldPersistTaps: string;
        onInputTextChanged: null;
        maxInputLength: null;
        forceGetKeyboardHeight: boolean;
        inverted: boolean;
        extraData: null;
        minComposerHeight: number | undefined;
        maxComposerHeight: number;
        wrapInSafeArea: boolean;
    };

[DaanOolbekkink]

Okay so I don’t know why that is not working. This is my renderMessageVideo…

const renderBubble = (props: any) => {
    return <Bubble {...props}
      renderMessageVideo={() =>
        <Pressable onPress={openVideo} style={styles.video}>
          {props.currentMessage?.video &&
            <Vimeo
              videoId={'76979871'}
              loop={false}
              autoPlay={false}
              controls={false}
              speed={false}
              time={'0m0s'}
            />
          }
        </Pressable>
      }
    />
  }

<GiftedChat renderBubble={renderBubble} />

const styles = StyleSheet.create({
  video: {
    width: '92%',
    aspectRatio: 16 / 9,
    marginTop: 10,
    marginLeft: '4%',
    marginRight: '4%'
  }
});

I am using functional components so you might need to change some things to fit it in your code