converted project structure to react native

client/.expo-shared/assets.json

+{
+  "e997a5256149a4b76e6bfd6cbf519c5e5a0f1d278a3d8fa1253022b03c90473b": true,
+  "af683c96e0ffd2cf81287651c9433fa44debc1220ca7cb431fe482747f34a505": true,
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

client/.gitignore

@@ -21,3 +21,19 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# react native
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

client/App.tsx

+// import './App.css';
+import Header from './src/components/Header';
+import Movies from './src/components/Movies';
+
+import { MoviesStore } from './src/components/MoviesStore';
+
+import { StatusBar } from 'expo-status-bar';
+import React from 'react';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+
+import useCachedResources from './src/hooks/useCachedResources';
+import useColorScheme from './src/hooks/useColorScheme';
+import Navigation from './src/navigation';
+import { View } from './src/components/Themed';
+import {Text} from 'react-native'
+
+export default function App() {
+  const isLoadingComplete = useCachedResources();
+  const colorScheme = useColorScheme();
+
+
+  if (!isLoadingComplete) {
+    return null;
+  } else {
+    return (
+          <SafeAreaView>
+            {/* <Navigation colorScheme={colorScheme} />
+            <StatusBar /> */}
+              
+                <Text>
+                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+
+                </Text>
+              <Header moviesStore={MoviesStore}/>
+              {/* <Movies moviesStore={MoviesStore}/> */}
+          </SafeAreaView>
+    );
+  }
+}

client/app.json

+{
+  "expo": {
+    "name": "test-project",
+    "slug": "test-project",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./src/assets/images/icon.png",
+    "scheme": "myapp",
+    "userInterfaceStyle": "automatic",
+    "splash": {
+      "image": "./src/assets/images/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./src/assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./src/assets/images/favicon.png"
+    }
+  }
+}

client/babel.config.js

+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo']
+  };
+};

client/src/index.tsx → client/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
+import reportWebVitals from './src/reportWebVitals';
 
 ReactDOM.render(
   <React.StrictMode>

client/package.json

@@ -2,8 +2,35 @@
   "homepage": "http://localhost:3000",
   "name": "project-4",
   "version": "0.1.0",
-  "private": true,
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject",
+    "test": "jest --watchAll"
+  },
+  "jest": {
+    "preset": "jest-expo"
+  },
   "dependencies": {
+    "@expo/vector-icons": "^12.0.0",
+    "@react-navigation/bottom-tabs": "^6.0.5",
+    "@react-navigation/native": "^6.0.2",
+    "@react-navigation/native-stack": "^6.1.0",
+    "expo": "~43.0.0",
+    "expo-asset": "~8.4.3",
+    "expo-constants": "~12.1.2",
+    "expo-font": "~10.0.3",
+    "expo-linking": "~2.4.2",
+    "expo-splash-screen": "~0.13.3",
+    "expo-status-bar": "~1.1.0",
+    "expo-web-browser": "~10.0.3",
+    "react-native": "0.64.2",
+    "react-native-safe-area-context": "3.3.2",
+    "react-native-screens": "~3.8.0",
+    "react-native-web": "0.17.1",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
@@ -21,11 +48,14 @@
     "typescript": "^4.4.3",
     "web-vitals": "^1.1.2"
   },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+  "devDependencies": {
+    "@babel/core": "^7.12.9",
+    "@types/react": "~17.0.21",
+    "@types/react-native": "~0.64.12",
+    "jest-expo": "~43.0.0",
+    "typescript": "~4.3.5",
+    "@types/react-infinite-scroller": "^1.2.2",
+    "@types/cors": "^2.8.12"
   },
   "proxy": "http://localhost:8080",
   "eslintConfig": {
@@ -34,20 +64,5 @@
       "react-app/jest"
     ]
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@types/react-infinite-scroller": "^1.2.2",
-    "@types/cors": "^2.8.12"
-  }
+  "private": true
 }

client/src/App.tsx

-import './App.css';
-import Movies from './components/Movies'
-import Header from './components/Header'
-import { MoviesStore } from "./components/MoviesStore";
-
-function App() {
-
-  return (
-    <div className="App">
-      <Header moviesStore={MoviesStore}/>
-      <Movies moviesStore={MoviesStore}/>
-    </div>
-  );
-}
-
-export default App;

