Unable to input GIFs from Google Keyboard

[reidkersey]

Issue Description

When user tries to insert a GIF, they get the message 'app_name doesn't support image insertion here'

Steps to Reproduce / Code Snippets

Gifted chat example with no other modifications, running on android with Google Keyboard. Use the keyboard to attempt to insert a GIF.

Expected Results

Developer should have some way to receive the selected GIF, and chose to deal with it how they deal with pictures etc. (or just have the GIF pop into the message box like Google Messager)

Additional Information

• Nodejs version: 11.8.0
• React version: 16.8.3
• React Native version: 0.59.9
• react-native-gifted-chat version: 0.9.11
• Platform(s) (iOS, Android, or both?): Android, iOS untested
• TypeScript version: 3.5.3

[oromis300]

Hi, same here. We want to integrate the possibility to send gif via the keyboard.
Do you have any idea how we can do that?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ede-sous]

Hello,

I have the same issue.
Did you found any solution for this?

[ThemNumbers]

You need to add listener for ForegroundSharing, i solve this problem

[bakerac4]

@ThemNumbers could you expand on your solution?

[filipef101]

@ThemNumbers What is that?

[brkastner]

I was able to get this working by doing the following:

1. Enable support for rendering gifs in native android project (rn docs)
2. Install react-native-image-keyboard (based on an open pr)
3. Create a callback to extract the local uri for the selected gif:

type OnImageChangeCallback = (event: { nativeEvent: { uri: string } }) => void;
const onImageChange: OnImageChangeCallback = ({nativeEvent}) => {
    const {uri} = nativeEvent;
    // upload gif using local uri to somewhere publicly accessible (eg. firebase storage)
    // send a new message with message.image = <publicDownloadUrl>
}

4. Override composer using renderComposer to connect the callback

const renderComposer = props => <Composer {...props} textInputProps={{onImageChange}} />;
return <GiftedChat renderComposer={renderComposer} />

5. Send some gifs!