Skip to content
New issue

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

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

Already on GitHub? # to your account

UI problem with iOS floating keyboard in iPad. #44068

Closed
gkasireddy202 opened this issue Apr 13, 2024 · 15 comments
Closed

UI problem with iOS floating keyboard in iPad. #44068

gkasireddy202 opened this issue Apr 13, 2024 · 15 comments
Labels
API: Keyboard Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Newer Patch Available Platform: iOS iOS applications.

Comments

@gkasireddy202
Copy link

Description

Issue with TextInput return type "Done" on iPad using Floating keyboard

Steps to reproduce

  1. Focus on Textinput.
  2. Click on the Done button.
  3. The login button has disappeared.

React Native Version

0.73.2

Affected Platforms

Runtime - iOS

Output of npx react-native info

OS: macOS 14.2.1
  CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Memory: 507.06 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 19.8.1
    path: /usr/local/bin/node
  Yarn: Not Found
  npm:
    version: 6.14.18
    path: ~/Documents/Projects//Mobile/Myapp/node_modules/.bin/npm
  Watchman:
    version: 2023.03.13.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/gopi/.rvm/gems/ruby-2.7.6/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - watchOS 10.2
  Android SDK:
    API Levels:
      - "23"
      - "24"
      - "25"
      - "26"
      - "27"
      - "28"
      - "29"
      - "30"
      - "31"
      - "32"
      - "33"
    Build Tools:
      - 28.0.3
      - 29.0.2
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 32.0.0
      - 32.1.0
      - 33.0.0
    System Images:
      - android-29 | Google APIs Intel x86 Atom
      - android-29 | Google Play Intel x86 Atom
      - android-30 | Google APIs Intel x86 Atom
      - android-32 | Google APIs Intel x86 Atom_64
      - android-32 | Google Play Intel x86 Atom_64
      - android-33 | Google APIs Intel x86 Atom_64
      - android-33 | Google Play Intel x86 Atom_64
    Android NDK: Not Found
IDEs:
  Android Studio: 2021.2 AI-212.5712.43.2112.8609683
  Xcode:
    version: 15.1/15C65
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 11.0.15
    path: /usr/bin/javac
  Ruby:
    version: 2.7.6
    path: /Users/gopi/.rvm/rubies/ruby-2.7.6/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.2
    wanted: 0.73.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

Stacktrace or Logs

import React, { Component } from 'react';
import { View, TextInput, Button, KeyboardAvoidingView, StyleSheet } from 'react-native';

class Loginpage extends Component {
  state = {
    username: '',
    password: '',
  };

  handleUsernameChange = (username) => {
    this.setState({ username });
  };

  handlePasswordChange = (password) => {
    this.setState({ password });
  };

  handleLogin = () => {
    const { username, password } = this.state;
    // Add your login logic here
    console.log('Username:', username);
    console.log('Password:', password);
  };

