little-lemon-app-part2's Introduction

React Native (Meta) Exercise

This is a solution to the React Native Exercise by Meta.

Overview
- Screenshot
- Links
My process
Author

Overview

Screenshot

My process

Built with

React Native - React Native using Expo Go
FlatList - For lazy rendering menu items
StyleSheet - For styles

What I learned

Create a React Native App using Expo
Use View, Text, and FlatList Components
Create a Header Component
Create a Footer Component
Create a component to display menu items and use FlatList
Update Styles of Components to match Scenario
Extract All Styles to StyleSheet API
Render Components to the App Component

Here is a code snippet:

import * as React from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';

const menuItemsToDisplay = [
  { name: 'Hummus', price: '$5.00', id: '1A' },
  { name: 'Moutabal', price: '$5.00', id: '2B' },
  ...
];

const Item = ({ name, price }) => (
  <View style={menuStyles.innerContainer}>
    <Text style={menuStyles.itemText}>{name}</Text>
    <Text style={menuStyles.itemText}>{price}</Text>
  </View>
);

const MenuItems = () => {
  const renderItem = ({ item }) => <Item name={item.name} price={item.price} />;

  return (
    <View style={menuStyles.container}>
      <FlatList
        data={menuItemsToDisplay}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}></FlatList>
    </View>
  );
};

const menuStyles = StyleSheet.create({
  container: {
    flex: 1
  },
  ...
});

Useful resources

React Native Docs (StyleSheet) - This helped me for all the neccessary React Native styles. I really liked their documentation and will use it going forward.
React Native Docs (FlatList) - This helped me for lazy loading the Menu Lists.