Modal closes in real android devices when Keyboard open in modal

Viewed 686

Modal closes automatically without any error when I click on the last button of the list or the button aligned with the bottom of the screen and focus on the TextInput. This happens only on android real devices. The issue doesn't happen on iOS or Android emulator.

import React, {useState} from 'react';
import {
  FlatList,
  TouchableOpacity,
  Button,
  Modal,
  TextInput,
} from 'react-native';

const data = [
  0,
  1,
  2,
  3,
  4,
  5,
  6,
  7,
  8,
  9,
  0,
  1,
  2,
  3,
  4,
  5,
  6,
  7,
  8,
  9,
  0,
  1,
  2,
  3,
  4,
  5,
  6,
  7,
  8,
  9,
];

const Item = () => {
  const [state, setState] = useState(false);
  return (
    <>
      <TouchableOpacity style={{marginTop: 10}}>
        <Button title="Open" onPress={() => setState(true)} />
      </TouchableOpacity>
      <Modal visible={state}>
        <TextInput placeholder="Type" />
        <Button title="Close" onPress={() => setState(false)} />
      </Modal>
    </>
  );
};

const App = () => {
  return <FlatList data={data} renderItem={() => <Item />} />;
};

export default App;
1 Answers

Move the modal outside the flatlist.

Related