Create Food App With React Native UI only

import React from 'react';
import { View,Text,StyleSheet,Pressable} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import Header from '../Componet/Header';
import Banner from '../Componet/Banner';
import BackGroundOvel from '../Componet/BackGroundOvel';
import {Colors} from '../Componet/Colors'
Icon.loadFont();
const App = () => {
  return  <View style={Styles.container}>
            <BackGroundOvel/>
            <Header/>
            <Banner/>
            <View style={{alignItems:'center'}}>
            <View style={Styles.Desc}>
              <Text style={{fontSize:20,fontWeight:'bold',margin: 5,textAlign:'center'}}>20$</Text>
              <Text style={{textAlign:'center',fontSize:16}}>
              Gulab jamun is a milk-solid-based sweet from the Indian subcontinent, 
              and a type of mithai, popular in India, Nepal, 
              Pakistan, the Maldives, and Bangladesh, as well as Myanmar.
              </Text>
              <Text style={{fontSize:18,fontWeight:'bold',margin: 5,textAlign:'center'}}>50 CAL</Text>
             </View>
             <View style={{flexDirection:'row',justifyContent:'space-around',width:'100%',margin: 10}}>
                    <Pressable style={{padding:15,backgroundColor:Colors.main,width:150}}>
                      <Text style={{color:Colors.white,fontWeight:'bold',textAlign:'center'}}>Add to Cart</Text>
                    </Pressable>
                    <Pressable style={{padding:15,borderWidth:1,borderColor:Colors.darkbluetwitter,
                      backgroundColor:'white',width:150}}>
                      <Text style={{textAlign:'center',fontWeight:'bold'}}>Order</Text>
                    </Pressable>
             </View>
            </View>
         </View>
}
const Styles=StyleSheet.create({
  container:{
    flex:1,
    position:'relative',
    backgroundColor: 'white',
  },
  Desc:{
      width:'90%'
  }
})
export default App;

const Colors = {
    main: 'rgb(27, 40, 54)',
    white:'#fff',
    black:'#222',
    tint:'#2b49c3',
    pink:'pink',
    darkblue:'#004ecb',
    Orange:'#ff5722',
    darkbluetwitter:'rgb(29, 161, 242)'
  };
  
  export {Colors};

import React from 'react';
import { View,StyleSheet,Dimensions } from 'react-native';
import {Colors} from '../Componet/Colors'
const width=Dimensions.get('window').width * 1.2;

const BackGroundOvel = () => {
  return <View style={Style.contianer}>
           
        </View>
}
const Style=StyleSheet.create({
    contianer:{
       width:width,
       borderRadius:width,
       aspectRatio:1,
       backgroundColor:Colors.main,
       position:'absolute',
       left:70,
       top:-75
    }
})
export default BackGroundOvel;

import React from 'react';
import { View,Text,StyleSheet } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import {Colors} from '../Componet/Colors'
Icon.loadFont();
const Header = () => {
  return <View style={styles.Header}>
            <Icon
              style={{marginLeft: 5}}
             name="arrow-back"
             color={Colors.darkbluetwitter}
             size={30}
               />
               <Text style={styles.title}>Food App</Text>
               <View style={styles.RightOvel}>
                    <View style={styles.Profile}>
                    <Icon
              name="account-circle"
             color={Colors.white}
             size={50}
               />
                    </View>
                   <View style={styles.RightOvelTextView}>
                       <Text style={styles.OvelText}>1</Text>
                   </View>
               </View>
         </View>
}

const styles=StyleSheet.create({
         Header:{
           flexDirection:'row',
           alignItems:'center',
           justifyContent: 'space-between',
           padding:15
         },
         Profile:{
           alignItems:'center',
           justifyContent:'center'
         },
         title:{
          fontSize:20,
          color:Colors.darkbluetwitter,
          fontWeight:'bold'
         },
        RightOvel:{
            width:50,
            height:50,
            backgroundColor:Colors.darkbluetwitter,
            borderRadius:50
        },
        RightOvelTextView:{
         position:'absolute',
         backgroundColor:Colors.darkbluetwitter,
         width:20,
         height:20,
         borderRadius:20,
         alignItems:'center',
         right:-4,
         top:-2,
         justifyContent:'center'
        },
        OvelText:{
            color:Colors.white,
            fontWeight:'bold'
        }
})

export default Header;

import React from 'react';
import { View,Text,StyleSheet,Image,Dimensions} from 'react-native';
import {Colors} from '../Componet/Colors'
const {width,height}=Dimensions.get('window');
const Banner = () => {
  return <View style={Styles.container}>
           <Text style={Styles.dellivy}>Dealivery Time-2:86pm</Text>
           <Text style={Styles.Bowl}>Gulabjamun Bowl</Text>
           <Image resizeMode="contain" style={Styles.Image} source={require('../Images/Gulabjamun.png')}/>
        </View>
}
const Styles=StyleSheet.create({
    container:{
        alignItems: 'center',
    },
    dellivy:{
        fontSize:16,
        margin:2,
        color:Colors.white
    },
    Bowl:{
        fontSize:22,
        fontWeight:'bold',
        color:Colors.white,
    },
    Image:{
       width:width/1.2
    }
})
export default Banner;