React Native (Meta) Exercise

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

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

Screenshot

Links

• Solution URL: Code

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.

Author

• Website - Marvin Morales Pacis
• LinkedIn - @marvedventures
• Twitter - @marvedventures