feat(chat) keyboard covering input on android fix

This commit is contained in:
Calin Chitu 2021-12-08 16:35:20 +02:00 committed by Calinteodor
parent 661a3d34be
commit 5dbf4845fb
3 changed files with 20 additions and 3 deletions

View File

@ -4,7 +4,8 @@ import { useHeaderHeight } from '@react-navigation/stack';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { import {
KeyboardAvoidingView, KeyboardAvoidingView,
Platform Platform,
StatusBar
} from 'react-native'; } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { useSafeAreaInsets } from 'react-native-safe-area-context';
@ -22,6 +23,11 @@ type Props = {
*/ */
contentContainerStyle?: StyleType, contentContainerStyle?: StyleType,
/**
* Is a text input rendered at the bottom of the screen?
*/
hasBottomTextInput: boolean,
/** /**
* Is the screen rendering a tab navigator? * Is the screen rendering a tab navigator?
*/ */
@ -38,6 +44,7 @@ const JitsiKeyboardAvoidingView = (
children, children,
contentContainerStyle, contentContainerStyle,
hasTabNavigator, hasTabNavigator,
hasBottomTextInput,
style style
}: Props) => { }: Props) => {
const headerHeight = useHeaderHeight(); const headerHeight = useHeaderHeight();
@ -54,8 +61,10 @@ const JitsiKeyboardAvoidingView = (
const tabNavigatorPadding const tabNavigatorPadding
= hasTabNavigator ? headerHeight : 0; = hasTabNavigator ? headerHeight : 0;
const noNotchDevicePadding = bottomPadding || 10; const noNotchDevicePadding = bottomPadding || 10;
const iosVerticalOffset = headerHeight + noNotchDevicePadding + tabNavigatorPadding; const iosVerticalOffset
const androidVerticalOffset = headerHeight; = headerHeight + noNotchDevicePadding + tabNavigatorPadding;
const androidVerticalOffset = hasBottomTextInput
? headerHeight + StatusBar.currentHeight : headerHeight;
return ( return (
<KeyboardAvoidingView <KeyboardAvoidingView

View File

@ -27,6 +27,11 @@ type Props = {
*/ */
footerComponent?: Function, footerComponent?: Function,
/**
* Is a text input rendered at the bottom of the screen?
*/
hasBottomTextInput?: boolean,
/** /**
* Is the screen rendering a tab navigator? * Is the screen rendering a tab navigator?
*/ */
@ -43,12 +48,14 @@ const JitsiScreen = ({
children, children,
footerComponent, footerComponent,
hasTabNavigator = false, hasTabNavigator = false,
hasBottomTextInput = false,
style style
}: Props) => ( }: Props) => (
<View <View
style = { styles.jitsiScreenContainer }> style = { styles.jitsiScreenContainer }>
<JitsiKeyboardAvoidingView <JitsiKeyboardAvoidingView
contentContainerStyle = { contentContainerStyle } contentContainerStyle = { contentContainerStyle }
hasBottomTextInput = { hasBottomTextInput }
hasTabNavigator = { hasTabNavigator } hasTabNavigator = { hasTabNavigator }
style = { style }> style = { style }>
<SafeAreaView <SafeAreaView

View File

@ -53,6 +53,7 @@ class Chat extends AbstractChat<Props> {
return ( return (
<JitsiScreen <JitsiScreen
hasBottomTextInput = { true }
hasTabNavigator = { true } hasTabNavigator = { true }
style = { styles.chatContainer }> style = { styles.chatContainer }>
<MessageContainer messages = { _messages } /> <MessageContainer messages = { _messages } />