React Native App

This is a React Native App using SectionList Component and StyleSheet API.

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
• SectionList - For lazy rendering menu items
• StyleSheet - For styles

What I learned

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

Here is a code snippet:

const menuItemsToDisplay = [
  {
    title: 'Appetizers',
    data: [
      { name: 'Hummus', price: '$5.00' },
      { name: 'Moutabal', price: '$5.00' },
      { name: 'Falafel', price: '$7.50' },
      { name: 'Marinated Olives', price: '$5.00' },
      { name: 'Kofta', price: '$5.00' },
      { name: 'Eggplant Salad', price: '$8.50' },
    ],
  },
  ...
];

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} />;

  const renderSectionHeader = ({ section: { title } }) => (
    <View style={menuStyles.headerStyle}>
      <Text style={menuStyles.sectionHeader}>{title}</Text>
    </View>
  );

  return (
    <View style={menuStyles.container}>
      <SectionList
        sections={menuItemsToDisplay}
        keyExtractor={(item, index) => item + index}
        renderItem={renderItem}
        renderSectionHeader={renderSectionHeader}
      />
    </View>
  );
};

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

export default MenuItems;

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 (SectionList) - This helped me for lazy rendering the MenuItem Components with Sections.

Author

• Website - Marvin Morales Pacis
• LinkedIn - @marventures
• Twitter - @marventures11