Scribd Logo
Upload

Welcome to Scribd!

  • Ahmed 70076260 t4

    Uploaded by

    Samman Nadeem
    16 views17 pages
    This document contains code for a React Native mobile application. It defines components for a top bar and categories screen. The top bar component displays a welcome text and menu options. The categories screen allows selecting items from a horizontal scrollable list of category tiles, each containing an image and label. It also includes a button to add new categories.

    Original Description:

    Mobile application

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document contains code for a React Native mobile application. It defines components for a top bar and categories screen. The top bar component displays a welcome text and menu options. The categories screen allows selecting items from a horizontal scrollable list of category tiles, each containing an image and label. It also includes a button to add new categories.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    16 views17 pages

    Ahmed 70076260 t4

    Uploaded by

    Samman Nadeem
    This document contains code for a React Native mobile application. It defines components for a top bar and categories screen. The top bar component displays a welcome text and menu options. The categories screen allows selecting items from a horizontal scrollable list of category tiles, each containing an image and label. It also includes a button to add new categories.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 17

    import { StyleSheet, Text, View ,TouchableOpacity,Image,SafeAreaView}

    from

    'react-native' import React from 'react' import {


    useNavigation } from '@react-navigation/native'
    // import { SafeAreaView } from 'react-native-safe-area-context';
    const TopBar = () => { const
    navigation=useNavigation(); return
    (

    <SafeAreaView>
    <View>

    <Text style={{
    alignItems:'center',
    justifyContent:'center',
    margin:5,
    paddingLeft:150,
    color:'purple',
    }}>
    WelCome
    </Text>
    <TouchableOpacity
    style={{
    backgroundColor:'yellow',
    alignItems:'center',
    justifyContent:'center',
    height:45, margin:10,

    }}
    >
    <Text>
    here are the menu bar
    </Text>

    </TouchableOpacity>
    <View style={{
    backgroundColor:'fff',
    margin:10, padding:10,
    flexDirection:'row',
    justifyContent:'space-evenly',
    }}>

    <TouchableOpacity style={{
    alignItems:'center',
    padding:10, borderRadius:10,
    }}

    >
    <Image source={{
    uri:'https://www.pngkit.com/png/detail/320-3206554_veggieburger-clipart-
    school-food-cheese-burger-icon.png'
    }}
    style={{
    width:40,
    height:50,
    }}
    />
    <Text style={{
    fontSize:15, margin:5,
    }}>
    Burger
    </Text>
    </TouchableOpacity>
    <TouchableOpacity style={{
    alignItems:'center',
    padding:10, borderRadius:10,
    }}

    >
    <Image source={{
    uri:'https://encrypted-
    tbn0.gstatic.com/images?q=tbn:ANd9GcQId98_qcOAxVIpbfJwljAU2iGyStNk6gXQ-
    Q&usqp=CAU'
    }} style={{
    width:40,
    height:50,
    }}
    />
    margin:5, }}> sandwitch
    </Text>
    </TouchableOpacity> <TouchableOpacity style={{ alignItems:'center',
    padding:10, borderRadius:10,
    }}

    >
    <Image source={{
    uri:'https://encryptedtbn0.gstatic.com/images?q=tbn:ANd9GcScOrgVULaaUc0vEXbw8ofwuz9fyfu7llI
    }} style={{ width:40,
    height:50,
    }}
    />

    <Text style={{ fontSize:15, margin:5, }}>


    Shawrma
    </Text>
    </TouchableOpacity> <TouchableOpacity style={{ alignItems:'center',
    padding:10, borderRadius:10,
    }}

    >
    <Image source={{ uri:'https://icons.veryicon.com/png/o/
    <Text style={{

    fontSize:15,

    series/sandwich-22.png'

    }} style={{

    width:45, height:55,

    }}
    />
    <Text>
    sandwitch
    </Text>
    </TouchableOpacity>

    </View>
    </View>
    </SafeAreaView>

    )
    } export default
    TopBar
    const styles =
    StyleSheet.create({})
    import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    ScrollView,
    SafeAreaView, } from "react-native"; import React from
    "react"; import { useNavigation } from "@react-
    navigation/native";

    const Categories = () => { const


    navigation=useNavigation(); return
    (
    <SafeAreaView>
    <TouchableOpacity style={{
    textAlign: "center",
    justifyContent: "center",
    height: 40, margin: 5,
    backgroundColor: "gray",
    fontWeight: "800",
    paddingLeft: 100,

    }}
    onPress={()=>navigation.navigate("AddNewCategoriesScreen")}
    >
    <Text>Select Your Items Here </Text>
    </TouchableOpacity>

    <ScrollView horizontal showsHorizontalScrollIndicator={false}>


    <View style={{
    marginHorizontal: 10,
    backgroundColor: "#fff",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 10,
    }}
    >
    <TouchableOpacity
    style={{ alignItems:
    "center", padding:
    10, borderRadius:
    10,
    marginHorizontal: 10,
    }}
    > <Image source={{ uri:
    "https://toppng.com//public/uploads/preview/transparentpng-pizza-pepperoni-
    pizza-1156311772084svgw9hld.png",
    }}
    style={{
    width: 60,
    height: 60,
    }}
    />
    <Text>Pizza</Text>
    </TouchableOpacity>
    </View> <View
    style={{
    marginHorizontal: 10,

    backgroundColor: "#fff",
    justifyContent: "center",
    alignItems: "center", borderRadius:
    10,
    }}
    >
    <TouchableOpacity
    style={{
    alignItems: "center",
    padding: 10,
    borderRadius: 10,
    marginHorizontal: 10,
    }}
    > <Image source={{ uri:
    "https://toppng.com//public/uploads/preview/transparentpng-pizza-pepperoni-
    pizza-1156311772084svgw9hld.png",
    }}
    style={{
    width: 60,
    height: 60,
    }}
    />
    <Text>Pizza</Text>
    </TouchableOpacity>
    </View> <View
    style={{
    marginHorizontal: 10,
    backgroundColor: "#fff",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 10,
    }}
    >
    <TouchableOpacity
    style={{ alignItems:
    "center", padding:
    10, borderRadius:
    10,
    marginHorizontal: 10,
    }}
    > <Image source={{ uri:
    "https://toppng.com//public/uploads/preview/transparentpng-pizza-pepperoni-
    pizza-1156311772084svgw9hld.png",

    }}
    style={{
    width: 60,
    height: 60, }}
    />
    <Text>Pizza</Text>
    </TouchableOpacity>
    </View> <View
    style={{
    marginHorizontal: 10,
    backgroundColor: "#fff",
    justifyContent: "center",
    alignItems: "center", borderRadius:
    10,
    }}
    >
    <TouchableOpacity
    style={{ alignItems:
    "center", padding:
    10, borderRadius:
    10,
    marginHorizontal: 10,
    }}
    > <Image source={{ uri:
    "https://toppng.com//public/uploads/preview/transparentpng-pizza-pepperoni-
    pizza-1156311772084svgw9hld.png",
    }}
    style={{
    width: 60,
    height: 60,
    }}
    />
    <Text>Pizza</Text>
    </TouchableOpacity>
    </View> <View
    style={{
    marginHorizontal: 10,
    backgroundColor: "#fff",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 10,
    }}
    >

    <TouchableOpacity
    style={{ alignItems:
    "center", padding: 10,
    borderRadius: 10,
    marginHorizontal: 10,
    }}
    >
    <Image source={{ uri:
    "https://toppng.com//public/uploads/preview/transparent-
    png-pizza-pepperoni-pizza-1156311772084svgw9hld.png",
    }}
    style={{
    width: 60,
    height: 60,
    }}
    />
    <Text>Pizza</Text>
    </TouchableOpacity>
    </View>
    </ScrollView>
    </SafeAreaView>
    );
    }; export default
    Categories;
    const styles =
    StyleSheet.create({});

    You might also like