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

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()
-  const base64Data = await downloadResponse.readFile('base64')
-  const result = await Share.share({
-    url: 'data:image/png;base64,' + base64Data,
+  let imagePath = downloadResponse.path()
+  await Sharing.shareAsync(normalizePath(imagePath, true), {
+    mimeType: 'image/png',
+    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 {
-  if (isAndroid) {
+function normalizePath(str: string, allPlatforms = false): string {
+  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,
-      backgroundLight: colors.gray6,
+      background: colors.black,
+      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,
     },