Add web target

2022-06-08 15:52:12 -05:00 · 2022-06-08 15:52:12 -05:00 · 92ca49ab9a
parent efe65e70d7
commit 92ca49ab9a
9 changed files with 5377 additions and 221 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -2,12 +2,12 @@ module.exports = {
  root: true,
  extends: '@react-native-community',
  parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint'],
+  // plugins: ['@typescript-eslint'],
  overrides: [
    {
      files: ['*.ts', '*.tsx'],
      rules: {
-        '@typescript-eslint/no-shadow': ['error'],
+        '@typescript-eslint/no-shadow': 'off',
        'no-shadow': 'off',
        'no-undef': 'off',
      },
--- a/README.md
+++ b/README.md
@ -5,8 +5,7 @@ In-progress social app.
 Uses:

 - [React Native](https://reactnative.dev)
- (blocked) [React Native for Web](https://necolas.github.io/react-native-web/)
-  - Needs [0.18 preview release #2248](https://github.com/necolas/react-native-web/pull/2248) to merge
+- [React Native for Web](https://necolas.github.io/react-native-web/)
 - [React Navigation](https://reactnative.dev/docs/navigation#react-navigation)
 - (todo) [MobX](https://mobx.js.org/README.html) and [MobX State Tree](https://mobx-state-tree.js.org/)
 - (todo) [Async Storage](https://github.com/react-native-async-storage/async-storage)
@ -18,6 +17,7 @@ Uses:
  - `cd ios ; pod install` Installs the React Navigation deps ([info](https://reactnative.dev/docs/navigation#installation-and-setup)).
 - To run the iOS simulator: `yarn ios`
 - To run the Android simulator: `yarn android`
+- To run the Web app: `yarn web`
 - Tips
  - `npx react-native info` Checks what has been installed.
  - Android instructions are a *little* inaccurate but not as much as you might think. I had to manually create a virtual device, then run `yarn android` twice (once to start the emulator and the second time to connect to it).
--- a/index.native.js
+++ b/index.native.js
@ -4,6 +4,6 @@

 import {AppRegistry} from 'react-native';
 import App from './src/App';
-import {name as appName} from './app.json';
+import {name as appName} from './src/app.json';

 AppRegistry.registerComponent(appName, () => App);
--- a/package.json
+++ b/package.json
@ -5,6 +5,7 @@
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
+    "web": "react-scripts start",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
@ -13,9 +14,11 @@
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/native-stack": "^6.6.2",
    "react": "17.0.2",
+    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-safe-area-context": "^4.3.1",
-    "react-native-screens": "^3.13.1"
+    "react-native-screens": "^3.13.1",
+    "react-native-web": "^0.17.7"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
@ -27,9 +30,11 @@
    "@typescript-eslint/eslint-plugin": "^5.17.0",
    "@typescript-eslint/parser": "^5.17.0",
    "babel-jest": "^26.6.3",
+    "babel-plugin-react-native-web": "^0.17.7",
    "eslint": "^7.32.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.67.0",
+    "react-scripts": "^5.0.1",
    "react-test-renderer": "17.0.2",
    "typescript": "^4.4.4"
  },
@ -49,5 +54,17 @@
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|rollbar-react-native|@fortawesome|@react-native|@react-navigation)"
    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
  }
 }
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width">     
+    <title> WEBAPP </title>
+  </head>
+  <body>
+      <div id="root"></div>
+  </body>
+</html>
--- a/src/App.tsx
+++ b/src/App.tsx
@ -19,68 +19,39 @@ import {
  useColorScheme,
  View,
 } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
-import { createNativeStackNavigator, NativeStackScreenProps } from '@react-navigation/native-stack';
-
+import {NavigationContainer} from '@react-navigation/native';
 import {
-  Colors,
-  DebugInstructions,
-  Header,
-  LearnMoreLinks,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
+  createNativeStackNavigator,
+  NativeStackScreenProps,
+} from '@react-navigation/native-stack';

 type RootStackParamList = {
  Home: undefined;
-  Profile: { name: string };
+  Profile: {name: string};
 };
 const Stack = createNativeStackNavigator();

 const Section: React.FC<{
  title: string;
 }> = ({children, title}) => {
-  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View style={styles.sectionContainer}>
-      <Text
-        style={[
-          styles.sectionTitle,
-          {
-            color: isDarkMode ? Colors.white : Colors.black,
-          },
-        ]}>
-        {title}
-      </Text>
-      <Text
-        style={[
-          styles.sectionDescription,
-          {
-            color: isDarkMode ? Colors.light : Colors.dark,
-          },
-        ]}>
-        {children}
-      </Text>
+      <Text style={styles.sectionTitle}>{title}</Text>
+      <Text style={styles.sectionDescription}>{children}</Text>
    </View>
  );
 };

-const HomeScreen = ({ navigation }: NativeStackScreenProps<RootStackParamList, 'Home'>) => {
+const HomeScreen = ({
+  navigation,
+}: NativeStackScreenProps<RootStackParamList, 'Home'>) => {
  const isDarkMode = useColorScheme() === 'dark';

-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
  return (
-    <SafeAreaView style={backgroundStyle}>
+    <SafeAreaView>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode ? Colors.black : Colors.white,
-          }}>
+      <ScrollView contentInsetAdjustmentBehavior="automatic">
+        <View>
          <Section title="Step One">
            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
            screen and then come back to see your edits.
@ -89,35 +60,29 @@ const HomeScreen = ({ navigation }: NativeStackScreenProps<RootStackParamList, '
              onPress={() => navigation.navigate('Profile', {name: 'Jane'})}
            />
          </Section>
-          <Section title="See Your Changes">
-            <ReloadInstructions />
-          </Section>
-          <Section title="Debug">
-            <DebugInstructions />
-          </Section>
          <Section title="Learn More">
            Read the docs to discover what to do next:
          </Section>
-          <LearnMoreLinks />
        </View>
      </ScrollView>
    </SafeAreaView>
-  )
-}
+  );
+};

-const ProfileScreen = ({ navigation, route }: NativeStackScreenProps<RootStackParamList, 'Profile'>) => {
+const ProfileScreen = ({
+  route,
+}: NativeStackScreenProps<RootStackParamList, 'Profile'>) => {
  return <Text>This is {route.params.name}'s profile</Text>;
 };

 const App = () => {
-
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
-          options={{ title: 'Welcome' }}
+          options={{title: 'Welcome'}}
        />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
--- a/src/app.json
+++ b/src/app.json
--- a/src/index.js
+++ b/src/index.js
@ -0,0 +1,12 @@
+/**
+ * @format
+ */
+
+import {AppRegistry} from 'react-native';
+import App from './App';
+
+AppRegistry.registerComponent('App', () => App);
+
+AppRegistry.runApplication('App', {
+  rootTag: document.getElementById('root'),
+});
--- a/yarn.lock
+++ b/yarn.lock