react-native-gifted-chat: renderMessageVideo and renderMessageAudio doesn't work on expo ~42.0.1.

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;
    };

@aamiryameen @DaanOolbekkink Thank you so much guys for co-operating, but a some time ago, I could successfully implement it using only renderMessageVideo and renderMessageAudio functions with the expo-av package of expo, Link to it is here : https://docs.expo.dev/versions/latest/sdk/av/ I created separate audio video components to render, and used those same function as props in the same <GiftedChat/> tag, and it works!!! Something like this for video (you can figure out the audio part ; ) ):

import React from 'react';
import { StyleSheet, Dimensions } from 'react-native';
import { Video } from 'expo-av';

const MessageVideo = ({ props }) => {
    const video = React.useRef(null);

    return (
        <Video
            ref={video}
            style={styles.video}
            source={{
                uri: props.currentMessage.video,
            }}
            useNativeControls
            resizeMode='cover'
            isLooping
        />
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        backgroundColor: '#ecf0f1',
    },
    video: {
        alignSelf: 'center',
        width: Dimensions.get('window').width / 1.4,
        height: Dimensions.get('window').width / 1.4,
        borderRadius: 15,
        marginBottom: 5,
    },
});

export default MessageVideo;

And then :

<GiftedChat
    {...props}
    renderMessageVideo={(props) => <MessageVideo props={props} />}
/>

Later all this, make sure you reload the whole app again! Else it might not work!!!

And same for audio! Thank you guys, once again : ), If you need any more help regarding this, let me know!

Also, my suggestion would be to update expo-cli and everything, along with updating of the package again if the issue keeps happening!

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

Does this support youtube iframe player?

I have used it with react native vimeo player so I would think yes it does. My recommendation however is to load a thumbnail as an image in the bubble and then clicking the image would open a modal or new screen with the actual player. 😄

I have the same problem, any solution?