Android & visual fixes: color themes, repost icon, navigation, back handler, etc (#519)

* Switch android to use slide left/right animations on navigation

* Bump the repost icon down by a pixel

* Tune theme colors for contrast and darker bg on darkmode

* Move back handler to a point in the init flow that leads to more consistent capture of events

* Fix image share flow on android

* Fix lint

* Add todo about sharing not available

* Drop the android slide animation because it's too slow

* Fix 'flashes of white' in dark mode android

package.json

@@ -68,6 +68,7 @@
     "expo-image-picker": "~14.1.1",
     "expo-localization": "~14.1.1",
     "expo-media-library": "~15.2.3",
+    "expo-sharing": "~11.2.2",
     "expo-splash-screen": "~0.18.1",
     "expo-status-bar": "~1.4.4",
     "expo-system-ui": "~2.2.1",

src/App.native.tsx

@@ -13,7 +13,6 @@ import {RootStoreModel, setupState, RootStoreProvider} from './state'
 import {Shell} from './view/shell'
 import * as notifee from 'lib/notifee'
 import * as analytics from 'lib/analytics'
-import * as backHandler from 'lib/routes/back-handler'
 import * as Toast from './view/com/util/Toast'
 import {handleLink} from './Navigation'
 
@@ -29,7 +28,6 @@ const App = observer(() => {
       setRootStore(store)
       analytics.init(store)
       notifee.init(store)
-      backHandler.init(store)
       SplashScreen.hideAsync()
       Linking.getInitialURL().then((url: string | null) => {
         if (url) {

src/Navigation.tsx

@@ -6,6 +6,8 @@ import {
   createNavigationContainerRef,
   CommonActions,
   StackActions,
+  DefaultTheme,
+  DarkTheme,
 } from '@react-navigation/native'
 import {createNativeStackNavigator} from '@react-navigation/native-stack'
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
@@ -256,8 +258,9 @@ const LINKING = {
 }
 
 function RoutesContainer({children}: React.PropsWithChildren<{}>) {
+  const theme = useColorSchemeStyle(DefaultTheme, DarkTheme)
   return (
-    <NavigationContainer ref={navigationRef} linking={LINKING}>
+    <NavigationContainer ref={navigationRef} linking={LINKING} theme={theme}>
       {children}
     </NavigationContainer>
   )
@@ -334,7 +337,7 @@ const styles = StyleSheet.create({
     backgroundColor: colors.black,
   },
   bgLight: {
-    backgroundColor: colors.gray1,
+    backgroundColor: colors.white,
   },
 })
 

src/lib/icons.tsx

@@ -431,7 +431,7 @@ export function RepostIcon({
         strokeWidth={strokeWidth}
         strokeLinejoin="round"
         fill="none"
-        d="M 14.437 17.081 L 5.475 17.095 C 4.7 17.095 4.072 16.467 4.072 15.692 L 4.082 5.65 L 1.22 9.854 M 4.082 5.65 L 7.006 9.854 M 9.859 5.65 L 18.625 5.654 C 19.4 5.654 20.028 6.282 20.028 7.057 L 20.031 17.081 L 17.167 12.646 M 20.031 17.081 L 22.866 12.646"
+        d="M 14.437 18.081 L 5.475 18.095 C 4.7 18.095 4.072 17.467 4.072 16.692 L 4.082 6.65 L 1.22 10.854 M 4.082 6.65 L 7.006 10.854 M 9.859 6.65 L 18.625 6.654 C 19.4 6.654 20.028 7.282 20.028 8.057 L 20.031 18.081 L 17.167 13.646 M 20.031 18.081 L 22.866 13.646"
       />
     </Svg>
   )

src/lib/media/manip.ts

@@ -1,10 +1,10 @@
 import RNFetchBlob from 'rn-fetch-blob'
 import ImageResizer from '@bam.tech/react-native-image-resizer'
-import {Image as RNImage, Share} from 'react-native'
+import {Image as RNImage} from 'react-native'
 import {Image} from 'react-native-image-crop-picker'
 import RNFS from 'react-native-fs'
 import uuid from 'react-native-uuid'
-import * as Toast from 'view/com/util/Toast'
+import * as Sharing from 'expo-sharing'
 import {Dimensions} from './types'
 import {POST_IMG_MAX} from 'lib/constants'
 import {isAndroid} from 'platform/detection'
@@ -120,20 +120,19 @@ export async function downloadAndResize(opts: DownloadAndResizeOpts) {
 }
 
 export async function saveImageModal({uri}: {uri: string}) {
+  if (!(await Sharing.isAvailableAsync())) {
+    // TODO might need to give an error to the user in this case -prf
+    return
+  }
   const downloadResponse = await RNFetchBlob.config({
     fileCache: true,
   }).fetch('GET', uri)
 
-  const imagePath = downloadResponse.path()
+  let imagePath = downloadResponse.path()
-  const base64Data = await downloadResponse.readFile('base64')
+  await Sharing.shareAsync(normalizePath(imagePath, true), {
-  const result = await Share.share({
+    mimeType: 'image/png',
-    url: 'data:image/png;base64,' + base64Data,
+    UTI: 'public.png',
   })
-  if (result.action === Share.sharedAction) {
-    Toast.show('Image saved to gallery')
-  } else if (result.action === Share.dismissedAction) {
-    // dismissed
-  }
   RNFS.unlink(imagePath)
 }
 
@@ -201,8 +200,8 @@ async function moveToPermanentPath(path: string): Promise<string> {
   return normalizePath(destinationPath)
 }
 
-function normalizePath(str: string): string {
+function normalizePath(str: string, allPlatforms = false): string {
-  if (isAndroid) {
+  if (isAndroid || allPlatforms) {
     if (!str.startsWith('file://')) {
       return `file://${str}`
     }

src/lib/routes/back-handler.ts

@@ -1,11 +1,8 @@
 import {BackHandler} from 'react-native'
 import {RootStoreModel} from 'state/index'
 
-export function onBack(cb: () => boolean): () => void {
-  const subscription = BackHandler.addEventListener('hardwareBackPress', cb)
-  return () => subscription.remove()
-}
-
 export function init(store: RootStoreModel) {
-  onBack(() => store.shell.closeAnyActiveElement())
+  BackHandler.addEventListener('hardwareBackPress', () => {
+    return store.shell.closeAnyActiveElement()
+  })
 }

src/lib/themes.ts

@@ -291,8 +291,8 @@ export const darkTheme: Theme = {
   palette: {
     ...defaultTheme.palette,
     default: {
-      background: colors.gray8,
+      background: colors.black,
-      backgroundLight: colors.gray6,
+      backgroundLight: colors.gray7,
       text: colors.white,
       textLight: colors.gray3,
       textInverted: colors.black,
@@ -307,7 +307,7 @@ export const darkTheme: Theme = {
       replyLineDot: colors.gray6,
       unreadNotifBg: colors.blue7,
       unreadNotifBorder: colors.blue6,
-      postCtrl: '#61657A',
+      postCtrl: '#707489',
       brandText: '#0085ff',
       emptyStateIcon: colors.gray4,
     },

src/view/com/composer/Composer.tsx

@@ -33,7 +33,7 @@ import {OpenCameraBtn} from './photos/OpenCameraBtn'
 import {usePalette} from 'lib/hooks/usePalette'
 import QuoteEmbed from '../util/post-embeds/QuoteEmbed'
 import {useExternalLinkFetch} from './useExternalLinkFetch'
-import {isDesktopWeb} from 'platform/detection'
+import {isDesktopWeb, isAndroid} from 'platform/detection'
 import {GalleryModel} from 'state/models/media/gallery'
 import {Gallery} from './photos/Gallery'
 
@@ -195,8 +195,8 @@ export const ComposePost = observer(function ComposePost({
 
   const canSelectImages = gallery.size <= 4
   const viewStyles = {
-    paddingBottom: Platform.OS === 'android' ? insets.bottom : 0,
+    paddingBottom: isAndroid ? insets.bottom : 0,
-    paddingTop: Platform.OS === 'android' ? insets.top : 15,
+    paddingTop: isAndroid ? insets.top : isDesktopWeb ? 0 : 15,
   }
 
   return (

src/view/com/modals/Modal.web.tsx

@@ -97,6 +97,7 @@ function Modal({modal}: {modal: ModalIface}) {
               styles.container,
               isMobileWeb && styles.containerMobile,
               pal.view,
+              pal.border,
             ]}>
             {element}
           </View>
@@ -124,6 +125,7 @@ const styles = StyleSheet.create({
     paddingVertical: 20,
     paddingHorizontal: 24,
     borderRadius: 8,
+    borderWidth: 1,
   },
   containerMobile: {
     borderRadius: 0,

src/view/com/util/forms/DropdownButton.tsx

@@ -291,6 +291,8 @@ const DropdownItems = ({
   const theme = useTheme()
   const dropDownBackgroundColor =
     theme.colorScheme === 'dark' ? pal.btn : pal.view
+  const separatorColor =
+    theme.colorScheme === 'dark' ? pal.borderDark : pal.border
 
   return (
     <>
@@ -322,7 +324,9 @@ const DropdownItems = ({
               </TouchableOpacity>
             )
           } else if (isSep(item)) {
-            return <View key={index} style={[styles.separator, pal.border]} />
+            return (
+              <View key={index} style={[styles.separator, separatorColor]} />
+            )
           }
           return null
         })}

src/view/screens/Settings.tsx

@@ -35,6 +35,7 @@ import {AccountData} from 'state/models/session'
 import {useAnalytics} from 'lib/analytics'
 import {NavigationProp} from 'lib/routes/types'
 import {pluralize} from 'lib/strings/helpers'
+import {isDesktopWeb} from 'platform/detection'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'Settings'>
 export const SettingsScreen = withAuthRequired(
@@ -139,9 +140,12 @@ export const SettingsScreen = withAuthRequired(
     }, [store])
 
     return (
-      <View style={[s.hContentRegion]} testID="settingsScreen">
+      <View style={s.hContentRegion} testID="settingsScreen">
-        <ViewHeader title="Settings" showOnDesktop />
+        <ViewHeader title="Settings" />
-        <ScrollView style={s.hContentRegion} scrollIndicatorInsets={{right: 1}}>
+        <ScrollView
+          style={s.hContentRegion}
+          contentContainerStyle={!isDesktopWeb && pal.viewLight}
+          scrollIndicatorInsets={{right: 1}}>
           <View style={styles.spacer20} />
           <View style={[s.flexRow, styles.heading]}>
             <Text type="xl-bold" style={pal.text}>

src/view/shell/Composer.web.tsx

@@ -32,7 +32,7 @@ export const Composer = observer(
 
     return (
       <View style={styles.mask}>
-        <View style={[styles.container, pal.view]}>
+        <View style={[styles.container, pal.view, pal.border]}>
           <ComposePost
             replyTo={replyTo}
             quote={quote}
@@ -63,5 +63,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: 2,
     borderRadius: isMobileWeb ? 0 : 8,
     marginBottom: '10vh',
+    borderWidth: 1,
   },
 })

src/view/shell/index.tsx

@@ -13,6 +13,7 @@ import {DrawerContent} from './Drawer'
 import {Composer} from './Composer'
 import {useTheme} from 'lib/ThemeContext'
 import {usePalette} from 'lib/hooks/usePalette'
+import * as backHandler from 'lib/routes/back-handler'
 import {RoutesContainer, TabsNavigator} from '../../Navigation'
 import {isStateAtTabRoot} from 'lib/routes/helpers'
 
@@ -34,6 +35,9 @@ const ShellInner = observer(() => {
     [store],
   )
   const canGoBack = useNavigationState(state => !isStateAtTabRoot(state))
+  React.useEffect(() => {
+    backHandler.init(store)
+  }, [store])
 
   return (
     <>
@@ -69,8 +73,8 @@ const ShellInner = observer(() => {
 })
 
 export const Shell: React.FC = observer(() => {
-  const theme = useTheme()
   const pal = usePalette('default')
+  const theme = useTheme()
   return (
     <View testID="mobileShellView" style={[styles.outerContainer, pal.view]}>
       <StatusBar style={theme.colorScheme === 'dark' ? 'light' : 'dark'} />

yarn.lock

@@ -8427,6 +8427,11 @@ expo-pwa@0.0.124:
     commander "2.20.0"
     update-check "1.5.3"
 
+expo-sharing@~11.2.2:
+  version "11.2.2"
+  resolved "https://registry.yarnpkg.com/expo-sharing/-/expo-sharing-11.2.2.tgz#7d9e387f1a902e6dd6838c22d9599dae9e7432cf"
+  integrity sha512-4Lhm1eS/CFIzX+JPuxMUTWBt9rv/WdvJvpQ9y+71bL/9w9dhvsdt9tv0SsNZATz4hk0tbrYD8ZEUsgiHiT1KkQ==
+
 expo-splash-screen@~0.18.1:
   version "0.18.1"
   resolved "https://registry.yarnpkg.com/expo-splash-screen/-/expo-splash-screen-0.18.1.tgz#e090b045a7f8c5d9597b7a96910caa4eae1fcf3b"