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.

Sign up for GitHub

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

Jump to bottom

KeyboardAvoidingView with keyboardDismissMode interactive does not resize as keyboards hides. #13073

Closed
grundmanise opened this issue Mar 22, 2017 · 27 comments
Closed

KeyboardAvoidingView with keyboardDismissMode interactive does not resize as keyboards hides. #13073

grundmanise opened this issue Mar 22, 2017 · 27 comments
Labels
Help Wanted :octocat: Issues ideal for external contributors. Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Platform: iOS iOS applications. Resolution: Locked This issue was locked by the bot.

Comments

@grundmanise
Copy link

Description

When using keyboardDismissMode="interactive" on ScrollView KeyboardAvoidingView does not resize as keyboards hides.

Here's a gif to demonstrate what behavior I'm referring to:

gif
gif taken from Andr3wHur5t/react-native-keyboard-spacer#48 , but KeyboardAvoidingView has the same issue.

Reproduction

https://sketch.expo.io/B1JIYaynx

Solution

Track keyboard height when panning of the keyboard starts?

Additional Information

  • React Native version: 0.42
  • Platform: iOS
@grundmanise grundmanise changed the title KeyboardAvoidingView with keyboardDismissMode interactive KeyboardAvoidingView with keyboardDismissMode interactive does not resize as keyboards hides. Mar 22, 2017
@RyanMitchellWilson

This comment has been minimized.

Sign in to view
@hramos hramos added the Icebox label Jul 25, 2017
@hramos

This comment has been minimized.

Sign in to view
@hramos hramos closed this as completed Jul 25, 2017
@pozdena
Copy link

pozdena commented Sep 5, 2017

I'm having this issue as well. Maybe most people won't care about this, which led to it being auto-closed, but it's crucial to the small number of people who run into this and are using React Native to create complex, high quality apps. I don't have time to contribute right now but I will be forced to fix this eventually if no one else gets around to it. :)

@RyanMitchellWilson

This comment has been minimized.

Sign in to view
@hramos hramos reopened this Sep 6, 2017
@mferranti

This comment has been minimized.

Sign in to view
@artsx

This comment has been minimized.

Sign in to view
@404sand808s

This comment has been minimized.

Sign in to view
@martinezguillaume

This comment has been minimized.

Sign in to view
@RyanMitchellWilson
Copy link

@hramos this has been sitting around for 7 months with no reply from the react-native team. Is there a way we could get this prioritized?

@ericlewis

This comment has been minimized.

Sign in to view
@zsaraf
Copy link

zsaraf commented Dec 6, 2017

@facebook-github-bot anything?

@furkancelik

This comment has been minimized.

Sign in to view
@chrisbull

This comment has been minimized.

Sign in to view
@franzwarning

This comment has been minimized.

Sign in to view
@hramos hramos removed the Icebox label Mar 8, 2018
@react-native-bot react-native-bot added Platform: iOS iOS applications. Help Wanted :octocat: Issues ideal for external contributors. Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. labels Mar 9, 2018
@herarya

This comment has been minimized.

Sign in to view
@freeall
Copy link

freeall commented Apr 4, 2018 •
edited
Loading

@hramos I saw that you closed and re-opened this. Wanted to let you know that this issue still exists in the new versions of react-native. I can't find a way to make KeyboardAvoidingView and ScrollView with keyboardDismissMode='interactive' work together.

@hramos
Copy link
Contributor

hramos commented Apr 4, 2018

Can you specify the version you last tried this on? ("Latest" by itself is not sufficient, due to the monthly release train, release candidates, master).

@mahyarr
Copy link

mahyarr commented Apr 9, 2018

Im using 0.55.2 and I have this problem

@pribeh

This comment has been minimized.

Sign in to view
@borbit
Copy link

borbit commented Aug 6, 2018

I am using 0.56.0 - the problem still exists

@ultramiraculous
Copy link
Contributor

ultramiraculous commented Aug 11, 2018 •
edited
Loading

For the specific issue in the original post, is there a reason InputAccessoryView wouldn't be used? It seems like the correct solution for a keyboard toolbar/input bar.

@pribeh
Copy link

pribeh commented Aug 11, 2018

@ultramiraculous that's what I was looking for.

@hramos
Copy link
Contributor

hramos commented Sep 11, 2018

Closed as InputAccessoryView is what is preferred in this case.

@hramos hramos closed this as completed Sep 11, 2018
@VinceBT
Copy link

VinceBT commented Dec 14, 2018

