Use spinkit instead of activityindicator

.expo-shared/assets.json

@@ -1,4 +0,0 @@
-{
-  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
-  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
-}

src/components/Timelines/Timeline/Empty.tsx

@@ -1,8 +1,9 @@
-import { Feather } from '@expo/vector-icons'
 import React, { useMemo } from 'react'
-import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
+import { StyleSheet, Text, View } from 'react-native'
+import { Chase } from 'react-native-animated-spinkit'
 import { QueryStatus } from 'react-query'
 import Button from '@components/Button'
+import { Feather } from '@expo/vector-icons'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 
@@ -17,7 +18,9 @@ const TimelineEmpty: React.FC<Props> = ({ status, refetch }) => {
   const children = useMemo(() => {
     switch (status) {
       case 'loading':
-        return <ActivityIndicator />
+        return (
+          <Chase size={StyleConstants.Font.Size.L} color={theme.secondary} />
+        )
       case 'error':
         return (
           <>

src/components/Timelines/Timeline/Shared/End.tsx

@@ -1,6 +1,7 @@
-import { Feather } from '@expo/vector-icons'
 import React from 'react'
-import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
+import { StyleSheet, Text, View } from 'react-native'
+import { Chase } from 'react-native-animated-spinkit'
+import { Feather } from '@expo/vector-icons'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 
@@ -14,7 +15,7 @@ const TimelineEnd: React.FC<Props> = ({ hasNextPage }) => {
   return (
     <View style={styles.base}>
       {hasNextPage ? (
-        <ActivityIndicator />
+        <Chase size={StyleConstants.Font.Size.L} color={theme.secondary} />
       ) : (
         <Text style={[styles.text, { color: theme.secondary }]}>
           居然刷到底了，喝杯{' '}

src/components/Timelines/Timeline/Shared/HeaderNotification.tsx

@@ -1,21 +1,16 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import {
+import { Pressable, StyleSheet, Text, View } from 'react-native'
-  ActivityIndicator,
+import { Chase } from 'react-native-animated-spinkit'
-  Pressable,
+import { useQuery } from 'react-query'
-  StyleSheet,
+import client from '@api/client'
-  Text,
-  View
-} from 'react-native'
 import { Feather } from '@expo/vector-icons'
 import Emojis from '@components/Timelines/Timeline/Shared/Emojis'
-import relativeTime from '@utils/relativeTime'
-import { useTheme } from '@utils/styles/ThemeManager'
-import { StyleConstants } from '@utils/styles/constants'
-import { useQuery } from 'react-query'
-import { relationshipFetch } from '@utils/fetches/relationshipFetch'
-import client from '@api/client'
 import { toast } from '@components/toast'
 import openLink from '@root/utils/openLink'
+import relativeTime from '@utils/relativeTime'
+import { StyleConstants } from '@utils/styles/constants'
+import { relationshipFetch } from '@utils/fetches/relationshipFetch'
+import { useTheme } from '@utils/styles/ThemeManager'
 
 export interface Props {
   notification: Mastodon.Notification
@@ -87,7 +82,9 @@ const TimelineHeaderNotification: React.FC<Props> = ({ notification }) => {
     switch (status) {
       case 'idle':
       case 'loading':
-        return <ActivityIndicator />
+        return (
+          <Chase size={StyleConstants.Font.Size.L} color={theme.secondary} />
+        )
       case 'success':
         return (
           <Pressable onPress={relationshipOnPress}>

src/components/Timelines/Timeline/Shared/Poll.tsx

@@ -162,12 +162,16 @@ const TimelinePoll: React.FC<Props> = ({
             <View style={styles.optionSelected}>
               <Feather
                 style={styles.voted}
-                name={poll.multiple ? 'check-square' : 'check-circle'}
+                name={
+                  `${poll.own_votes!.includes(index) ? 'check-' : ''}${
+                    poll.multiple ? 'square' : 'circle'
+                  }` as any
+                }
                 size={StyleConstants.Font.Size.M}
                 color={
                   poll.own_votes!.includes(index)
                     ? theme.primary
-                    : theme.background
+                    : theme.disabled
                 }
               />
               <View style={styles.contentSelected}>
@@ -266,7 +270,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row'
   },
   contentSelected: {
-    flexShrink: 1,
+    flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
     paddingRight: StyleConstants.Spacing.S

src/screens/Me/Lists.tsx

@@ -1,25 +1,18 @@
+import { MenuRow } from '@components/Menu'
 import { useNavigation } from '@react-navigation/native'
-import React from 'react'
+import TimelineEmpty from '@root/components/Timelines/Timeline/Empty'
-import { ActivityIndicator, Text } from 'react-native'
-import { useQuery } from 'react-query'
-import { MenuContainer, MenuRow } from '@components/Menu'
-
 import { listsFetch } from '@utils/fetches/listsFetch'
+import React, { useMemo } from 'react'
+import { StyleSheet } from 'react-native'
+import { useQuery } from 'react-query'
 
 const ScreenMeLists: React.FC = () => {
   const navigation = useNavigation()
-  const { status, data } = useQuery(['Lists'], listsFetch)
+  const { status, data, refetch } = useQuery(['Lists'], listsFetch)
 
-  let lists
+  const children = useMemo(() => {
-  switch (status) {
+    if (status === 'success') {
-    case 'loading':
+      return data?.map((d: Mastodon.List, i: number) => (
-      lists = <ActivityIndicator />
-      break
-    case 'error':
-      lists = <Text>载入错误</Text>
-      break
-    case 'success':
-      lists = data?.map((d: Mastodon.List, i: number) => (
         <MenuRow
           key={i}
           iconFront='list'
@@ -32,10 +25,19 @@ const ScreenMeLists: React.FC = () => {
           }
         />
       ))
-      break
+    } else {
+      return <TimelineEmpty status={status} refetch={refetch} />
     }
+  }, [status])
 
-  return <MenuContainer>{lists}</MenuContainer>
+  return <>{children}</>
 }
 
+const styles = StyleSheet.create({
+  loading: {
+    flex: 1,
+    alignItems: 'center'
+  }
+})
+
 export default ScreenMeLists

src/screens/Shared/Account/Header.tsx

@@ -42,6 +42,8 @@ const AccountHeader: React.FC<Props> = ({
           isMounted &&
             setRatio(limitHeight ? accountState.headerRatio : height / width)
         })
+    } else {
+      isMounted && setRatio(1 / 5)
     }
   }, [account, isMounted])
 

src/screens/Shared/Compose.tsx

@@ -528,7 +528,6 @@ const Compose: React.FC<Props> = ({ route: { params }, navigation }) => {
   const totalTextCount =
     (composeState.spoiler.active ? composeState.spoiler.count : 0) +
     composeState.text.count
-  // doesn't work
   const rawCount = composeState.text.raw.length
 
   const postButtonText = {

src/screens/Shared/Compose/Root.tsx

@@ -1,40 +1,37 @@
-import { forEach, groupBy, sortBy } from 'lodash'
-import React, {
-  Dispatch,
-  RefObject,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef
-} from 'react'
-import {
-  View,
-  ActivityIndicator,
-  FlatList,
-  Pressable,
-  ProgressViewIOS,
-  StyleSheet,
-  Text,
-  TextInput,
-  Image
-} from 'react-native'
-import { useQuery } from 'react-query'
 import Emojis from '@components/Timelines/Timeline/Shared/Emojis'
-import { emojisFetch } from '@utils/fetches/emojisFetch'
-import { searchFetch } from '@utils/fetches/searchFetch'
-import { StyleConstants } from '@utils/styles/constants'
-import { useTheme } from '@utils/styles/ThemeManager'
 import {
   ComposeAction,
   ComposeState,
   ComposeContext
 } from '@screens/Shared/Compose'
 import ComposeActions from '@screens/Shared/Compose/Actions'
-import updateText from './updateText'
-import * as Permissions from 'expo-permissions'
 import ComposeRootFooter from '@screens/Shared/Compose/Root/Footer'
 import ComposeRootHeader from '@screens/Shared/Compose/Root/Header'
+import updateText from '@screens/Shared/Compose/updateText'
+import { emojisFetch } from '@utils/fetches/emojisFetch'
+import { searchFetch } from '@utils/fetches/searchFetch'
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
+import * as Permissions from 'expo-permissions'
+import { forEach, groupBy, sortBy } from 'lodash'
+import React, {
+  Dispatch,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo
+} from 'react'
+import {
+  View,
+  FlatList,
+  Pressable,
+  ProgressViewIOS,
+  StyleSheet,
+  Text,
+  Image
+} from 'react-native'
+import { Chase } from 'react-native-animated-spinkit'
+import { useQuery } from 'react-query'
 
 const ListItem = React.memo(
   ({
@@ -109,6 +106,8 @@ const ListItem = React.memo(
 )
 
 const ComposeRoot: React.FC = () => {
+  const { theme } = useTheme()
+
   const { composeState, composeDispatch } = useContext(ComposeContext)
 
   const { isFetching, isSuccess, data, refetch } = useQuery(
@@ -159,7 +158,14 @@ const ComposeRoot: React.FC = () => {
 
   const listEmpty = useMemo(() => {
     if (isFetching) {
-      return <ActivityIndicator />
+      return (
+        <View style={styles.loading}>
+          <Chase
+            size={StyleConstants.Font.Size.M * 1.25}
+            color={theme.secondary}
+          />
+        </View>
+      )
     }
   }, [isFetching])
 
@@ -242,6 +248,10 @@ const styles = StyleSheet.create({
     fontSize: StyleConstants.Font.Size.S,
     fontWeight: StyleConstants.Font.Weight.Bold,
     marginBottom: StyleConstants.Spacing.XS
+  },
+  loading: {
+    flex: 1,
+    alignItems: 'center'
   }
 })
 

src/screens/Shared/Search.tsx

@@ -1,6 +1,7 @@
 import { Feather } from '@expo/vector-icons'
 import { useNavigation } from '@react-navigation/native'
 import { HeaderRight } from '@root/components/Header'
+import ParseContent from '@root/components/ParseContent'
 import Emojis from '@root/components/Timelines/Timeline/Shared/Emojis'
 import { searchFetch } from '@root/utils/fetches/searchFetch'
 import { StyleConstants } from '@root/utils/styles/constants'
@@ -8,8 +9,8 @@ import { useTheme } from '@root/utils/styles/ThemeManager'
 import { debounce } from 'lodash'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import {
-  ActivityIndicator,
   Image,
+  KeyboardAvoidingView,
   Pressable,
   SectionList,
   StyleSheet,
@@ -17,6 +18,7 @@ import {
   TextInput,
   View
 } from 'react-native'
+import { Chase } from 'react-native-animated-spinkit'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { useQuery } from 'react-query'
 
@@ -71,13 +73,17 @@ const ScreenSharedSearch: React.FC = () => {
   }, [searchTerm])
 
   const listEmpty = useMemo(
-    () =>
+    () => (
-      status === 'loading' ? (
       <View style={styles.emptyBase}>
-          <ActivityIndicator />
+        {status === 'loading' ? (
+          <View style={styles.loading}>
+            <Chase
+              size={StyleConstants.Font.Size.M * 1.25}
+              color={theme.secondary}
+            />
           </View>
         ) : (
-        <View style={styles.emptyBase}>
+          <>
             <Text
               style={[
                 styles.emptyDefault,
@@ -109,6 +115,8 @@ const ScreenSharedSearch: React.FC = () => {
               <Text style={{ color: theme.secondary }}>URL</Text>
               {'   '}搜索指定用户
             </Text>
+          </>
+        )}
       </View>
     ),
     [status]
@@ -204,13 +212,62 @@ const ScreenSharedSearch: React.FC = () => {
           </Pressable>
         )
       case 'statuses':
-        return <Text>{item.id || 'empty'}</Text>
+        return (
+          <Pressable
+            style={[
+              styles.itemDefault,
+              styles.itemAccount,
+              { borderBottomColor: theme.border }
+            ]}
+            onPress={() => {
+              navigation.goBack()
+              navigation.push('Screen-Shared-Toot', { toot: item })
+            }}
+          >
+            <Image
+              source={{ uri: item.account.avatar_static }}
+              style={styles.itemAccountAvatar}
+            />
+            <View>
+              {item.account.emojis?.length ? (
+                <Emojis
+                  content={item.account.display_name || item.account.username}
+                  emojis={item.account.emojis}
+                  size={StyleConstants.Font.Size.S}
+                  fontBold={true}
+                />
+              ) : (
+                <Text
+                  style={[styles.nameWithoutEmoji, { color: theme.primary }]}
+                >
+                  {item.account.display_name || item.account.username}
+                </Text>
+              )}
+              <Text
+                style={[styles.itemAccountAcct, { color: theme.secondary }]}
+              >
+                @{item.account.acct}
+              </Text>
+              {item.content && (
+                <View style={styles.itemStatus}>
+                  <ParseContent
+                    content={item.content}
+                    size='M'
+                    emojis={item.emojis}
+                    numberOfLines={2}
+                  />
+                </View>
+              )}
+            </View>
+          </Pressable>
+        )
       default:
         return null
     }
   }, [])
 
   return (
+    <KeyboardAvoidingView behavior='padding' style={{ flex: 1 }}>
       <SafeAreaView style={{ flex: 1 }} edges={['bottom']}>
         <View style={styles.searchBar}>
           <View
@@ -235,7 +292,9 @@ const ScreenSharedSearch: React.FC = () => {
               autoCorrect={false}
               clearButtonMode='never'
               keyboardType='web-search'
-            onSubmitEditing={({ nativeEvent: { text } }) => setSearchTerm(text)}
+              onSubmitEditing={({ nativeEvent: { text } }) =>
+                setSearchTerm(text)
+              }
               placeholder={'搜索些什么'}
               placeholderTextColor={theme.secondary}
               returnKeyType='go'
@@ -261,6 +320,7 @@ const ScreenSharedSearch: React.FC = () => {
           keyExtractor={(item, index) => item + index}
         />
       </SafeAreaView>
+    </KeyboardAvoidingView>
   )
 }
 
@@ -303,6 +363,7 @@ const styles = StyleSheet.create({
       StyleConstants.Spacing.M +
       StyleConstants.Spacing.S
   },
+  loading: { flex: 1, alignItems: 'center' },
   emptyFontSize: { fontSize: StyleConstants.Font.Size.S },
   emptyFontBold: {
     fontWeight: StyleConstants.Font.Weight.Bold
@@ -338,6 +399,7 @@ const styles = StyleSheet.create({
     alignItems: 'center'
   },
   itemAccountAvatar: {
+    alignSelf: 'flex-start',
     width: StyleConstants.Avatar.S,
     height: StyleConstants.Avatar.S,
     borderRadius: 6,
@@ -350,6 +412,9 @@ const styles = StyleSheet.create({
   itemAccountAcct: { marginTop: StyleConstants.Spacing.XS },
   itemHashtag: {
     fontSize: StyleConstants.Font.Size.M
+  },
+  itemStatus: {
+    marginTop: StyleConstants.Spacing.S
   }
 })