Migrate examples to static API in v7 (#1302)

Author: patrycjakalinska

versioned_docs/version-7.x/auth-flow.md

@@ -4,6 +4,9 @@ title: Custom Android back button behavior
 sidebar_label: Custom Android back button behavior
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 By default, when user presses the Android hardware back button, react-navigation will pop a screen or exit the app if there are no screens to pop. This is a sensible default behavior, but there are situations when you might want to implement custom handling.
 
 As an example, consider a screen where user is selecting items in a list, and a "selection mode" is active. On a back button press, you would first want the "selection mode" to be deactivated, and the screen should be popped only on the second back button press. The following code snippet demonstrates the situation. We make use of [`BackHandler`](https://reactnative.dev/docs/backhandler.html) which comes with react-native, along with the `useFocusEffect` hook to add our custom `hardwareBackPress` listener.
@@ -12,31 +15,248 @@ Returning `true` from `onBackPress` denotes that we have handled the event, and
 
 <samp id="custom-android-back-button"/>
 
-```js
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+```js name="Custom android back button" snack version=7
+import * as React from 'react';
+import {
+  Pressable,
+  Text,
+  View,
+  Button,
+  BackHandler,
+  StyleSheet,
+} from 'react-native';
+import { createStaticNavigation } from '@react-navigation/native';
+import { useFocusEffect } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+const listData = [{ key: 'Apple' }, { key: 'Orange' }, { key: 'Carrot' }];
+
+// codeblock-focus-start
+function ScreenWithCustomBackBehavior() {
+  // codeblock-focus-end
+  const [selected, setSelected] = React.useState(listData[0].key);
+  const [isSelectionModeEnabled, setIsSelectionModeEnabled] =
+    React.useState(false);
+
+  // codeblock-focus-start
+  // ...
+
+  useFocusEffect(
+    React.useCallback(() => {
+      const onBackPress = () => {
+        if (isSelectionModeEnabled) {
+          setIsSelectionModeEnabled(false);
+          return true;
+        } else {
+          return false;
+        }
+      };
+
+      const subscription = BackHandler.addEventListener(
+        'hardwareBackPress',
+        onBackPress
+      );
+
+      return () => subscription.remove();
+    }, [isSelectionModeEnabled])
+  );
+  // codeblock-focus-end
+
+  return (
+    <View style={styles.container}>
+      {listData.map((item) => (
+        <>
+          {isSelectionModeEnabled ? (
+            <Pressable
+              onPress={() => {
+                setSelected(item.key);
+              }}
+              style={{
+                textDecorationLine: item.key === selected ? 'underline' : '',
+              }}
+            >
+              <Text
+                style={{
+                  textDecorationLine: item.key === selected ? 'underline' : '',
+                  ...styles.text,
+                }}
+              >
+                {item.key}
+              </Text>
+            </Pressable>
+          ) : (
+            <Text style={styles.text}>
+              {item.key === selected ? 'Selected: ' : ''}
+              {item.key}
+            </Text>
+          )}
+        </>
+      ))}
+      <Button
+        title="Toggle selection mode"
+        onPress={() => setIsSelectionModeEnabled(!isSelectionModeEnabled)}
+      />
+      <Text>Selection mode: {isSelectionModeEnabled ? 'ON' : 'OFF'}</Text>
+    </View>
+  );
+  // codeblock-focus-start
+
+  // ...
+}
+// codeblock-focus-end
+
+const RootStack = createNativeStackNavigator({
+  screens: {
+    CustomScreen: ScreenWithCustomBackBehavior,
+  },
+});
+
+const Navigation = createStaticNavigation(RootStack);
+
+export default function App() {
+  return <Navigation />;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 20,
+    marginBottom: 20,
+  },
+});
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic" default>
+
+```js name="Custom android back button" snack version=7
+import * as React from 'react';
+import {
+  Pressable,
+  Text,
+  View,
+  Button,
+  BackHandler,
+  StyleSheet,
+} from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { useFocusEffect } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+const Stack = createNativeStackNavigator();
+
+const listData = [{ key: 'Apple' }, { key: 'Orange' }, { key: 'Carrot' }];
+
+// codeblock-focus-start
 function ScreenWithCustomBackBehavior() {
+  // codeblock-focus-end
+
+  const [selected, setSelected] = React.useState(listData[0].key);
+  const [isSelectionModeEnabled, setIsSelectionModeEnabled] =
+    React.useState(false);
+  // codeblock-focus-start
   // ...
 
   useFocusEffect(
     React.useCallback(() => {
       const onBackPress = () => {
-        if (isSelectionModeEnabled()) {
-          disableSelectionMode();
+        if (isSelectionModeEnabled) {
+          setIsSelectionModeEnabled(false);
           return true;
         } else {
           return false;
         }
       };
 
-      const subscription = BackHandler.addEventListener('hardwareBackPress', onBackPress);
+      const subscription = BackHandler.addEventListener(
+        'hardwareBackPress',
+        onBackPress
+      );
 
       return () => subscription.remove();
-    }, [isSelectionModeEnabled, disableSelectionMode])
+    }, [isSelectionModeEnabled])
+  );
+  // codeblock-focus-end
+
+  return (
+    <View style={styles.container}>
+      {listData.map((item) => (
+        <>
+          {isSelectionModeEnabled ? (
+            <Pressable
+              onPress={() => {
+                setSelected(item.key);
+              }}
+              style={{
+                textDecorationLine: item.key === selected ? 'underline' : '',
+              }}
+            >
+              <Text
+                style={{
+                  textDecorationLine: item.key === selected ? 'underline' : '',
+                  ...styles.text,
+                }}
+              >
+                {item.key}
+              </Text>
+            </Pressable>
+          ) : (
+            <Text style={styles.text}>
+              {item.key === selected ? 'Selected: ' : ''}
+              {item.key}
+            </Text>
+          )}
+        </>
+      ))}
+      <Button
+        title="Toggle selection mode"
+        onPress={() => setIsSelectionModeEnabled(!isSelectionModeEnabled)}
+      />
+      <Text>Selection mode: {isSelectionModeEnabled ? 'ON' : 'OFF'}</Text>
+    </View>
   );
+  // codeblock-focus-start
 
   // ...
 }
+// codeblock-focus-end
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen
+          name="CustomScreen"
+          component={ScreenWithCustomBackBehavior}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 20,
+    marginBottom: 20,
+  },
+});
 ```
 
