Creating a model of a self-service mall powered by nfc tags with React Native. (Part 2).

Cart UI (Part 1).

Today, we will work on creating the UI for the app. If this is your first article in this series, please quickly read through the Part 1 to get a good idea of what the series is about. Now to the Code.

First, we need to create a new React Native project with the command

npx react-native init NFCStore

This creates a react-native project named ‘NFCStore’.

Next we will create a folder named ‘assets’ to hold our icons.

Then we will modify the App.js file to display the list of products in our cart. For now, we will use a list of dummy products, while we build the UI.

const productsInCart = [{
    id: '0',
    'title': 'Shoulder rolls tee',
    'description': 'Shoulder rolls tee description',
    'url': 'https://storage.googleapis.com/material-vignettes.appspot.com/image/34-0.jpg',
    'priceInDollars': 27,
}, {
    id: '1',
    'title': 'Cerise scallop tee',
    'description': 'Cerise scallop tee description',
    'url': 'https://storage.googleapis.com/material-vignettes.appspot.com/image/33-0.jpg',
    'priceInDollars': 42,
}, {
    id: '2',
    'title': 'Grey slouch tank',
    'description': 'Grey slouch tank description',
    'url': 'https://storage.googleapis.com/material-vignettes.appspot.com/image/35-0.jpg',
    'priceInDollars': 24,
}, {
    id: '3',
    'title': 'Sunshirt dress',
    'description': 'Sunshirt dress description',
    'url': 'https://storage.googleapis.com/material-vignettes.appspot.com/image/36-0.jpg',
    'priceInDollars': 58,
}, {
    id: '4',
    'title': 'Fine lines tee',
    'description': 'Fine lines tee description',
    'url': 'https://storage.googleapis.com/material-vignettes.appspot.com/image/37-0.jpg',
    'priceInDollars': 58,
}];

App.js

const App: () => Node = () => {
    return (
        <SafeAreaView style={styles.container}>
            <StatusBar backgroundColor={'#FBB8AC'}/>
            <FlatList
                contentInsetAdjustmentBehavior="automatic" data={productsInCart}
                renderItem={({item}) => <CartItem key={item.id} product={item}/>}/>
            <TouchableOpacity activeOpacity={0.5} style={styles.fabContainer}>
                <Image source={require('./assets/icon_plus_fab.png')} style={ [styles.icon, styles.fabIcon]}/>
            </TouchableOpacity>
        </SafeAreaView>
    );
};

Here, we use a FlatList to display the list of products and we add a Floating Action Button. The Floating Action Button will be used to trigger our NFC listener.

CartItem

const CartItem = ({product}): Node => {
    return (
        <View style={styles.cartItemContainer}>
            <Image style={styles.productImage} source={{uri: product.url}}/>
            <View style={styles.cartItemInnerContainer}>
                <View style={styles.cartItemTitleDescCancelIconContainer}>
                    <View style={styles.cartItemTitleDescContainer}>
                        <Text style={styles.titleText}>
                            {product.title}
                        </Text>
                        <Text style={styles.descText}>
                            {product.description}
                        </Text>
                    </View>
                    <TouchableOpacity activeOpacity={0.4}>
                        <Image source={require('./assets/icon_delete.png')} style={styles.icon}/>
                    </TouchableOpacity>
                </View>
                <View style={styles.priceQuantityContainer}>
                    <Text style={styles.priceText}>
                        ${product.priceInDollars}
                    </Text>
                    <View style={styles.utility}/>
                    <View style={styles.quantityContainer}>
                        <TouchableOpacity activeOpacity={0.5}>
                            <Image source={require('./assets/icon_minus.png')} style={styles.icon}/>
                        </TouchableOpacity>
                        <Text style={styles.quantityText}>3</Text>
                        <TouchableOpacity activeOpacity={0.5}>
                            <Image source={require('./assets/icon_plus.png')} style={styles.icon}/>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        </View>
    );
};

Here we display the title, description, the price and the quantity of the product in the cart. We also a button to remove the cart item and two button to increase and decrease the quantity.

The link to the GitHub repository https://github.com/OlaAde/NFCStore/tree/ui-part-1.

The next article in the series will be focused on adding some dynamic content; changing the quantity in response to the buttons, a corresponding change in the price and adding the total and check out sections of the UI.