jeremybarbet/react-native-modalize

TextInput with iOS hardware keyboard not working

andreyukD opened this issue · 1 comments

Describe the bug
The bug appears when I switch from a software keyboard to a hardware keyboard. It occurs when I move the popover and release it in any place. I also noticed that when the prop avoidKeyboardLikeIOS is set to false, the issue with the hardware keyboard goes away, but in that case, the software keyboard overlaps the modal content. I suppose that the problem is with KeyboardAvoidingView, which the library utilizes under the hood.

Reproduce
Simulator iPad Pro (12.9 inch) - 6th generation - iOS 16.2

Dependencies:

  • "expo": "~48.0.9",
  • "expo-status-bar": "~1.4.4",
  • "react": "18.2.0",
  • "react-native": "0.71.4",
  • "react-native-gesture-handler": "^2.9.0",
  • "react-native-modalize": "^2.1.1",
  • "expo-splash-screen": "~0.18.1"
import { StatusBar } from 'expo-status-bar';
import React, { useRef } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, TextInput } from 'react-native';
import { Modalize } from 'react-native-modalize';

export default function App() {
  const modalizeRef = useRef(null);

  const onOpen = () => {
    modalizeRef.current?.open();
  };

  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <TouchableOpacity onPress={onOpen}>
        <Text>Open the modal</Text>
      </TouchableOpacity>
      <Modalize adjustToContentHeight ref={modalizeRef}>
        <TextInput
          placeholder="Placeholder"
          style={{
            borderWidth: 1,
            padding: 20,
            margin: 50,
            fontSize: 30,
          }}
        />
      </Modalize>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Go to settings > Accessibility > Motion and disable Prefer Cross-Fade Transitions or Reduce Motion
WhatsApp Image 2024-09-12 at 15 28 44