+</TabItem>
+</Tabs>
+
 The presented approach will work well for screens that are shown in a `StackNavigator`. Custom back button handling in other situations may not be supported at the moment (eg. A known case when this does not work is when you want to handle back button press in an open drawer. PRs for such use cases are welcome!).
 
 If instead of overriding system back button, you'd like to prevent going back from the screen, see docs for [preventing going back](preventing-going-back.md).

versioned_docs/version-7.x/custom-android-back-button-handling.md

@@ -4,6 +4,9 @@ title: Deep linking
 sidebar_label: Deep linking
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 This guide will describe how to configure your app to handle deep links on various platforms. To handle incoming links, you need to handle 2 scenarios:
 
 1. If the app wasn't previously open, the deep link needs to set the initial state
@@ -35,6 +38,28 @@ npx expo install expo-linking
 
 Then, let's configure React Navigation to use the `scheme` for parsing incoming deep links:
 
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+```js
+import * as Linking from 'expo-linking';
+
+const prefix = Linking.createURL('/');
+
+/* content */
+
+function App() {
+  const linking = {
+    prefixes: [prefix],
+  };
+
+  return <Navigation linking={linking} />;
+}
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic" default>
+
 ```js
 import * as Linking from 'expo-linking';
 
@@ -53,6 +78,9 @@ function App() {
 }
 ```
 
+</TabItem>
+</Tabs>
+
 The reason that is necessary to use `Linking.createURL` is that the scheme will differ depending on whether you're in the client app or in a standalone app.
 
 The scheme specified in `app.json` only applies to standalone apps. In the Expo client app you can deep link using `exp://ADDRESS:PORT/--/` where `ADDRESS` is often `127.0.0.1` and `PORT` is often `19000` - the URL is printed when you run `expo start`. The `Linking.createURL` function abstracts it out so that you don't need to specify them manually.
@@ -267,7 +295,59 @@ React Native's `Linking` isn't the only way to handle deep linking. You might al
 
 To achieve this, you'd need to override how React Navigation subscribes to incoming links. To do so, you can provide your own [`getInitialURL`](navigation-container.md#linkinggetinitialurl) and [`subscribe`](navigation-container.md#linkingsubscribe) functions:
 
-```js
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+```js name="Third-party integrations"
+const linking = {
+  prefixes: ['myapp://', 'https://myapp.com'],
+
+  // Custom function to get the URL which was used to open the app
+  async getInitialURL() {
+    // First, you would need to get the initial URL from your third-party integration
+    // The exact usage depend on the third-party SDK you use
+    // For example, to get the initial URL for Firebase Dynamic Links:
+    const { isAvailable } = utils().playServicesAvailability;
+
+    if (isAvailable) {
+      const initialLink = await dynamicLinks().getInitialLink();
+
+      if (initialLink) {
+        return initialLink.url;
+      }
+    }
+
+    // As a fallback, you may want to do the default deep link handling
+    const url = await Linking.getInitialURL();
+
+    return url;
+  },
+
+  // Custom function to subscribe to incoming links
+  subscribe(listener) {
+    // Listen to incoming links from Firebase Dynamic Links
+    const unsubscribeFirebase = dynamicLinks().onLink(({ url }) => {
+      listener(url);
+    });
+
+    // Listen to incoming links from deep linking
+    const linkingSubscription = Linking.addEventListener('url', ({ url }) => {
+      listener(url);
+    });
+
+    return () => {
+      // Clean up the event listeners
+      unsubscribeFirebase();
+      linkingSubscription.remove();
+    };
+  },
+};
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
+```js name="Third-party integrations"
 const linking = {
   prefixes: ['myapp://', 'https://myapp.com'],
 
@@ -317,4 +397,7 @@ const linking = {
 };
 ```
 
+</TabItem>
+</Tabs>
+
 Similar to the above example, you can integrate any API that provides a way to get the initial URL and to subscribe to new incoming URLs using the `getInitialURL` and `subscribe` options.