<file_sep>import React from 'react';
import { StyleSheet, Text, View, Image, TouchableNativeFeedback } from 'react-native';

function BottomMenu(props) {
    const heightMenu = 100

    return (
        <View style={styles.wrapperMenu}>
            {/* <View style={{
                position: 'absolute',
                top: 5,
                width: '100%',
                height: 30,
                alignItems: 'center'
            }}>
                <TouchableNativeFeedback>
                    <View style={{
                        width: '30%',
                        height: 30,
                        alignItems: 'center'
                    }}>
                        <Image source={require('../assets/icon/stripes.png')} style={{
                            width: '50%',
                            height: 5
                        }} />
                    </View>
                </TouchableNativeFeedback>
            </View> */}
            <TouchableNativeFeedback>
                <View style={styles.wrapperButton}>
                    <View style={styles.buttonMenuImg}>
                        <Image source={require('../assets/icon/ride.png')} style={{
                            width: 35,
                            height: 35
                        }} />
                    </View>
                    <Text style={{
                        fontSize: 12,
                        color: "#ffffff"
                    }}>Let's Ride</Text>
                </View>
            </TouchableNativeFeedback>
            <TouchableNativeFeedback>
                <View style={styles.wrapperButton}>
                    <View style={styles.buttonMenuImg}>
                    <Image source={require('../assets/icon/food.png')} style={{
                            width: 35,
                            height: 35
                        }} />
                    </View>
                    <Text style={{
                        fontSize: 12,
                        color: "#ffffff"
                    }}>Let's Eat</Text>
                </View>
            </TouchableNativeFeedback>
            <TouchableNativeFeedback>
                <View style={styles.wrapperButton}>
                    <View style={styles.buttonMenuImg}>
                    <Image source={require('../assets/icon/shop.png')} style={{
                            width: 35,
                            height: 35
                        }} />
                    </View>
                    <Text style={{
                        fontSize: 12,
                        color: "#ffffff"
                    }}>Let's Shop</Text>
                </View>
            </TouchableNativeFeedback>
            <TouchableNativeFeedback>
                <View style={styles.wrapperButton}>
                    <View style={styles.buttonMenuImg}>
                    <Image source={require('../assets/icon/play.png')} style={{
                            width: 35,
                            height: 35
                        }} />
                    </View>
                    <Text style={{
                        fontSize: 12,
                        color: "#ffffff"
                    }}>Let's play</Text>
                </View>
            </TouchableNativeFeedback>
        </View>
    );
}

const styles = StyleSheet.create({
    wrapperMenu: {
      flex: 1,
      flexDirection: 'row',
      position:'absolute',
      bottom: 0,
      width: '100%',
      height: 100,
      backgroundColor: '#70A143',
      justifyContent: 'space-evenly',
      paddingLeft: "10%",
      paddingRight: "10%",
      paddingTop: 20,
      paddingBottom: 10,
      zIndex: 101
    },
    wrapperButton:{
        height: "100%",
        alignItems: 'center',
    },
    buttonMenuImg:{
        width: 50,
        height: 50,
        backgroundColor: "#ffffff",
        borderRadius: 25,
        alignItems: 'center',
        justifyContent: 'center'
    }
  });

export default BottomMenu;<file_sep>import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Platform, ScrollView } from 'react-native';
import BottomMenu from './app/menu/BottomMenu'
import HeaderPage from './app/header/HeaderPage'
import ContentSlider from './app/slider/ContentSlider'
import Category from './app/category/Category'
import AdditionalReview from "./app/content/AdditionalReview";
import MainContent from './app/content/MainContent'

export default function App() {
  return (
    <View style={styles.wrapper}>
      <View style={styles.container}>
        <HeaderPage />
          <ScrollView style={styles.content}>
            <ContentSlider />
            <Category />
            <AdditionalReview />
            <MainContent />
          </ScrollView>
        <BottomMenu />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    alignItems: 'center'
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    width: Platform.OS === "web" ? 700 : "100%"
  },
  content: {
    flex: 1,
    backgroundColor: '#fff',
    top: 170,
    zIndex: 100,
    width: Platform.OS === "web" ? 700 : "100%"
  }
});
<file_sep>import React, {useState} from 'react';
import { StyleSheet, Text, View, Image, StatusBar, Dimensions, TextComponent, TouchableOpacity, TouchableNativeFeedback, } from 'react-native';


