2022-12-31 14:00:52 +01:00
|
|
|
import Button from '@components/Button'
|
2022-12-03 16:50:54 +01:00
|
|
|
import { HeaderLeft } from '@components/Header'
|
2022-12-31 14:00:52 +01:00
|
|
|
import Icon from '@components/Icon'
|
2022-12-28 23:41:36 +01:00
|
|
|
import ComponentSeparator from '@components/Separator'
|
2022-12-31 00:07:28 +01:00
|
|
|
import CustomText from '@components/Text'
|
2021-02-27 16:33:54 +01:00
|
|
|
import TimelineDefault from '@components/Timeline/Default'
|
2022-12-31 15:53:02 +01:00
|
|
|
import { useQuery } from '@tanstack/react-query'
|
|
|
|
import apiGeneral from '@utils/api/general'
|
|
|
|
import apiInstance from '@utils/api/instance'
|
|
|
|
import { getHost } from '@utils/helpers/urlMatcher'
|
2021-08-29 15:25:38 +02:00
|
|
|
import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
|
2023-01-01 16:44:55 +01:00
|
|
|
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
|
2022-12-28 23:41:36 +01:00
|
|
|
import { StyleConstants } from '@utils/styles/constants'
|
2022-12-31 00:07:28 +01:00
|
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
2022-12-31 15:53:02 +01:00
|
|
|
import React, { useEffect, useRef, useState } from 'react'
|
2022-12-03 16:50:54 +01:00
|
|
|
import { useTranslation } from 'react-i18next'
|
2022-12-18 23:15:58 +01:00
|
|
|
import { FlatList, View } from 'react-native'
|
2022-12-31 14:00:52 +01:00
|
|
|
import { Circle } from 'react-native-animated-spinkit'
|
2022-12-31 00:07:28 +01:00
|
|
|
import { Path, Svg } from 'react-native-svg'
|
2020-10-29 14:52:28 +01:00
|
|
|
|
2021-08-29 15:25:38 +02:00
|
|
|
const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
|
2022-12-03 16:50:54 +01:00
|
|
|
navigation,
|
2020-10-29 14:52:28 +01:00
|
|
|
route: {
|
2021-02-13 01:26:02 +01:00
|
|
|
params: { toot, rootQueryKey }
|
2020-10-29 14:52:28 +01:00
|
|
|
}
|
2020-10-31 21:04:46 +01:00
|
|
|
}) => {
|
2022-12-31 00:07:28 +01:00
|
|
|
const { colors } = useTheme()
|
2022-12-31 14:00:52 +01:00
|
|
|
const { t } = useTranslation(['componentTimeline', 'screenTabs'])
|
2022-12-03 16:50:54 +01:00
|
|
|
|
2022-12-31 15:53:02 +01:00
|
|
|
const [hasRemoteContent, setHasRemoteContent] = useState<boolean>(false)
|
|
|
|
|
2022-12-03 16:50:54 +01:00
|
|
|
useEffect(() => {
|
|
|
|
navigation.setOptions({
|
2022-12-31 15:53:02 +01:00
|
|
|
headerTitle: () => (
|
|
|
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
|
|
{hasRemoteContent ? (
|
|
|
|
<Icon
|
|
|
|
name='Wifi'
|
|
|
|
size={StyleConstants.Font.Size.M}
|
|
|
|
color={colors.primaryDefault}
|
|
|
|
style={{ marginRight: StyleConstants.Spacing.S }}
|
|
|
|
/>
|
|
|
|
) : null}
|
|
|
|
<CustomText
|
|
|
|
style={{ color: colors.primaryDefault }}
|
|
|
|
fontSize='L'
|
|
|
|
fontWeight='Bold'
|
|
|
|
numberOfLines={1}
|
|
|
|
children={t('screenTabs:shared.toot.name')}
|
|
|
|
/>
|
|
|
|
</View>
|
|
|
|
),
|
2022-12-03 16:50:54 +01:00
|
|
|
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
|
|
|
|
})
|
2022-12-31 15:53:02 +01:00
|
|
|
}, [hasRemoteContent])
|
2022-12-03 16:50:54 +01:00
|
|
|
|
2021-02-27 16:33:54 +01:00
|
|
|
const flRef = useRef<FlatList>(null)
|
|
|
|
const scrolled = useRef(false)
|
2022-12-16 00:21:53 +01:00
|
|
|
|
2023-01-01 16:44:55 +01:00
|
|
|
const finalData = useRef<Mastodon.Status[]>([{ ...toot, _level: 0, _remote: false }])
|
2022-12-31 15:53:02 +01:00
|
|
|
const highlightIndex = useRef<number>(0)
|
2023-01-01 17:20:35 +01:00
|
|
|
const queryKey: { local: QueryKeyTimeline; remote: QueryKeyTimeline } = {
|
2023-01-01 16:44:55 +01:00
|
|
|
local: ['Timeline', { page: 'Toot', toot: toot.id, remote: false }],
|
|
|
|
remote: ['Timeline', { page: 'Toot', toot: toot.id, remote: true }]
|
|
|
|
}
|
2022-12-31 15:53:02 +01:00
|
|
|
const queryLocal = useQuery(
|
2023-01-01 16:44:55 +01:00
|
|
|
queryKey.local,
|
2022-12-31 15:53:02 +01:00
|
|
|
async () => {
|
|
|
|
const context = await apiInstance<{
|
|
|
|
ancestors: Mastodon.Status[]
|
|
|
|
descendants: Mastodon.Status[]
|
|
|
|
}>({
|
|
|
|
method: 'get',
|
|
|
|
url: `statuses/${toot.id}/context`
|
|
|
|
})
|
|
|
|
|
|
|
|
const statuses: (Mastodon.Status & { _level?: number })[] = [
|
|
|
|
...context.body.ancestors,
|
|
|
|
toot,
|
|
|
|
...context.body.descendants
|
|
|
|
]
|
|
|
|
|
|
|
|
const highlight = context.body.ancestors.length
|
|
|
|
highlightIndex.current = highlight
|
|
|
|
|
|
|
|
for (const [index, status] of statuses.entries()) {
|
|
|
|
if (index < highlight || status.id === toot.id) {
|
|
|
|
statuses[index]._level = 0
|
|
|
|
continue
|
|
|
|
}
|
|
|
|
|
|
|
|
const repliedLevel = statuses.find(s => s.id === status.in_reply_to_id)?._level
|
|
|
|
statuses[index]._level = (repliedLevel || 0) + 1
|
|
|
|
}
|
|
|
|
|
|
|
|
return { pages: [{ body: statuses }] }
|
|
|
|
},
|
|
|
|
{
|
|
|
|
staleTime: 0,
|
|
|
|
refetchOnMount: true,
|
2022-12-31 00:07:28 +01:00
|
|
|
onSuccess: data => {
|
2022-12-31 14:00:52 +01:00
|
|
|
if (data.pages[0].body.length < 1) {
|
2021-02-27 16:33:54 +01:00
|
|
|
navigation.goBack()
|
2022-02-12 11:12:05 +01:00
|
|
|
return
|
2021-02-27 16:33:54 +01:00
|
|
|
}
|
2022-12-16 00:21:53 +01:00
|
|
|
|
2022-12-31 15:53:02 +01:00
|
|
|
if (finalData.current.length < data.pages[0].body.length) {
|
|
|
|
// if the remote has been loaded first
|
|
|
|
finalData.current = data.pages[0].body
|
|
|
|
|
|
|
|
if (!scrolled.current) {
|
|
|
|
scrolled.current = true
|
|
|
|
const pointer = data.pages[0].body.findIndex(({ id }) => id === toot.id)
|
|
|
|
if (pointer < 1) return
|
|
|
|
const length = flRef.current?.props.data?.length
|
|
|
|
if (!length) return
|
|
|
|
try {
|
|
|
|
setTimeout(() => {
|
|
|
|
try {
|
|
|
|
flRef.current?.scrollToIndex({
|
|
|
|
index: pointer,
|
|
|
|
viewOffset: 100
|
|
|
|
})
|
|
|
|
} catch {}
|
|
|
|
}, 500)
|
|
|
|
} catch (error) {
|
|
|
|
return
|
|
|
|
}
|
2022-05-18 00:11:31 +02:00
|
|
|
}
|
2021-02-27 16:33:54 +01:00
|
|
|
}
|
|
|
|
}
|
2022-12-31 00:07:28 +01:00
|
|
|
}
|
2022-12-31 15:53:02 +01:00
|
|
|
)
|
|
|
|
useQuery(
|
2023-01-01 16:44:55 +01:00
|
|
|
queryKey.remote,
|
2022-12-31 15:53:02 +01:00
|
|
|
async () => {
|
|
|
|
let context:
|
|
|
|
| {
|
|
|
|
ancestors: Mastodon.Status[]
|
|
|
|
descendants: Mastodon.Status[]
|
|
|
|
}
|
|
|
|
| undefined
|
|
|
|
|
|
|
|
try {
|
|
|
|
const domain = getHost(toot.url || toot.uri)
|
|
|
|
if (!domain?.length) {
|
|
|
|
throw new Error()
|
|
|
|
}
|
|
|
|
const id = (toot.url || toot.uri).match(new RegExp(/\/([0-9]+)$/))?.[1]
|
|
|
|
if (!id?.length) {
|
|
|
|
throw new Error()
|
|
|
|
}
|
|
|
|
|
|
|
|
context = await apiGeneral<{
|
|
|
|
ancestors: Mastodon.Status[]
|
|
|
|
descendants: Mastodon.Status[]
|
|
|
|
}>({
|
|
|
|
method: 'get',
|
|
|
|
domain,
|
|
|
|
url: `api/v1/statuses/${id}/context`
|
|
|
|
}).then(res => res.body)
|
|
|
|
} catch {}
|
|
|
|
|
|
|
|
if (!context) {
|
|
|
|
throw new Error()
|
|
|
|
}
|
|
|
|
|
|
|
|
const statuses: (Mastodon.Status & { _level?: number })[] = [
|
|
|
|
...context.ancestors,
|
|
|
|
toot,
|
|
|
|
...context.descendants
|
|
|
|
]
|
|
|
|
|
|
|
|
const highlight = context.ancestors.length
|
|
|
|
highlightIndex.current = highlight
|
|
|
|
|
|
|
|
for (const [index, status] of statuses.entries()) {
|
|
|
|
if (index < highlight || status.id === toot.id) {
|
|
|
|
statuses[index]._level = 0
|
|
|
|
continue
|
|
|
|
}
|
|
|
|
|
|
|
|
const repliedLevel = statuses.find(s => s.id === status.in_reply_to_id)?._level
|
|
|
|
statuses[index]._level = (repliedLevel || 0) + 1
|
|
|
|
}
|
|
|
|
|
|
|
|
return { pages: [{ body: statuses }] }
|
|
|
|
},
|
|
|
|
{
|
|
|
|
enabled: toot.account.acct !== toot.account.username, // When on the same instance, these two values are the same
|
|
|
|
staleTime: 0,
|
|
|
|
refetchOnMount: false,
|
|
|
|
onSuccess: data => {
|
|
|
|
if (finalData.current.length < 1 && data.pages[0].body.length < 1) {
|
|
|
|
navigation.goBack()
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
if (finalData.current?.length < data.pages[0].body.length) {
|
|
|
|
finalData.current = data.pages[0].body.map(remote => {
|
|
|
|
const localMatch = finalData.current?.find(local => local.uri === remote.uri)
|
2023-01-01 17:20:35 +01:00
|
|
|
if (localMatch) {
|
|
|
|
return localMatch
|
|
|
|
} else {
|
|
|
|
remote._remote = true
|
|
|
|
return remote
|
|
|
|
}
|
2022-12-31 15:53:02 +01:00
|
|
|
})
|
|
|
|
setHasRemoteContent(true)
|
|
|
|
}
|
|
|
|
|
|
|
|
scrolled.current = true
|
|
|
|
const pointer = data.pages[0].body.findIndex(({ id }) => id === toot.id)
|
|
|
|
if (pointer < 1) return
|
|
|
|
const length = flRef.current?.props.data?.length
|
|
|
|
if (!length) return
|
|
|
|
try {
|
|
|
|
setTimeout(() => {
|
|
|
|
try {
|
|
|
|
flRef.current?.scrollToIndex({
|
|
|
|
index: pointer,
|
|
|
|
viewOffset: 100
|
|
|
|
})
|
|
|
|
} catch {}
|
|
|
|
}, 500)
|
|
|
|
} catch (error) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
)
|
2022-12-31 00:07:28 +01:00
|
|
|
|
2022-12-31 14:00:52 +01:00
|
|
|
const empty = () => {
|
2022-12-31 15:53:02 +01:00
|
|
|
switch (queryLocal.status) {
|
2022-12-31 14:00:52 +01:00
|
|
|
case 'error':
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Icon name='Frown' size={StyleConstants.Font.Size.L} color={colors.primaryDefault} />
|
|
|
|
<CustomText
|
|
|
|
fontStyle='M'
|
|
|
|
style={{
|
|
|
|
marginTop: StyleConstants.Spacing.S,
|
|
|
|
marginBottom: StyleConstants.Spacing.L,
|
|
|
|
color: colors.primaryDefault
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{t('componentTimeline:empty.error.message')}
|
|
|
|
</CustomText>
|
|
|
|
<Button
|
|
|
|
type='text'
|
|
|
|
content={t('componentTimeline:empty.error.button')}
|
2022-12-31 15:53:02 +01:00
|
|
|
onPress={() => queryLocal.refetch()}
|
2022-12-31 14:00:52 +01:00
|
|
|
/>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
case 'success':
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Icon
|
|
|
|
name='Smartphone'
|
|
|
|
size={StyleConstants.Font.Size.L}
|
|
|
|
color={colors.primaryDefault}
|
|
|
|
/>
|
|
|
|
<CustomText
|
|
|
|
fontStyle='M'
|
|
|
|
style={{
|
|
|
|
marginTop: StyleConstants.Spacing.S,
|
|
|
|
marginBottom: StyleConstants.Spacing.L,
|
|
|
|
color: colors.secondary
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{t('componentTimeline:empty.success.message')}
|
|
|
|
</CustomText>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-12-31 00:07:28 +01:00
|
|
|
const heights = useRef<(number | undefined)[]>([])
|
2022-12-31 12:56:10 +01:00
|
|
|
const MAX_LEVEL = 10
|
|
|
|
const ARC = StyleConstants.Avatar.XS / 4
|
2021-02-27 16:33:54 +01:00
|
|
|
|
2021-02-13 01:26:02 +01:00
|
|
|
return (
|
2022-12-31 00:07:28 +01:00
|
|
|
<FlatList
|
|
|
|
ref={flRef}
|
|
|
|
scrollEventThrottle={16}
|
|
|
|
windowSize={7}
|
2022-12-31 15:53:02 +01:00
|
|
|
data={finalData.current}
|
2022-12-31 00:07:28 +01:00
|
|
|
renderItem={({ item, index }) => {
|
2022-12-31 15:53:02 +01:00
|
|
|
const prev = finalData.current?.[index - 1]?._level || 0
|
2022-12-31 00:07:28 +01:00
|
|
|
const curr = item._level
|
2022-12-31 15:53:02 +01:00
|
|
|
const next = finalData.current?.[index + 1]?._level || 0
|
2022-12-31 00:07:28 +01:00
|
|
|
|
|
|
|
return (
|
|
|
|
<View
|
|
|
|
style={{
|
|
|
|
paddingLeft:
|
2022-12-31 15:53:02 +01:00
|
|
|
index > highlightIndex.current
|
2022-12-31 12:56:10 +01:00
|
|
|
? Math.min(item._level - 1, MAX_LEVEL) * StyleConstants.Spacing.S
|
2022-12-31 00:07:28 +01:00
|
|
|
: undefined
|
|
|
|
}}
|
|
|
|
onLayout={({
|
|
|
|
nativeEvent: {
|
|
|
|
layout: { height }
|
|
|
|
}
|
|
|
|
}) => (heights.current[index] = height)}
|
|
|
|
>
|
|
|
|
<TimelineDefault
|
|
|
|
item={item}
|
2023-01-01 17:20:35 +01:00
|
|
|
queryKey={item._remote ? queryKey.remote : queryKey.local}
|
2022-12-31 00:07:28 +01:00
|
|
|
rootQueryKey={rootQueryKey}
|
|
|
|
highlighted={toot.id === item.id}
|
|
|
|
isConversation={toot.id !== item.id}
|
2022-12-31 15:53:02 +01:00
|
|
|
isRemote={item._remote}
|
2022-12-31 00:07:28 +01:00
|
|
|
/>
|
|
|
|
{curr > 1 || next > 1
|
|
|
|
? [...new Array(curr)].map((_, i) => {
|
|
|
|
if (i > MAX_LEVEL) return null
|
|
|
|
|
|
|
|
const lastLine = curr === i + 1
|
|
|
|
if (lastLine) {
|
|
|
|
if (curr === prev + 1 || curr === next - 1) {
|
|
|
|
if (curr > next) {
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
return (
|
|
|
|
<Svg key={i} style={{ position: 'absolute' }}>
|
|
|
|
<Path
|
|
|
|
d={
|
|
|
|
`M ${curr * StyleConstants.Spacing.S + ARC} ${
|
|
|
|
StyleConstants.Spacing.M + StyleConstants.Avatar.XS / 2
|
|
|
|
} ` +
|
|
|
|
`a ${ARC} ${ARC} 0 0 0 -${ARC} ${ARC} ` +
|
|
|
|
`v 999`
|
|
|
|
}
|
|
|
|
strokeWidth={1}
|
|
|
|
stroke={colors.border}
|
|
|
|
strokeOpacity={0.6}
|
|
|
|
/>
|
|
|
|
</Svg>
|
|
|
|
)
|
|
|
|
} else {
|
|
|
|
if (i >= curr - 2) return null
|
|
|
|
return (
|
|
|
|
<Svg key={i} style={{ position: 'absolute' }}>
|
|
|
|
<Path
|
|
|
|
d={
|
|
|
|
`M ${(i + 1) * StyleConstants.Spacing.S} 0 ` +
|
|
|
|
`v ${
|
|
|
|
(heights.current[index] || 999) -
|
|
|
|
(StyleConstants.Spacing.S * 1.5 + StyleConstants.Font.Size.L) / 2 -
|
|
|
|
StyleConstants.Avatar.XS / 2
|
|
|
|
} ` +
|
|
|
|
`a ${ARC} ${ARC} 0 0 0 ${ARC} ${ARC}`
|
|
|
|
}
|
|
|
|
strokeWidth={1}
|
|
|
|
stroke={colors.border}
|
|
|
|
strokeOpacity={0.6}
|
|
|
|
/>
|
|
|
|
</Svg>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
if (i >= next - 1) {
|
|
|
|
return (
|
|
|
|
<Svg key={i} style={{ position: 'absolute' }}>
|
|
|
|
<Path
|
|
|
|
d={
|
|
|
|
`M ${(i + 1) * StyleConstants.Spacing.S} 0 ` +
|
|
|
|
`v ${
|
|
|
|
(heights.current[index] || 999) -
|
|
|
|
(StyleConstants.Spacing.S * 1.5 +
|
|
|
|
StyleConstants.Font.Size.L * 1.35) /
|
|
|
|
2
|
|
|
|
} ` +
|
|
|
|
`h ${ARC}`
|
|
|
|
}
|
|
|
|
strokeWidth={1}
|
|
|
|
stroke={colors.border}
|
|
|
|
strokeOpacity={0.6}
|
|
|
|
/>
|
|
|
|
</Svg>
|
|
|
|
)
|
|
|
|
} else {
|
|
|
|
return (
|
|
|
|
<Svg key={i} style={{ position: 'absolute' }}>
|
|
|
|
<Path
|
|
|
|
d={`M ${(i + 1) * StyleConstants.Spacing.S} 0 ` + `v 999`}
|
|
|
|
strokeWidth={1}
|
|
|
|
stroke={colors.border}
|
|
|
|
strokeOpacity={0.6}
|
|
|
|
/>
|
|
|
|
</Svg>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
: null}
|
|
|
|
{/* <CustomText
|
|
|
|
children={data?.body[index - 1]?._level}
|
|
|
|
style={{ position: 'absolute', top: 4, left: 4, color: colors.red }}
|
|
|
|
/>
|
|
|
|
<CustomText
|
|
|
|
children={item._level}
|
|
|
|
style={{ position: 'absolute', top: 20, left: 4, color: colors.yellow }}
|
|
|
|
/>
|
|
|
|
<CustomText
|
|
|
|
children={data?.body[index + 1]?._level}
|
|
|
|
style={{ position: 'absolute', top: 36, left: 4, color: colors.green }}
|
|
|
|
/> */}
|
|
|
|
</View>
|
|
|
|
)
|
|
|
|
}}
|
|
|
|
initialNumToRender={6}
|
|
|
|
maxToRenderPerBatch={3}
|
|
|
|
ItemSeparatorComponent={({ leadingItem }) => {
|
|
|
|
return (
|
|
|
|
<>
|
2022-12-18 23:15:58 +01:00
|
|
|
<ComponentSeparator
|
|
|
|
extraMarginLeft={
|
2022-12-31 12:56:10 +01:00
|
|
|
leadingItem.id === toot.id
|
2022-12-18 23:15:58 +01:00
|
|
|
? 0
|
|
|
|
: StyleConstants.Avatar.XS +
|
|
|
|
StyleConstants.Spacing.S +
|
2022-12-31 12:56:10 +01:00
|
|
|
Math.min(Math.max(0, leadingItem._level - 1), MAX_LEVEL) *
|
|
|
|
StyleConstants.Spacing.S
|
2022-12-18 23:15:58 +01:00
|
|
|
}
|
2022-12-16 17:00:07 +01:00
|
|
|
/>
|
2022-12-31 00:07:28 +01:00
|
|
|
{leadingItem._level > 1
|
|
|
|
? [...new Array(leadingItem._level - 1)].map((_, i) => (
|
|
|
|
<Svg key={i} style={{ position: 'absolute', top: -1 }}>
|
|
|
|
<Path
|
|
|
|
d={`M ${(i + 1) * StyleConstants.Spacing.S} 0 ` + `v 1`}
|
|
|
|
strokeWidth={1}
|
|
|
|
stroke={colors.border}
|
|
|
|
strokeOpacity={0.6}
|
|
|
|
/>
|
|
|
|
</Svg>
|
|
|
|
))
|
|
|
|
: null}
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}}
|
|
|
|
onScrollToIndexFailed={error => {
|
|
|
|
const offset = error.averageItemLength * error.index
|
|
|
|
flRef.current?.scrollToOffset({ offset })
|
|
|
|
try {
|
2022-12-31 15:53:02 +01:00
|
|
|
error.index < (finalData.current.length || 0) &&
|
2022-12-31 00:07:28 +01:00
|
|
|
setTimeout(
|
|
|
|
() =>
|
|
|
|
flRef.current?.scrollToIndex({
|
|
|
|
index: error.index,
|
|
|
|
viewOffset: 100
|
|
|
|
}),
|
|
|
|
500
|
|
|
|
)
|
|
|
|
} catch {}
|
2022-08-07 01:18:10 +02:00
|
|
|
}}
|
2022-12-31 14:00:52 +01:00
|
|
|
ListEmptyComponent={
|
|
|
|
<View
|
|
|
|
style={{
|
|
|
|
flex: 1,
|
|
|
|
minHeight: '100%',
|
|
|
|
justifyContent: 'center',
|
|
|
|
alignItems: 'center',
|
|
|
|
backgroundColor: colors.backgroundDefault
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{empty()}
|
|
|
|
</View>
|
|
|
|
}
|
2022-12-31 15:53:02 +01:00
|
|
|
ListFooterComponent={
|
|
|
|
<View
|
|
|
|
style={{
|
|
|
|
flex: 1,
|
|
|
|
alignItems: 'center',
|
|
|
|
backgroundColor: colors.backgroundDefault,
|
|
|
|
marginHorizontal: StyleConstants.Spacing.M
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{queryLocal.isFetching ? (
|
|
|
|
<Circle size={StyleConstants.Font.Size.L} color={colors.secondary} />
|
|
|
|
) : null}
|
|
|
|
</View>
|
|
|
|
}
|
2021-02-13 01:26:02 +01:00
|
|
|
/>
|
|
|
|
)
|
2020-10-29 14:52:28 +01:00
|
|
|
}
|
2020-10-31 21:04:46 +01:00
|
|
|
|
2021-01-30 01:29:15 +01:00
|
|
|
export default TabSharedToot
|