Merge pull request #334 from wyne/export

Share Screen

package.json

@@ -59,13 +59,16 @@
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",
     "react-native-size-matters": "^0.4.0",
+    "react-native-view-shot": "3.7.0",
     "react-native-web": "~0.19.6",
     "react-navigation": "^4.4.4",
     "react-navigation-stack": "^2.10.4",
     "react-redux": "^8.0.2",
     "redux-persist": "^6.0.0",
     "semver": "^7.5.4",
-    "typescript": "^5.1.6"
+    "typescript": "^5.1.6",
+    "expo-sharing": "~11.5.0",
+    "expo-blur": "~12.4.1"
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",

src/Navigation.tsx

@@ -8,12 +8,14 @@ import GameScreen from "../src/screens/GameScreen";
 import SettingsScreen from "../src/screens/SettingsScreen";
 import AppInfoScreen from "../src/screens/AppInfoScreen";
 import OnboardingScreen from '../src/screens/OnboardingScreen';
+import ShareScreen from './screens/ShareScreen';
 import HomeHeader from '../src/components/Headers/HomeHeader';
 import GameHeader from '../src/components/Headers/GameHeader';
 import SettingsHeader from '../src/components/Headers/SettingsHeader';
 import AppInfoHeader from '../src/components/Headers/AppInfoHeader';
 import { useAppSelector } from '../redux/hooks';
 import { SemVer, parse } from 'semver';
+import ShareHeader from './components/Headers/ShareHeader';
 
 export type OnboardingScreenParamList = {
     onboarding: boolean;
@@ -24,6 +26,7 @@ export type RootStackParamList = {
     Game: undefined;
     Settings: undefined;
     AppInfo: undefined;
+    Share: undefined;
     Onboarding: OnboardingScreenParamList;
     Tutorial: OnboardingScreenParamList;
 };
@@ -102,6 +105,15 @@ export const Navigation = () => {
                         },
                     }}
                 />
+                <Stack.Screen name="Share" component={ShareScreen}
+                    options={{
+                        orientation: 'all',
+                        title: "Share",
+                        header: ({ navigation }) => {
+                            return <ShareHeader navigation={navigation} />;
+                        },
+                    }}
+                />
                 <Stack.Screen name="Tutorial" component={OnboardingScreen}
                     initialParams={{ onboarding: false }}
                     options={{

src/components/Buttons/CheckButton.test.tsx

@@ -6,11 +6,13 @@ import { useNavigationMock } from '../../../test/test-helpers';
 describe('CheckButton', () => {
     const navigation = useNavigationMock();
 
-    it('should navigate to Game screen when pressed', () => {
+    it('should navigate back a screen when pressed', async () => {
         const { getByRole } = render(<CheckButton navigation={navigation} />);
         const button = getByRole('button');
         fireEvent.press(button);
-        expect(navigation.navigate).toHaveBeenCalledWith('Game');
+        await waitFor(() => {
+            expect(navigation.goBack).toHaveBeenCalled();
+        });
     });
 
     it('should log an analytics event when pressed', async () => {

src/components/Buttons/CheckButton.tsx

@@ -14,8 +14,8 @@ interface Props {
 const CheckButton: React.FunctionComponent<Props> = ({ navigation }) => {
     return (
         <HeaderButton accessibilityLabel='Save Game' onPress={async () => {
-            navigation.navigate('Game');
             await analytics().logEvent('save_game');
+            navigation.goBack();
         }}>
             <Icon name="check"
                 type="font-awesome-5"