Input Accessory And Keyboard Behavior Like Messenger App

Hi guys!

CAN BE DONE?

Can GiftedChat do the same input/keyboard effect as the Messenger app?

The keyboard will be dismiss when user click Gif/Image icon in the accessory, and will come back when user focus text input!

I tried to research about this, and I found: KeyboardAccessoryView component, develop by Wix. But it has problem in Android, I created an issue here, haven’t fixed yet: https://github.com/wix/react-native-ui-lib/issues/2063

https://user-images.githubusercontent.com/33916400/179034560-04211fa3-c1a5-4ea8-b936-147113acbc73.MOV

[huuthinh95]

@000xuandu you can try this code.

import React, { useState, useCallback, useEffect, useRef } from 'react';
import { TextInput, TouchableOpacity, View, Text, Keyboard, Animated, Platform } from 'react-native';
import { GiftedChat } from 'react-native-gifted-chat';
import { RNKeyboard, SoftInputMode, KeyboardArea, KeyboardAreaRef } from 'react-native-keyboard-area';

export function App() {
  const [messages, setMessages] = useState([]);
  const heightAni = useRef(new Animated.Value(0)).current;
  const flag = useRef(false);
  const componentDidEnter = () => {
    if (Platform.OS === 'android') {
      RNKeyboard.setWindowSoftInputMode(SoftInputMode.SOFT_INPUT_ADJUST_NOTHING,);
    }
  };
  
  const componentDidExit = () => {
    if (Platform.OS === 'android') {
      RNKeyboard.setWindowSoftInputMode(SoftInputMode.SOFT_INPUT_ADJUST_RESIZE);
    }
  };

  useEffect(() => {
    RNKeyboard.addKeyboardListener(keyboardAreaHeightChanged);
    return () => {
      RNKeyboard.removeKeyboardListener(keyboardAreaHeightChanged)
    }
  }, [])

  const keyboardAreaHeightChanged = useCallback((currentHeight) => {
    // Your logic
    if (flag.current) {
      flag.current = false;
      return;
    }
    Animated.timing(heightAni, {
      toValue: currentHeight,
      duration: 0,
      useNativeDriver: false
    }).start();
  }, []);

  useEffect(() => {
    componentDidEnter()
    return () => {
      componentDidExit()
    };
  }, [])

  useEffect(() => {
    setMessages([
      {
        _id: 1,
        text: 'Hello developer',
        createdAt: new Date(),
        user: {
          _id: 2,
          name: 'React Native',
          avatar: 'https://placeimg.com/140/140/any',
        },
      },
    ])
  }, []);
  const onSend = useCallback((messages = []) => {
    setMessages(previousMessages => GiftedChat.append(previousMessages, messages))
  }, []);

  const renderInputToolbar = () => {
    return (
      <Animated.View style={{borderWidth: 1, borderColor: 'red', flex: 1}}>
        <TextInput style={{borderWidth: 1, borderColor: 'blue'}} />
        <TouchableOpacity onPress={handleChangeMode}>
          <Text>Test</Text>
        </TouchableOpacity>
      </Animated.View>
    )
  }

  const handleChangeMode = () => {
    if (heightAni._value === 0) {
      Animated.timing(heightAni, {
        toValue: 305,//get height of keyboard
        duration: 100,
        useNativeDriver: false
      }).start();
    } else {
      flag.current = true'''
      Keyboard.dismiss()
    }
  }

  return (
    <View style={{flex: 1}}>
      <GiftedChat
        messages={messages}
        onSend={messages => onSend(messages)}
        user={{
          _id: 1,
        }}
        multiline
        renderComposer={renderInputToolbar}
      />
      {/* <KeyboardArea
        ref={keyboardSpacerRef.current}
        isOpen={false}
        onChange={keyboardAreaHeightChanged}
      >
      </KeyboardArea> */}
      <Animated.View style={{height: heightAni }}>
        <Text>custom content</Text>
      </Animated.View>
    </View>
  )
}

export default App;

[fukemy]

did u used expo?