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

Update README on how to fix Android keyboard #1382

Closed
wants to merge 2 commits into from
Closed

Update README on how to fix Android keyboard #1382

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bee56a0
Update README on how to fix Android keyboard
chandlervdw Sep 5, 2019
18cc7cd
Fix ternary operator
chandlervdw Sep 6, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 3 additions & 8 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -382,16 +382,11 @@ If you are using Create React Native App / Expo, no Android specific installatio

- For **Expo**, there are at least 2 solutions to fix it:

- Wrap GiftedChat in a [`KeyboardAvoidingView`](https://facebook.github.io/react-native/docs/keyboardavoidingview). This should only be done for Android, as `KeyboardAvoidingView` may conflict with the iOS keyboard avoidance already built into GiftedChat, e.g.:
- Add a [`KeyboardAvoidingView`](https://facebook.github.io/react-native/docs/keyboardavoidingview) below GiftedChat, wrapped in a parent whose `flex` is 1. This should only be done for Android, as `KeyboardAvoidingView` may conflict with the iOS keyboard avoidance already built into GiftedChat, e.g.:
```
<View style={{ flex: 1 }}>
{
Platform.OS === 'android' ?
<KeyboardAvoidingView behavior="padding">
<GiftedChat />
</KeyboardAvoidingView> :
<GiftedChat />
}
<GiftedChat />
{Platform.OS === 'android' ? <KeyboardAvoidingView behavior="padding" />}
</View>
```
If you use React Navigation, additional handling may be required to account for navigation headers and tabs. `KeyboardAvoidingView`'s `keyboardVerticalOffset` property can be set to the height of the navigation header and [`tabBarOptions.keyboardHidesTabBar`](https://reactnavigation.org/docs/en/bottom-tab-navigator.html#bottomtabnavigatorconfig) can be set to keep the tab bar from being shown when the keyboard is up. Due to a [bug with calculating height on Android phones with notches](facebook/react-native#23693), `KeyboardAvoidingView` is recommended over other solutions that involve calculating the height of the window.
Expand Down