Merge pull request #70 from tooot-app/main

nightly-210319

src/components/GracefullyImage.tsx

@@ -1,9 +1,15 @@
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback, useMemo, useRef, useState } from 'react'
-import { Pressable, StyleProp, StyleSheet, ViewStyle } from 'react-native'
+import {
+  Image,
+  ImageStyle,
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  ViewStyle
+} from 'react-native'
 import { Blurhash } from 'react-native-blurhash'
-import FastImage, { ImageStyle } from 'react-native-fast-image'
 
 // blurhas -> if blurhash, show before any loading succeed
 // original -> load original
@@ -70,7 +76,7 @@ const GracefullyImage = React.memo(
     const previewView = useMemo(
       () =>
         uri.preview && !imageLoaded ? (
-          <FastImage
+          <Image
             source={{ uri: uri.preview }}
             style={[{ flex: 1 }, imageStyle]}
           />
@@ -79,14 +85,14 @@ const GracefullyImage = React.memo(
     )
     const originalView = useMemo(
       () => (
-        <FastImage
+        <Image
           source={source}
-          style={[{ flex: imageLoaded ? 1 : undefined }, imageStyle]}
+          style={[{ flex: 1 }, imageStyle]}
           onLoad={onLoad}
           onError={onError}
         />
       ),
-      [source, imageLoaded]
+      [source]
     )
     const blurhashView = useMemo(() => {
       return blurhash && (hidden || !imageLoaded) ? (

src/components/Header/Center.tsx

@@ -23,7 +23,7 @@ const HeaderCenter = React.memo(
       />
     )
   },
-  () => true
+  (prev, next) => prev.content === next.content
 )
 
 const styles = StyleSheet.create({

src/screens/Compose.tsx

@@ -340,6 +340,12 @@ const ScreenCompose: React.FC<ScreenComposeProp> = ({
     [totalTextCount, composeState]
   )
 
+  const headerContent = useMemo(() => {
+    return `${totalTextCount} / ${maxTootChars}${
+      __DEV__ ? ` Dirty: ${composeState.dirty.toString()}` : ''
+    }`
+  }, [totalTextCount, maxTootChars, composeState.dirty])
+
   return (
     <KeyboardAvoidingView
       style={styles.base}
@@ -358,10 +364,9 @@ const ScreenCompose: React.FC<ScreenComposeProp> = ({
               name='Screen-Compose-Root'
               component={ComposeRoot}
               options={{
-                headerLeft,
+                ...Platform.select({
-                headerTitle: `${totalTextCount} / ${maxTootChars}${
+                  ios: {
-                  __DEV__ ? ` Dirty: ${composeState.dirty.toString()}` : ''
+                    headerTitle: headerContent,
-                }`,
                     headerTitleStyle: {
                       fontWeight:
                         totalTextCount > maxTootChars
@@ -370,14 +375,15 @@ const ScreenCompose: React.FC<ScreenComposeProp> = ({
                       fontSize: StyleConstants.Font.Size.M
                     },
                     headerTintColor:
-                  totalTextCount > maxTootChars ? theme.red : theme.secondary,
+                      totalTextCount > maxTootChars
-                headerCenter: () => (
+                        ? theme.red
-                  <HeaderCenter
+                        : theme.secondary
-                    content={`${totalTextCount} / ${maxTootChars}${
+                  },
-                      __DEV__ ? ` Dirty: ${composeState.dirty.toString()}` : ''
+                  android: {
-                    }`}
+                    headerCenter: () => <HeaderCenter content={headerContent} />
-                  />
+                  }
-                ),
+                }),
+                headerLeft,
                 headerRight
               }}
             />

src/screens/Compose/DraftsList/Root.tsx

@@ -9,7 +9,7 @@ import {
 } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useCallback, useContext, useEffect, useState } from 'react'
+import React, { useCallback, useContext, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   Dimensions,
@@ -42,12 +42,6 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
     draft => draft.timestamp !== timestamp
   )
 
-  useEffect(() => {
-    if (instanceDrafts?.length === 0) {
-      navigation.goBack()
-    }
-  }, [instanceDrafts?.length])
-
   const actionWidth =
     StyleConstants.Font.Size.L + StyleConstants.Spacing.Global.PagePadding * 4
 

src/screens/Compose/EditAttachment/Root.tsx

@@ -1,7 +1,7 @@
 import AttachmentVideo from '@components/Timeline/Shared/Attachment/Video'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useContext, useMemo } from 'react'
+import React, { useContext, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ScrollView, StyleSheet, Text, TextInput, View } from 'react-native'
 import ComposeContext from '../utils/createContext'
@@ -55,8 +55,10 @@ const ComposeEditAttachmentRoot: React.FC<Props> = ({ index }) => {
       }
     })
 
+  const scrollViewRef = useRef<ScrollView>(null)
+
   return (
-    <ScrollView>
+    <ScrollView ref={scrollViewRef}>
       {mediaDisplay}
       <View style={styles.altTextContainer}>
         <Text style={[styles.altTextInputHeading, { color: theme.primary }]}>
@@ -67,6 +69,7 @@ const ComposeEditAttachmentRoot: React.FC<Props> = ({ index }) => {
             styles.altTextInput,
             { borderColor: theme.border, color: theme.primary }
           ]}
+          onFocus={() => scrollViewRef.current?.scrollToEnd()}
           autoCapitalize='none'
           autoCorrect={false}
           maxLength={1500}

src/screens/Compose/Root.tsx

@@ -4,7 +4,13 @@ import { useSearchQuery } from '@utils/queryHooks/search'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { forEach, groupBy, sortBy } from 'lodash'
-import React, { useCallback, useContext, useEffect, useMemo } from 'react'
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef
+} from 'react'
 import { FlatList, Image, StyleSheet, View } from 'react-native'
 import { Circle } from 'react-native-animated-spinkit'
 import ComposeActions from './Root/Actions'
@@ -30,7 +36,8 @@ const prefetchEmojis = (
   })
 }
 
-const ComposeRoot: React.FC = () => {
+const ComposeRoot = React.memo(
+  () => {
     const { theme } = useTheme()
 
     const { composeState, composeDispatch } = useContext(ComposeContext)
@@ -100,7 +107,7 @@ const ComposeRoot: React.FC = () => {
         <FlatList
           renderItem={listItem}
           ListEmptyComponent={listEmpty}
-        keyboardShouldPersistTaps='handled'
+          keyboardShouldPersistTaps='always'
           ListHeaderComponent={ComposeRootHeader}
           ListFooterComponent={ComposeRootFooter}
           ItemSeparatorComponent={ComponentSeparator}
@@ -113,7 +120,9 @@ const ComposeRoot: React.FC = () => {
         <ComposePosting />
       </View>
     )
-}
+  },
+  () => true
+)
 
 const styles = StyleSheet.create({
   base: {

src/screens/Compose/Root/Footer/Attachments.tsx

@@ -246,7 +246,7 @@ const ComposeAttachments: React.FC = () => {
         snapToAlignment='center'
         renderItem={renderAttachment}
         snapToOffsets={snapToOffsets}
-        keyboardShouldPersistTaps='handled'
+        keyboardShouldPersistTaps='always'
         showsHorizontalScrollIndicator={false}
         data={composeState.attachments.uploads}
         keyExtractor={item =>

src/screens/Compose/Root/Footer/Emojis.tsx

@@ -76,7 +76,7 @@ const ComposeEmojis: React.FC = () => {
     <View style={styles.base}>
       <SectionList
         horizontal
-        keyboardShouldPersistTaps='handled'
+        keyboardShouldPersistTaps='always'
         sections={composeState.emoji.emojis || []}
         keyExtractor={item => item.shortcode}
         renderSectionHeader={listHeader}

src/screens/Compose/Root/Header/SpoilerInput.tsx

@@ -46,7 +46,7 @@ const ComposeSpoilerInput: React.FC = () => {
         })
       }}
       ref={composeState.textInputFocus.refs.spoiler}
-      scrollEnabled
+      scrollEnabled={false}
       onFocus={() =>
         composeDispatch({
           type: 'textInputFocus',

src/screens/Compose/Root/Header/TextInput.tsx

@@ -52,7 +52,7 @@ const ComposeTextInput: React.FC = () => {
         })
       }}
       ref={composeState.textInputFocus.refs.text}
-      scrollEnabled
+      scrollEnabled={false}
     >
       <Text>{composeState.text.formatted}</Text>
     </TextInput>

src/screens/ImagesViewer.tsx

@@ -86,9 +86,9 @@ const HeaderComponent = React.memo(
               analytics('imageviewer_more_share_press')
               switch (Platform.OS) {
                 case 'ios':
-                  return Share.share({ url: imageUrls[currentIndex].url })
+                  Share.share({ url: imageUrls[currentIndex].url })
                 case 'android':
-                  return Share.share({ message: imageUrls[currentIndex].url })
+                  Share.share({ message: imageUrls[currentIndex].url })
               }
               break
           }

src/screens/Tabs/Me/Switch/Root.tsx

@@ -54,7 +54,7 @@ const ScreenMeSwitchRoot: React.FC = () => {
   const instanceActive = useSelector(getInstanceActive)
 
   return (
-    <ScrollView style={styles.base} keyboardShouldPersistTaps='handled'>
+    <ScrollView style={styles.base} keyboardShouldPersistTaps='always'>
       <View style={[styles.firstSection, { borderBottomColor: theme.border }]}>
         <Text style={[styles.header, { color: theme.primary }]}>
           {t('content.existing')}