Sorry but this is far from closed, the deep problem comes from the fact that the KeyboardAvoidingView does not follow the keyboard movement when dragged interactively with keyboardDismissMode="interactive", as you can see in the first GIF, the ScrollView is half of its size until the touch is released, this has nothing to do with toolbars or InputAccessoryView

@tgensol

This comment has been minimized.

Sign in to view
@scottmas
Copy link

Also, InputAccessoryView has extremely spotty documentation. I'm not a novice programmer and I don't understand at all how this component is supposed to work. My initial efforts ended up with a whole lot of nothing.

@hramos
Copy link
Contributor

hramos commented Jan 15, 2019

The docs for InputAccessoryView link to a working example: https://github.com/facebook/react-native/blob/master/RNTester/js/InputAccessoryViewExample.js. It might also be useful to understand the underlying iOS class: https://developer.apple.com/documentation/uikit/uiresponder/1621119-inputaccessoryview

@facebook facebook locked as resolved and limited conversation to collaborators Dec 11, 2019
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Dec 11, 2019
facebook-github-bot pushed a commit that referenced this issue Sep 25, 2021
@mrousavy @facebook-github-bot
Feature: ScrollView automaticallyAdjustKeyboardInsets (#31402)
6e903b0 
Summary:
Currently, ScrollViews provide the prop `keyboardDismissMode` which lets you choose `"interactive"`. However when the keyboard is shown, it will be rendered above the ScrollView, potentially blocking content.

With the `automaticallyAdjustKeyboardInsets` prop the ScrollView will automatically adjust it's `contentInset`, `scrollIndicatorInsets` and `contentOffset` (scroll Y) props to push the content up so nothing gets blocked.

* The animation curve and duration of the Keyboard is exactly matched.
* The absolute position of the ScrollView is respected, so if the Keyboard only overlaps 10 pixels of the ScrollView, it will only get inset by 10 pixels.
* By respecting the absolute position on screen, this automatically makes it fully compatible with phones with notches (custom safe areas)
* By using the keyboard frame, this also works for different sized keyboards and even `<InputAccessoryView>`s
* This also supports `maintainVisibleContentPosition` and `autoscrollToTopThreshold`.
* I also fixed an issue with the `maintainVisibleContentPosition` (`autoscrollToTopThreshold`) prop(s), so they behave more reliably when `contentInset`s are applied. (This makes automatically scrolling to new items fully compatible with `automaticallyAdjustKeyboardInsets`)

## Changelog

* [iOS] [Added] - ScrollView: `automaticallyAdjustKeyboardInsets` prop: Automatically animate `contentInset`, `scrollIndicatorInsets` and `contentOffset` (scroll Y) to avoid the Keyboard. (respecting absolute position on screen and safe-areas)
* [iOS] [Fixed] - ScrollView: Respect `contentInset` when animating new items with `autoscrollToTopThreshold`, make `automaticallyAdjustKeyboardInsets` work with `autoscrollToTopThreshold` (includes vertical, vertical-inverted, horizontal and horizontal-inverted ScrollViews)

Pull Request resolved: #31402

Test Plan:
<table>
<tr>
<th>Before</th>
<th>After</th>
</tr>
<tr>
<td>

https://user-images.githubusercontent.com/15199031/115708680-9700aa80-a370-11eb-8016-e75d81a92cd7.MP4

</td>

<td>

https://user-images.githubusercontent.com/15199031/115708699-9b2cc800-a370-11eb-976f-c4010cd96d55.MP4

</td>
</table>

### "Why not just use `<KeyboardAvoidingView>`?"

<table>
<tr>
<th>Before (with <code>&lt;KeyboardAvoidingView&gt;</code>)</th>
<th>After (with <code>automaticallyAdjustKeyboardInsets</code>)</th>
</tr>
<tr>
<td>

https://user-images.githubusercontent.com/15199031/115708749-abdd3e00-a370-11eb-8e09-a27ffaef12b8.MP4

</td>

<td>

https://user-images.githubusercontent.com/15199031/115708777-b3044c00-a370-11eb-9b7a-e040ccb3ef8c.MP4

</td>
</table>

> Also notice how the `<KeyboardAvoidingView>` does not match the animation curve of the Keyboard

### Usage

```jsx
export const ChatPage = ({
  flatListProps,
  textInputProps
}: Props): React.ReactElement => (
  <>
    <FlatList
      {...flatListProps}
      keyboardDismissMode="interactive"
      automaticallyAdjustContentInsets={false}
      contentInsetAdjustmentBehavior="never"
      maintainVisibleContentPosition={{ minIndexForVisible: 0, autoscrollToTopThreshold: 100 }}
      automaticallyAdjustKeyboardInsets={true}
    />
    <InputAccessoryView backgroundColor={colors.white}>
      <ChatInput {...textInputProps} />
    </InputAccessoryView>
  </>
);
```

## Related Issues

* Fixes #31394
* Fixes #13073

Reviewed By: yungsters

Differential Revision: D30015799

Pulled By: sota000

fbshipit-source-id: 9ccfb4b6d477da192a96db4cfa07c31a2d2cefcb
facebook-github-bot pushed a commit that referenced this issue Dec 6, 2021
@mrousavy @facebook-github-bot
Feature: ScrollView automaticallyAdjustKeyboardInsets (#31402)
49a1460 
Summary:
Retrying D30015799 (6e903b0) with a fix where ScrollViewNativeComponent was missing the automaticallyAdjustKeyboardInsets prop.
----- Original Summary
Currently, ScrollViews provide the prop `keyboardDismissMode` which lets you choose `"interactive"`. However when the keyboard is shown, it will be rendered above the ScrollView, potentially blocking content.

With the `automaticallyAdjustKeyboardInsets` prop the ScrollView will automatically adjust it's `contentInset`, `scrollIndicatorInsets` and `contentOffset` (scroll Y) props to push the content up so nothing gets blocked.

* The animation curve and duration of the Keyboard is exactly matched.
* The absolute position of the ScrollView is respected, so if the Keyboard only overlaps 10 pixels of the ScrollView, it will only get inset by 10 pixels.
* By respecting the absolute position on screen, this automatically makes it fully compatible with phones with notches (custom safe areas)
* By using the keyboard frame, this also works for different sized keyboards and even `<InputAccessoryView>`s
* This also supports `maintainVisibleContentPosition` and `autoscrollToTopThreshold`.
* I also fixed an issue with the `maintainVisibleContentPosition` (`autoscrollToTopThreshold`) prop(s), so they behave more reliably when `contentInset`s are applied. (This makes automatically scrolling to new items fully compatible with `automaticallyAdjustKeyboardInsets`)

## Changelog

* [iOS] [Added] - ScrollView: `automaticallyAdjustKeyboardInsets` prop: Automatically animate `contentInset`, `scrollIndicatorInsets` and `contentOffset` (scroll Y) to avoid the Keyboard. (respecting absolute position on screen and safe-areas)
* [iOS] [Fixed] - ScrollView: Respect `contentInset` when animating new items with `autoscrollToTopThreshold`, make `automaticallyAdjustKeyboardInsets` work with `autoscrollToTopThreshold` (includes vertical, vertical-inverted, horizontal and horizontal-inverted ScrollViews)

Pull Request resolved: #31402

Test Plan:
<table>
<tr>
<th>Before</th>
<th>After</th>
</tr>
<tr>
<td>

https://user-images.githubusercontent.com/15199031/115708680-9700aa80-a370-11eb-8016-e75d81a92cd7.MP4

</td>

<td>

https://user-images.githubusercontent.com/15199031/115708699-9b2cc800-a370-11eb-976f-c4010cd96d55.MP4

</td>
</table>

### "Why not just use `<KeyboardAvoidingView>`?"

<table>
<tr>
<th>Before (with <code>&lt;KeyboardAvoidingView&gt;</code>)</th>
<th>After (with <code>automaticallyAdjustKeyboardInsets</code>)</th>
</tr>
<tr>
<td>

https://user-images.githubusercontent.com/15199031/115708749-abdd3e00-a370-11eb-8e09-a27ffaef12b8.MP4

</td>

<td>

https://user-images.githubusercontent.com/15199031/115708777-b3044c00-a370-11eb-9b7a-e040ccb3ef8c.MP4

</td>
</table>

> Also notice how the `<KeyboardAvoidingView>` does not match the animation curve of the Keyboard

### Usage

```jsx
export const ChatPage = ({
  flatListProps,
  textInputProps
}: Props): React.ReactElement => (
  <>
    <FlatList
      {...flatListProps}
      keyboardDismissMode="interactive"
      automaticallyAdjustContentInsets={false}
      contentInsetAdjustmentBehavior="never"
      maintainVisibleContentPosition={{ minIndexForVisible: 0, autoscrollToTopThreshold: 100 }}
      automaticallyAdjustKeyboardInsets={true}
    />
    <InputAccessoryView backgroundColor={colors.white}>
      <ChatInput {...textInputProps} />
    </InputAccessoryView>
  </>
);
```

## Related Issues

* Fixes #31394
* Fixes #13073

Reviewed By: yungsters

Differential Revision: D32578661

Pulled By: sota000

fbshipit-source-id: 45985e2844275fe96304eccfd1901907dc4f9279
arunim2405 pushed a commit to arunim2405/react-native that referenced this issue Dec 9, 2021
@mrousavy @arunim2405
Feature: ScrollView automaticallyAdjustKeyboardInsets (facebook#31402)
1810f4d 
Summary:
Retrying D30015799 (facebook@6e903b0) with a fix where ScrollViewNativeComponent was missing the automaticallyAdjustKeyboardInsets prop.
----- Original Summary
Currently, ScrollViews provide the prop `keyboardDismissMode` which lets you choose `"interactive"`. However when the keyboard is shown, it will be rendered above the ScrollView, potentially blocking content.

With the `automaticallyAdjustKeyboardInsets` prop the ScrollView will automatically adjust it's `contentInset`, `scrollIndicatorInsets` and `contentOffset` (scroll Y) props to push the content up so nothing gets blocked.

* The animation curve and duration of the Keyboard is exactly matched.
* The absolute position of the ScrollView is respected, so if the Keyboard only overlaps 10 pixels of the ScrollView, it will only get inset by 10 pixels.
* By respecting the absolute position on screen, this automatically makes it fully compatible with phones with notches (custom safe areas)
* By using the keyboard frame, this also works for different sized keyboards and even `<InputAccessoryView>`s
* This also supports `maintainVisibleContentPosition` and `autoscrollToTopThreshold`.
* I also fixed an issue with the `maintainVisibleContentPosition` (`autoscrollToTopThreshold`) prop(s), so they behave more reliably when `contentInset`s are applied. (This makes automatically scrolling to new items fully compatible with `automaticallyAdjustKeyboardInsets`)

## Changelog

* [iOS] [Added] - ScrollView: `automaticallyAdjustKeyboardInsets` prop: Automatically animate `contentInset`, `scrollIndicatorInsets` and `contentOffset` (scroll Y) to avoid the Keyboard. (respecting absolute position on screen and safe-areas)
* [iOS] [Fixed] - ScrollView: Respect `contentInset` when animating new items with `autoscrollToTopThreshold`, make `automaticallyAdjustKeyboardInsets` work with `autoscrollToTopThreshold` (includes vertical, vertical-inverted, horizontal and horizontal-inverted ScrollViews)

Pull Request resolved: facebook#31402

Test Plan:
<table>
<tr>
<th>Before</th>
<th>After</th>
</tr>
<tr>
<td>

https://user-images.githubusercontent.com/15199031/115708680-9700aa80-a370-11eb-8016-e75d81a92cd7.MP4

</td>

<td>

https://user-images.githubusercontent.com/15199031/115708699-9b2cc800-a370-11eb-976f-c4010cd96d55.MP4

</td>
</table>

### "Why not just use `<KeyboardAvoidingView>`?"

<table>
<tr>
<th>Before (with <code>&lt;KeyboardAvoidingView&gt;</code>)</th>
<th>After (with <code>automaticallyAdjustKeyboardInsets</code>)</th>
</tr>
<tr>
<td>

https://user-images.githubusercontent.com/15199031/115708749-abdd3e00-a370-11eb-8e09-a27ffaef12b8.MP4

</td>

<td>

https://user-images.githubusercontent.com/15199031/115708777-b3044c00-a370-11eb-9b7a-e040ccb3ef8c.MP4

</td>
</table>

> Also notice how the `<KeyboardAvoidingView>` does not match the animation curve of the Keyboard

### Usage

```jsx
export const ChatPage = ({
  flatListProps,
  textInputProps
}: Props): React.ReactElement => (
  <>
    <FlatList
      {...flatListProps}
      keyboardDismissMode="interactive"
      automaticallyAdjustContentInsets={false}
      contentInsetAdjustmentBehavior="never"
      maintainVisibleContentPosition={{ minIndexForVisible: 0, autoscrollToTopThreshold: 100 }}
      automaticallyAdjustKeyboardInsets={true}
    />
    <InputAccessoryView backgroundColor={colors.white}>
      <ChatInput {...textInputProps} />
    </InputAccessoryView>
  </>
);
```

## Related Issues

* Fixes facebook#31394
* Fixes facebook#13073

Reviewed By: yungsters

Differential Revision: D32578661

Pulled By: sota000

fbshipit-source-id: 45985e2844275fe96304eccfd1901907dc4f9279
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Help Wanted :octocat: Issues ideal for external contributors. Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Platform: iOS iOS applications. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Feature: ScrollView automaticallyAdjustKeyboardInsets mrousavy/react-native