Merge branch 'main' into candidate

This commit is contained in:
xmflsct 2022-12-31 02:08:53 +01:00
commit a34af98ef8
34 changed files with 569 additions and 255 deletions

View File

@ -1,8 +1,4 @@
import { registerRootComponent } from 'expo'
import App from './src/App'
// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in the Expo client or in a native build,
// the environment is set up appropriately
registerRootComponent(App)

View File

@ -69,7 +69,6 @@
"react-intl": "^6.2.5",
"react-native": "^0.70.6",
"react-native-animated-spinkit": "^1.5.2",
"react-native-base64": "^0.2.1",
"react-native-blurhash": "^1.1.10",
"react-native-fast-image": "^8.6.3",
"react-native-feather": "^1.1.2",
@ -104,7 +103,6 @@
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.10",
"@types/react-native": "^0.70.8",
"@types/react-native-base64": "^0.2.0",
"@types/react-native-share-menu": "^5.0.2",
"@types/valid-url": "^1.0.3",
"babel-plugin-module-resolver": "^4.1.0",

View File

@ -4,10 +4,11 @@ import { useNavigation } from '@react-navigation/native'
import apiGeneral from '@utils/api/general'
import browserPackage from '@utils/helpers/browserPackage'
import { featureCheck } from '@utils/helpers/featureCheck'
import queryClient from '@utils/queryHooks'
import { TabMeStackNavigationProp } from '@utils/navigation/navigators'
import queryClient from '@utils/queryHooks'
import { redirectUri, useAppsMutation } from '@utils/queryHooks/apps'
import { useInstanceQuery } from '@utils/queryHooks/instance'
import { storage } from '@utils/storage'
import { StorageAccount } from '@utils/storage/account'
import {
generateAccountKey,
@ -24,12 +25,10 @@ import { debounce } from 'lodash'
import React, { RefObject, useCallback, useState } from 'react'
import { Trans, useTranslation } from 'react-i18next'
import { Alert, Image, KeyboardAvoidingView, Platform, TextInput, View } from 'react-native'
import base64 from 'react-native-base64'
import { ScrollView } from 'react-native-gesture-handler'
import { MMKV } from 'react-native-mmkv'
import validUrl from 'valid-url'
import CustomText from '../Text'
import { storage } from '@utils/storage'
import { MMKV } from 'react-native-mmkv'
export interface Props {
scrollViewRef?: RefObject<ScrollView>
@ -87,7 +86,7 @@ const ComponentInstance: React.FC<Props> = ({
})
await request.makeAuthUrlAsync(discovery)
const promptResult = await request.promptAsync(discovery)
const promptResult = await request.promptAsync(discovery, await browserPackage())
if (promptResult?.type === 'success') {
const { accessToken } = await AuthSession.exchangeCodeAsync(
@ -155,7 +154,7 @@ const ComponentInstance: React.FC<Props> = ({
'admin.sign_up': false,
'admin.report': false
},
key: base64.encodeFromByteArray(Random.getRandomBytes(16))
key: Math.random().toString(36).slice(2, 12)
},
page_local: {
showBoosts: true,

View File

@ -1,6 +1,7 @@
import Icon from '@components/Icon'
import openLink from '@components/openLink'
import ParseEmojis from '@components/Parse/Emojis'
import StatusContext from '@components/Timeline/Shared/Context'
import { useNavigation, useRoute } from '@react-navigation/native'
import { StackNavigationProp } from '@react-navigation/stack'
import { TabLocalStackParamList } from '@utils/navigation/navigators'
@ -11,43 +12,38 @@ import { adaptiveScale } from '@utils/styles/scaling'
import { useTheme } from '@utils/styles/ThemeManager'
import { ChildNode } from 'domhandler'
import { ElementType, parseDocument } from 'htmlparser2'
import React, { useState } from 'react'
import i18next from 'i18next'
import React, { useContext, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Pressable, Text, TextStyleIOS, View } from 'react-native'
import { Platform, Pressable, Text, TextStyleIOS, View } from 'react-native'
export interface Props {
content: string
size?: 'S' | 'M' | 'L'
textStyles?: TextStyleIOS
adaptiveSize?: boolean
emojis?: Mastodon.Emoji[]
mentions?: Mastodon.Mention[]
tags?: Mastodon.Tag[]
showFullLink?: boolean
numberOfLines?: number
expandHint?: string
highlighted?: boolean
disableDetails?: boolean
selectable?: boolean
setSpoilerExpanded?: React.Dispatch<React.SetStateAction<boolean>>
emojis?: Mastodon.Emoji[]
mentions?: Mastodon.Mention[]
}
const ParseHTML: React.FC<Props> = ({
content,
size = 'M',
textStyles,
adaptiveSize = false,
emojis,
mentions,
tags,
showFullLink = false,
numberOfLines = 10,
expandHint,
highlighted = false,
disableDetails = false,
selectable = false,
setSpoilerExpanded
setSpoilerExpanded,
emojis,
mentions
}) => {
const { status, highlighted, disableDetails, excludeMentions } = useContext(StatusContext)
const [adaptiveFontsize] = useGlobalStorage.number('app.font_size')
const adaptedFontsize = adaptiveScale(
StyleConstants.Font.Size[size],
@ -91,14 +87,16 @@ const ParseHTML: React.FC<Props> = ({
return ''
}
}
const startingOfText = useRef<boolean>(false)
const renderNode = (node: ChildNode, index: number) => {
switch (node.type) {
case ElementType.Text:
node.data.trim().length && (startingOfText.current = true) // Removing empty spaces appeared between tags and mentions
return (
<ParseEmojis
key={index}
content={node.data}
emojis={emojis}
content={node.data.replace(new RegExp(/^\s+/), '')}
emojis={status?.emojis || emojis}
size={size}
adaptiveSize={adaptiveSize}
/>
@ -138,19 +136,28 @@ const ParseHTML: React.FC<Props> = ({
/>
)
}
if (classes.includes('mention') && mentions?.length) {
const mentionIndex = mentions.findIndex(mention => mention.url === href)
if (classes.includes('mention') && (status?.mentions?.length || mentions?.length)) {
const matchedMention = (status?.mentions || mentions || []).find(
mention => mention.url === href
)
if (
matchedMention &&
!startingOfText.current &&
excludeMentions?.current.find(eM => eM.id === matchedMention.id)
) {
return null
}
const paramsAccount = (params as { account: Mastodon.Account } | undefined)?.account
const sameAccount = paramsAccount?.id === mentions[mentionIndex]?.id
const sameAccount = paramsAccount?.id === matchedMention?.id
return (
<Text
key={index}
style={{ color: mentionIndex > -1 ? colors.blue : undefined }}
style={{ color: matchedMention ? colors.blue : undefined }}
onPress={() =>
mentionIndex > -1 &&
matchedMention &&
!disableDetails &&
!sameAccount &&
navigation.push('Tab-Shared-Account', { account: mentions[mentionIndex] })
navigation.push('Tab-Shared-Account', { account: matchedMention })
}
children={node.children.map(unwrapNode).join('')}
/>
@ -159,7 +166,7 @@ const ParseHTML: React.FC<Props> = ({
}
const content = node.children.map(child => unwrapNode(child)).join('')
const shouldBeTag = tags && tags.find(tag => `#${tag.name}` === content)
const shouldBeTag = status?.tags?.find(tag => `#${tag.name}` === content)
return (
<Text
key={index}
@ -249,7 +256,10 @@ const ParseHTML: React.FC<Props> = ({
style={{
fontSize: adaptedFontsize,
lineHeight: adaptedLineheight,
...textStyles,
...(Platform.OS === 'ios' &&
status?.language &&
i18next.dir(status.language) === 'rtl' &&
({ writingDirection: 'rtl' } as { writingDirection: 'rtl' })),
height: numberOfLines === 1 && !expanded ? 0 : undefined
}}
numberOfLines={

View File

@ -1,7 +1,7 @@
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
import { StyleProp, View, ViewStyle } from 'react-native'
export interface Props {
extraMarginLeft?: number
@ -23,7 +23,7 @@ const ComponentSeparator: React.FC<Props> = ({
{
backgroundColor: colors.backgroundDefault,
borderTopColor: colors.border,
borderTopWidth: StyleSheet.hairlineWidth,
borderTopWidth: 1,
marginLeft: StyleConstants.Spacing.Global.PagePadding + extraMarginLeft,
marginRight: StyleConstants.Spacing.Global.PagePadding + extraMarginRight
}

View File

@ -51,7 +51,7 @@ const TimelineDefault: React.FC<Props> = ({
}) => {
const status = item.reblog ? item.reblog : item
const rawContent = useRef<string[]>([])
if (highlighted) {
if (highlighted || isConversation) {
rawContent.current = [
removeHTML(status.content),
status.spoiler_text ? removeHTML(status.spoiler_text) : ''
@ -72,6 +72,7 @@ const TimelineDefault: React.FC<Props> = ({
? !preferences?.['reading:expand:spoilers'] && !spoilerExpanded
: false
const detectedLanguage = useRef<string>(status.language || '')
const excludeMentions = useRef<Mastodon.Mention[]>([])
const mainStyle: StyleProp<ViewStyle> = {
flex: 1,
@ -169,6 +170,7 @@ const TimelineDefault: React.FC<Props> = ({
spoilerHidden,
rawContent,
detectedLanguage,
excludeMentions,
highlighted,
inThread: queryKey?.[1].page === 'Toot',
disableDetails,

View File

@ -329,8 +329,7 @@ const styles = StyleSheet.create({
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
minHeight: StyleConstants.Font.Size.L + StyleConstants.Spacing.S * 3,
marginHorizontal: StyleConstants.Spacing.S
paddingVertical: StyleConstants.Spacing.S * 1.5
}
})

View File

@ -10,7 +10,7 @@ import { useStatusQuery } from '@utils/queryHooks/status'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useContext, useEffect, useState } from 'react'
import { Pressable, StyleSheet, View } from 'react-native'
import { Pressable, View } from 'react-native'
import { Circle } from 'react-native-animated-spinkit'
import TimelineDefault from '../Default'
import StatusContext from './Context'
@ -192,7 +192,7 @@ const TimelineCard: React.FC = () => {
flex: 1,
flexDirection: 'row',
marginTop: StyleConstants.Spacing.M,
borderWidth: StyleSheet.hairlineWidth,
borderWidth: 1,
borderRadius: StyleConstants.Spacing.S,
overflow: 'hidden',
borderColor: colors.border

View File

@ -3,10 +3,9 @@ import CustomText from '@components/Text'
import { usePreferencesQuery } from '@utils/queryHooks/preferences'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import i18next from 'i18next'
import React, { useContext } from 'react'
import { useTranslation } from 'react-i18next'
import { Platform, View } from 'react-native'
import { View } from 'react-native'
import StatusContext from './Context'
export interface Props {
@ -23,11 +22,6 @@ const TimelineContent: React.FC<Props> = ({ notificationOwnToot = false, setSpoi
const { data: preferences } = usePreferencesQuery()
const isRTLiOSTextStyles =
Platform.OS === 'ios' && status.language && i18next.dir(status.language) === 'rtl'
? ({ writingDirection: 'rtl' } as { writingDirection: 'rtl' })
: undefined
return (
<View>
{status.spoiler_text?.length ? (
@ -36,13 +30,7 @@ const TimelineContent: React.FC<Props> = ({ notificationOwnToot = false, setSpoi
content={status.spoiler_text}
size={highlighted ? 'L' : 'M'}
adaptiveSize
emojis={status.emojis}
mentions={status.mentions}
tags={status.tags}
numberOfLines={999}
highlighted={highlighted}
disableDetails={disableDetails}
textStyles={isRTLiOSTextStyles}
/>
{inThread ? (
<CustomText
@ -60,9 +48,6 @@ const TimelineContent: React.FC<Props> = ({ notificationOwnToot = false, setSpoi
content={status.content}
size={highlighted ? 'L' : 'M'}
adaptiveSize
emojis={status.emojis}
mentions={status.mentions}
tags={status.tags}
numberOfLines={
preferences?.['reading:expand:spoilers'] || inThread
? notificationOwnToot
@ -72,9 +57,6 @@ const TimelineContent: React.FC<Props> = ({ notificationOwnToot = false, setSpoi
}
expandHint={t('shared.content.expandHint')}
setSpoilerExpanded={setSpoilerExpanded}
highlighted={highlighted}
disableDetails={disableDetails}
textStyles={isRTLiOSTextStyles}
/>
</>
) : (
@ -82,12 +64,7 @@ const TimelineContent: React.FC<Props> = ({ notificationOwnToot = false, setSpoi
content={status.content}
size={highlighted ? 'L' : 'M'}
adaptiveSize
emojis={status.emojis}
mentions={status.mentions}
tags={status.tags}
numberOfLines={highlighted || inThread ? 999 : notificationOwnToot ? 2 : undefined}
disableDetails={disableDetails}
textStyles={isRTLiOSTextStyles}
/>
)}
</View>

View File

@ -14,6 +14,7 @@ type StatusContextType = {
spoilerHidden?: boolean
rawContent?: React.MutableRefObject<string[]> // When highlighted, for translate, edit history
detectedLanguage?: React.MutableRefObject<string>
excludeMentions?: React.MutableRefObject<Mastodon.Mention[]>
highlighted?: boolean
inThread?: boolean

View File

@ -13,6 +13,7 @@ import HeaderSharedAccount from './HeaderShared/Account'
import HeaderSharedApplication from './HeaderShared/Application'
import HeaderSharedCreated from './HeaderShared/Created'
import HeaderSharedMuted from './HeaderShared/Muted'
import HeaderSharedReplies from './HeaderShared/Replies'
import HeaderSharedVisibility from './HeaderShared/Visibility'
const TimelineHeaderDefault: React.FC = () => {
@ -64,6 +65,7 @@ const TimelineHeaderDefault: React.FC = () => {
/>
<HeaderSharedVisibility visibility={status.visibility} />
<HeaderSharedMuted muted={status.muted} />
<HeaderSharedReplies />
<HeaderSharedApplication application={status.application} />
</View>
</View>

View File

@ -0,0 +1,52 @@
import CustomText from '@components/Text'
import { useNavigation } from '@react-navigation/native'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { Fragment, useContext } from 'react'
import { useTranslation } from 'react-i18next'
import StatusContext from '../Context'
const HeaderSharedReplies: React.FC = () => {
const { status, rawContent, excludeMentions, isConversation } = useContext(StatusContext)
if (!isConversation) return null
const navigation = useNavigation<any>()
const { t } = useTranslation('componentTimeline')
const { colors } = useTheme()
const mentionsBeginning = rawContent?.current?.[0]
.match(new RegExp(/^(?:@\S+\s+)+/))?.[0]
?.match(new RegExp(/@\S+/, 'g'))
excludeMentions &&
(excludeMentions.current =
mentionsBeginning?.length && status?.mentions
? status.mentions.filter(mention => mentionsBeginning.includes(`@${mention.username}`))
: [])
return excludeMentions?.current.length ? (
<CustomText
fontStyle='S'
style={{
marginLeft: StyleConstants.Spacing.S,
flexDirection: 'row',
color: colors.secondary
}}
>
<>
{t('shared.header.shared.replies')}
{excludeMentions.current.map((mention, index) => (
<Fragment key={index}>
{' '}
<CustomText
style={{ color: colors.blue, paddingLeft: StyleConstants.Spacing.S }}
children={`@${mention.username}`}
onPress={() => navigation.push('Tab-Shared-Account', { account: mention })}
/>
</Fragment>
))}
</>
</CustomText>
) : null
}
export default HeaderSharedReplies

View File

@ -2,6 +2,7 @@ import ComponentSeparator from '@components/Separator'
import { useScrollToTop } from '@react-navigation/native'
import { UseInfiniteQueryOptions } from '@tanstack/react-query'
import { QueryKeyTimeline, useTimelineQuery } from '@utils/queryHooks/timeline'
import { flattenPages } from '@utils/queryHooks/utils'
import { useGlobalStorageListener } from '@utils/storage/actions'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
@ -54,8 +55,6 @@ const Timeline: React.FC<Props> = ({
}
})
const flattenData = data?.pages ? data.pages?.flatMap(page => [...page.body]) : []
const flRef = useRef<FlatList>(null)
const scrollY = useSharedValue(0)
@ -112,7 +111,7 @@ const Timeline: React.FC<Props> = ({
scrollEventThrottle={16}
onScroll={onScroll}
windowSize={7}
data={flattenData}
data={flattenPages(data)}
initialNumToRender={6}
maxToRenderPerBatch={3}
onEndReached={() => !disableInfinity && !isFetchingNextPage && fetchNextPage()}

View File

@ -203,7 +203,7 @@ const menuStatus = ({
}),
disabled: false,
destructive: false,
hidden: !ownAccount && !status.mentions.filter(mention => mention.id === accountId).length
hidden: !ownAccount && !status.mentions?.filter(mention => mention.id === accountId).length
},
title: t('componentContextMenu:status.mute.action', {
defaultValue: 'false',

View File

@ -122,6 +122,7 @@
"muted": {
"accessibilityLabel": "Toot muted"
},
"replies": "Replies",
"visibility": {
"direct": {
"accessibilityLabel": "Toot is a direct message"

View File

@ -265,8 +265,8 @@
"darkTheme": {
"heading": "Dark theme",
"options": {
"lighter": "Lighter",
"darker": "Darker"
"lighter": "Default",
"darker": "True black"
}
},
"browser": {

View File

@ -2,7 +2,7 @@ import TimelineDefault from '@components/Timeline/Default'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useContext } from 'react'
import { StyleSheet, View } from 'react-native'
import { View } from 'react-native'
import ComposeContext from '../../utils/createContext'
const ComposeReply: React.FC = () => {
@ -16,7 +16,7 @@ const ComposeReply: React.FC = () => {
style={{
flex: 1,
flexDirection: 'row',
borderWidth: StyleSheet.hairlineWidth,
borderWidth: 1,
borderRadius: StyleConstants.Spacing.S,
overflow: 'hidden',
borderColor: colors.border,

View File

@ -5,6 +5,7 @@ import { displayMessage } from '@components/Message'
import ComponentSeparator from '@components/Separator'
import { TabMeStackScreenProps } from '@utils/navigation/navigators'
import { useFollowedTagsQuery, useTagsMutation } from '@utils/queryHooks/tags'
import { flattenPages } from '@utils/queryHooks/utils'
import React, { useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { FlatList } from 'react-native-gesture-handler'
@ -15,7 +16,8 @@ const TabMeFollowedTags: React.FC<TabMeStackScreenProps<'Tab-Me-FollowedTags'>>
const { t } = useTranslation(['common', 'screenTabs'])
const { data, fetchNextPage, refetch } = useFollowedTagsQuery()
const flattenData = data?.pages ? data.pages.flatMap(page => [...page.body]) : []
const flattenData = flattenPages(data)
useEffect(() => {
if (flattenData.length === 0) {
navigation.goBack()

View File

@ -9,6 +9,7 @@ import {
useListAccountsMutation,
useListAccountsQuery
} from '@utils/queryHooks/lists'
import { flattenPages } from '@utils/queryHooks/utils'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
@ -18,7 +19,7 @@ import { FlatList, View } from 'react-native'
const TabMeListAccounts: React.FC<TabMeStackScreenProps<'Tab-Me-List-Accounts'>> = ({
route: { params }
}) => {
const { colors, theme } = useTheme()
const { colors } = useTheme()
const { t } = useTranslation(['common', 'screenTabs'])
const queryKey: QueryKeyListAccounts = ['ListAccounts', { id: params.id }]
@ -34,8 +35,6 @@ const TabMeListAccounts: React.FC<TabMeStackScreenProps<'Tab-Me-List-Accounts'>>
}
})
const flattenData = data?.pages ? data.pages?.flatMap(page => [...page.body]) : []
const mutation = useListAccountsMutation({
onSuccess: () => {
haptics('Light')
@ -53,7 +52,7 @@ const TabMeListAccounts: React.FC<TabMeStackScreenProps<'Tab-Me-List-Accounts'>>
return (
<FlatList
data={flattenData}
data={flattenPages(data)}
renderItem={({ item, index }) => (
<ComponentAccount
key={index}

View File

@ -89,7 +89,7 @@ const TabMeSettingsFontsize: React.FC<TabMeStackScreenProps<'Tab-Me-Settings-Fon
fontSize: adaptiveScale(StyleConstants.Font.Size.M, size),
lineHeight: adaptiveScale(StyleConstants.Font.LineHeight.M, size),
color: (fontSize || 0) === size ? colors.primaryDefault : colors.secondary,
borderWidth: StyleSheet.hairlineWidth,
borderWidth: 1,
borderColor: colors.border
}}
fontWeight={(fontSize || 0) === size ? 'Bold' : undefined}

View File

@ -6,7 +6,7 @@ import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useEffect, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import { KeyboardAvoidingView, Platform, StyleSheet, View } from 'react-native'
import { KeyboardAvoidingView, Platform, View } from 'react-native'
import { ScrollView } from 'react-native-gesture-handler'
const TabMeSwitch: React.FC = () => {
@ -49,7 +49,7 @@ const TabMeSwitch: React.FC = () => {
marginTop: StyleConstants.Spacing.S,
paddingTop: StyleConstants.Spacing.M,
marginHorizontal: StyleConstants.Spacing.Global.PagePadding,
borderTopWidth: StyleSheet.hairlineWidth,
borderTopWidth: 1,
borderTopColor: colors.border
}}
>

View File

@ -4,6 +4,7 @@ import { useNavigation } from '@react-navigation/native'
import { StackNavigationProp } from '@react-navigation/stack'
import { TabLocalStackParamList } from '@utils/navigation/navigators'
import { useTimelineQuery } from '@utils/queryHooks/timeline'
import { flattenPages } from '@utils/queryHooks/utils'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
@ -32,12 +33,9 @@ const AccountAttachments: React.FC<Props> = ({ account }) => {
only_media: true
})
const flattenData = data?.pages
? data.pages
.flatMap(d => [...d.body])
.filter(status => !(status as Mastodon.Status).sensitive)
.splice(0, DISPLAY_AMOUNT)
: []
const flattenData = flattenPages(data)
.filter(status => !(status as Mastodon.Status).sensitive)
.splice(0, DISPLAY_AMOUNT)
const styleContainer = useAnimatedStyle(() => {
if (flattenData.length) {

View File

@ -1,14 +1,15 @@
import { HeaderLeft } from '@components/Header'
import ComponentSeparator from '@components/Separator'
import Timeline from '@components/Timeline'
import CustomText from '@components/Text'
import TimelineDefault from '@components/Timeline/Default'
import { InfiniteQueryObserver, useQueryClient } from '@tanstack/react-query'
import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import { QueryKeyTimeline, useTootQuery } from '@utils/queryHooks/timeline'
import { StyleConstants } from '@utils/styles/constants'
import React, { useEffect, useRef, useState } from 'react'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useEffect, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import { FlatList, View } from 'react-native'
import { Path, Svg } from 'react-native-svg'
const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
navigation,
@ -16,6 +17,7 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
params: { toot, rootQueryKey }
}
}) => {
const { colors } = useTheme()
const { t } = useTranslation('screenTabs')
useEffect(() => {
@ -25,55 +27,23 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
})
}, [])
const queryKey: QueryKeyTimeline = ['Timeline', { page: 'Toot', toot: toot.id }]
const flRef = useRef<FlatList>(null)
const [itemsLength, setItemsLength] = useState(0)
const scrolled = useRef(false)
const queryClient = useQueryClient()
const observer = new InfiniteQueryObserver(queryClient, {
queryKey,
enabled: false
})
const replyLevels = useRef<{ id: string; level: number }[]>([])
const data = useRef<Mastodon.Status[]>()
const highlightIndex = useRef<number>(0)
useEffect(() => {
return observer.subscribe(result => {
if (result.isSuccess) {
const flattenData = result.data?.pages
? // @ts-ignore
result.data.pages.flatMap(d => [...d.body])
: []
// Auto go back when toot page is empty
if (flattenData.length < 1) {
const queryKey: QueryKeyTimeline = ['Timeline', { page: 'Toot', toot: toot.id }]
const { data } = useTootQuery({
...queryKey[1],
options: {
meta: { toot },
onSuccess: data => {
if (data.body.length < 1) {
navigation.goBack()
return
}
data.current = flattenData
highlightIndex.current = flattenData.findIndex(({ id }) => id === toot.id)
for (const [index, status] of flattenData.entries()) {
if (status.id === toot.id) continue
if (status.in_reply_to_id === toot.id) continue
if (!replyLevels.current.find(reply => reply.id === status.in_reply_to_id)) {
const prevLevel =
replyLevels.current.find(reply => reply.id === flattenData[index - 1].in_reply_to_id)
?.level || 0
replyLevels.current.push({
id: status.in_reply_to_id,
level: prevLevel + 1
})
}
}
setItemsLength(flattenData.length)
if (!scrolled.current) {
scrolled.current = true
const pointer = flattenData.findIndex(({ id }) => id === toot.id)
const pointer = data.body.findIndex(({ id }) => id === toot.id)
if (pointer < 1) return
const length = flRef.current?.props.data?.length
if (!length) return
@ -91,78 +61,188 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
}
}
}
})
}, [scrolled.current, replyLevels.current])
}
})
const heights = useRef<(number | undefined)[]>([])
return (
<Timeline
flRef={flRef}
queryKey={queryKey}
queryOptions={{ staleTime: 0, refetchOnMount: true }}
customProps={{
ItemSeparatorComponent: ({ leadingItem }) => {
const levels = {
current:
replyLevels.current.find(reply => reply.id === leadingItem.in_reply_to_id)?.level || 0
}
return (
<FlatList
ref={flRef}
scrollEventThrottle={16}
windowSize={7}
data={data?.body}
renderItem={({ item, index }) => {
const MAX_LEVEL = 10
const ARC = StyleConstants.Avatar.XS / 4
const prev = data?.body[index - 1]?._level || 0
const curr = item._level
const next = data?.body[index + 1]?._level || 0
return (
<View
style={{
paddingLeft:
index > (data?.highlightIndex || 0)
? Math.min(item._level, MAX_LEVEL) * StyleConstants.Spacing.S
: undefined
}}
onLayout={({
nativeEvent: {
layout: { height }
}
}) => (heights.current[index] = height)}
>
<TimelineDefault
item={item}
queryKey={queryKey}
rootQueryKey={rootQueryKey}
highlighted={toot.id === item.id}
isConversation={toot.id !== item.id}
/>
{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 (
<>
<ComponentSeparator
extraMarginLeft={
toot.id === leadingItem.id
? 0
: StyleConstants.Avatar.XS +
StyleConstants.Spacing.S +
Math.max(0, levels.current - 1) * 8
Math.max(0, leadingItem._level - 1) * 8
}
/>
)
},
renderItem: ({ item, index }) => {
const levels = {
previous:
replyLevels.current.find(
reply => reply.id === data.current?.[index - 1]?.in_reply_to_id
)?.level || 0,
current:
replyLevels.current.find(reply => reply.id === item.in_reply_to_id)?.level || 0,
next:
replyLevels.current.find(
reply => reply.id === data.current?.[index + 1]?.in_reply_to_id
)?.level || 0
}
return (
<View
style={{ marginLeft: Math.max(0, levels.current - 1) * StyleConstants.Spacing.S }}
>
<TimelineDefault
item={item}
queryKey={queryKey}
rootQueryKey={rootQueryKey}
highlighted={toot.id === item.id}
isConversation={toot.id !== item.id}
/>
</View>
)
},
onScrollToIndexFailed: error => {
const offset = error.averageItemLength * error.index
flRef.current?.scrollToOffset({ offset })
try {
error.index < itemsLength &&
setTimeout(
() =>
flRef.current?.scrollToIndex({
index: error.index,
viewOffset: 100
}),
500
)
} catch {}
}
{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 {
error.index < (data?.body.length || 0) &&
setTimeout(
() =>
flRef.current?.scrollToIndex({
index: error.index,
viewOffset: 100
}),
500
)
} catch {}
}}
disableRefresh
disableInfinity
/>
)
}

View File

@ -7,6 +7,7 @@ import apiInstance from '@utils/api/instance'
import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
import { SearchResult } from '@utils/queryHooks/search'
import { QueryKeyUsers, useUsersQuery } from '@utils/queryHooks/users'
import { flattenPages } from '@utils/queryHooks/utils'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useEffect, useState } from 'react'
@ -39,14 +40,13 @@ const TabSharedUsers: React.FC<TabSharedStackScreenProps<'Tab-Shared-Users'>> =
getNextPageParam: lastPage => lastPage.links?.next?.id && { max_id: lastPage.links.next.id }
}
})
const flattenData = data?.pages ? data.pages.flatMap(page => [...page.body]) : []
const [isSearching, setIsSearching] = useState(false)
return (
<FlatList
windowSize={7}
data={flattenData}
data={flattenPages(data)}
style={{
minHeight: '100%',
paddingVertical: StyleConstants.Spacing.Global.PagePadding

View File

@ -15,7 +15,7 @@ const removeHTML = (text: string): string => {
parser.write(text)
parser.end()
return raw
return raw.replace(new RegExp(/\s$/), '')
}
export default removeHTML

View File

@ -1,10 +1,12 @@
import haptics from '@components/haptics'
import {
MutationOptions,
QueryFunctionContext,
useInfiniteQuery,
UseInfiniteQueryOptions,
useMutation
MutationOptions,
QueryFunctionContext,
useInfiniteQuery,
UseInfiniteQueryOptions,
useMutation,
useQuery,
UseQueryOptions
} from '@tanstack/react-query'
import { PagedResponse } from '@utils/api/helpers'
import apiInstance from '@utils/api/instance'
@ -17,6 +19,67 @@ import deleteItem from './timeline/deleteItem'
import editItem from './timeline/editItem'
import updateStatusProperty from './timeline/updateStatusProperty'
const queryFunctionToot = async ({ queryKey, meta }: QueryFunctionContext<QueryKeyTimeline>) => {
// @ts-ignore
const id = queryKey[1].toot
const target =
(meta?.toot as Mastodon.Status) ||
undefined ||
(await apiInstance<Mastodon.Status>({
method: 'get',
url: `statuses/${id}`
}).then(res => res.body))
const context = await apiInstance<{
ancestors: Mastodon.Status[]
descendants: Mastodon.Status[]
}>({
method: 'get',
url: `statuses/${id}/context`
})
const statuses: (Mastodon.Status & { _level?: number })[] = [
...context.body.ancestors,
target,
...context.body.descendants
]
const highlightIndex = context.body.ancestors.length
for (const [index, status] of statuses.entries()) {
if (index < highlightIndex || status.id === 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 { body: statuses, highlightIndex }
}
const useTootQuery = ({
options,
...queryKeyParams
}: QueryKeyTimeline[1] & {
options?: UseQueryOptions<
{
body: (Mastodon.Status & { _level: number })[]
highlightIndex: number
},
AxiosError
>
}) => {
const queryKey: QueryKeyTimeline = ['Timeline', { ...queryKeyParams }]
return useQuery(queryKey, queryFunctionToot, {
staleTime: 0,
refetchOnMount: true,
...options
})
}
/* ----- */
export type QueryKeyTimeline = [
'Timeline',
(
@ -36,16 +99,16 @@ export type QueryKeyTimeline = [
page: 'List'
list: Mastodon.List['id']
}
| {
page: 'Toot'
toot: Mastodon.Status['id']
}
| {
page: 'Account'
account: Mastodon.Account['id']
exclude_reblogs: boolean
only_media: boolean
}
| {
page: 'Toot'
toot: Mastodon.Status['id']
}
)
]
@ -209,22 +272,6 @@ const queryFunction = async ({ queryKey, pageParam }: QueryFunctionContext<Query
url: `timelines/list/${page.list}`,
params
})
case 'Toot':
const res1_1 = await apiInstance<Mastodon.Status>({
method: 'get',
url: `statuses/${page.toot}`
})
const res2_1 = await apiInstance<{
ancestors: Mastodon.Status[]
descendants: Mastodon.Status[]
}>({
method: 'get',
url: `statuses/${page.toot}/context`
})
return {
body: [...res2_1.body.ancestors, res1_1.body, ...res2_1.body.descendants]
}
default:
return Promise.reject()
}
@ -454,4 +501,4 @@ const useTimelineMutation = ({
})
}
export { useTimelineQuery, useTimelineMutation }
export { useTootQuery, useTimelineQuery, useTimelineMutation }

View File

@ -1,3 +1,4 @@
import { InfiniteData } from '@tanstack/react-query'
import { PagedResponse } from '@utils/api/helpers'
export const infinitePageParams = {
@ -6,3 +7,6 @@ export const infinitePageParams = {
getNextPageParam: (lastPage: PagedResponse<any>) =>
lastPage.links?.next && { max_id: lastPage.links.next }
}
export const flattenPages = <T>(data: InfiniteData<PagedResponse<T[]>> | undefined): T[] | [] =>
data?.pages.map(page => page.body).flat() || []

View File

@ -0,0 +1,4 @@
export type LegacyApp = {
expoToken?: string
versionUpdate: boolean
}

View File

@ -0,0 +1,19 @@
import { ScreenTabsStackParamList } from '@utils/navigation/navigators'
export type LegacyContexts = {
storeReview: {
context: Readonly<number>
current: number
shown: boolean
}
publicRemoteNotice: {
context: Readonly<number>
current: number
hidden: boolean
}
previousTab: Extract<
keyof ScreenTabsStackParamList,
'Tab-Local' | 'Tab-Public' | 'Tab-Notifications' | 'Tab-Me'
>
previousSegment?: Extract<App.Pages, 'Local' | 'LocalPublic' | 'Trending'>
}

View File

@ -0,0 +1,67 @@
import { ComposeStateDraft } from '@screens/Compose/utils/types'
export type LegacyInstance = {
active: boolean
appData: {
clientId: string
clientSecret: string
}
url: string
token: string
uri: Mastodon.Instance<'v1'>['uri']
urls: Mastodon.Instance<'v1'>['urls']
account: {
id: Mastodon.Account['id']
acct: Mastodon.Account['acct']
avatarStatic: Mastodon.Account['avatar_static']
preferences?: Mastodon.Preferences
}
version: string
configuration?: Mastodon.Instance<any>['configuration']
filters: Mastodon.Filter<any>[]
notifications_filter: {
follow: boolean
follow_request: boolean
favourite: boolean
reblog: boolean
mention: boolean
poll: boolean
status: boolean
update: boolean
'admin.sign_up'?: boolean
'admin.report'?: boolean
}
push: {
global: { value: boolean } | boolean
decode: { value: boolean } | boolean
alerts: {
follow: { value: boolean } | boolean
follow_request: { value: boolean } | boolean
favourite: { value: boolean } | boolean
reblog: { value: boolean } | boolean
mention: { value: boolean } | boolean
poll: { value: boolean } | boolean
status?: { value: boolean } | boolean
update?: { value: boolean } | boolean
'admin.sign_up': { value: boolean } | boolean
'admin.report': { value: boolean } | boolean
}
keys: { auth?: string }
}
followingPage?: {
showBoosts: boolean
showReplies: boolean
}
mePage: {
followedTags?: { shown: boolean }
lists: { shown: boolean }
announcements: { shown: boolean; unread: number }
}
drafts: ComposeStateDraft[]
frequentEmojis: {
emoji: Pick<Mastodon.Emoji, 'shortcode' | 'url' | 'static_url'>
score: number
count: number
lastUsed: number
}[]
}

View File

@ -0,0 +1,8 @@
export type LegacySettings = {
fontsize: -1 | 0 | 1 | 2 | 3 | string
language: string
theme: 'light' | 'dark' | 'auto'
darkTheme: 'lighter' | 'darker'
browser: 'internal' | 'external'
staticEmoji: boolean
}

View File

@ -2,6 +2,10 @@ import AsyncStorage from '@react-native-async-storage/async-storage'
import log from '@utils/startup/log'
import { secureStorage, storage } from '@utils/storage'
import { MMKV } from 'react-native-mmkv'
import { LegacyApp } from './legacy/app'
import { LegacyContexts } from './legacy/contexts'
import { LegacyInstance } from './legacy/instance'
import { LegacySettings } from './legacy/settings'
export const versionStorageGlobal = storage.global.getNumber('version.global')
@ -9,6 +13,9 @@ export async function migrateFromAsyncStorage(): Promise<void> {
log('log', 'Migration', 'Migrating...')
const start = global.performance.now()
const unwrapPushData = (setting: { value: boolean } | boolean | undefined): boolean =>
typeof setting === 'object' ? setting.value : typeof setting === 'boolean' ? setting : true
const keys = ['persist:app', 'persist:contexts', 'persist:settings'] as [
'persist:app',
'persist:contexts',
@ -21,13 +28,13 @@ export async function migrateFromAsyncStorage(): Promise<void> {
if (value != null) {
switch (key) {
case 'persist:app':
const storeApp = JSON.parse(value)
const storeApp: LegacyApp = JSON.parse(value)
if (storeApp.expoToken?.length) {
storage.global.set('app.expo_token', storeApp.expoToken.replaceAll(`\"`, ``))
}
break
case 'persist:contexts':
const storeContexts = JSON.parse(value)
const storeContexts: LegacyContexts = JSON.parse(value)
if (storeContexts.storeReview.current) {
storage.global.set(
'app.count_till_store_review',
@ -37,17 +44,22 @@ export async function migrateFromAsyncStorage(): Promise<void> {
storage.global.set('app.prev_tab', storeContexts.previousTab.replaceAll(`\"`, ``))
storage.global.set(
'app.prev_public_segment',
storeContexts.previousSegment.replaceAll(`\"`, ``)
(storeContexts.previousSegment || 'Local').replaceAll(`\"`, ``)
)
break
case 'persist:settings':
const storeSettings = JSON.parse(value)
storage.global.set('app.font_size', storeSettings.fontsize || 0)
const storeSettings: LegacySettings = JSON.parse(value)
storage.global.set(
'app.font_size',
(typeof storeSettings.fontsize === 'string'
? storeSettings.fontsize.replaceAll(`\"`, ``)
: storeSettings.fontsize) || 0
)
storage.global.set('app.language', storeSettings.language.replaceAll(`\"`, ``))
storage.global.set('app.theme', storeSettings.theme.replaceAll(`\"`, ``))
storage.global.set('app.theme.dark', storeSettings.darkTheme.replaceAll(`\"`, ``))
storage.global.set('app.browser', storeSettings.browser.replaceAll(`\"`, ``))
storage.global.set('app.auto_play_gifv', storeSettings.autoplayGifv || true)
storage.global.set('app.auto_play_gifv', true)
break
}
@ -66,7 +78,8 @@ export async function migrateFromAsyncStorage(): Promise<void> {
const storeInstances: { instances: string } = JSON.parse(value)
const accounts: string[] = []
for (const instance of JSON.parse(storeInstances.instances)) {
let instance: LegacyInstance
for (instance of JSON.parse(storeInstances.instances)) {
const account = `${instance.url}/${instance.account.id}`
const temp = new MMKV({ id: account })
@ -83,10 +96,63 @@ export async function migrateFromAsyncStorage(): Promise<void> {
if (instance.account.preferences) {
temp.set('preferences', JSON.stringify(instance.account.preferences))
}
temp.set('notifications', JSON.stringify(instance.notifications_filter))
temp.set('push', JSON.stringify(instance.push))
temp.set('page_local', JSON.stringify(instance.followingPage))
temp.set('page_me', JSON.stringify(instance.mePage))
temp.set(
'notifications',
JSON.stringify({
...instance.notifications_filter,
status:
typeof instance.notifications_filter.status === 'boolean'
? instance.notifications_filter.status
: true,
update:
typeof instance.notifications_filter.update === 'boolean'
? instance.notifications_filter.update
: true,
'admin.sign_up':
typeof instance.notifications_filter['admin.sign_up'] === 'boolean'
? instance.notifications_filter['admin.sign_up']
: true,
'admin.report':
typeof instance.notifications_filter['admin.report'] === 'boolean'
? instance.notifications_filter['admin.report']
: true
})
)
temp.set(
'push',
JSON.stringify({
global: unwrapPushData(instance.push.global),
decode: unwrapPushData(instance.push.decode),
alerts: {
follow: unwrapPushData(instance.push.alerts.follow),
follow_request: unwrapPushData(instance.push.alerts.follow_request),
favourite: unwrapPushData(instance.push.alerts.favourite),
reblog: unwrapPushData(instance.push.alerts.reblog),
mention: unwrapPushData(instance.push.alerts.mention),
poll: unwrapPushData(instance.push.alerts.poll),
status: unwrapPushData(instance.push.alerts.status),
update: unwrapPushData(instance.push.alerts.update),
'admin.sign_up': unwrapPushData(instance.push.alerts['admin.sign_up']),
'admin.report': unwrapPushData(instance.push.alerts['admin.report'])
}
})
)
temp.set(
'page_local',
JSON.stringify(
instance.followingPage || {
showBoosts: true,
showReplies: true
}
)
)
temp.set(
'page_me',
JSON.stringify({
...instance.mePage,
followedTags: instance.mePage.followedTags || { shown: false }
})
)
temp.set('drafts', JSON.stringify(instance.drafts))
temp.set('emojis_frequent', JSON.stringify(instance.frequentEmojis))
temp.set('version', instance.version)

View File

@ -70,7 +70,7 @@ const themeColors: {
backgroundDefault: {
light: 'rgb(250, 250, 250)',
dark_lighter: 'rgb(44, 44, 44)',
dark_darker: 'rgb(18, 18, 18)'
dark_darker: 'rgb(0, 0, 0)'
},
backgroundDefaultTransparent: {
light: 'rgba(250, 250, 250, 0)',
@ -89,9 +89,9 @@ const themeColors: {
},
border: {
light: 'rgba(25, 25, 25, 0.3)',
dark_lighter: 'rgba(255, 255, 255, 0.3)',
dark_darker: 'rgba(255, 255, 255, 0.3)'
light: 'rgb(180, 180, 180)',
dark_lighter: 'rgb(90, 90, 90)',
dark_darker: 'rgb(90, 90, 90)'
},
shimmerDefault: {

View File

@ -3408,13 +3408,6 @@ __metadata:
languageName: node
linkType: hard
"@types/react-native-base64@npm:^0.2.0":
version: 0.2.0
resolution: "@types/react-native-base64@npm:0.2.0"
checksum: 6a562ae758dfd06f152a559f7380a7a2da783bf14e70eef8bd4aae0df9dc5971a71888b74e8db552546b94ada198bfc3b6d7db51dd537a8f21767d8729bd10e7
languageName: node
linkType: hard
"@types/react-native-share-menu@npm:5.0.2":
version: 5.0.2
resolution: "@types/react-native-share-menu@npm:5.0.2"
@ -9441,13 +9434,6 @@ __metadata:
languageName: node
linkType: hard
"react-native-base64@npm:^0.2.1":
version: 0.2.1
resolution: "react-native-base64@npm:0.2.1"
checksum: 5127c857250cabb9c24f494b56185a4339bd0ebb859824a01c2f4eb3264379556e06efc8e59ffb9585cbf1c5e6fee18f50f4a6e8a1c63fe4b5cedf0658f8c25e
languageName: node
linkType: hard
"react-native-blurhash@npm:^1.1.10":
version: 1.1.10
resolution: "react-native-blurhash@npm:1.1.10"
@ -11246,7 +11232,6 @@ __metadata:
"@types/react": ^18.0.26
"@types/react-dom": ^18.0.10
"@types/react-native": ^0.70.8
"@types/react-native-base64": ^0.2.0
"@types/react-native-share-menu": ^5.0.2
"@types/valid-url": ^1.0.3
axios: ^1.2.1
@ -11282,7 +11267,6 @@ __metadata:
react-intl: ^6.2.5
react-native: ^0.70.6
react-native-animated-spinkit: ^1.5.2
react-native-base64: ^0.2.1
react-native-blurhash: ^1.1.10
react-native-clean-project: ^4.0.1
react-native-fast-image: ^8.6.3