Extra space in KeyboardAccessoryView when using TabNavigation

[mssod-alfa]

Hello,

I have created a demo app using the ViewExample Code as component (including a view with a TextInput) inside a TabNavigator. Running the app with IOS Simulator iPhone12 (or iPhone7) there is an extra space below the KeyboardAccessoryView.

If I use the StackNavigation the app runs correctly. It seems to be, that the height of the extra space below the KeyboardAccessoryView corresponds to the height of the tabbar, which is hidden by the keyboard.

Another observation: In android simulator you can see the tabbar below the KeyboardAccessoryView.

Has anyone suggestions who to get rid of the extra space under IOS or another solution to create a toolbar which is only visible if the keyboard is open due a text edit?

Many thanks in advance and best regards

`app.js

import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { StyleSheet, Text, View } from 'react-native';

import ViewExample from "./screens/ViewExample";

import { NavigationContainer, useLinking } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Stack = createStackNavigator(); const Tab = createBottomTabNavigator();

export default function App() { return ( <NavigationContainer> <Tab.Navigator initialRouteName="ViewExample"> <Tab.Screen options={{title: "TAB1"}} name="TAB1" component={TabScreen1} /> <Tab.Screen options={{title: "ViewExample"}} name="ViewExample" component={ViewExample} /> <Tab.Screen options={{title: "TAB2"}} name="TAB2" component={TabScreen2} /> <Tab.Screen options={{title: "TAB3"}} name="TAB3" component={TabScreen3} /> </Tab.Navigator> </NavigationContainer> ); }

const TabScreen1 = () => { return ( <View><Text>TAB SCREEN 1</Text></View> ) }

const TabScreen2 = () => { return ( <View><Text>TAB SCREEN 1</Text></View> ) }

const TabScreen3 = () => { return ( <View><Text>TAB SCREEN 1</Text></View> ) }

const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });`

`ViewExample.js

import React, { Component } from "react";

import { StyleSheet, View, Text, TextInput, Button, ScrollView } from "react-native";

import { KeyboardAccessoryView } from "react-native-keyboard-accessory";

class ViewExample extends Component { render() { return ( <View style={styles.container}> <ScrollView style={{flex:1}} contentContainerStyle={{flex:1}}> <View> <Text style={{ padding: 12 }}>Text 1</Text> </View> <View> <Text style={{ padding: 12 }}>Text 2</Text> </View> <View> <TextInput style={{ padding: 12 }} placeholder="Eingabe 5" /> </View> </ScrollView> <KeyboardAccessoryView alwaysVisible={true} androidAdjustResize> {({ isKeyboardVisible }) => ( <View style={styles.textInputView}> <TextInput placeholder="Write your message" underlineColorAndroid="transparent" style={styles.textInput} multiline={true} /> {isKeyboardVisible && ( <Button style={styles.textInputButton} title="Send" onPress={() => {}} /> )} </View> )} </KeyboardAccessoryView> </View> ); } }

ViewExample.navigationOptions = { title: "View Example", };

const styles = StyleSheet.create({ container: { flex: 1, }, textInputView: { padding: 8, flexDirection: "row", justifyContent: "space-between", alignItems: "center", }, textInput: { flexGrow: 1, borderWidth: 1, borderRadius: 10, borderColor: "#CCC", padding: 10, fontSize: 16, marginRight: 10, textAlignVertical: "top", }, textInputButton: { flexShrink: 1, }, });

export default ViewExample;`

[Brma1048]

@mssod-alfa did you find any solution?

[mssod-alfa]

No, the problem still exists.

[SVPetrenko]

@mssod-alfa , @Brma1048 Solution for this issue is addressed here. Please check it.

https://github.com/ardaogulcan/react-native-keyboard-accessory/issues/47#issuecomment-820056381