Problem rendering background about react-native-keyboard-accessory-view

[demchenkoalex]

Hi @mariovillamizar thanks for the kind words :) I will check this ASAP (probably this weekend). Can you please give an example of a background you are using? Is it ImageBackground or some kind of blur library?

[mariovillamizar]

Hey @demchenkoalex take a look of the screenshots:

This is my code:

<KeyboardAccessoryView 
    contentContainerStyle={{overflow: 'hidden'}}
    renderScrollable={renderScrollable}
    renderBackground={renderBackground}
    useListenersOnAndroid
    spaceBetweenKeyboardAndAccessoryView={Platform.OS == 'android' ? 20 : 0}
    contentOffsetKeyboardOpened={Platform.OS == 'android' ? 20 : 40}
>

const renderScrollable = (panHandlers: GestureResponderHandlers) => (
    <ScrollView ref={scrollView} keyboardDismissMode='interactive' {...panHandlers}>
        
        <View style={styles.recommendContainer}>
            <TextField
                value={screen.state.comment}
                containerStyle={styles.textFieldContainer}
                inputStyle={styles.textFieldInput}
                onChangeText={(text: string) => screen.setComment(text)}
                autoCapitalize={'sentences'}
                autoCorrect
                multiline
                maxLength={inputCharactersLimit}
                errorMessage={`${screen.state.comment?.length ?? 0}/${inputCharactersLimit}`}
                errorStyle={styles.textFieldCounter}
                scrollEnabled={false}
                onContentSizeChange={() => scrollView.current?.scrollToEnd()}
                //autoFocus
            />
        </View> 
    </ScrollView>
)

const renderBackground = () => (
    <View style={{backgroundColor: 'red', height: 400, width: 400}}></View>
)

The background view is the red box (just for test purposes). Let me know if you need some extra info.

[demchenkoalex]

I should probably emphasise this, but in the docs

(e.g. <ImageBackground style={StyleSheet.absoluteFill} /> ). Remember about absolute positioning.

background should be absolute positioned otherwise it will depend on a view you have in accessory, can you please try

<View style={StyleSheet.flatten([StyleSheet.absoluteFill, {backgroundColor: 'red', height: 400, width: 400}])}></View>

[demchenkoalex]

Hi @mariovillamizar were you able to fix this using absolute positioning?

[demchenkoalex]

Closing due no response, feel free to reopen if the issue is still there