function AdditionalReview(props) {
    const [defaultRating, setDefaultRating] = useState(0)
    const [maxRating, setmaxRating] = useState([1,2,3,4,5])
    const starImgFilled = 'https://rizkymalm.com/assets/images/test/star_filled.png'
    const starImgCorner = 'https://rizkymalm.com/assets/images/test/star_corner.png'
    const CustomRatingBar = () => {
        return(
            <View style={styles.CustomRatingBarStyle}>
                {
                    maxRating.map((item, key) => {
                        return(
                            <TouchableOpacity
                                activeOpacity = {0.7}
                                key={item}
                                onPress={() => setDefaultRating(item)}
                            >
                                <Image
                                    style={styles.starImgStyle}
                                    source={
                                        item <= defaultRating
                                        ? {uri: starImgFilled}
                                        : {uri: starImgCorner}
                                    }
                                />
                            </TouchableOpacity>
                        )
                    })
                }
            </View>
        )
    }
    return (
        <View style={styles.wrapperAddtionalReview}>
            <TouchableNativeFeedback>
            <View style={styles.contentAdditionalReview}>
                <Image source={require('../assets/icon/rating.png')} style={{
                    width: 100,
                    height: 100
                }} />
                <View style={{
                    flex: 1,
                    paddingLeft: 10,
                    paddingRight: 10
                }}>
                    <Text style={{
                        fontSize: 18,
                        fontWeight: 'bold'
                    }}>How was your food</Text>
                    <Text style={{
                        fontSize: 12
                    }}><NAME> Sederhana</Text>
                    <View style={{
                        width: "100%",
                        paddingTop: 10,
                        paddingBottom: 10,
                    }}>
                        <CustomRatingBar />
                    </View>
                </View>
            </View>
            </TouchableNativeFeedback>
        </View>
    );
}

const styles = StyleSheet.create({
    wrapperAddtionalReview: {
        width: "100%",
        paddingLeft: "5%",
        paddingRight: "5%"
    },
    contentAdditionalReview: {
        flexDirection: 'row',
        width: "100%",
        shadowColor: "#000",
        padding: 15,
        shadowOffset: {
            width: 0,
            height: 4,
        },
        shadowOpacity: 0.39,
        shadowRadius: 8.30,
        elevation: 13,
        borderRadius: 10,
        backgroundColor: "white"
    },
    CustomRatingBarStyle: {
        justifyContent: 'center',
        flexDirection: 'row'
    },
    starImgStyle: {
        width: 30,
        height: 30,
        resizeMode: 'cover'
    }
})

export default AdditionalReview;<file_sep>import React from 'react';
import { StyleSheet, Text, View, Image, StatusBar, ScrollView, Dimensions, TouchableNativeFeedback } from 'react-native';


function Category(props) {
    return (
        <View style={styles.wrapperCategory}>
            <TouchableNativeFeedback>
                <View style={styles.contentCategory}>
                    <Image source={require('../assets/icon/bestseller.png')} style={{
                                width: "80%",
                            }} />
                    <Text style={{fontSize: 14}}>Best Seller</Text>
                </View>
            </TouchableNativeFeedback>
            <TouchableNativeFeedback>
                <View style={styles.contentCategory}>
                    <Image source={require('../assets/icon/nearme.png')} style={{
                                width: "80%",
                            }} />
                    <Text style={{fontSize: 14}}>Near Me</Text>
                </View>
            </TouchableNativeFeedback>
            <TouchableNativeFeedback>
                <View style={styles.contentCategory}>
                    <Image source={require('../assets/icon/sale.png')} style={{
                                width: "80%",
                            }} />
                    <Text style={{fontSize: 14}}>Big Deals</Text>
                </View>
            </TouchableNativeFeedback>
            
        </View>
    );
}


const styles = StyleSheet.create({
    wrapperCategory: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        width: '100%',
        paddingTop: 15,
        paddingBottom: 10,
        paddingLeft: 20,
        paddingRight: 20
    },
    contentCategory:{
        flex: 1,
        width: "30%",
        margin: "3%",
        borderColor: "#CCCCCC",
        borderWidth: StyleSheet.hairlineWidth,
        borderRadius: 10,
        alignItems: 'center',
        justifyContent: 'center',
        paddingBottom: 10
    }
});

export default Category;