Weird space between KeyboardTrackingView and View

[theobouwman]

I am using the KeyboardTrackingView to attach the TextField to the keyboard. When I select the TextField it gets attached to the keyboard but it also adds an extra space between it as show in this image (the space between the keyboard and the white textfield:

const OrganisationGroupScreen = ({ route }: any) => {
    const params: OrganisationGroupScreenRouteProps = route.params

    const [isOrganisationAdminOrSuperAdmin] = useUserOrganisationPermission(params.organisationId, ORGANISATION_PERMISSIONS.ADMIN)

    const { data: organisationResult, isLoading } = useGetOrganizationQuery(params.organisationId)
    const organisation = organisationResult?.data

    const {data: groupResult, isLoading: isLoadingGroup } = useGetOrganisationGroupQuery({
        organisationId: params.organisationId,
        groupId: params.groupId
    })
    const group = groupResult?.data

    const canPost = isOrganisationAdminOrSuperAdmin === true ?? group?.members_can_post ?? false
    const canComment = isOrganisationAdminOrSuperAdmin === true ?? group?.members_can_comment ?? false

    if (isLoading || !organisation || isLoadingGroup || !group) {
        return (
            <View flex>
                <Card margin-10>
                    <SkeletonView
                        template={SkeletonView.templates.TEXT_CONTENT}
                        showContent={false}
                        times={2}
                    />
                </Card>
            </View>
        )
    }

    return (
        <View
            flex
        >   
            <View flex>
               <FlatList
                    ListHeaderComponent={
                        <View>
                            <View style={{
                                backgroundColor: organisation?.accent_color,
                            }} height={170} center>
                                <Card background-white>
                                    <Text text70BO>{group.name}</Text>
                                </Card>
                            </View>
                            <Card background-white borderRadius={0}>
                                <Text text80R numberOfLines={2} ellipsizeMode="tail">{group.description}</Text>
                            </Card>
                        </View>
                    }
                    data={[]}
                    renderItem={() => null}
                />
            </View>
            {canPost ?
                <KeyboardTrackingView
                    style={{
                        backgroundColor: 'white',
                    }}
                    trackInteractive
                    useSafeArea
                >
                    <View background-white marginT-10 padding-10>
                        <TextField
                            placeholder={'Ask a question'}
                            onChangeText={() => {}}
                            enableErrors
                            showCharCounter
                            multiline
                            textAlignVertical={'top'}
                            maxLength={250}
                        />
                    </View>
                </KeyboardTrackingView>
            : null}
        </View>
    )
}

[GregNing]

trying not use in react-navigation tab navigation

[theobouwman]

@GregNing why not ifI may ask? Any other suggestions?

[GregNing]

@GregNing why not ifI may ask? Any other suggestions?

FYI

maybe have some conflict with React Navigation? still figure out

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.