  render() {
    return (
      <KeyboardAvoidingView style={styles.container} behavior="padding">
        <View style={styles.inputContainer}>
          <TextInput
            style={styles.input}
            placeholder="Username"
            onChangeText={this.handleUsernameChange}
            value={this.state.username}
            autoCapitalize="none"
          />
          <TextInput
            style={styles.input}
            placeholder="Email"
            onChangeText={this.handleUsernameChange}
            value={this.state.username}
            autoCapitalize="none"
          />
          <TextInput
            style={styles.input}
            placeholder="Phone"
            onChangeText={this.handleUsernameChange}
            value={this.state.username}
            autoCapitalize="none"
          />
           <TextInput
            style={styles.input}
            placeholder="Password"
            onChangeText={this.handlePasswordChange}
            value={this.state.password}
            returnKeyType='done'
            secureTextEntry
          />
          <Button title="Login" onPress={this.handleLogin} />
        </View>
      </KeyboardAvoidingView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  inputContainer: {
    width: '80%',
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 20,
    paddingLeft: 10,
  },
});

export default Loginpage;

Reproducer

No Git url

Screenshots and Videos

RPReplay_Final1712984638.MP4
@github-actions github-actions bot added Needs: Author Feedback Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. labels Apr 13, 2024
Copy link

⚠️ Missing Reproducible Example
ℹ️ We could not detect a reproducible example in your issue report. Please provide either:
  • If your bug is UI related: a Snack
  • If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

Copy link

⚠️ Newer Version of React Native is Available!
ℹ️ You are on a supported minor version, but it looks like there's a newer patch available - 0.73.6. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

@gkasireddy202
Copy link
Author

Please look in the react-native:0.73.2 because we recently upgraded my project to 0.73.2

@github-actions github-actions bot added Needs: Attention Issues where the author has responded to feedback. and removed Needs: Author Feedback labels Apr 13, 2024
@netmaxt3r
Copy link
Contributor

this is a known issue with KeyboardAvoidingView, since both iOS and android doesn't have any official api to detect floating keyboard there is no official solution in RN as well, in iOS you can use workaround from #29473 comment for now

@gkasireddy202
Copy link
Author

@netmaxt3r - Thanks for your reply. We have 20 - 30 screens in my project. We need to add the condition to KeyboardAvoidingView for every screen any other solution, please?

@gopikrishnacse55
Copy link

gopikrishnacse55 commented Apr 21, 2024

Please check the sample repo for this issue.
react-native:0.73.7
https://github.com/gopikrishnacse55/UIExample

RPReplay_Final1713673899.MP4

@gkasireddy202
Copy link
Author

Hi,
Any update on this issue?

@gkasireddy202
Copy link
Author

Any update on this issue?

@gkasireddy202
Copy link
Author

Please update on this. I provided a repo also.

@gkasireddy202
Copy link
Author

Any update?

@cortinico
Copy link
Contributor

Any update?

Nope there are no updates. We do have hundreds of bugs and we can't look at all of them. We're currently prioritising New Architecture bugs.

Please refrain from commenting "Any updates?" on an issue as that just creates unnecessary noise.

@cortinico cortinico added Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. and removed Needs: Triage 🔍 Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. Needs: Attention Issues where the author has responded to feedback. labels Jun 4, 2024
@renchap
Copy link
Contributor

renchap commented Jun 10, 2024

Opened a PR fixing this in #44859

@gkasireddy202
Copy link
Author

Is this issue fixed?

@gkasireddy202
Copy link
Author

@facebook-github-bot - How can this be fixed in react-native:0.73.7?

@cortinico
Copy link
Contributor

You'll have to ask for a pick request down to 0.73 here:
https://github.com/reactwg/react-native-releases

blakef pushed a commit that referenced this issue Sep 30, 2024
Summary:
On iPadOS, users can change the kind of keyboard displayed onscreen, going from normal keyboard, to split keyboard (one half on the left of the screen, one half on the right), or a floating keyboard that you can move around the screen.

When a non-normal kind of keyboard is used, `<KeyboardAvoidingView>` calculations are all wrong and, depending on the `behavior` prop, can make your screen completely hidden.

This PR attempts to detect that the keyboard is not the "normal displayed-at-bottom-of-screen" keyboard, and forces `enable={false}` if this happens.

The approach of comparing the keyboard width with the window width comes from this comment: #29473 (comment)

A better fix might be to detect the kind of keyboard used, but this involves native code changes and I do not know iOS enough to do that. In addition, I have not found an easy way to do it using iOS APIs after a quick search.

I also chose to cache the window width as a class attribute. Maybe this is not needed as `Dimensions.get('window').width` is very fast and can be called on every keyboard event?

This fixes #44068 and #29473

## Changelog:

[IOS] [FIXED] - Fix `<KeyboardAvoidingView>` with floating keyboard on iPadOS

Pull Request resolved: #44859

Test Plan:
Tested using RNTester and the "Keyboard Avoiding View with different behaviors" example.

Before:

https://github.com/facebook/react-native/assets/42070/111598a3-286c-464d-8db8-73afb35cd7f9

After:

https://github.com/facebook/react-native/assets/42070/0b3bc94f-8b67-4f42-8a83-e11555080268

Reviewed By: cortinico

Differential Revision: D62844854

Pulled By: cipolleschi

fbshipit-source-id: 577444be50019572955a013969d78178914b5b8d
cipolleschi pushed a commit that referenced this issue Oct 7, 2024
Summary:
On iPadOS, users can change the kind of keyboard displayed onscreen, going from normal keyboard, to split keyboard (one half on the left of the screen, one half on the right), or a floating keyboard that you can move around the screen.

When a non-normal kind of keyboard is used, `<KeyboardAvoidingView>` calculations are all wrong and, depending on the `behavior` prop, can make your screen completely hidden.

This PR attempts to detect that the keyboard is not the "normal displayed-at-bottom-of-screen" keyboard, and forces `enable={false}` if this happens.

The approach of comparing the keyboard width with the window width comes from this comment: #29473 (comment)

A better fix might be to detect the kind of keyboard used, but this involves native code changes and I do not know iOS enough to do that. In addition, I have not found an easy way to do it using iOS APIs after a quick search.

I also chose to cache the window width as a class attribute. Maybe this is not needed as `Dimensions.get('window').width` is very fast and can be called on every keyboard event?

This fixes #44068 and #29473

[IOS] [FIXED] - Fix `<KeyboardAvoidingView>` with floating keyboard on iPadOS

Pull Request resolved: #44859

Test Plan:
Tested using RNTester and the "Keyboard Avoiding View with different behaviors" example.

Before:

https://github.com/facebook/react-native/assets/42070/111598a3-286c-464d-8db8-73afb35cd7f9

After:

https://github.com/facebook/react-native/assets/42070/0b3bc94f-8b67-4f42-8a83-e11555080268

Reviewed By: cortinico

Differential Revision: D62844854

Pulled By: cipolleschi

fbshipit-source-id: 577444be50019572955a013969d78178914b5b8d
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
API: Keyboard Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Newer Patch Available Platform: iOS iOS applications.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants