[Android] Keyboard hides toolbar

[oferRounds]

On Android, when the keyboard get opened, it hides the input beneath it. I followed the example – this is my code bellow. Any idea?

render() {
        return (
            <View style = { styles.container }>
                <FlatList<CommentData>
                    keyboardDismissMode = 'interactive'
                    contentContainerStyle = { styles.listContainer }
                    ItemSeparatorComponent = { this.listItemSeparatorComponent }
                    data = { this.props.comments }
                    keyExtractor = { item => item.id.toString() }
                    renderItem = { this.renderItem }
                    extraData = { this.state.userNameButtonSizes }
                    keyboardShouldPersistTaps = { 'handled' }
                />
                <KeyboardAccessoryView
                     renderContent = { this.keyboardAccessoryViewContent }
                     trackInteractive = { true }
                     kbInputRef = { this.textInputRef }
                     revealKeyboardInteractive = { true }
                 />
            </View>
        )
}

private keyboardAccessoryViewContent = (): ReactElement<View> => {
        return (
            <View style = { styles.inputAccessoryViewContainer }>
                <AutoGrowingTextInput
                    onFocus = { this.onInputFocus }
                    onBlur = { this.onInputBlur }
                    ref = { this.onGetTextInputRef }
                    value = { this.state.currentComment }
                    style = { styles.inputAccessoryViewText }
                    placeholder = { LocalizationService.strings.commentsScreen_inputPlaceholder }
                    placeholderTextColor = { BOB_SECONDARY_DARK_TEXT }
                    onChangeText = { this.onChangeText }
                />
                <TouchableOpacity style = { styles.sendCommentButton } onPress = { this.onPressSendComment }>
                    <Image
                        style = { styles.sendCommentIcon }
                        source = { require('../../../images/sendCommentButton.png') }
                    />
                </TouchableOpacity>
            </View>
        )
    }

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    listContainer: {
        flex: 1,
        paddingBottom: 12,
        paddingTop: 20,
        paddingHorizontal: 12,
        backgroundColor: BOB_WHITE
    },
inputAccessoryViewContainer: {
        backgroundColor: '#f5f1ea',
        flexDirection: 'row',
        alignItems: 'center',
        flex: 1,
        paddingLeft: 12,
        paddingRight: 15,
        ios: {
            paddingVertical: 8
        },
        android: {
            paddingTop: 8,
            paddingBottom: 20
        }
    },
    inputAccessoryViewText: {
        maxHeight: 170,
        backgroundColor: BOB_WHITE,
        flex: 1,
        height: 36,
        fontSize: 15,
        fontFamily: GOTHAM_BOOK,
        color: BOB_EXTRA_DARK_TEXT,
        paddingTop: 12,
        paddingBottom: 8,
        paddingHorizontal: 8,
        borderRadius: DEFAULT_BORDER_RADIUS
    },
    sendCommentIcon: {
        height: SEND_COMMENT_ICON_EDGE_SIZE,
        width: SEND_COMMENT_ICON_EDGE_SIZE,
        resizeMode: 'contain'
    },
 ...
})

[igsys]

I do encounter the same issue.

[M-i-k-e-l]

Hi @oferRounds,

When you say Android, do you mean it works on iOS or you are only looking at Android?

I'll try to give you possible issues so this does not drag on (if it's one of them) :)

When you say example, do you mean the demoScreen? If yes, then you are missing the toolbar.

Besides that I think you can remove the flex: 1 from inputAccessoryViewContainer.

[oferRounds]

@M-i-k-e-l thanks first of all!

• on iOS I use the InputAccessoryView, so I am looking only at Android
• Yes, the example I refer to is in fact the demoScreen
• The toolbar is missing on purpose – I only need the AutoGrowingText part
• I have removed the flex: 1, but the result is still the same...

[M-i-k-e-l]

Here's an example of something that works for me (see image below, I hope that's what you are looking for).

Note: I am using react-native-ui-lib (we have started migrating this library, but it's still a WiP), but I don't think there should be any difference even if you are using the original react-native-keyboard-input.

[oferRounds]

@M-i-k-e-l thanks! I have finally found the issue Interesting, what caused the problem turned out to be the fact his logic was included not in the "root" screen, bug as part of a sub-component

(I have "Post" screen (component), and on the bottom of it, I was adding the , which it was the one who included also this part)

Anyhow, when I took it out - all worked well!

Thank you so much for the help – really appreciate it!