client/src/components/EditScreenInfo.tsx

+import * as WebBrowser from 'expo-web-browser';
+import React from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+
+import Colors from '../constants/Colors';
+import { MonoText } from './StyledText';
+import { Text, View } from './Themed';
+
+export default function EditScreenInfo({ path }: { path: string }) {
+  return (
+    <View>
+      <View style={styles.getStartedContainer}>
+        <Text
+          style={styles.getStartedText}
+          lightColor="rgba(0,0,0,0.8)"
+          darkColor="rgba(255,255,255,0.8)">
+          Open up the code for this screen:
+        </Text>
+
+        <View
+          style={[styles.codeHighlightContainer, styles.homeScreenFilename]}
+          darkColor="rgba(255,255,255,0.05)"
+          lightColor="rgba(0,0,0,0.05)">
+          <MonoText>{path}</MonoText>
+        </View>
+
+        <Text
+          style={styles.getStartedText}
+          lightColor="rgba(0,0,0,0.8)"
+          darkColor="rgba(255,255,255,0.8)">
+          Change any of the text, save the file, and your app will automatically update.
+        </Text>
+      </View>
+
+      <View style={styles.helpContainer}>
+        <TouchableOpacity onPress={handleHelpPress} style={styles.helpLink}>
+          <Text style={styles.helpLinkText} lightColor={Colors.light.tint}>
+            Tap here if your app doesn't automatically update after making changes
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+function handleHelpPress() {
+  WebBrowser.openBrowserAsync(
+    'https://docs.expo.io/get-started/create-a-new-app/#opening-the-app-on-your-phonetablet'
+  );
+}
+
+const styles = StyleSheet.create({
+  getStartedContainer: {
+    alignItems: 'center',
+    marginHorizontal: 50,
+  },
+  homeScreenFilename: {
+    marginVertical: 7,
+  },
+  codeHighlightContainer: {
+    borderRadius: 3,
+    paddingHorizontal: 4,
+  },
+  getStartedText: {
+    fontSize: 17,
+    lineHeight: 24,
+    textAlign: 'center',
+  },
+  helpContainer: {
+    marginTop: 15,
+    marginHorizontal: 20,
+    alignItems: 'center',
+  },
+  helpLink: {
+    paddingVertical: 15,
+  },
+  helpLinkText: {
+    textAlign: 'center',
+  },
+});

client/src/components/Header.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { MoviesStoreImplementation } from "./MoviesStore";
 import { inject, observer } from 'mobx-react';
 import * as services from './services';
+import {View, Text, TextInput, Button, CheckBox} from 'react-native';
 
 type MyState = {
     inputTitle: string,
@@ -29,15 +30,15 @@ class Header extends React.Component<MoviesProps, MyState> {
 
     render() {
         return (
-            <div className="header"> 
-                <span>Movie title:</span>
-                <input type="text" placeholder="Search for movie titles..." onChange={this.handleChange} id="textfield1"></input>
-                <span>Movie genre:</span>
-                <input type="text" placeholder="Filter on genre..." onChange={this.handleChange} id="textfield2"></input>
-                Order by year:
-                <input type="checkbox" id="checkbox1" onChange={this.handleChange}></input>
-                <button className="button button2" onClick={this.search} >Search</button>
-            </div>
+            <View> 
+                <Text>Movie title:</Text>
+                <TextInput placeholder="Search for movie titles..." onChange={this.handleChange} nativeID="textfield1"></TextInput>
+                <Text>Movie genre:</Text>
+                <TextInput placeholder="Filter on genre..." onChange={this.handleChange} nativeID="textfield2"></TextInput>
+                <Text>Order by year:</Text>
+                {/* <CheckBox nativeID="checkbox1" onChange={this.handleChange}></CheckBox> */}
+                <Button onPress={this.search} title="Search" />
+            </View>
         )
     }
 

client/src/components/StyledText.tsx

+import * as React from 'react';
+
+import { Text, TextProps } from './Themed';
+
+export function MonoText(props: TextProps) {
+  return <Text {...props} style={[props.style, { fontFamily: 'space-mono' }]} />;
+}