React Native: Is it possible to TextInput keep on focus when the Modal is opened?

Question

I need to keep input text in TextInput while the Modal is opened. FYI, TextInput is not a child component of Modal

I know it doesn't normal but the situation is pushing me to do this.

Please help me if you have experience in solving this kind of problem.

If `Modal` opens then how Input would be focus? Please share some ref view — Nooruddin Lakhani, Nov 18 '20 at 04:14
Yeah, that's what I am asking. Do you think it's impossible to make focus the `TextInput` once the `Modal` is opened? — Smart Solutions, Nov 18 '20 at 04:15

score 0 · Answer 1 · answered Nov 18 '20 at 04:34

Use can use Ref object to focus the text input every time modal will be visible

check this code,,,,


export default function App() {
  const [visible, setVisible] = React.useState(false);

  const input = React.createRef();
  React.useEffect(() => {
    if (visible) {
      input.current.focus();
    }
  }, [visible]);
  return (
    <View style={styles.container}>
      <Button
        title="Click"
        onPress={() => {
          setVisible(true);
        }}
      />
      <Modal
        visible={visible}
        onRequestClose={() => {
          setVisible(false);
        }}>
        <View style={styles.modal}>
          <TextInput ref={input} />
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  modal: {
    width: '100%',
    height: '100%',
  },
});

score 0 · Answer 2 · answered Nov 18 '20 at 05:05

Use this way

CustomModal.js

const CustomModal = React.forwardRef((props, ref) => (
  React.useEffect(() => {
   ref.current.focus();
 }, []);

  return (
    <Modal isActive={props.isActive}>
      <ModalClose onClick={props.handleClose} />
    </Modal>
  )
))

App.js

export default function App() {
  const [visible, setVisible] = React.useState(false);

  const input = React.createRef();
 
  return (
    <View >
      <TextInput ref={input} /> // Create textinput outside here
      <Button
        title="Click"
        onPress={() => {
          setVisible(true);
        }}
      />
      <CustomModal    
    isActive={visible} 
    handleClose={()=>{}} 
    ref={input}
      /> 
    </View>
  );
}

React Native: Is it possible to TextInput keep on focus when the Modal is opened?

2 Answers2