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