README.md

RN_04 Restaurant App

Project Source

Table of Contents

• Overview
• Built With
• Features
• How to use
• Acknowledgements
• Contact
• Piece of Code

Overview

Built With

• React-native

Features

This app comprises use of Stack Navigation and RESTFUL Web APIs

• Source is pulled API from 'https://opentable.herokuapp.com/'

How To Use

npm install @react-navigation/native

For expo :
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

For bare React-native:
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

For IOS:
npx pod-install ios

npm install @react-navigation/stack

npm install axios

Acknowledgements

• Source of APIs

Contact

• GitHub osmancbk
• Linkedin

---

Piece of Code

{/*----ACTIVITYINDICATOR--- */}
{
    isLoading ?
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <ActivityIndicator size="large" color="#311b92" />
        </View>
        :
        <FlatList
            keyExtractor={(_, index) => index.toString()}
            data={cities}
            renderItem={renderCityList}
            ItemSeparatorComponent={renderSeperator}
        />
 }

    const getApi = async () => {
        const response = await axios.get('http://opentable.herokuapp.com/api/cities');
        setCities(response.data.cities)
        originalList = [...response.data.cities]
        setLoading(false);
    }

    useEffect(() => {
        getApi();
    }, [])

    const getApi = () => {
        axios.get('http://opentable.herokuapp.com/api/restaurants', { params: { city: selectedCity } })
            .then((response) => {
                setRestaurants(response.data.restaurants)
                originalList = [...response.data.restaurants]
                setLoading(false);
            })
    }

    useEffect(() => {
        getApi()
    }, [])

    function searchRestaurant(search) {
        const filteredRestaurant = originalList.filter(rest => {
            const text = search.toUpperCase();
            const restName = rest.name.toUpperCase();

            return restName.indexOf(text) > -1;
        })
        setRestaurants(filteredRestaurant);
    }

    <TouchableOpacity
        style={styles.button}
        onPress={() =>
            Linking.openURL(selectedRestauranmobile_reserve_url)
        }>
        <Text style={styles.reservText}>Go foreservation</Text>
    </TouchableOpacity>

    <Text style={styles.price}>
        {'🤑'.repeat(props.restaurant.price)}
    </Text>