add example

packages/rn-tester/js/examples/Fetch/FetchExample.js

@@ -0,0 +1,141 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+import * as React from 'react';
+import type {RNTesterModule} from '../../types/RNTesterTypes';
+import {
+  StyleSheet,
+  Text,
+  Pressable,
+  View,
+  ActivityIndicator,
+} from 'react-native';
+import axios from 'axios';
+
+const REMOTE_TIMEOUT = 6000;
+const LOCAL_TIMEOUT = 3000;
+const URL = `https://httpstat.us/200?sleep=${REMOTE_TIMEOUT}`;
+
+type NetworkProvider = 'axios' | 'fetch';
+
+const getNetworkProvider = (provider: NetworkProvider) => {
+  switch (provider) {
+    case 'fetch':
+      return fetch(URL);
+    case 'axios':
+      return axios.get(URL, {
+        timeout: LOCAL_TIMEOUT,
+      });
+  }
+  throw new Error(`null provider for ${provider}`);
+};
+
+type Props = {
+  provider: NetworkProvider,
+};
+
+const NetworkCallWithTimeout = ({provider}: Props) => {
+  const [isLoading, setLoading] = React.useState(false);
+  const [seconds, setSeconds] = React.useState(0);
+  const onPress = React.useCallback(() => {
+    setLoading(true);
+    const timerId = setInterval(() => {
+      setSeconds(prev => prev + 1);
+    }, 1000);
+    getNetworkProvider(provider)
+      .then(response => {
+        console.log('Responded with data');
+        console.log(JSON.stringify(response, null, 2));
+      })
+      .catch(error => {
+        if (error.code === 'ECONNABORTED') {
+          console.log('Request timed out');
+        }
+        console.error(error);
+      })
+      .finally(() => {
+        setLoading(false);
+        clearInterval(timerId);
+        setSeconds(0);
+      });
+  }, [provider]);
+
+  return (
+    <View>
+      <Pressable
+        disabled={isLoading}
+        testID="alert-with-default-button"
+        style={styles.wrapper}
+        onPress={onPress}>
+        <View style={styles.button}>
+          <Text>{`${isLoading ? 'loading' : 'Tap to make an API call'}`}</Text>
+        </View>
+      </Pressable>
+      {isLoading ? <ActivityIndicator /> : null}
+      {seconds ? (
+        <View style={styles.button}>
+          <Text>{`${
+            seconds * 1000 > LOCAL_TIMEOUT
+              ? `❌ TIMEOUT DOES NOT WORK ${seconds}`
+              : seconds
+          }`}</Text>
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    borderRadius: 5,
+    marginBottom: 5,
+  },
+  button: {
+    backgroundColor: '#eeeeee',
+    padding: 10,
+  },
+  logContainer: {
+    paddingVertical: 8,
+    paddingHorizontal: 5,
+  },
+  bold: {
+    fontWeight: 'bold',
+  },
+  promptValue: {
+    marginBottom: 10,
+  },
+});
+
+export const examples = [
+  {
+    title: 'Fetch with timeout',
+    description: '',
+    render(): React.Node {
+      return <NetworkCallWithTimeout provider="fetch" />;
+    },
+  },
+
+  {
+    title: 'Axios with timeout',
+    description: '',
+    render(): React.Node {
+      return <NetworkCallWithTimeout provider="axios" />;
+    },
+  },
+];
+
+export default ({
+  framework: 'React',
+  title: 'Fetch',
+  category: 'UI',
+  documentationURL: 'https://reactnative.dev/docs/',
+  description: '',
+  examples,
+}: RNTesterModule);

packages/rn-tester/js/utils/RNTesterList.android.js

@@ -153,6 +153,11 @@ const APIs: Array<RNTesterModuleInfo> = ([
     category: 'UI',
     module: require('../examples/Alert/AlertExample').default,
   },
+  {
+    key: 'FetchExample',
+    category: 'UI',
+    module: require('../examples/Fetch/FetchExample').default,
+  },
   {
     key: 'AnimatedIndex',
     category: 'UI',

packages/rn-tester/js/utils/RNTesterList.ios.js

@@ -163,6 +163,11 @@ const APIs: Array<RNTesterModuleInfo> = ([
     module: require('../examples/Alert/AlertExample').default,
     category: 'UI',
   },
+  {
+    key: 'FetchExample',
+    category: 'UI',
+    module: require('../examples/Fetch/FetchExample').default,
+  },
   {
     key: 'AnimatedIndex',
     module: require('../examples/Animated/AnimatedIndex').default,

packages/rn-tester/package.json

@@ -23,6 +23,7 @@
     "clean-ios": "rm -rf build/generated/ios Pods Podfile.lock"
   },
   "dependencies": {
+    "axios": "^1.4.0",
     "flow-enums-runtime": "^0.0.6",
     "invariant": "^2.2.4",
     "nullthrows": "^1.1.1"

yarn.lock

@@ -4053,7 +4053,7 @@ axe-core@^4.4.2:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.4.2.tgz#dcf7fb6dea866166c3eab33d68208afe4d5f670c"
   integrity sha512-LVAaGp/wkkgYJcjmHsoKx4juT1aQvJyPcW09MLCjVTh3V2cc6PnyempiLMNH5iMdfIX/zdbjUx2KDjMLCTdPeA==
 
-axios@1.4.0, axios@^1.x:
+axios@1.4.0, axios@^1.4.0, axios@^1.x:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/axios/-/axios-1.4.0.tgz#38a7bf1224cd308de271146038b551d725f0be1f"
   integrity sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==