jeremybarbet / react-native-modalize

A highly customizable modal/bottom sheet that loves scrolling content.
https://jeremybarbet.github.io/react-native-modalize
MIT License
2.84k stars 298 forks source link

TextInput with iOS hardware keyboard not working #481

Open andreyukD opened 1 year ago

andreyukD commented 1 year ago

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:

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',
  },
});
malanchito commented 2 months ago

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