New mini project - development of a menu application. Let’s get to work!
We’ll use SectionList
because the menu has different sections.
You can see the prepared data in the file data.js
.
Export the data to App.js
file and use them for the sections
field.
We will define our own keyExtractor
for the list. The method must return the uid
field for each list item.
Add two methods to the App
class: renderSectionHeader
and renderItem
. Let each just return null
for now.
For the SectionList
element, specify both the renderSectionHeader
and renderItem
properties by passing the appropriate class methods.
This task is part of the Full-Stack JavaScript Course.
If you have any issues with it, you can ask for community help below the post.
Feel free to help others if you’ve already solved the task.
App.js
import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
export default class App extends React.Component {
render() {
return <SafeAreaView style={styles.container} />;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
app.json
{
"expo": {
"name": "1",
"slug": "1",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
}
},
"web": {
"favicon": "./assets/favicon.png"
}
}
}
data.js
export const sectionsData = [
{
menuSection: 'Main dishes',
data: [
{
uid: 'main1',
price: '$10.00',
name: 'Pepperoni Feast',
description: 'Pepperoni, pepperoni, and more pepperoni',
},
{
uid: 'main2',
price: '$12.00',
name: 'Chicken Supreme',
description: 'Chicken, mushrooms & onions',
},
],
},
{
menuSection: 'Deserts',
data: [
{
uid: 'deserts1',
name: 'White Chocolate & Caramel Cookie Dough',
price: '$4.00',
description: 'With vanilla ice cream & salted caramel sauce',
},
{
uid: 'deserts2',
name: 'Hot Chocolate Brownie',
price: '$5.50',
description: 'With vanilla ice cream & chocolate sauce',
},
],
},
];