wix / react-native-ui-lib

UI Components Library for React Native

Home Page:https://wix.github.io/react-native-ui-lib/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Weird space between KeyboardTrackingView and View

theobouwman opened this issue · comments

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:

Simulator Screenshot - iPhone 14 - 2023-09-08 at 16 11 53

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>
    )
}