Unexpected token, expected "}" error but can't be figured out-CodePudding

My App.js file code

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import {NavigationContainer} from '@react-navigation/native'
import {createNativeStackNavigator} from '@react-navigation/native-stack'
import HomeScreen from './components/HomeScreen'
import Details from './components/Details'


const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name = 'Home' component={HomeScreen}/>
        <Stack.Screen name = 'Details' component={Details}/>
      </Stack.Navigator>
      </NavigationContainer>
  );
}

HomeScreen.js Code

import React, {useState,useEffect} from 'react'
import {Text,
    View,
    StyleSheet,
    TextInput,
    TouchableOpacity,
    SafeAreaView,
    } from 'react-native'


const HomeScreen = () => {
const [recipes, setRecipes] = useState();
const [searchQuery, setSearchQuery] = useState('');
const [numberOfRecipes, setNumberOfRecipes] = useState('');
const [loading, setLoading] = useState(false);
const apiId = '30f0071b'
const apiKey = '23e828ea96641c06655aa2f585757d1d'
const apiUrl = `https://api.edamam.com/searh?q=${searchQuery}&app_id=${apiId}&app_key=${apiKey}&from=0&to=${numberOfRecipes}&calories=591-722&health=alcohol-free`;

async function apiCall() {
    setLoading(true);
    let resp = await fetch(apiUrl);
    let respJson = await resp.json();
    setRecipes(respJson.hits);
    setLoading(false);
    Keyboard.dismiss();
    setSearchQuery('');
}


useEffect(() =>{
    setLoading(true);
    apiCall()
});


  return (
   <View style={styles.container}>
    
<Text style={{fontSize:18, fontWeight:'bold', color:'#008080'}}>
    What Recipe Would You Like to Search?
    </Text>
    
    <View sytle = {{display: 'flex', flexDirection: 'row'}}>
    <TextInput placeholder = 'Search Recipe...'
    style={styles.inputField}
    onChangeText={ text => setSearchQuery(text)}
/>
    

<TextInput

style={[styles.inputField, {width: '20%', paddingLeft:20, paddingRight:20, fontSize:18, marginLeft:10,color:'#008080', fontWeight:'bold'}]}

value={numberOfRecipes}
keyboardType='number-pad'
onChangeText={ text => setNumberOfRecipes(text)}
/>

   


    <TouchableOpacity style={styles.button} 
    onPress={apiCall} 
    title='submit'>
        
    <Text style={styles.buttonText}>Search</Text>
    </TouchableOpacity>
    <SafeAreaView style={{flex:1}}>
{loading ? <ActivityIndicator size='large' color='#008080'/> :
<FlatList 
style={styles.recipes}
data={recipes}
renderItem={({item}) => (
<View style={styles.recipe}>
    <Image style={styles.image}
    source={{url: `${item.recipe.image}`}}
    />
    <View style={{padding:20,flexDirection:'row'}}>
        <Text style={styles.label}>{item.recipe.label}</Text>
        <TouchableOpacity onPress={() =>{}}>

            
        
            <Text style={{marginLeft:50, fontSize:20, color: '#008080'}}>
            Details
            </Text>
            </TouchableOpacity>
   </View> 
   </View>    
)}

keyExtractor={(item, index ) => index.toString()} />
}
    </SafeAreaView>


   </View>
)}

   const styles = StyleSheet.create({
container: {
    flex:1,
    justifyContent:'center',
    alignItems:'center',
    padding:10,
   
},
inputField:{
    
    
    backgroundColor:'white',
    borderRadius:20,
    marginTop:10,
    paddingLeft:15,
},
buttons:{
    flexDirection:'row'   
},
button:{
    backgroundColor:'#008080',
    width:'90%',
    alignItems: 'center',
    margin:15,
    height:45,
    borderRadius:15,
    justifyContent: 'center',
    marginTop:25,
    paddingLeft:20,
    paddingRight:20
    
},
buttonText:{
    color:'white'
}

})

  


 

export default HomeScreen

I am facing below Error but after reviewing many times i am unable to find what exactly is issue. styles code is perfectly fine. I would appreciate any help provided.

SyntaxError: D:\react\native\recipe-search-app\components\HomeScreen.js: Unexpected token, expected "}" (102:9)

