Search code examples
react-nativegetstream-io

Which method I have to use for call auto focus on messageInput of stream-chat-react-native

I gonna apply autofocus on stream-chat-react-native message input when open channel screen. But I couldn't find a matched function. SDK: https://github.com/GetStream/stream-chat-react-native In order apply focus as programmatically, what should I do?

enter image description here

Solution

  • To set autofocus to your InputComponent. First of all you need to use Class Component for this task, because of with functional component you can't make reference to your InputComponent. For example:

    class Header extends React.Component {
  editText = null;
  const getRef = input = > {
    this.editText = input;
  }
  
  render() {

    if (this.editText) {
      this.editText.focus();
    }

    return (
      <SomeInputComponent
        placeholder="Поиск"
        onChangeText={text => onChangeText(text)}
        onBlur={e => onBlur(false)}
        ref={ref => this.getRef(ref)}
      />
    )
  }
}

    So your InputComponent will be focusedf