Category: React Native

React Native Wizard Stepper

While I was working on a e-commerce site for a client, there was a part that I had to work on a Wizard / Stepper form for the checkout page. At first I was thinking maybe I could just use a plugin for this? so I searched around the internet but didn’t find anything that meets my requirements, so.. I ended up making my own.

The idea is actually very simple, using state management you can manipulate how the buttons and bullets should be displayed. And with a little bit of styling, you can emphasize how the bullets work: Green bullet with a check mark indicates that the page is complete, the shaded orange bullet indicates the page currently displayed, and the outlined bullets indicate the pages that are not yet complete.

Bellow is the demo + code:

React Native Cart System

One of the pages that you will be required to create when building a Ecommerce mobile app is a Cart system where in users can easily manage the items they want to buy. The demo bellow demonstrates how you to create a stylish cart system without having to install external plugins to meet the requirements.

We’re rendering 5 products stored in the state. Each line item has its own checkbox, quantity field and a delete button.

  • Checbox – rather than using the default React Native checkbox which only works on android, I’ve decided to use a icon and then have it toggle on-press.  On-press it calls the selectHandler() function to check / uncheck the line item, which also updates the cartItems state then re-renders the screen.
  • Delete button – rather than using a <Button> component, we’re simply wrapping the delete action with a <TouchableOpacity> which basically works like a button. On-press it calls the function deleteHandler() which removes the item from the cartItems state then re-renders the screen. The delete button is not working on the demo, but it works on iOS and Android devices.
  • Quantity field – rather than installing a external plugin for a quantity UI component, I’ve decided to just make my own using Icons and some styling techniques. Basically we’re using icons on the Plus and Minus buttons, then the quantity number is simply a text that renders the value from the cartItems state. On-press of the buttons, we call the quantityHandler() function which passes the action (add / subtract) depending on what was pressed, and then updates the cartItems state then re-renders the screen.

At the bottom of the screen you’ll also find: a container where you can enter the voucher code, a button for selecting all items, a dynamic subtotal, and a checkout button.

  • The voucher field is standard for most ecommerce sites
  • Select All – this basically checks / unchecks all the items in the list.
  • SubTotal – this basically renders the total price of all CHECKED items. The value of the subtotal also renders on the fly as you DELETE the line item or UPDATE the quantity of a line item.
  • Checkout button – when the user is ready to proceed with the payment, they can click on the checkout button which will send them to the checkout screen (not included in the demo).

React Native List with Grid consisting of Icons and Text

The example bellow runs via Snack created by Expo, it shows how you can layout a list which consists of an internal grid where 1.) a icon appears from the left, 2.) a text in the middle consisting of a title and a short description, and 3.) a badge that appears at the end. Additionally I’ve include a title that says “Notifications” and a example of icons with badges.

Basically, to build the grid, you need to create a element with a flexDirection: ‘row’  then for the 1st and 3rd box you set a width. As for the middle box, we stretched the container by adding a flexGrow: 1 but this pushes the 3rd box off the grid, so we should include a flexShrink: 1  so that it wraps the text within the block. For longer text, we added numberOfLines={1} to the <Text>  element to achieve a ellipsis effect, you may change its value to whatever number of lines you want to output before the ellipsis takes effect.

The icons used in the example are built to expo, so no need to add an external library for icons.

React Native Tabs in Single File and Split Files

Single File:

Split Files

Horizontal Live Event Cards with Image and Gradient – React Native

React Native’s style processor has become very powerful and convenient, it’s now possible to achieve certain layouts that were only achievable before through Javascript programming. In this example I want to show you how to achieve a card structure layout that you see in most modern apps these days. It includes a linear gradient from top to bottom and at the bottom there’s a text title which stands out because of the gradient effect.