100 | 101 | const styles = StyleSheet.create({

102 | container: { | ^ 103 | flex:1, 104 | justifyContent:'center', 105 | alignItems:'center',

CodePudding user response：

Please find below corrected code:

    import React, { useState, useEffect } from 'react'
    import {
        Text,
        View,
        StyleSheet,
        TextInput,
        TouchableOpacity,
        SafeAreaView,
        FlatList,
        ActivityIndicator
    } from 'react-native'
    
    
    const HomeScreen = () => {
        const [recipes, setRecipes] = useState();
        const [searchQuery, setSearchQuery] = useState('');
        const [numberOfRecipes, setNumberOfRecipes] = useState('');
        const [loading, setLoading] = useState(false);
        const apiId = '30f0071b'
        const apiKey = '23e828ea96641c06655aa2f585757d1d'
        const apiUrl = `https://api.edamam.com/searh?q=${searchQuery}&app_id=${apiId}&app_key=${apiKey}&from=0&to=${numberOfRecipes}&calories=591-722&health=alcohol-free`;
    
        async function apiCall() {
            setLoading(true);
            let resp = await fetch(apiUrl);
            let respJson = await resp.json();
            setRecipes(respJson.hits);
            setLoading(false);
            Keyboard.dismiss();
            setSearchQuery('');
        }
    
    
        useEffect(() => {
            setLoading(true);
            apiCall()
        });
    
    
        return (
            <View style={styles.container}>
    
                <Text style={{ fontSize: 18, fontWeight: 'bold', color: '#008080' }}>
                    What Recipe Would You Like to Search?
                </Text>
    
                <View sytle={{ display: 'flex', flexDirection: 'row' }}>
                    <TextInput placeholder='Search Recipe...'
                        style={styles.inputField}
                        onChangeText={text => setSearchQuery(text)}
                    />
    
    
                    <TextInput
                        style={[styles.inputField, { width: '20%', paddingLeft: 20, paddingRight: 20, fontSize: 18, marginLeft: 10, color: '#008080', fontWeight: 'bold' }]}
    
                        value={numberOfRecipes}
                        keyboardType='number-pad'
                        onChangeText={text => setNumberOfRecipes(text)}
                    />
    
                    <TouchableOpacity style={styles.button}
                        onPress={apiCall}
                        title='submit'>
    
                        <Text style={styles.buttonText}>Search</Text>
                    </TouchableOpacity>
                    <SafeAreaView style={{ flex: 1 }}>
                        {loading ? <ActivityIndicator size='large' color='#008080' /> :
                            <FlatList
                                style={styles.recipes}
                                data={recipes}
                                renderItem={({ item }) => (
                                    <View style={styles.recipe}>
                                        <Image style={styles.image}
                                            source={{ url: `${item.recipe.image}` }}
                                        />
                                        <View style={{ padding: 20, flexDirection: 'row' }}>
                                            <Text style={styles.label}>{item.recipe.label}</Text>
                                            <TouchableOpacity onPress={() => { }}>
    
    
    
                                                <Text style={{ marginLeft: 50, fontSize: 20, color: '#008080' }}>
                                                    Details
                                                </Text>
                                            </TouchableOpacity>
                                        </View>
                                    </View>
                                )}
    
                                keyExtractor={(item, index) => index.toString()} />
                        }
                    </SafeAreaView>
    
    
                </View>
            </View>
        )
    }
    
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            padding: 10,
    
        },
        inputField: {
            backgroundColor: 'white',
            borderRadius: 20,
            marginTop: 10,
            paddingLeft: 15,
        },
        buttons: {
            flexDirection: 'row'
        },
        button: {
            backgroundColor: '#008080',
            width: '90%',
            alignItems: 'center',
            margin: 15,
            height: 45,
            borderRadius: 15,
            justifyContent: 'center',
            marginTop: 25,
            paddingLeft: 20,
            paddingRight: 20
    
        },
        buttonText: {
            color: 'white'
        }
    })
    export default HomeScreen

CodePudding user response：

You forgot to add the closing </View> tag

<View sytle = {{display: 'flex', flexDirection: 'row'}}>
  <TextInput 
    placeholder = 'Search Recipe...'
    style={styles.inputField}
    onChangeText={ text => setSearchQuery(text)}
  />
</View> {/* <-- add closing tag */}