Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TextInput with iOS hardware keyboard not working #481

Open
andreyukD opened this issue Mar 28, 2023 · 1 comment
Open

TextInput with iOS hardware keyboard not working #481

andreyukD opened this issue Mar 28, 2023 · 1 comment

Comments

@andreyukD
Copy link

andreyukD commented Mar 28, 2023

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',
  },
});
@malanchito
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants