Food project updated to ReactNative 6

food-rn6/App.js

+import { NavigationContainer } from "@react-navigation/native";
+import { createStackNavigator } from "@react-navigation/stack";
+ 
+import SearchScreen from "./src/screens/SearchScreen";
+import ResultShow from "./src/screens/ResultShow";
+
+const Stack = createStackNavigator();
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator screenOptions={{ headerTitle: "Business Search" }}>
+        <Stack.Screen name="Search" component={SearchScreen} />
+        <Stack.Screen name="Result" component={ResultShow} />
+      </Stack.Navigator>
+    </NavigationContainer>
+    
+  );
+}
\ No newline at end of file

food-rn6/app.json

+{
+  "expo": {
+    "name": "food-rn6",
+    "slug": "food-rn6",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

food-rn6/babel.config.js

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

food-rn6/package.json

+{
+  "name": "food-rn6",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@react-navigation/native": "^6.1.8",
+    "@react-navigation/stack": "^6.3.18",
+    "axios": "^1.5.1",
+    "expo": "~49.0.13",
+    "expo-status-bar": "~1.6.0",
+    "react": "18.2.0",
+    "react-native": "0.72.5",
+    "react-native-gesture-handler": "~2.12.0",
+    "react-native-safe-area-context": "4.6.3",
+    "react-native-screens": "~3.22.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0"
+  },
+  "private": true
+}

food-rn6/src/api/yelp.js

+import axios from "axios";
+
+export default axios.create({
+    baseURL: "https://api.yelp.com/v3/businesses",
+    headers: {
+        Authorization: 'Bearer QNIRtC__MU6tDazY-8zvK_oFkTTwYAQCeNfczfIrokr_HbKOBoIDBJeQjW-UpzPpvNGQdeWBwKOLBcZ9YzKZ2HOjV6JDMzDY2M78O9nPUHuVXmjThLhl_uKPe9PVXHYx'
+    }
+});
\ No newline at end of file

food-rn6/src/components/ResultDetail.js

+import React from "react";
+import { View, Text, Image, StyleSheet } from "react-native";
+
+const ResultDetail = ({ result }) => {
+    return (
+        <View style={styles.container}>
+            <Image 
+                source={{ uri: result.image_url }} 
+                style={styles.imageStyle}
+            />
+            <Text style={styles.nameStyle}>{result.name}</Text>
+            <Text style={styles.ratingStyle}>{result.rating} Stars, {result.review_count} reviews</Text>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        marginHorizontal: 16
+    },
+    imageStyle: {
+        width: 250,
+        height: 120,
+        borderRadius: 4,
+        marginBottom: 4,
+    },
+    nameStyle: {
+        fontWeight: 'bold',
+        fontSize: 16,
+    },
+    ratingStyle: {
+        color: 'gray'
+    }
+});
+
+export default ResultDetail;
\ No newline at end of file

food-rn6/src/components/ResultList.js

+import React from "react";
+import { View, Text, StyleSheet, FlatList, TouchableOpacity } from "react-native";
+import ResultDetail from "./ResultDetail";
+import { useNavigation } from "@react-navigation/native";
+
+const ResultList = ({ title, results }) => {
+    
+    if (!results.length) {
+        return null;
+    }
+
+    const navigation = useNavigation();
+
+    return (
+        <View style={styles.container}>
+            <Text style={styles.titleStyle}>{title}</Text>
+            <FlatList 
+                 horizontal
+                 showsHorizontalScrollIndicator={false}
+                 data={results}
+                 keyExtractor={ (result) => result.id }
+                 renderItem={( {item} ) => {
+                    return (
+                        <TouchableOpacity onPress={ () => navigation.navigate('Result', { id: item.id}) } >
+                            <ResultDetail
+                                result = {item}
+                            />
+                        </TouchableOpacity>
+                    )
+                 }}
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    titleStyle: {
+        fontWeight: "bold",
+        fontSize: 20,
+        paddingHorizontal: 16,
+        marginBottom: 8
+    },
+    container: {
+        marginTop: 12,
+        marginBottom: 4
+    }
+});
+
+export default ResultList;
\ No newline at end of file

food-rn6/src/components/SearchBar.js

+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { FontAwesome } from '@expo/vector-icons';
+import { TextInput } from "react-native-gesture-handler";
+
+const SearchBar = ({ term, onTermChange, onTermSubmit }) => {
+    return (
+        <View style={styles.backgroundStyle}>
+            <FontAwesome 
+                style={styles.iconStyle}
+                name="search"
+            />
+            <TextInput
+                style = {styles.inputStyle}
+                placeholder = "Search"
+                value = {term}
+                onChangeText = { onTermChange }
+                autoCapitalize = "none"
+                autoCorrect = {false}
+                onEndEditing = { onTermSubmit }
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    backgroundStyle: {
+        backgroundColor: '#e0e0e0',
+        height: 50,
+        borderRadius: 12,
+        marginHorizontal: 16,
+        marginTop: 16,
+        flexDirection: 'row',
+        marginBottom: 8
+    },
+    iconStyle: {
+        fontSize: 30,
+        color: '#777777',
+        alignSelf: "center",
+        marginHorizontal: 16
+    },
+    inputStyle: {
+        flex: 1,
+        padding: 8,
+        marginEnd: 16,
+        fontSize: 18
+    }
+});
+
+export default SearchBar;
\ No newline at end of file

food-rn6/src/hooks/useResults.js

+import { useState, useEffect } from "react";
+import yelp from "../api/yelp";
+
+export default () => {
+    const [results, setResults] = useState([]);
+    const [errorMessage, setErrorMessage] = useState('');
+
+    const searchApi = async (searchTerm) => {
+        setErrorMessage("");
+        try {
+            const response = await yelp.get('/search', {
+                params: {
+                    limit: 50,
+                    term: searchTerm,
+                    location: 'San Jose'
+                }
+            });
+            setResults(response.data.businesses);
+        } catch (err) {
+            console.log(err)
+            setErrorMessage("Something went wrong! :(");
+        }
+    }
+
+    useEffect( () => {
+        searchApi('pasta');
+    }, [] );
+
+    return [searchApi, results, errorMessage];
+};
\ No newline at end of file

food-rn6/src/screens/ResultShow.js

+import React, { useState, useEffect } from "react";
+import { View, Text, StyleSheet, FlatList, Image } from "react-native";
+import yelp from "../api/yelp";
+
+const ResultShow = ({ route }) => {
+    const [result, setResult] = useState(null);
+    const id = route.params.id;
+
+    console.log(result);
+
+    const getResult = async id => {
+        const response = await yelp.get(`/${id}`);
+        setResult(response.data);
+    };
+
+    useEffect(() => {
+        getResult(id);
+    }, []);
+
+    if (!result) {
+        return null;
+    }
+
+    return (
+        <View>
+            <Text>{result.name}</Text>
+            <FlatList
+                data = {result.photos}
+                keyExtractor={ photo => photo }
+                renderItem={ ({ item }) => {
+                    return <Image 
+                        style={styles.imageStyle}
+                        source={{ uri: item }}
+                    />
+                }}
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    imageStyle: {
+        width: 300,
+        height: 200,
+        marginHorizontal: 16,
+        marginVertical: 8
+    }
+});
+
+export default ResultShow; 
\ No newline at end of file

food-rn6/src/screens/SearchScreen.js

+import React, { useState } from "react";
+import { View, Text, StyleSheet, ScrollView } from "react-native";
+import SearchBar from "../components/SearchBar";
+import useResults from "../hooks/useResults";
+import ResultList from "../components/ResultList";
+
+const SearchScreen = () => {
+    const [term, setTerm] = useState("");
+    const [searchApi, results, errorMessage] = useResults();
+
+    const filterResultsByPrice = (price) => {
+        return results.filter(result => {
+            return result.price === price;
+        });
+    };
+    
+    return (
+        <View style={ {flex: 1 }}>
+            <SearchBar
+                term = {term}
+                onTermChange = { setTerm }
+                onTermSubmit = { () => searchApi(term) }
+            />
+            { errorMessage.length > 0 ? <Text style={styles.errorStyle}>{errorMessage}</Text> : null}
+            <ScrollView>
+                <ResultList
+                    title = "Cost Effective"
+                    results = {filterResultsByPrice('$')}
+                />
+                <ResultList
+                    title = "Bit Pricer"
+                    results = {filterResultsByPrice('$$')}
+                />
+                <ResultList
+                    title = "Big Spender"
+                    results = {filterResultsByPrice('$$$')}
+                />
+            </ScrollView>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    errorStyle: {
+        color: 'red',
+        margin: 16,
+        fontWeight: 'bold'
+    }
+});
+
+export default SearchScreen;
\ No newline at end of file