Cristian Personal Blog

React Native Taxi App. Booking Information.

July 30, 2021

In this tutorial, we will build a Taxi App for both iOS & Android using React Native CLI. Also, we’re going to dive into Unit Testing our entire app using Jest + React Testing Library. We will use AWS with Amplify for authentication, database, and AppSync for GraphQL API for the back-end.

Part 4. Booking Information & Unit Tests.

Let’s continue working with the Booking process. We’re going to use the same UserScreen component for:

  1. Departure Information
  2. Booking Information

We already worked on Departure Information on previous parts of this tutorial. For the Booking Information let’s start creating a new file for the component inside src/components/BookingInformation.js:

// src/components/BookingInformation.js
import React from "react"
import styled from "styled-components/native"
import FeatherIcon from "react-native-vector-icons/Feather"
import { formatPlaceName } from "../utils"
import { usePlace } from "../context/PlacesManager"

const Container = styled.View`
  flex: 1.5;
  background-color: #fff;
  padding-vertical: 20px;
  padding-horizontal: 20px;
`

export const Location = styled.View`
  flex-direction: row;
  align-items: center;
`

const Text = styled.Text`
  color: #000;
  font-size: 16px;
  font-weight: 600;
  margin-left: 5px;
`

export default function BookingInformation() {
  const {
    place: { currentPlace },
  } = usePlace()

  return (
    <Container>
      <Location>
        <FeatherIcon name="map-pin" size={15} color="gray" />
        <Text testID="current-place-description">
          {formatPlaceName(currentPlace.description)}
        </Text>
      </Location>
    </Container>
  )
}

We created a couple of Styled components also imported usePlace custom hookg from PlacesManager Context Provider.

Cristian Echeverría

I write both English & Spanish about different subjects. You can follow me on Twitter

...