diff --git a/package.json b/package.json index 88471b8f..d6d29f3c 100644 --- a/package.json +++ b/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", diff --git a/src/App.native.tsx b/src/App.native.tsx index f4f787a0..e0e030cb 100644 --- a/src/App.native.tsx +++ b/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) { diff --git a/src/Navigation.tsx b/src/Navigation.tsx index 186432c8..d5ffb153 100644 --- a/src/Navigation.tsx +++ b/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 ( - + {children} ) @@ -334,7 +337,7 @@ const styles = StyleSheet.create({ backgroundColor: colors.black, }, bgLight: { - backgroundColor: colors.gray1, + backgroundColor: colors.white, }, }) diff --git a/src/lib/icons.tsx b/src/lib/icons.tsx index 300c13b0..4cb491e4 100644 --- a/src/lib/icons.tsx +++ b/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" /> ) diff --git a/src/lib/media/manip.ts b/src/lib/media/manip.ts index f77b861e..3b3ff8c6 100644 --- a/src/lib/media/manip.ts +++ b/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 { 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}` } diff --git a/src/lib/routes/back-handler.ts b/src/lib/routes/back-handler.ts index feb92845..c4067c53 100644 --- a/src/lib/routes/back-handler.ts +++ b/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() + }) } diff --git a/src/lib/themes.ts b/src/lib/themes.ts index 76d4fbf2..95aee084 100644 --- a/src/lib/themes.ts +++ b/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, }, diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index 27500130..78c5fd6e 100644 --- a/src/view/com/composer/Composer.tsx +++ b/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, - paddingTop: Platform.OS === 'android' ? insets.top : 15, + paddingBottom: isAndroid ? insets.bottom : 0, + paddingTop: isAndroid ? insets.top : isDesktopWeb ? 0 : 15, } return ( diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx index e1972f89..07d5168e 100644 --- a/src/view/com/modals/Modal.web.tsx +++ b/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} @@ -124,6 +125,7 @@ const styles = StyleSheet.create({ paddingVertical: 20, paddingHorizontal: 24, borderRadius: 8, + borderWidth: 1, }, containerMobile: { borderRadius: 0, diff --git a/src/view/com/util/forms/DropdownButton.tsx b/src/view/com/util/forms/DropdownButton.tsx index 2aeae9ba..fcb20900 100644 --- a/src/view/com/util/forms/DropdownButton.tsx +++ b/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 = ({ ) } else if (isSep(item)) { - return + return ( + + ) } return null })} diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx index 6cf83c39..89e2d78b 100644 --- a/src/view/screens/Settings.tsx +++ b/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 export const SettingsScreen = withAuthRequired( @@ -139,9 +140,12 @@ export const SettingsScreen = withAuthRequired( }, [store]) return ( - - - + + + diff --git a/src/view/shell/Composer.web.tsx b/src/view/shell/Composer.web.tsx index ed0450c0..0e5b8242 100644 --- a/src/view/shell/Composer.web.tsx +++ b/src/view/shell/Composer.web.tsx @@ -32,7 +32,7 @@ export const Composer = observer( return ( - + { [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 ( diff --git a/yarn.lock b/yarn.lock index 6de066d5..c5d29c2a 100644 --- a/yarn.lock +++ b/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"