Forem: Cristian Echeverria

React Native Taxi App: Drawing a Route.

Cristian Echeverria — Sat, 11 Sep 2021 12:02:33 +0000

Previously we added the basic logic for the Booking Information. We displayed a modal where the user can enter the destination address and using Places API from Google. We show an array of predictions using the FlatList component from React Native.

When the user presses one of the predictions, we will draw a route using Polygon and other handy features, so let's dive into it.

Dispatching Destination Place

We need to create a dispatch action for setting the destination place when we press one of the predictions. Remember that we use a Places Manager Context Provider. Let's open it src/context/PlacesManager.js:

export const placeReducer = (prevState, action) => {
  switch (action.type) {
    case 'SET_CURRENT_PLACE':
      ...

 👉 case 'SET_DESTINATION_PLACE':
      return {
        ...prevState,
        destinationPlace: {
          description: action.description,
          placeId: action.placeId,
        },
      };
  }
};

We update the destinationPlace object with the prediction description and placeId that the user select.

Now, let's move into our Prediction component (src/components/Prediction.js) and use dispatchPlace function from our Places Manager Context Provider.

import React from 'react';
import {TouchableOpacity} from 'react-native';
import styled from 'styled-components/native';
import {usePlace} from '../context/PlacesManager'; 👈

const Text = styled.Text`
  padding: 5px;
  font-size: 14px;
`;

export default function Prediction({description, place_id}) {
  const {dispatchPlace} = usePlace(); 👈
  return (
    <TouchableOpacity
      key={place_id}
      testID={`prediction-row-${place_id}`}
      onPress={() => {
     👉 dispatchPlace({
          type: 'SET_DESTINATION_PLACE',
          description,
          placeId: place_id,
        });
      }}>
      <Text>{description}</Text>
    </TouchableOpacity>
  );
}

We need to import the usePlace hook into the Prediction component so the user can select a prediction and update the destinationPlace object using the dispatchPlace function.

Once we select a prediction, we update the destinationPlace and also we need to close the modal. For that reason let's pass the toggleModal function prop into our Predictions component. Open SearchAddressModal component

 const renderPredictions = ({item}) => (
    <Prediction {...item} toggleModal={toggleModal} />
  );

And Predictions component.


export default function Prediction({
description, 
place_id, 
toggleModal 👈
}) {
  const {dispatchPlace} = usePlace();
  return (
    <TouchableOpacity
      key={place_id}
      testID={`prediction-row-${place_id}`}
      onPress={() => {
        dispatchPlace({
          type: 'SET_DESTINATION_PLACE',
          description,
          placeId: place_id,
        });
        toggleModal(); 👈
      }}>
      <Text>{description}</Text>
    </TouchableOpacity>
  );
}

If everything is okay, you should see the selected Destination Place.

Draw Route in the Map.

Now that we have the information for currentPlace and destinationPlace, we can draw a route in the Map.

We use @mapbox/polyline library to draw the route combined with directions API.

First, let's install mapbox/polyline in our app

npm install @mapbox/polyline

Second, let's create a new utility function inside src/utils/index.js

import PoliLyne from '@mapbox/polyline';
...
export const fetchRoute = async (originPlaceId, destinationPlaceId) => {
  try {
    const res = await fetch(
      `https://maps.googleapis.com/maps/api/directions/json?origin=place_id:${originPlaceId}&destination=place_id:${destinationPlaceId}&key=${GOOGLE_MAPS_API_KEY}`,
    );
    const json = await res.json();
    if (!json.routes[0]) {
      return;
    }
    const points = PoliLyne.decode(json.routes[0].overview_polyline.points);
    const coordinates = points.map((point) => ({
      latitude: point[0],
      longitude: point[1],
    }));

    return coordinates;
  } catch (error) {
    console.log(error);
  }
};

Directions API

Don't forget to activate Directions API inside your console.cloud.google.com project as I show in the next image

Last step, let's open our UserScreen component and use the fetchRoute function we just added and the Polyline component from react-native-maps.

import React, {useEffect, useState, useRef} from 'react';
import {StatusBar, Platform, Image} from 'react-native';
import styled from 'styled-components/native';
👉 import MapView, {PROVIDER_GOOGLE, Polyline, Marker} from 'react-native-maps';
import {check, request, PERMISSIONS, RESULTS} from 'react-native-permissions';
import Geolocation from 'react-native-geolocation-service';
import {customStyleMap, MenuButtonLeft} from '../styles';
import FeatherIcon from 'react-native-vector-icons/Feather';
import DepartureInformation from '../components/DepartureInformation';
import Geocoder from 'react-native-geocoding';
import {usePlace} from '../context/PlacesManager';
import {GOOGLE_MAPS_API_KEY} from '../utils/constants';
import marker from '../assets/icons-marker.png';
import BookingInformation from '../components/BookingInformation';
import {useShowState} from '../hooks';
👉 import {fetchRoute} from '../utils';

...

const UserScreen = ({navigation}) => {
  const [location, setLocation] = useState(null);
  const {
    place: {currentPlace, destinationPlace}, 👈
    dispatchPlace,
  } = usePlace();
  const [showBooking, toggleShowBookingViews] = useShowState(false);
👉  const [polilyneCoordinates, setPolilyneCoordinates] = useState([]);
👉  const mapRef = useRef(null);

  const handleLocationPermission = async () => {
    ...
  };

  useEffect(() => {
    handleLocationPermission();
  }, []);

  useEffect(() => {
    ...
  }, [dispatchPlace]);

  const onRegionChange = ({latitude, longitude}) => {
    ...
  };

  useEffect(() => {
    ...
  }, [navigation]);

👇
  useEffect(() => {
    if (currentPlace.placeId && destinationPlace.placeId) {
      fetchRoute(currentPlace.placeId, destinationPlace.placeId).then(
        results => {
          setPolilyneCoordinates(results);
          mapRef.current.fitToCoordinates(results, {
            edgePadding: {left: 20, right: 20, top: 40, bottom: 60},
          });
        },
      );
    }
  }, [currentPlace, destinationPlace.placeId]);

  return (
    <Container>
      <StatusBar barStyle="dark-content" />
      {location && (
        <MapView
          testID="map"
        👉 ref={mapRef}
          style={mapContainer}
          provider={PROVIDER_GOOGLE}
          initialRegion={{
            latitude: location.latitude,
            longitude: location.longitude,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
          onRegionChangeComplete={onRegionChange}
          showsUserLocation={true}
          customMapStyle={customStyleMap}
          paddingAdjustmentBehavior="automatic"
          showsMyLocationButton={true}
          showsBuildings={true}
          maxZoomLevel={17.5}
          loadingEnabled={true}
          loadingIndicatorColor="#fcb103"
          loadingBackgroundColor="#242f3e">
       👉  {polilyneCoordinates.length > 1 && (
       👉   <Polyline
              testID="route"
              coordinates={polilyneCoordinates}
              strokeWidth={3}
              strokeColor="#F4E22C"
            />
          )}

       👉  {polilyneCoordinates.length > 1 && (
            <Marker
              testID="destination-marker"
              coordinate={polilyneCoordinates[polilyneCoordinates.length - 1]}
            />
          )}
        </MapView>
      )}

     👉 {destinationPlace.placeId === '' && (
          <FixedMarker testID="fixed-marker">
             <Image style={markerStyle} source={marker} />
          </FixedMarker>
        )}

      {showBooking ? (
        <BookingInformation />
      ) : (
        <DepartureInformation toggleShowBookingViews={toggleShowBookingViews} />
      )}
    </Container>
  );
};

export default UserScreen;

A lot of things happened. First, we import Polyline component from react-native-maps to draw the PolyLines points from the fetchRoute function.

Second we added {currentPlace, destinationPlace} from place object.

Third, we added polylineCoordinates array using useState and created a local mapRef to access MapView components utility function.

const [polilyneCoordinates, setPolilyneCoordinates] = useState([]);
const mapRef = useRef(null);

Fourth, we added a new useEffect that will call fetchRoute function if currentPlace.placeId and destinationPlace.placeId ins't null/false/undefined.

useEffect(() => {
    if (currentPlace.placeId && destinationPlace.placeId) {
      fetchRoute(currentPlace.placeId, destinationPlace.placeId).then(
        results => {
          setPolilyneCoordinates(results);
          mapRef.current.fitToCoordinates(results, {
            edgePadding: {left: 20, right: 20, top: 40, bottom: 60},
          });
        },
      );
    }
  }, [currentPlace, destinationPlace.placeId]);

Once we have the array of PolyLines points, we update the polylineCoordinates local state and call fitToCoordinates function from MapView to update the padding of the MapView component.

Fifth, we need to pass the mapRef into MapView and check if we have PolyLines to draw the route. If we have the route we add a Marker for the last PolyLine point.

{location && (
    <MapView
       ...
       ref={mapRef}
       ...
    >
     {polilyneCoordinates.length > 1 && (
            <Polyline
              testID="route"
              coordinates={polilyneCoordinates}
              strokeWidth={3}
              strokeColor="#F4E22C"
            />
          )}

          {polilyneCoordinates.length > 1 && (
            <Marker
              testID="destination-marker"
              coordinate={polilyneCoordinates[polilyneCoordinates.length - 1]}
            />
          )}
        </MapView>
      )}

      {destinationPlace.placeId === '' && (
        <FixedMarker testID="fixed-marker">
          <Image style={markerStyle} source={marker} />
        </FixedMarker>
      )}

Lastly, we add a condition to hide the Marker that we used as reference in the beginning.

Unit Tests

It's test time! 😍

This time will test Prediction component. Create a new test file inside src/components/__tests__/Prediction.test.js:

import React from 'react';
import {render, fireEvent} from '@testing-library/react-native';
import Prediction from '../Prediction';
import {PlaceContext} from '../../context/PlacesManager';

describe('<Prediction />', () => {
  test('is tappable', async () => {
    const place = {description: 'Domkyrkan', placeId: '123'};
    const mockToggleModal = jest.fn();
    const dispatchPlace = jest.fn();
    const {getByText} = render(
      <PlaceContext.Provider value={{place, dispatchPlace}}>
        <Prediction
          description={place.description}
          place_id={place.placeId}
          toggleModal={mockToggleModal}
        />
      </PlaceContext.Provider>,
    );

    fireEvent.press(getByText('Domkyrkan'));
    expect(dispatchPlace).toHaveBeenCalled();
    expect(mockToggleModal).toHaveBeenCalled();
  });
});

React Native Taxi App: Booking Information. Places API

Cristian Echeverria — Sat, 14 Aug 2021 18:01:41 +0000

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

Departure Information
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 LocationPlaceholder = styled.Text`
  color: #717171;
  font-size: 14px;
  margin-left: 5px;
  font-weight: 600;
`;

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>

      <FeatherIcon
        name="more-vertical"
        size={15}
        color="gray"
        marginTop={-10}
      />

      <Location>
        <FeatherIcon name="more-vertical" size={15} color="gray" />
        <LocationPlaceholder testID="destination-label">
          Destination address
        </LocationPlaceholder>
      </Location>
    </Container>
  )
}

We created a couple of Styled components also imported usePlace custom hook from PlacesManager Context Provider to show the selected currentPlace description. The main idea is to show the BookingInformation component from UserScreen when we toggle the Book Now button from the DepartureInformation component.

I'm going to create another custom hook component for show/hide functionality in our App. For that, let's create a new folder, taxiApp/src/hooks/index.js:

// taxiApp/src/hooks/index.js
import {useState} from 'react';

export const useShowState = (initialOpen = false) => {
  const [isOpen, setIsOpen] = useState(initialOpen);

  const onToggle = () => {
    setIsOpen((prevState) => !prevState);
  };

  return [isOpen, onToggle];
};

Now, let's use useShowState custom hook inside our UserScreen component.

// taxiApp/src/screens/UserScreen.js
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {useEffect, useState} from 'react';
import {StatusBar, Platform, Image} from 'react-native';
import styled from 'styled-components/native';
import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';
import {check, request, PERMISSIONS, RESULTS} from 'react-native-permissions';
import Geolocation from 'react-native-geolocation-service';
import {customStyleMap, MenuButtonLeft} from '../styles';
import FeatherIcon from 'react-native-vector-icons/Feather';
import DepartureInformation from '../components/DepartureInformation';
import Geocoder from 'react-native-geocoding';
import {usePlace} from '../context/PlacesManager';
import {GOOGLE_MAPS_API_KEY} from '../utils/constants';
import marker from '../assets/icons-marker.png';
// Import BookingInformation and useShowState custom hook
import BookingInformation from '../components/BookingInformation';
import {useShowState} from '../hooks';

Geocoder.init(GOOGLE_MAPS_API_KEY, {language: 'en'});

const Container = styled.SafeAreaView`
  flex: 1;
  background-color: #fff;
`;

const mapContainer = {
  flex: 7,
};

const FixedMarker = styled.View`
  left: 50%;
  margin-left: -16px;
  margin-top: -125px;
  position: absolute;
  top: 50%;
`;

const markerStyle = {
  height: 36,
  width: 36,
};

const UserScreen = ({navigation}) => {
  const [location, setLocation] = useState(null);
  const {place, dispatchPlace} = usePlace();
  // Create a local state using the custom Hook
  const [showBooking, toggleShowBookingViews] = useShowState(false);

  const handleLocationPermission = async () => {
    let permissionCheck = '';
    if (Platform.OS === 'ios') {
      permissionCheck = await check(PERMISSIONS.IOS.LOCATION_WHEN_IN_USE);

      if (permissionCheck === RESULTS.DENIED) {
        const permissionRequest = await request(
          PERMISSIONS.IOS.LOCATION_WHEN_IN_USE,
        );
        permissionRequest === RESULTS.GRANTED
          ? console.warn('Location permission granted.')
          : console.warn('Location perrmission denied.');
      }
    }

    if (Platform.OS === 'android') {
      permissionCheck = await check(PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION);

      if (permissionCheck === RESULTS.DENIED) {
        const permissionRequest = await request(
          PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION,
        );
        permissionRequest === RESULTS.GRANTED
          ? console.warn('Location permission granted.')
          : console.warn('Location perrmission denied.');
      }
    }
  };

  useEffect(() => {
    handleLocationPermission();
  }, []);

  useEffect(() => {
    Geolocation.getCurrentPosition(
      position => {
        const {latitude, longitude} = position.coords;
        Geocoder.from({
          latitude: latitude,
          longitude: longitude,
        }).then(res => {
          const {
            formatted_address,
            place_id,
            geometry: {
              location: {lat, lng},
            },
          } = res.results[0];
          setLocation({latitude, longitude});
          dispatchPlace({
            type: 'SET_CURRENT_PLACE',
            description: formatted_address,
            placeId: place_id,
            latitude: lat,
            longitude: lng,
          });
        });
      },
      error => {
        console.log(error.code, error.message);
      },
      {enableHighAccuracy: true, timeout: 15000, maximumAge: 10000},
    );
  }, [dispatchPlace]);

  const onRegionChange = ({latitude, longitude}) => {
    Geocoder.from({
      latitude,
      longitude,
    }).then(res => {
      const {
        formatted_address,
        place_id,
        geometry: {
          location: {lat, lng},
        },
      } = res.results[0];

      dispatchPlace({
        type: 'SET_CURRENT_PLACE',
        description: formatted_address,
        placeId: place_id,
        latitude: lat,
        longitude: lng,
      });
    });
  };

  useEffect(() => {
    navigation.setOptions({
      headerLeft: () => (
        <MenuButtonLeft
          onPress={() => navigation.navigate('Menu')}
          testID="modal-menu">
          <FeatherIcon name="menu" size={25} color="#000" />
        </MenuButtonLeft>
      ),
    });
  }, [navigation]);

  return (
    <Container>
      <StatusBar barStyle="dark-content" />
      {location && (
        <MapView
          testID="map"
          style={mapContainer}
          provider={PROVIDER_GOOGLE}
          initialRegion={{
            latitude: location.latitude,
            longitude: location.longitude,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
          onRegionChangeComplete={onRegionChange}
          showsUserLocation={true}
          customMapStyle={customStyleMap}
          paddingAdjustmentBehavior="automatic"
          showsMyLocationButton={true}
          showsBuildings={true}
          maxZoomLevel={17.5}
          loadingEnabled={true}
          loadingIndicatorColor="#fcb103"
          loadingBackgroundColor="#242f3e"
        />
      )}

      <FixedMarker testID="fixed-marker">
        <Image style={markerStyle} source={marker} />
      </FixedMarker>

      {/* Logic to when to show BookingInformation or DepartureInformation */}
      {showBooking ? (
        <BookingInformation />
      ) : (
        <DepartureInformation toggleShowBookingViews={toggleShowBookingViews} />
      )}
{/* See that we pass toggleShowBookingViews as prop */}
    </Container>
  );
};

export default UserScreen;

As you see, we imported BookingInformation component and useShowState custom hook to UserScreen. The custom hook will create a local state that will handle when we show/hide BookingInformation and DepartureInformation.

We also passed toggleShowBookingViews function as prop to DepartureInformation. The reason is to toggle the Book Now button and update the showBooking state.

Now let's move to DepartureInformation and handle the new prop we just passed.

// taxiApp/src/components/DepartureInformation.js
...
export default function DepartureInformation({toggleShowBookingViews}) {
...
  return (
    <Container platform={Platform.OS}>
      ...

      <BookNow>
        <BookNowButton
          onPress={toggleShowBookingViews}
          testID="book-now-button">
          <ButtonText>Book now</ButtonText>
        </BookNowButton>
      </BookNow>
    </Container>
  );
}

DepartureInformation.propTypes = {
  toggleShowBookingViews: PropTypes.func,
};

We receive the passed prop toggleShowBookingViews and then replace the console.log() function with the new prop function in the BookNowButton component.

So, if everything is fine when you press the Book Now button, you should see BookingInformation component UI, as shown in the gif below.

Add a Booking Information Input

We need to add an input where the user can type the Destination Place. The idea is to have a Modal where we display a TextInput. Before that, let's add a Pressable component that will open the Modal.

// taxiApp/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';
// Import custom hook for show/hide elements.
import {useShowState} from '../hooks';

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 LocationPlaceholder = styled.Text`
  color: #717171;
  font-size: 14px;
  margin-left: 5px;
  font-weight: 600;
`;

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

// New Pressable component
const LocationPressable = styled.Pressable`
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
`;

// New styled component
const AddDestinationText = styled.Text`
  color: #000;
  font-size: 20px;
  font-weight: 600;
  margin-left: 5px;
`;

// New styled component
const TextRight = styled(Text)`
  margin-left: auto;
`;

export default function BookingInformation() {
  // Add destinationPlace from PlacesManager
  const {
    place: {currentPlace, destinationPlace},
  } = usePlace();
  // Create a local state for toggle a Modal
  const [isModalVisible, togglePlaceModal] = useShowState();

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

      <FeatherIcon
        name="more-vertical"
        size={15}
        color="gray"
        marginTop={-10}
      />

      <Location>
        <FeatherIcon name="more-vertical" size={15} color="gray" />
        <LocationPlaceholder testID="destination-label">
          Destination address
        </LocationPlaceholder>
      </Location>
      {/* Add new components for toggle a Modal */}
      <LocationPressable onPress={togglePlaceModal}>
        <FeatherIcon name="circle" size={15} color="gray" />
        <AddDestinationText testID="destination-place-description">
          {formatPlaceName(destinationPlace.description) || 'Add destination'}
        </AddDestinationText>
        <TextRight>
          <FeatherIcon name="search" size={15} color="#000" />
        </TextRight>
      </LocationPressable>
    </Container>
  );
}

We import the custom hook for handle show/hide Modal. Add a couple of new Styled Components, including Pressable from React Native. Also, add destinationPlace from PlacesManager Context Provider.

Destination Address Modal

Alright, we need to create a new component called SearchAddressModal, inside that Modal we will have a TextInput for search the user destination place. SearchAddressModal will be called from the BookingInformation component.

React Native Modal

We'll use a new package called react-native-modal for our Modal component, let's install it:

npm i react-native-modal --save-exact

Create a new file inside taxiApp/src/components/SearchAddressModal.js:

// taxiApp/src/components/SearchAddressModal.js
import React from 'react';
import {StatusBar, TextInput} from 'react-native';
import styled from 'styled-components/native';
import Modal from 'react-native-modal';
import FeatherIcon from 'react-native-vector-icons/Feather';

const Container = styled.SafeAreaView`
  flex: 1;
`;

const BackButton = styled.TouchableOpacity`
  margin-top: 10px;
`;

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

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

const ClearDestinationButton = styled.TouchableOpacity`
  margin-left: auto;
`;

const Input = styled(TextInput)`
  color: #000000;
  font-size: 20px;
  font-weight: 600;
  height: 50px;
  width: 90%;
  padding: 10px;
`;

export default function SearchAddressModal({isModalVisible, toggleModal}) {
  return (
    <Modal
      isVisible={isModalVisible}
      backdropColor="white"
      backdropOpacity={1}
      animationIn="slideInUp"
      testID="search-address-modal">
      <StatusBar barStyle="dark-content" />
      <Container>
        <BackButton testID="back-button" onPress={toggleModal}>
          <FeatherIcon name="arrow-left" size={20} color="gray" />
        </BackButton>

        <ModalChildrenView>
          <SearchContainer>
            <FeatherIcon name="map-pin" size={20} color="gray" />
            <Input
              placeholder="Add destination"
              placeholderTextColor="#000000"
            />
            <ClearDestinationButton testID="clear-button" onPress={() => {}}>
              <FeatherIcon name="x-circle" color="grey" size={20} />
            </ClearDestinationButton>
          </SearchContainer>
        </ModalChildrenView>
      </Container>
    </Modal>
  );
}

As you see now, we have a new component that uses Modal from react-native-modal. For now, this component doesn't have a local state; instead, we receive a couple of props from the BookingInformation component to check the Modal's state and close the Modal.

We added a TextInput that for now doesn't work because it doesn't have a state. The local state for the Input component will come as prop from BookingInformation.

Open the Modal from Booking Information

Move into BookingInformation and import the new component, also pass the props the new Modal component need to be visible.

// taxiApp/src/components/BookingInformation.js
import SearchAddressModal from './SearchAddressModal';

...
export default function BookingInformation() {
...
  const [isModalVisible, togglePlaceModal] = useShowState();

  return (
    <>
      <Container>
        ...
      </Container>
     {/* Import the new Modal component */}
      <SearchAddressModal
        isModalVisible={isModalVisible}
        toggleModal={togglePlaceModal}
      />
    </>
  );
}

As you can see we imported the new Modal component we created and we are rendering outside our <Container></Container> component, that's why we use <></> before and after Container component.

We also pass the two props <SearchAddressModal /> component is expecting in order to show/hide.

 <SearchAddressModal
        isModalVisible={isModalVisible}
        toggleModal={togglePlaceModal}
      />

If everything is fine, when you press the "Add destination" component, you should see that the Modal is visible. Inside the Modal, you can close it by pressing the back arrow button.

Add local state for Modal Input

Let's add a local state that will make the Input component work, as I mentioned above. This local state will come from BookingInformation and passed to the Modal component.

// taxiApp/src/components/BookingInformation.js
import React, {useState} from 'react';
...

export default function BookingInformation() {
  const {
    place: {currentPlace, destinationPlace},
  } = usePlace();
  const [isModalVisible, togglePlaceModal] = useShowState();
 // Input Modal state
  const [newAddress, setNewAddress] = useState(null);

  return (
    <>
      <Container>
        ...
      </Container>

      <SearchAddressModal
        isModalVisible={isModalVisible}
        toggleModal={togglePlaceModal}
     +  newAddress={newAddress}
     +  setNewAddress={setNewAddress}
      />
    </>
  );
}

Now, we have to move into SearchAddressModal component and receive the two props and use them for the Input component.

// taxiApp/src/components/SearchAddressModal.js
...

export default function SearchAddressModal({
  isModalVisible,
  toggleModal,
+ newAddress,
+ setNewAddress,
}) {
  return (
    <Modal
      isVisible={isModalVisible}
      backdropColor="white"
      backdropOpacity={1}
      animationIn="slideInUp"
      testID="search-address-modal">
      <StatusBar barStyle="dark-content" />
      <Container>
        <BackButton testID="back-button" onPress={toggleModal}>
          <FeatherIcon name="arrow-left" size={20} color="gray" />
        </BackButton>

        <ModalChildrenView>
          <SearchContainer>
            <FeatherIcon name="map-pin" size={20} color="gray" />
            <Input
              placeholder="Add destination"
              placeholderTextColor="#000000"
   +          value={newAddress}
   +          onChangeText={text => setNewAddress(text)}
            />
            <ClearDestinationButton
              testID="clear-button"
   +          onPress={() => setNewAddress('')}>
              <FeatherIcon name="x-circle" color="grey" size={20} />
            </ClearDestinationButton>
            </ClearDestinationButton>
          </SearchContainer>
        </ModalChildrenView>
      </Container>
    </Modal>
  );
}

After that, we should be able to type inside the Input component. Also, we should be able to clear what we type when we press the "x-circle" button.

Google Places API

We will use Places API from Google to search for our destination place when we type using the Input component on the Modal screen.

There's a good package for React Native called react-native-google-places-autocomplete that you can use, I tested it, and it works fine. It already comes with an Input component.

But, for this project to have more control, I decided to do it step by step.

We'll need to enable Places API in our Google Console Cloud project, the same steps we followed for enabling Geocoding API and Maps SDK for Android and iOS.

The process is quite simple, we need to fetch from and endpoint passing the Google Maps API Key and the destination. We'll create a new function utility for that inside our src/utils/index.js file:

import {GOOGLE_MAPS_API_KEY} from './constants';

...
// This function receive two arguments
export const APIPlaceAutocomplete = (destination, currentPlace) => {
  const URL = `https://maps.googleapis.com/maps/api/place/autocomplete/json?key=${GOOGLE_MAPS_API_KEY}&input=${destination}&location=${currentPlace.latitude},${currentPlace.longitude}&radius=2000`;

  if (destination.length > 0) {
    return fetch(URL)
      .then(resp => resp.json())
      .catch(error => error);
  } else {
    return 'No destination Address provided';
  }
};

So, we are fetching from https://maps.googleapis.com/maps/api/place/autocomplete/json passing a couple of parameters:

key
input
location
radius

We have to call this function from the SearchAddressModal component passing the parameters it needs to make the successful call to the endpoint.

Fetch Places API using Lodash Debounce

If we call the Google Places API while we type using the Input component from the Modal, we will make the call every time we type any single word, which is useless and unsuitable for optimization.

That's why we're going to use Debounce from the Lodash library. Install Lodash:

npm i --save-exact lodash

Open SearchAddressModal component:

+ import React, {useState, useEffect, useCallback} from 'react';
...
import {debounce} from 'lodash';
import {APIPlaceAutocomplete} from '../utils';

...

export default function SearchAddressModal({
  isModalVisible,
  toggleModal,
  newAddress,
  setNewAddress,
+ currentPlace,
}) {
+  const [predictions, setPredictions] = useState([]);

+  useEffect(() => {
    if (newAddress) {
      debounceSearch(newAddress);
    } else {
      setPredictions([]);
    }
  }, [newAddress, debounceSearch]);

+  const debounceSearch = useCallback(
    debounce(address => {
      APIPlaceAutocomplete(address, currentPlace)
        .then(results => {
          setPredictions(results.predictions);
        })
        .catch(e => console.warn(e));
    }, 1000),
    [],
  );

  return (
    <Modal
        ...
    </Modal>
  );
}

We first import useState, useEffect and useCallback from React. We also import debounce from lodash and the recent created function utility APIPlaceAutocomplete.

We also receive a new prop, currentPlace. This prop we could inject into the Modal component using the custom hook from PlacesManager, but I decided to receive it from BookingInformation.

Using useState, we create a local state called predictions, which is an empty array, here we will display the list of predictions from Google Places API.

useEffect(() => {
    if (newAddress) {
      debounceSearch(newAddress);
    } else {
      setPredictions([]);
    }
  }, [newAddress, debounceSearch]);

If we have a newAddress, we call the function debounceSearch with the newAddress. Otherwise, we call setPredictions with an empty array.

const debounceSearch = useCallback(
    debounce(address => {
      APIPlaceAutocomplete(address, currentPlace)
        .then(results => {
          setPredictions(results.predictions);
        })
        .catch(e => console.warn(e));
    }, 1000),
    [],
  );

We use useCallback with debounce, which means that every 1 second, we will call the APIPlaceAutocomplete function, passing the two parameters the function needs.

So, let's pass currentPlace from BookingInformation as prop to SearchAddressModal component.

...
export default function BookingInformation() {
...

  return (
    <>
      ...

      <SearchAddressModal
        isModalVisible={isModalVisible}
        toggleModal={togglePlaceModal}
        newAddress={newAddress}
        setNewAddress={setNewAddress}
   +    currentPlace={currentPlace}
      />
    </>
  );
}

Render List of Predictions with Flatlist

We need to render the list of predictions that we stored inside the predictions local state. First, let's create a new component inside src/components/Prediction.js:

import React from 'react';
import {TouchableOpacity} from 'react-native';
import styled from 'styled-components/native';

const Text = styled.Text`
  padding: 5px;
  font-size: 14px;
`;

export default function Prediction({description, place_id}) {
  return (
    <TouchableOpacity
      key={place_id}
      testID={`prediction-row-${place_id}`}
      onPress={() => {}}>
      <Text>{description}</Text>
    </TouchableOpacity>
  );
}

And now let's move into SearchAddressModal and start using it along with Flatlist component from React Native.

...
+ import Prediction from './Prediction';

...

const Predictions = styled.View`
  margin-bottom: 20px;
`;

export default function SearchAddressModal({
  isModalVisible,
  toggleModal,
  newAddress,
  setNewAddress,
  currentPlace,
}) {
  const [predictions, setPredictions] = useState([]);

  useEffect(() => {
    if (newAddress) {
      debounceSearch(newAddress);
    } else {
      setPredictions([]);
    }
  }, [newAddress, debounceSearch]);

  const debounceSearch = useCallback(
    debounce(address => {
      APIPlaceAutocomplete(address, currentPlace)
        .then(results => {
          setPredictions(results.predictions);
        })
        .catch(e => console.warn(e));
    }, 1000),
    [currentPlace, setPredictions],
  );

+  const renderPredictions = ({item}) => <Prediction {...item} />;

  return (
    <Modal
      ...

        <ModalChildrenView>
          ...
        </ModalChildrenView>
+       <Predictions>
          {predictions.length > 0 && (
            <FlatList
              data={predictions}
              renderItem={renderPredictions}
              keyExtractor={item => item.place_id}
            />
          )}
        </Predictions>
      </Container>
    </Modal>
  );
}

Uni Tests

It's test time! 😍

We need to add a new tests file for BookingInformation component. On the first test, we will test that the component renders correctly.

Create a new test file src/components/__tests__/BookingInformation.test.js:

import React from 'react';
import {render} from '@testing-library/react-native';
import BookingInformation from '../BookingInformation';
import {PlaceContext} from '../../context/PlacesManager';

describe('<BookingInformation />', () => {
  test('should render correctly when not selected destination', () => {
    const place = {
      currentPlace: {
        description: 'Keillers Park',
        placeId: 'abc',
      },
      destinationPlace: {description: '', placeId: ''},
    };
    const dispatchPlace = jest.fn();
    const {getByTestId, getByText} = render(
      <PlaceContext.Provider value={{place, dispatchPlace}}>
        <BookingInformation />
      </PlaceContext.Provider>,
    );

    expect(getByText('Keillers Park')).toBeDefined();
    expect(getByText('Add destination')).toBeDefined();
    expect(getByTestId('destination-label')).toBeDefined();
  });
});

Also let's add another test file for the SearchAddressModal component. Create a new file src/components/__tests__/SearchAddressModal.test.js

import React from 'react';
import {render} from '@testing-library/react-native';
import SearchAddressModal from '../SearchAddressModal';

describe('<SearchAddressModal />', () => {
  test('should render correctly', () => {
    const {getByPlaceholderText, getByTestId, queryByText} = render(
      <SearchAddressModal isModalVisible={true} />,
    );

    expect(getByTestId('back-button')).toBeDefined();
    expect(getByPlaceholderText('Add destination')).toBeDefined();
    expect(getByTestId('clear-button')).toBeDefined();
    expect(queryByText(/Recent/i)).toBeDefined();
  });
});

For now, we only test if the component renders correctly. We check for the back button, Add destination placeholder, clear-button, and the Recent places heading.

Now, let's add another test case about 'should render a list of predictions'.

There're a couple of things that we need to test like lodash.debounce code and the fetching for APIPlaceAutocomplete function.

Open src/components/__tests__/SearchAddressModal.test.js:

test('should render a list of predictions', async () => {
    const lodash = require('lodash');
    lodash.debounce = jest.fn(fn => fn);
    jest.useFakeTimers();
    const promise = Promise.resolve();
    const mockSetNewAddress = jest.fn(() => promise);
    const newAddress = 'Domkyrkan';
    const mockCurrentPlace = {
      description: 'Keillers Park',
      placeId: 'abc',
      latitude: 57.7,
      longitude: 11.93,
    };

    render(
      <SearchAddressModal
        newAddress={newAddress}
        setNewAddress={mockSetNewAddress}
        currentPlace={mockCurrentPlace}
      />,
    );
  });

For now, we require lodash and mock lodash.debounce function with jest.fn. We need to use jest fake timers to simulate the waiting time.

When we run the test it will fail because we need to mock fetch function we use inside APIPlaceAutocomplete.

For mocking Fetch we use a new library jest-fetch-mock. Open your terminal and install jest-fetch-mock.

npm install --save-dev jest-fetch-mock

Finish the setup by opening our jest-setup.js configuration file and paste the next line

require('jest-fetch-mock').enableMocks();

Also update the test adding a mock response for fetch.

test('should render a list of predictions', () => {
    const lodash = require('lodash');
    lodash.debounce = jest.fn(fn => fn);
    jest.useFakeTimers();

    const results = {
      predictions: [
        {
          description: 'Domkyrkan',
          place_id: '123',
        },
      ],
    };
    fetch.mockResponseOnce(JSON.stringify(results));

    const promise = Promise.resolve();
    const mockSetNewAddress = jest.fn(() => promise);
    const newAddress = 'Domkyrkan';
    const mockCurrentPlace = {
      description: 'Keillers Park',
      placeId: 'abc',
      latitude: 57.7,
      longitude: 11.93,
    };

    render(
      <SearchAddressModal
        newAddress={newAddress}
        setNewAddress={mockSetNewAddress}
        currentPlace={mockCurrentPlace}
      />,
    );
  });

We mock the fetch by passing an array of predictions. Now, let's fire and event simulating the user typing a new address:

test('should render a list of predictions', () => {
    const lodash = require('lodash');
    lodash.debounce = jest.fn(fn => fn);
    jest.useFakeTimers();
    const results = {
      predictions: [
        {
          description: 'Domkyrkan',
          place_id: '123',
        },
      ],
    };
    fetch.mockResponseOnce(JSON.stringify(results));
    const promise = Promise.resolve();
    const mockSetNewAddress = jest.fn(() => promise);
    const newAddress = 'Domkyrkan';
    const mockCurrentPlace = {
      description: 'Keillers Park',
      placeId: 'abc',
      latitude: 57.7,
      longitude: 11.93,
    };

    const {getByPlaceholderText} = render(
      <SearchAddressModal
        newAddress={newAddress}
        setNewAddress={mockSetNewAddress}
        currentPlace={mockCurrentPlace}
      />,
    );

    fireEvent.changeText(getByPlaceholderText('Add destination'), newAddress);
    expect(mockSetNewAddress).toHaveBeenCalledWith(newAddress);
  });

We select getByPlaceholderText function from the render component and import fireEvent in order to add a new address. Then we assert that the local state, that update the InputText have been called.

Let's finish by adding the rest about loadash.bounce and rendering a list of predictions.

test('should render a list of predictions', async () => {
    const lodash = require('lodash');
    lodash.debounce = jest.fn((fn) => fn);
    const onResponse = jest.fn();
    const onError = jest.fn();
    jest.useFakeTimers();
    const results = {
      predictions: [
        {
          description: 'Domkyrkan',
          place_id: '123',
        },
      ],
    };
    fetch.mockResponseOnce(JSON.stringify(results));
    const promise = Promise.resolve();
    const mockSetNewAddress = jest.fn(() => promise);
    const newAddress = 'Domkyrkan';
    const mockCurrentPlace = {
      description: 'Keillers Park',
      placeId: 'abc',
      latitude: 57.7,
      longitude: 11.93,
    };

    const {getByPlaceholderText, queryByTestId} = render(
      <SearchAddressModal
        newAddress={newAddress}
        setNewAddress={mockSetNewAddress}
        currentPlace={mockCurrentPlace}
        currentSession={currentSession}
        dispatchAuth={dispatchAuth}
      />,
    );

    fireEvent.changeText(getByPlaceholderText('Add destination'), newAddress);
    expect(mockSetNewAddress).toHaveBeenCalledWith(newAddress);

    lodash.debounce(
      APIPlaceAutocomplete(newAddress, mockCurrentPlace)
        .then(onResponse)
        .catch(onError)
        .finally(() => {
          expect(onResponse).toHaveBeenCalled();
          expect(onError).not.toHaveBeenCalled();

          expect(onResponse.mock.calls[0][0][0]).toEqual(results);
        }),
      1000,
    );

    expect(queryByTestId('prediction-row-0')).toBeNull();

    await act(() => promise);
    queryByTestId('prediction-row-0');
  });

Don't forget to import APIPlaceAutocomplete import {APIPlaceAutocomplete} from '../../utils'; and act function from testing-library.

See how we async/await for a promise to be resolved so we can see a list of predictions using await act(() => promise);

🛑 Stop!

That's it from me for now. I hope you're doing good by now and learning a thing or two. We'll continue working on the Booking Information component in the next post.

Stay tuned!

React Native Taxi App. Google Maps Region Change. React Navigation.

Cristian Echeverria — Sat, 31 Jul 2021 14:47:33 +0000

Source Code Part 2 and 3

Part 3. Google Maps Region Change. React Navigation & Unit Tests.

Let’s add new functionality where we can drag and move the Map around and get the Location Place while we move around. We will use an image similar to a Marker as a reference point.

Open <UserScreen /> component and we will add a new MapView prop called onRegionChangeComplete.

onRegionChangeComplete

...
 // Add this function to update Location Place
 const onRegionChange = ({latitude, longitude}) => {
     // using Geocoder we will fetch new location information
    Geocoder.from({
      latitude,
      longitude,
    }).then(res => {
      const {
        formatted_address,
        place_id,
        geometry: {
          location: {lat, lng},
        },
      } = res.results[0];
    // Once we have a response we dispatch & update currentPlace
      dispatchPlace({
        type: 'SET_CURRENT_PLACE',
        description: formatted_address,
        placeId: place_id,
        latitude: lat,
        longitude: lng,
      });
    });
  };

  return (
    <Container>
      <StatusBar barStyle="dark-content" />
      {location && (
        <MapView
          ...
          onRegionChangeComplete={onRegionChange} // 👈
          ...
        />
      )}
      <DepartureInformation />
    </Container>
  );
};

Now, let’s add an image similar to a Marker. First, we have to select the image. For this project, I decided to use this image that you can download too. Right-click on the image below and save it inside your project folder at src/assets/:

After saving the image in our new assets folder, we will import the new asset inside the <UserScreen /> component. Also, we will create a new Styled component where will render the image.

...
// Add Image component from react-native
import {StatusBar, Platform, Image} from 'react-native';
// Import icon image
import marker from '../assets/icons-marker.png';
...

// Create Styled component.
// This component its almost right in the middle of our Emulator.
// We have to play a bit with the margin-top property.
const FixedMarker = styled.View`
  left: 50%;
  margin-left: -16px;
  margin-top: -125px;
  position: absolute;
  top: 50%;
`;
// This will be the marker Size
const markerStyle = {
  height: 36,
  width: 36,
};

return (
    <Container>
      <StatusBar barStyle="dark-content" />
      {location && (
        <MapView
          ...
          onRegionChangeComplete={onRegionChange}
          ...
        />
      )}

      <FixedMarker testID="fixed-marker">
        <Image style={markerStyle} source={marker} />
      </FixedMarker>

      <DepartureInformation />
    </Container>
  );

Alright!, as you can see, we have an image as a reference point. I know, I know, you don’t have to yell at me because the image isn’t perfectly aligned. Trust me; I’m not blind. We will try to fix that a bit later. For now, leave it as it’s.

React Navigation

Although we only have one screen (<UserScreen />), I need to add the Header navigation bar into our component to fix the Image Marker. So let’s add React Navigation, and later we will add more screens to navigate to and from.

npm install @react-navigation/native --save-exact

We're not using expo, so we will install the librarires required for RN CLI.

npm install --save-exact react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

If you're on a Mac and developing for iOS, you need to install the pods (via Cocoapods) to complete the linking.

npx pod-install ios

To finalize installation of react-native-gesture-handler, add the following at the top (make sure it's at the top and there's nothing else before it) of your entry file, such as index.js:

import "react-native-gesture-handler" // 👈
import { AppRegistry } from "react-native"
import App from "./src/App"
import { name as appName } from "./app.json"

AppRegistry.registerComponent(appName, () => App)

Stack Navigator

We're going to use Stack Navigation. That's why we need to install it. Follow this link to find out more:

npm install @react-navigation/stack --save-eact

Let's import createStackNavigator and Navigation Container into our src/App.js file:

import React from "react"
// NavigationContainer
import { NavigationContainer } from "@react-navigation/native"
// createStackNavigator
import { createStackNavigator } from "@react-navigation/stack"
import UserScreen from "./screens/UserScreen"
import { PlaceProvider } from "./context/PlacesManager"

// Create the Stack
const Stack = createStackNavigator()

const App = () => {
  return (
    <PlaceProvider>
      <NavigationContainer>
        <Stack.Navigator mode="modal">
          <Stack.Screen
            name="User"
            component={UserScreen}
            options={() => ({
              headerTitle: "Taxi App",
            })}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </PlaceProvider>
  )
}

export default App

After that, we now see our Image Marker with a better alignment because of the Header from React Navigation. With the Image Marker, we can use it as a reference to move around the Map and get the place name.

App Menu

It's time for add the Menu Icon and the MenuScreen to our app. Inside src/screens/ create a new component called MenuScreenModal.js.

// ./src/screens/MenuScreenModal.js
import React from "react"
import { FlatList, TouchableWithoutFeedback } from "react-native"
// We have to create new global styles
import { SignInButtonText, SignInButton } from "../styles"
import FeatherIcon from "react-native-vector-icons/Feather"
import styled from "styled-components/native"

// This is the Menu of our app
const MENU = [
  {
    id: "1",
    title: "Bookings",
    icon: "map-pin",
  },
  {
    id: "2",
    title: "Receipts",
    icon: "file-text",
  },
  {
    id: "3",
    title: "Profile",
    icon: "user",
  },
  {
    id: "4",
    title: "Cards",
    icon: "credit-card",
  },
]

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

const MenuItemContainer = styled.View`
  padding-vertical: 10px;
`

const MenuItemView = styled.View`
  flex-direction: row;
  align-items: baseline;
`

const MenuItemText = styled.Text`
  font-size: 26px;
  font-weight: bold;
  margin-left: 10px;
`

const SignInContainer = styled.View`
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
`

// Here we define the styling of each menu item.
const MenuItem = ({ title, icon, navigation }) => (
  <MenuItemContainer>
    <TouchableWithoutFeedback
      onPress={() => navigation.navigate(title)}
      testID={`menuItem-${title}`} // 👈 testID for testing purposes.
    >
      <MenuItemView>
        <FeatherIcon name={icon} size={25} color="#000" />
        <MenuItemText>{title}</MenuItemText>
      </MenuItemView>
    </TouchableWithoutFeedback>
  </MenuItemContainer>
)

export default function MenuScreenModal({ navigation }) {
  const renderMenuItem = ({ item }) => (
    <MenuItem {...item} navigation={navigation} />
  )

  // Using FlatList component from react-native we show list of Menu
  // Also a 'Sign In / Sign Up' button

  return (
    <Container>
      <FlatList
        data={MENU}
        renderItem={renderMenuItem}
        keyExtractor={item => item.id}
      />
      <SignInContainer>
        <SignInButton
          onPress={() => console.log("Sign In / Sign Up Pressed")}
          testID="signInCheck-button/" // 👈 testID for testing purposes.
        >
          <SignInButtonText>Sign In / Sign Up</SignInButtonText>
        </SignInButton>
      </SignInContainer>
    </Container>
  )
}

To continue, let’s create the two new global styles we’re importing for the MenuScreenModal component—open src/styles/index.js.

export const SignInButtonText = styled.Text`
  font-weight: bold;
  font-size: 15px;
`

export const SignInButton = styled.TouchableOpacity`
  align-items: center;
  background-color: #f4e22c;
  padding: 10px;
  border-radius: 20px;
  width: 100%;
  margin-left: auto;
`

After that, let's create a new Stack.Screen component for our MenuScreenModal inside src/App.js.

...
// Import MenuScreenModal component
import MenuScreenModal from './screens/MenuScreenModal';
// Import a new global style
import {MenuButtonLeft} from './styles';
import FeatherIcon from 'react-native-vector-icons/Feather';

const Stack = createStackNavigator();

const App = () => {
  return (
    <PlaceProvider>
      <NavigationContainer>
        <Stack.Navigator mode="modal">
          ...
          <Stack.Screen
              name="Menu"
              component={MenuScreenModal}
              options={({navigation}) => ({
                headerLeft: () => (
                  <MenuButtonLeft
                    onPress={() => navigation.goBack()}
                    testID="back-menu">
                    <FeatherIcon
                      name="x"
                      size={25}
                      color="#000"
                      testID="close-menu"
                    />
                  </MenuButtonLeft>
                ),
                headerTitle: '',
              })}
            />
        </Stack.Navigator>
      </NavigationContainer>
    </PlaceProvider>
  );
};

export default App;

We added a new Stack.Screen component that render the <MenuScreenModal /> component. Notice how we added a couple of options into the Screen, like headerLeft & headerTitle.

headerLeft will render a back menu with a close-menu icon from FeatherIcons to close the Menu on press.

headerTitle will override the title for the Screen. If you don’t define it will take the screen name as the title by default.

If you take a closer look at the <MenuButtonLeft /> styled component, you will see that it has an onPress prop thal call navigation.goBack() function, and that’s because when we use React Navigation and the <NavigationContainer>, we have access to the navigation object prop in all the screens we define.

Lastly, let’s create a button inside the <UserScreen /> component that will open our MenuScreenModal.

// ./src/screens/UserScreen.js
...
// Import MenuButtonLeft style
import {customStyleMap, MenuButtonLeft} from '../styles';
import FeatherIcon from 'react-native-vector-icons/Feather';
...
// Insert the 'navigation' prop from <NavigationContainer>
// See how its wrapper in {}, tha's because we are destructuring the props object.
// Otherwise would be just 'props' and then 'props.navigation.setOptions' inside useEffect.
export default function UserScreen({navigation}) {
  ...

 // We use useEffect that means when Component Did Mount
 // Pass the 'nagivation' prop because its used to call 'setOptions' function
  useEffect(() => {
    navigation.setOptions({
      headerLeft: () => (
          <MenuButtonLeft
            onPress={() => navigation.navigate('Menu')}
            testID="modal-menu">
            <FeatherIcon name="menu" size={25} color="#000" />
          </MenuButtonLeft>
        ),
    });
  }, [ navigation ]);

  ...

So, we can define Stack.Screen options when we declare the screen inside App.js, or modify the options inside every screen component using navigation.setOptions prop, which is great because we can update those options dynamically. I will do that later.

Unit Tests

It's Tests time! 😍

First thing, first, let’s rerun the tests suite and see what fails after our recent updates.

npm run test

Well, well, it seems that <DepartureInformation /> tests pass and <UserScreen /> fail.

 console.error
      Warning: An update to UserScreen inside a test was not wrapped in act(...).

      When testing, code that causes React state updates should be wrapped into act(...):

      act(() => {
        /* fire events that update state */
      });
      /* assert on the output */

      This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
          at UserScreen

       97 |             },
       98 |           } = res.results[0];
    >  99 |           setLocation({latitude, longitude});
          |           ^
      100 |           dispatchPlace({

We got the well-known wrapped into act() warning, and that’s because we update the local state without waiting for the component to fulfill that promise. You can find a convenient and more detailed guide about that in one of Kent C. Dodds posts here.

The second reason that fails is that setOptions from navigation object that it’s undefined; see here:

● <UserScreen /> › should renders MapView and Marker with user current location

    TypeError: Cannot read property 'setOptions' of undefined

      138 |
      139 |   useEffect(() => {
    > 140 |     navigation.setOptions({
          |                ^
      141 |       headerLeft: () => (
      142 |         <MenuButtonLeft
      143 |           onPress={() => navigation.navigate('Menu')}

Let's fix those issues! 💪

Open src/screens/__tests__/UserScreen.test.js:

import React from "react"
// Import act from testing-library
import { render, waitFor, act } from "@testing-library/react-native"
...

describe("<UserScreen />", () => {
  const place = {
    currentPlace: {
      description: "Keillers Park",
      placeId: "abc",
      latitude: 57.7,
      longitude: 11.93,
    },
  }
  const dispatchPlace = jest.fn()
  // Mock navigation prop
  // Also declare the navigation prop when component render bellow
  // See how we mocked setOptions as a jest function.
  const navigation = {
    setOptions: jest.fn(),
  }

  test("should renders MapView and Marker with user current location", async () => {
    const { getByTestId } = render(
      <PlaceContext.Provider value={{ place, dispatchPlace }}>
        <UserScreen navigation={navigation} />
      </PlaceContext.Provider>
    )

    await waitFor(() => {
      expect(check).toHaveBeenCalledTimes(1)
      expect(Geolocation.getCurrentPosition).toHaveBeenCalledTimes(1)
      expect(Geocoder.from).toHaveBeenCalledWith({
        latitude: 57.7,
        longitude: 11.93,
      })
      expect(getByTestId("map")).toBeDefined()
    })
  })

 // Added a new test case for Context Providers
  test("should have called Context Providers", async () => {
    render(
      <PlaceContext.Provider value={{ place, dispatchPlace }}>
        <UserScreen navigation={navigation} />
      </PlaceContext.Provider>
    )

    // Here we await the fulfillment of setLocation({...})
    // This updates our local state
    await act(() => Promise.resolve())

    // Then we can add assertions. Once the promise was fulfill.
    // See how we test the disptachPlace action
    expect(dispatchPlace).toHaveBeenCalledWith({
      type: "SET_CURRENT_PLACE",
      description: "Lindholmen",
      placeId: "abc",
      latitude: 57.7,
      longitude: 11.93,
    })
  })
})

Would you please read the comments above to understand what happened? If we rerun the test, should it be now all green?. Yes!

Now, let's add a new tests file for <MenuScreenModal /> component that we just created. Create a new file inside src/screens/__tests__/MenuScreenModal.test.js:

// src/screens/__tests__/MenuScreenModal.test.js
import React from "react"
import { render } from "@testing-library/react-native"
import MenuScreenModal from "../MenuScreenModal"

describe("<MenuScreenModal />", () => {
  // Mocking navigation object this time the 'navigate' function
  // Navigate function is responsible for pushing us to the next screen
  const navigation = {
    navigate: jest.fn(),
  }
  test("should render list of menu and Sign In/Sign Up button", () => {
    // navigation is a prop we defined
    const { getByTestId } = render(<MenuScreenModal navigation={navigation} />)

    // Here we use the testID we defined inside <MenuScreenModal />
    expect(getByTestId(/menuItem-Bookings/)).toBeDefined()
    expect(getByTestId(/menuItem-Receipts/)).toBeDefined()
    expect(getByTestId(/menuItem-Profile/)).toBeDefined()
    expect(getByTestId(/menuItem-Cards/)).toBeDefined()
    expect(getByTestId(/signInCheck-button/)).toBeDefined()
  })
})

Just a comment regarding Unit Testing, when I test, I’m testing the user behavior in our app. For this case and all the previous tests cases, I’m testing what the user should see on the screen, and also we test what happens when component mount and when the user triggers an action like press a button, etc.

I don’t care about the code implementation when I’m testing. I just care about the expected behavior. Maybe not all the behaviors, but at least the most important ones.

🛑 Stop!

That's it from me for now. I hope you're doing good by now and learning a thing or two. I Will add Part 2 & Part 3 source code here. I forgot to commit Part 2 updates to the GitHub repo so that it will be together 🙈.

React Native Taxi App. Styled Components, Context API & Unit Tests.

Cristian Echeverria — Thu, 29 Jul 2021 20:08:49 +0000

Part 2. Departure Information, Styled Components, Context API & Unit Tests.

Styled Components

As I mentioned in the previous post, we’re going to use Styled Components for our app. I decided to use it instead of StyleSheet objects that default with React Native to have a more elegant look & feel and take advantage of the benefits of using props inside our styles in a dynamic way.

npm install styled-components@5.2.3 --save-exact

Departure Information

Let’s add more components to our app. This time, we’re going to create a Departure Information component. Start by creating a components folder inside our src folder (src/components/DepartureInformation.js).

import React from "react"
import { Platform } from "react-native"
import styled from "styled-components/native"

const Container = styled.View`
  flex: ${({ platform }) => (platform === "ios" ? 1.5 : 2.5)};
  background-color: #ffffff;
  padding-vertical: 20px;
  padding-horizontal: 20px;
`

// flex: 1.5 will give us a bit of space for the Departure Informetion

const Row = styled.View`
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
`

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

const TextBold = styled.Text`
  color: #000000;
  font-size: 20px;
  font-weight: 600;
  margin-left: 5px;
`

export default function DepartureInformation() {
  return (
    <Container platform={Platform.OS}>
      <Row>
        <Text>Departure address</Text>
      </Row>

      <Row>
        <TextBold>Lindholmen</TextBold>
      </Row>
    </Container>
  )
}

We're creating a couple of Styled Components using the styled object. We're using a couple of Views and Text to present a more elegant way of structure our codebase style. If you never used Styled Component before, remember that we use back-thicks to wrap the CSS styles that we use for regular websites. Notice that we don't use React Native default styles naming. For example:

// React Native styling convention
fontSize: 14

// Styled Components use regular CSS naming convention
font-size: 14px;

Another thing. See how for the Container Component, we use a dynamic setting for the flex size. This is one of the advantages of using Styled Components, where we can pass props to the components and dynamically adjust the css.

const Container = styled.View`
  flex: ${({ platform }) => (platform === "ios" ? 1.5 : 2.5)};
  background-color: #ffffff;
  padding-vertical: 20px;
  padding-horizontal: 20px;
`

<Container platform={Platform.OS}>
  ...
</Container>

Now, let's jump into our UserScreen component, replace StyleSheet with Styled Components, and import the recently created DepartureInformation component.

import React, {useEffect, useState} from 'react';
import {StatusBar, Platform} from 'react-native'; // 👈
import styled from 'styled-components/native'; // 👈
import DepartureInformation from '../components/DepartureInformation'; // 👈
...

// 👇
const Container = styled.SafeAreaView`
  flex: 1;
  background-color: #fff;
`;

// We add flex: 1 in order to grab the entire phone screen and add background-color.

// 👇
const mapContainer = {
  flex: 7,
};

// We add flex: 7 to take most of the screen size for the map

const UserScreen = () => {
  ...

  return (
    <Container>
      <StatusBar barStyle="dark-content" />
      {location && (
        <MapView
          testID="map"
          style={mapContainer} // 👈
          ...
        />
      )}
      <DepartureInformation /> {/*  👈 */}
    </Container>
  );
};

export default UserScreen;

Icons

What's an app without Icons?. We're going to use react-native-vector-icons.

npm install --save react-native-vector-icons@8.1.0 --save-exact

You can follow a more detailed installation guide here. In my case I will go with Cocoa Pods for iOS. You can follow instructions for Android on the link.

Inside Podfile paste the next line:

# React Native Vector Icons
pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

Now, edit Info.plist file adding the list of fonts you want to use.

<key>UIAppFonts</key>
<array>
  <string>AntDesign.ttf</string>
  <string>Entypo.ttf</string>
  <string>EvilIcons.ttf</string>
  <string>Feather.ttf</string>
  <string>FontAwesome.ttf</string>
  <string>FontAwesome5_Brands.ttf</string>
  <string>FontAwesome5_Regular.ttf</string>
  <string>FontAwesome5_Solid.ttf</string>
  <string>Foundation.ttf</string>
  <string>Ionicons.ttf</string>
  <string>MaterialIcons.ttf</string>
  <string>MaterialCommunityIcons.ttf</string>
  <string>SimpleLineIcons.ttf</string>
  <string>Octicons.ttf</string>
  <string>Zocial.ttf</string>
  <string>Fontisto.ttf</string>
</array>

And run pod install

npx pod-install

Now, for Android open ./android/app/build.gradle and add this line:

// React Native Vector Icons
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Have in mind that you probably will need to Compile your app after installing the Fonts, so if you were running the app, then stop and rerun the build command which is npx react-native run-ios or npx react-native run-android.

Now, let's use the FeatherIcons, you can find a list of Feather Icons here.

...
import FeatherIcon from 'react-native-vector-icons/Feather'; // 👈

...

export default function DepartureInformation() {
  return (
    <Container platform={Platform.OS}>
      <Row>
        <FeatherIcon name="map-pin" size={20} color="gray" /> {/*  👈 */}
        <Text>Departure address</Text>
      </Row>

      <Row>
        <FeatherIcon name="more-vertical" size={20} color="gray" /> {/*  👈 */}
        <TextBold>Lindholmen</TextBold>
      </Row>
    </Container>
  );
}

Now, let’s add a BookNow button to the Departure Information component. This will be a global Styled Component. We’re going to use it on others screens later. So open src/styles/index.js and add the next lines:

import styled from 'styled-components/native';
...

export const BookNow = styled.View`
  flex-direction: row;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
`

export const BookNowButton = styled.TouchableOpacity`
  align-items: center;
  background-color: #f4e22c;
  padding: 10px;
  border-radius: 20px;
  width: 100%;
  margin-left: auto;
`

export const ButtonText = styled.Text`
  font-weight: bold;
  font-size: 15px;
`

After that, we can now import those components into our Departure Information component.

...
// 👇
import {BookNow, BookNowButton, ButtonText} from '../styles';

...

export default function DepartureInformation() {
  return (
    <Container platform={Platform.OS}>
      <Row>
        <FeatherIcon name="map-pin" size={20} color="gray" />
        <Text>Departure address</Text>
      </Row>

      <Row>
        <FeatherIcon name="more-vertical" size={20} color="gray" />
        <TextBold>Lindholmen</TextBold>
      </Row>

     {/* 👇 */}
      <BookNow>
        <BookNowButton
          onPress={() => console.log('pressed')}
          testID="book-now-button">
          <ButtonText>Book now</ButtonText>
        </BookNowButton>
      </BookNow>
    </Container>
  );
}

Final result

Context API

A lot of developers aren’t sure of which option to choose between Redux or Context API. I’m a member of a couple of Facebook Groups about React & React Native, and they always ask about which one to use at least once every week. My response to that is, why don’t you take advantage of both?.

In this case, I’m going to choose Context API. Reasons?

I think it is simpler for this project for now. Perhaps if the app grows, I could think about using Redux, but not for now. Although the awesome thing is that I´m going to use Context API in a Redux way… trust me, it will be fun! 😉

Let’s go!!

First thing first, let's create a new folder and file inside src (./src/context/PlacesManager.js) and add start with this lines:

// ./src/context/PlacesManager.js
import React from "react"

// initialState where we have currentPlace & destinationPlace.
export const initialState = {
  currentPlace: {
    description: "",
    placeId: "",
    latitude: "",
    longitude: "",
  },
  destinationPlace: {
    description: "",
    placeId: "",
  },
}

// A reducer function to Update our state based on actions.
// Similar to Redux.
export const placeReducer = (prevState, action) => {
  switch (action.type) {
    case "SET_CURRENT_PLACE":
      return {
        ...prevState,
        currentPlace: {
          description: action.description,
          placeId: action.placeId,
          latitude: action.latitude,
          longitude: action.longitude,
        },
      }
  }
}

// We create a context object
export const PlaceContext = React.createContext()

// This is the Context Provider
export const PlaceProvider = ({ children }) => {
  // We add useReducer Hook.
  // Takes a reducer and an initialState as arguments.
  // This return current State and dispatch function.
  const [place, dispatchPlace] = React.useReducer(placeReducer, initialState)

  // We wrapp our components with current State & dispatch function
  return (
    <PlaceContext.Provider value={{ place, dispatchPlace }}>
      {children}
    </PlaceContext.Provider>
  )
}

// This is a custom Hook to consume the created context object.
export const usePlace = () => React.useContext(PlaceContext)

I hope you can follow what we just added above. It’s a lot of information if this is the first time you use Context API. I promise you that you will understand more when we start to use this context. So, let’s add the context provider in our src/App.js file.

// src/App.js
import React from "react"
import UserScreen from "./screens/UserScreen"
// 👇
import { PlaceProvider } from "./context/PlacesManager"

const App = () => {
  return (
    <PlaceProvider>
      <UserScreen />
    </PlaceProvider>
  )
}

export default App

We import PlaceProvider who uses a value prop to inject our current State (place) and dispatch function (disptachPlace) into the children, in this case, our UserScreen provider.

Now, let’s use our first custom Hook inside the Departure Information component to extract the current State from our Context. Open src/components/DepartureInformation.js file.

...
import {usePlace} from '../context/PlacesManager';
...

export default function DepartureInformation() {

// 👇
  const {
    place: {currentPlace},
  } = usePlace();

  return (
    <Container platform={Platform.OS}>
      <Row>
        <FeatherIcon name="map-pin" size={20} color="gray" />
        <Text>Departure address</Text>
      </Row>

      <Row>
        <FeatherIcon name="more-vertical" size={20} color="gray" />
        <TextBold>{currentPlace.description}</TextBold> {/*  👈 */}
      </Row>

      <BookNow>
        <BookNowButton
          onPress={() => console.log('pressed')}
          testID="book-now-button">
          <ButtonText>Book now</ButtonText>
        </BookNowButton>
      </BookNow>
    </Container>
  );
}

Using the power of custom Hooks introduced by React, we consume the value passed to the Context API provider. We destructure the object place to select the currentPlace object.

const {
  place: { currentPlace },
} = usePlace()

Also, we use the currentPlace.description in our component which his initialState is empty for now. Let's fix that by using Geocoding from react-native-geocoding.

Geocoding

On their website you will read this: A geocoding module for React Native to transform a description of a location (i.e. street address, town name, etc.) into geographic coordinates (i.e. latitude and longitude) and vice versa.

This module uses Google Maps Geocoding API and requires an API key for purposes of quota management. Go to Google Console inside your project and add Geocoding API.

Installation

npm install --save react-native-geocoding@0.5.0 --save-exact

Let’s create a constants file inside src/utils/constants.js where we will define our GOOGLE_MAPS_API_KEY. This will be for testing purposes only. It is recommended to use an environment variable for production instead.

export const GOOGLE_MAPS_API_KEY = "YOUR_GOOGLE_MAP_APKI_KEY"

We will use Geocoding inside our UserScreen component, where we fetch the User Current Location. From there, we'll dispatch an action to SET_CURRENT_PLACE. Remember our reducer function where we defined that action?

// src/context/PlacesManager.js
export const placeReducer = (prevState, action) => {
  switch (action.type) {
    case "SET_CURRENT_PLACE":
      return {
        ...prevState,
        currentPlace: {
          description: action.description,
          placeId: action.placeId,
          latitude: action.latitude,
          longitude: action.longitude,
        },
      }
  }
}

Open UserScreen component. Import Geocoder and usePlace custom Hook and update the Geolocation useEffect we already have to fetch Geocoder's current position. Just read the comments inside the code below to have a better understanding of what is going on.

// Let's import Geocoder and usePlace custom Hook
...
import Geocoder from 'react-native-geocoding';
import {usePlace} from '../context/PlacesManager';
import {GOOGLE_MAPS_API_KEY} from '../utils/constants';

// Geocoder has an init method that required your YOUR_GOOGLE_MAPS_API_KEY.
Geocoder.init(GOOGLE_MAPS_API_KEY, {language: 'en'});
...

const UserScreen = () => {
  ...
  // Destructure current State & dispatch function for the reducer.
  const {place, dispatchPlace} = usePlace();
  ...

  useEffect(() => {
    Geolocation.getCurrentPosition(
      position => {
        const {latitude, longitude} = position.coords;
        // 👇
        // We use Geocoder.from function to pass our current location.
        Geocoder.from({
          latitude: latitude,
          longitude: longitude,
        }).then(res => {
          // Destructure the response
          const {
            formatted_address,
            place_id,
            geometry: {
              location: {lat, lng},
            },
          } = res.results[0];
          // Update current location
          setLocation({latitude, longitude});
          // Dispatch action to SET_CURRENT_PLACE
          // This will update our place Context API.
          dispatchPlace({
            type: 'SET_CURRENT_PLACE',
            description: formatted_address,
            placeId: place_id,
            latitude: lat,
            longitude: lng,
          });
        });
      },
      error => {
        console.log(error.code, error.message);
      },
      {enableHighAccuracy: true, timeout: 15000, maximumAge: 10000},
    );
  }, [dispatchPlace]); // 👈
  // Add dispatch function as a dependency of useEffect

  return (
    <Container>
      ...
    </Container>
  );
};

export default UserScreen;

Boom!💥

What just happened?.

I will try to explain using a diagram of what just happened.

Fetch current user location with Geocoding
Grab current location latitude & longitude and pass to Geocoder.
Fetch location coordinates and return Google Maps location name, place_id, and lat, lng.
Update current location using UserScreen local state.
Dispatch current location to Context API to update state.
The departure Information component receives currentPlace information and prints it to the screen.

Next, let’s create a new folder inside src called utils (./src/utils/index.js). Here we will place utility functions that will share among other components.

// This function will shorten the currentPlace description name
export const formatPlaceName = placeName => placeName && placeName.split(",")[0]

Let's use it inside DepartureInformation component.

...
import {formatPlaceName} from '../utils';
...

export default function DepartureInformation({toggleShowBookingViews}) {
  const {
    place: {currentPlace},
  } = usePlace();

  return (
    <Container platform={Platform.OS}>
      <Location>
        <FeatherIcon name="map-pin" size={20} color="gray" />
        <LocationPlaceholder>Departure address</LocationPlaceholder>
      </Location>

      <Location>
        <FeatherIcon name="more-vertical" size={20} color="gray" />
        <LocationBold>{formatPlaceName(currentPlace.description)}</LocationBold>
      </Location>

      <BookNow>
        <BookNowButton
          onPress={toggleShowBookingViews}
          testID="book-now-button">
          <ButtonText>Book now</ButtonText>
        </BookNowButton>
      </BookNow>
    </Container>
  );
}

Unit Tests

It's Tests time! 😍

We made a couple of updates to our UserScreen component. If you rerun the tests, they will fail. By the way, you can run a specific test using jest.

jest src/screens/__tests__/UserScreen.test.js

Perhaps, you have to install the jest package globally on your computer to make it work. Refer to Jest documentation on how to do that here.

After I run jest src/screens/__tests__/UserScreen.test.js this was the result:

Yup, we have to add place & dispatchPlace into our UserScreen test. We need to mock <PlaceContext.Provider> from our Context API.

Open src/screens/__tests__/UserScreen.test.js:

...
// Import PlaceContext
import {PlaceContext} from '../../context/PlacesManager';

describe('<UserScreen />', () => {
  // Mock a place object
  const place = {
    currentPlace: {
      description: 'Keillers Park',
      placeId: 'abc',
      latitude: 57.7,
      longitude: 11.93,
    },
  };
  // Mock dispatchPlace function
  const dispatchPlace = jest.fn();
  test('should renders MapView and Marker with user current location', async () => {
    const {getByTestId} = render(
      // This is how we mock Context API
      <PlaceContext.Provider value={{place, dispatchPlace}}>
        <UserScreen />
      </PlaceContext.Provider>,
    );

    await waitFor(() => {
      expect(check).toHaveBeenCalledTimes(1);
      expect(Geolocation.getCurrentPosition).toHaveBeenCalledTimes(1);
      expect(getByTestId('map')).toBeDefined();
    });
  });
});

If we rerun the test, it will still fail, but not on the place & dispatchPlace, instead will fail probably because we now use Geocoder inside our useEffect. So, let’s try to mock the Geocoder package too.

Inside our __mocks__ folder, create a file called react-native-geocoding.js:

// ./__mocks__/react-native-geocoding.js
export default {
  init: jest.fn(),
  from: jest.fn().mockImplementation(() => {
    const position = {
      results: [
        {
          formatted_address: "Lindholmen",
          place_id: "abc",
          geometry: {
            location: { lat: 57.7, lng: 11.93 },
          },
        },
      ],
    }
    return Promise.resolve(position)
  }),
}

We’re mocking the two functions we’re using from Geocoder, init, to initialize the map API key and from.

Let’s rerun the test. It should pass!:

jest src/screens/__tests__/UserScreen.test.js

To increase the tests coverage, let’s import Geocoder in our test file too.

// src/screens/__tests__/UserScreen.test.js
...
import Geocoder from 'react-native-geocoding';

describe('<UserScreen />', () => {
  const place = {
    currentPlace: {
      description: 'Keillers Park',
      placeId: 'abc',
      latitude: 57.7,
      longitude: 11.93,
    },
  };
  const dispatchPlace = jest.fn();
  test('should renders MapView and Marker with user current location', async () => {
    const {getByTestId} = render(
      <PlaceContext.Provider value={{place, dispatchPlace}}>
        <UserScreen />
      </PlaceContext.Provider>,
    );

    await waitFor(() => {
      expect(check).toHaveBeenCalledTimes(1);
      expect(Geolocation.getCurrentPosition).toHaveBeenCalledTimes(1);
      // Here. Add this line.
      // We're testing that Geocoder.from was called.
      // We also test the location from ./__mocks__/react-native-geocoding.js
      expect(Geocoder.from).toHaveBeenCalledWith({
        latitude: 57.7,
        longitude: 11.93,
      });
      expect(getByTestId('map')).toBeDefined();
    });
  });
});

And that’s for now for the UserScreen.test.js file. Let’s move on and create another test file but this time for the DepartureInformation component.

// Inside src/components/__tests__/DepartureInformation.test.js
import React from "react"
import { render } from "@testing-library/react-native"
import DepartureInformation from "../DepartureInformation"
import { PlaceContext } from "../../context/PlacesManager"

describe("DepartureInformation", () => {
  test("render component correctly", () => {
    const place = {
      currentPlace: {
        description: "Keillers Park",
        placeId: "abc",
      },
    }
    const dispatchPlace = jest.fn()
    const { getByTestId, getByText } = render(
      <PlaceContext.Provider value={{ place, dispatchPlace }}>
        <DepartureInformation />
      </PlaceContext.Provider>
    )

    expect(getByText("Departure address")).toBeDefined()
    expect(getByText("Keillers Park")).toBeDefined()
    expect(getByTestId("book-now-button")).toBeDefined()
  })
})

Here we have to mock <PlaceContext.Provider> again and then using getByTestId, getByText we assert if those components are defined in the tests screen.

Check how we’re testing the Departure address title, the Keillers Park place we mocked on the place object, and finally the Book Now yellow button using the testID we have inside the DepartureInformation component.

🛑 Stop!

I'm going to stop right there. As always, feel free to leave your comments. You can find me on Twitter.

Google Maps, Geolocation and Unit Test on React Native

Cristian Echeverria — Mon, 26 Jul 2021 12:20:20 +0000

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.

Source Code

I also have a Video Version, which is a Pro feature of this tutorial. Check it out 🚨🚀👉 Video Version

Environment setup

First, make sure you have the development environment ready before you start. I'm using a macOS Laptop with two iPhones: iPhone 12 & iPhone SE 2020. Although it isn't necessary to have an actual device to test the App, you can use an Emulator if you don't have an Android/iPhone, but it's recommended that you test the App on a real device.

I'm using React Native version 0.64, be sure you have the same version to avoid compatibility issues using the main libraries like react-native-maps and others. I will try to keep the tutorial up to date with the major releases on React Native CLI.

Follow this link to install the local environment. Let's go!!

Create the App

Let's create the app using npx command

npx react-native init taxiApp --version 0.64.2

Create an src folder and move the App.js file into that location. In the end, you should have ./src/App.js. We aren’t using TypeScript (TS) for this project, so remove everything related to TS and convert TypeScript App function into a regular JavaScript function.

import React from "react"
import { SafeAreaView, StatusBar, StyleSheet, Text, View } from "react-native"

const App = () => {
  return (
    <SafeAreaView>
      <StatusBar barStyle="dark-content" />
      <View style={styles.sectionContainer}>
        <Text style={styles.sectionTitle}>Welcome to Taxi App</Text>
      </View>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: "600",
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: "400",
  },
})

export default App

I have placed a temporary Welcome to Taxi App message with some styles using StyleSheet object from React Native, which is nice, but this will be temporary because we will move into Styled Components soon.

Because I moved App.js into the src folder, we have to update App.js to import the new location inside the main index.js.

From

import App from "./App"

import App from "./src/App"

Run in the Emulator

First we will need to start Metro.
To start Metro, run npx react-native start inside your React Native project folder:

npx react-native start

Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following:

npx react-native run-ios

If everything is set up correctly, you should see your new app running in your iPhone emulator shortly.

For Android, first run the Android Emulator, then run this command:

npx react-native run-android

Install React Native Maps

The default library to use for working with Maps in React Native is react-native-maps, and we're going to use that next.

npm install react-native-maps --save-exact

We will use Google Maps instead of Apple Maps because Apple Maps only works out of the box for iOS devices. To continue, we will need to have an API key for Android SDK & the same for iOS SDK. You need to create a Google billing acount, so click the link and create an account.

Google Billing Account

Once you created an account with Google Cloud, you will need to create a New Project. Inside the New Project, we will create API & Services for accessing Maps SDK for Android, Maps SDK for iOS, and more.

Create a new Project inside console.cloud.google.com
Click API & Services > Credentials.
Click on + CREATE CREDENTIALS. It will immediately give you an API key. That’s the one we’re going to use to set Google Maps on both iOS and Android.
Click on the recently created credentials to restrict the key. Search for the API restrictions section. You will see an option to Restrict key. There make sure you select Maps SDK for Android and Maps SDK for iOS.
Click Save

Build configuration on iOS

Set the usage description property

The app's Info.plist file must contain a NSLocationWhenInUseUsageDescription with a user-facing purpose string explaining clearly and completely why your app needs the location, otherwise Apple will reject your app submission.

Inside your ./ios/taxiApp/Info.plist, make sure you have this:

...
<key>NSLocationWhenInUseUsageDescription</key>
<string>In order to work we need you to grant location access</string>
...

Enabling Google Maps in iOS

If you want to enable Google Maps on iOS, copy the Google API key and edit your ./ios/taxiApp/AppDelegate.m as follows:

+ #import <GoogleMaps/GoogleMaps.h>

@implementation AppDelegate
...

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
+  [GMSServices provideAPIKey:@"_YOUR_API_KEY_"]; // add this line using the api key obtained from Google Console
...

The [GMSServices provideAPIKey] should be the first call of the method.

Add the following to your Podfile above the config = use_native_modules!:

# React Native Maps dependencies
rn_maps_path = '../node_modules/react-native-maps'
pod 'react-native-google-maps', :path => rn_maps_path
pod 'GoogleMaps'
pod 'Google-Maps-iOS-Utils'

Now, we're going to build for iOS using CocoaPods. After installing the npm package, we need to install the pod.

npx pod-install

Build configuration on Android

Configure Google Play Services. Inside android/build.gradle add this two lines:

ext {
        buildToolsVersion = "29.0.3"
        minSdkVersion = 21
        compileSdkVersion = 29
        targetSdkVersion = 29
        ndkVersion = "20.1.5948944"
        playServicesVersion = "17.0.0"    // <= 👈
        androidMapsUtilsVersion = "2.2.0" // <= 👈
    }

Specify your Google Maps API key. Add your API key to your manifest file (android/app/src/main/AndroidManifest.xml):

<application>
   <!-- You will only need to add this meta-data tag, but make sure it's a child of application -->
   <meta-data
     android:name="com.google.android.geo.API_KEY"
     android:value="Your Google maps API Key Here"/>

   <!-- You will also only need to add this uses-library tag -->
   <uses-library android:name="org.apache.http.legacy" android:required="false"/>
</application>

Start using React Native Maps

Open the App.js file and replace the content with the following code. The purpose is to show Google Map covering the device's entire screen. We're adding new styles for that:

import React from "react"
import { SafeAreaView, StatusBar, StyleSheet } from "react-native"
import MapView, { PROVIDER_GOOGLE } from "react-native-maps"

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle="dark-content" />
      <MapView
        style={styles.map}
        provider={PROVIDER_GOOGLE}
        initialRegion={{
          latitude: 57.709127,
          longitude: 11.934746,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    alignItems: "center",
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
})

export default App

If you're running the App on the Emulator, you should see something like this:

Show user location

We will ask for location permission from the user to show the user's location on the map. For that, we're going to use the package react-native-permissions. You can follow the instructions on how to set up for iOS & Android here.

npm install --save-exact react-native-permissions@3.0.1

For iOS setup you have to open the Podfile inside ios folder and add next lines of code:

# React Native Permissions
permissions_path = '../node_modules/react-native-permissions/ios'
pod 'Permission-LocationWhenInUse', :path => "#{permissions_path}/LocationWhenInUse"

Previously we already added inside Info.plist next lines, but you can double-check:

<key>NSLocationWhenInUseUsageDescription</key>
<string>In order to work we need you to grant location access</string>

Now using Cocoa Pods install the dependencies for finishing the process for ios.

npx pod-install

For Android you only have to update the android/app/src/main/AndroidManifest.xml file.

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Now, lets use react native permissions to show user location. Inside your App.js file add next lines:

import React, { useEffect } from "react"
import { SafeAreaView, StatusBar, StyleSheet } from "react-native"
import MapView, { PROVIDER_GOOGLE } from "react-native-maps"
import { check, request, PERMISSIONS, RESULTS } from "react-native-permissions" // 👈

const App = () => {
  const handleLocationPermission = async () => { // 👈
    let permissionCheck = '';
    if (Platform.OS === 'ios') {
      permissionCheck = await check(PERMISSIONS.IOS.LOCATION_WHEN_IN_USE);

      if (
        permissionCheck === RESULTS.BLOCKED ||
        permissionCheck === RESULTS.DENIED
      ) {
        const permissionRequest = await request(
          PERMISSIONS.IOS.LOCATION_WHEN_IN_USE,
        );
        permissionRequest === RESULTS.GRANTED
          ? console.warn('Location permission granted.')
          : console.warn('location permission denied.');
      }
    }

    if (Platform.OS === 'android') {
      permissionCheck = await check(PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION);

      if (
        permissionCheck === RESULTS.BLOCKED ||
        permissionCheck === RESULTS.DENIED
      ) {
        const permissionRequest = await request(
          PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION,
        );
        permissionRequest === RESULTS.GRANTED
          ? console.warn('Location permission granted.')
          : console.warn('location permission denied.');
      }
    }
  };

  useEffect(() => {
    handleLocationPermission()
  }, [])

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle="dark-content" />
      <MapView
        style={styles.map}
        provider={PROVIDER_GOOGLE}
        initialRegion={{
          latitude: 57.709127,
          longitude: 11.934746,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
        showsUserLocation={true} // 👈
      />
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    alignItems: "center",
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
})

export default App

If you run the App using the iOS Emulator you will see a Popup windows asking for permission, that you have to approve.

Once you approve, you should see a blue circle indicating your current location. If isn't that the case, perhaps it's because your Emulator isn't using a Custom Location, and you have to update that. For that, go into the Emulator menu and follow this:

Click on Features > Location > Custom Location
Type this location: Latitude: 57,705871 & Longitude: 11,938823

This location is based on the map initialRegion, which in the code above its:

initialRegion={{
    latitude: 57.709127,
    longitude: 11.934746,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
}}

You can see that my Custom Location is inside my initial map region, which is the city of Gothenburg, Sweden.

Track user Location

Previously, we only show the user's current location, but we need to track the user location continuously when the user change position. For that, we're going to use react-native-geolocation-service.

npm install react-native-geolocation-service@5.2.0 --save-exact

Setup

You can follow the more detail guide on their documentation. We already setup Location Permission for both iOS & Android. I the case for iOS we will run:

npx pod-install

Let’s update our App.js component to track the user location using Geolocation.

import React, { useEffect, useState } from "react"
import { SafeAreaView, StatusBar, StyleSheet } from "react-native"
import MapView, { PROVIDER_GOOGLE } from "react-native-maps"
import { check, request, PERMISSIONS, RESULTS } from "react-native-permissions"
import Geolocation from "react-native-geolocation-service" // 👈

const App = () => {
  const [location, setLocation] = useState(null) // 👈

  const handleLocationPermission = async () => {
    let permissionCheck = ""
    if (Platform.OS === "ios") {
      permissionCheck = await check(PERMISSIONS.IOS.LOCATION_WHEN_IN_USE)

      if (permissionCheck === RESULTS.DENIED) {
        const permissionRequest = await request(
          PERMISSIONS.IOS.LOCATION_WHEN_IN_USE
        )
        permissionRequest === RESULTS.GRANTED
          ? console.warn("Location permission granted.")
          : console.warn("Location perrmission denied.")
      }
    }

    if (Platform.OS === "android") {
      permissionCheck = await check(PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION)

      if (permissionCheck === RESULTS.DENIED) {
        const permissionRequest = await request(
          PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION
        )
        permissionRequest === RESULTS.GRANTED
          ? console.warn("Location permission granted.")
          : console.warn("Location perrmission denied.")
      }
    }
  }

  useEffect(() => {
    handleLocationPermission()
  }, [])

  useEffect(() => { // 👈
    Geolocation.getCurrentPosition(
      position => {
        const { latitude, longitude } = position.coords
        setLocation({ latitude, longitude })
      },
      error => {
        console.log(error.code, error.message)
      },
      { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
    )
  }, [])

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle="dark-content" />
      {location && ( // 👈
        <MapView
          style={styles.map}
          provider={PROVIDER_GOOGLE}
          initialRegion={{
            latitude: location.latitude,  // 👈
            longitude: location.longitude,// 👈
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
          showsUserLocation={true}
        />
      )}
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    alignItems: "center",
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
})

export default App

To resume.

Added local state using useState const [location, setLocation] = useState(null).
Using useEffect when component mount we call Geolocation service and update the location state.
Added a condition to show the <MapView /> component only if location state isn't null.

Add Custom Style & Props to MapView

We can change the colors and general look of the Google Map. Also, the MapView component comes with several valuable props we are going to add a few of them, but you can find a complete list here.

Let's create a new folder inside the src folder named styles; this will be our general styles location that we will add more
(./src/styles/index.js)

export const customStyleMap = [
  {
    elementType: "geometry",
    stylers: [
      {
        color: "#242f3e",
      },
    ],
  },
  {
    elementType: "labels.text.fill",
    stylers: [
      {
        color: "#746855",
      },
    ],
  },
  {
    elementType: "labels.text.stroke",
    stylers: [
      {
        color: "#242f3e",
      },
    ],
  },
  {
    featureType: "administrative.locality",
    elementType: "labels.text.fill",
    stylers: [
      {
        color: "#d59563",
      },
    ],
  },
  {
    featureType: "poi",
    elementType: "labels.text.fill",
    stylers: [
      {
        color: "#d59563",
      },
    ],
  },
  {
    featureType: "poi.park",
    elementType: "geometry",
    stylers: [
      {
        color: "#263c3f",
      },
    ],
  },
  {
    featureType: "poi.park",
    elementType: "labels.text.fill",
    stylers: [
      {
        color: "#6b9a76",
      },
    ],
  },
  {
    featureType: "road",
    elementType: "geometry",
    stylers: [
      {
        color: "#38414e",
      },
    ],
  },
  {
    featureType: "road",
    elementType: "geometry.stroke",
    stylers: [
      {
        color: "#212a37",
      },
    ],
  },
  {
    featureType: "road",
    elementType: "labels.text.fill",
    stylers: [
      {
        color: "#9ca5b3",
      },
    ],
  },
  {
    featureType: "road.highway",
    elementType: "geometry",
    stylers: [
      {
        color: "#746855",
      },
    ],
  },
  {
    featureType: "road.highway",
    elementType: "geometry.stroke",
    stylers: [
      {
        color: "#1f2835",
      },
    ],
  },
  {
    featureType: "road.highway",
    elementType: "labels.text.fill",
    stylers: [
      {
        color: "#f3d19c",
      },
    ],
  },
  {
    featureType: "transit",
    elementType: "geometry",
    stylers: [
      {
        color: "#2f3948",
      },
    ],
  },
  {
    featureType: "transit.station",
    elementType: "labels.text.fill",
    stylers: [
      {
        color: "#d59563",
      },
    ],
  },
  {
    featureType: "water",
    elementType: "geometry",
    stylers: [
      {
        color: "#17263c",
      },
    ],
  },
  {
    featureType: "water",
    elementType: "labels.text.fill",
    stylers: [
      {
        color: "#515c6d",
      },
    ],
  },
  {
    featureType: "water",
    elementType: "labels.text.stroke",
    stylers: [
      {
        color: "#17263c",
      },
    ],
  },
]

Now, let's create more folders inside src. Next will be the screens folder where we’re going to make our first screen named UserScreen.js. Inside UserScreen, we will move the content of our App.js. (./src/screens/UserScreen.js)

/**
 1. Copy and paste code from App.js
 2. Rename component name from App to UserScreen
 */

import React, { useEffect, useState } from "react"
import { SafeAreaView, StatusBar, StyleSheet } from "react-native"
import MapView, { PROVIDER_GOOGLE } from "react-native-maps"
import { check, request, PERMISSIONS, RESULTS } from "react-native-permissions"
import Geolocation from "react-native-geolocation-service"

const UserScreen = () => {
  const [location, setLocation] = useState(null)

  const handleLocationPermission = async () => {
    let permissionCheck = ""
    if (Platform.OS === "ios") {
      permissionCheck = await check(PERMISSIONS.IOS.LOCATION_WHEN_IN_USE)

      if (permissionCheck === RESULTS.DENIED) {
        const permissionRequest = await request(
          PERMISSIONS.IOS.LOCATION_WHEN_IN_USE
        )
        permissionRequest === RESULTS.GRANTED
          ? console.warn("Location permission granted.")
          : console.warn("Location perrmission denied.")
      }
    }

    if (Platform.OS === "android") {
      permissionCheck = await check(PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION)

      if (permissionCheck === RESULTS.DENIED) {
        const permissionRequest = await request(
          PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION
        )
        permissionRequest === RESULTS.GRANTED
          ? console.warn("Location permission granted.")
          : console.warn("Location perrmission denied.")
      }
    }
  }

  useEffect(() => {
    handleLocationPermission()
  }, [])

  useEffect(() => {
    Geolocation.getCurrentPosition(
      position => {
        const { latitude, longitude } = position.coords
        setLocation({ latitude, longitude })
      },
      error => {
        console.log(error.code, error.message)
      },
      { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
    )
  }, [])

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle="dark-content" />
      {location && (
        <MapView
          style={styles.map}
          provider={PROVIDER_GOOGLE}
          initialRegion={{
            latitude: location.latitude,
            longitude: location.longitude,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
          showsUserLocation={true}
        />
      )}
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    alignItems: "center",
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
})

export default UserScreen

After that, our App.js component no longer will have the above code. Instead, we’re going to import the <UserScreen /> component and render that. We will use React Navigation inside App.js to handle all the screens of our app in the future.

/**
  For now just import and render <UserScreen />
 */

import React from "react"
import UserScreen from "./screens/UserScreen"

const App = () => {
  return <UserScreen />
}

export default App

This is how should look our folders directory.

Finally, let's use our customMapStyle and other props into MapView on UserScreen.js

...
import {customStyleMap} from '../styles'; // 👈

const UserScreen = () => {
  ...

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle="dark-content" />
      {location && (
        <MapView
          ...
          customMapStyle={customStyleMap} // 👈
          paddingAdjustmentBehavior="automatic" // 👈
          showsMyLocationButton={true} // 👈
          showsBuildings={true} // 👈
          maxZoomLevel={17.5} // 👈
          loadingEnabled={true} // 👈
          loadingIndicatorColor="#fcb103" // 👈
          loadingBackgroundColor="#242f3e" // 👈
        />
      )}
    </SafeAreaView>
  );
};

...

export default UserScreen;

Our Map new look! 😍

Unit Test

It's Tests time! 😍

We are going to dive into our first test case for the <UserScreen /> component and we're goin to use:

Jest
React Testing Library Native 📚

So, lets install React Testing Library Native

npm install --save-dev @testing-library/react-native

Also, lets install additional jest matchers:

npm install --save-dev @testing-library/jest-native

Then automatically add it to your jest tests by using setupFilesAfterEnv option in your Jest configuration (it's usually located either in package.json under "jest" key or in a jest.config.json file):

// package.json
"jest": {
    "preset": "react-native",
    // 👇
    "setupFilesAfterEnv": [
      "@testing-library/jest-native/extend-expect"
    ]
  }

Now, we’re using a couple of libraries like Geolocation, react-native-permissions and MapView components we need to create mocks of those components/libraries. For that, let’s make a file named jest-setup.js in the root of your app. For now, we will only import jest.

// ./jest-setup.js
import { jest } from "@jest/globals"

Alright, alright, let's create our first test for the <UserScreen /> component. For that, inside src/screens, create __tests__ (double underscore, both sides) folder. Inside create the file named UserScreen.test.js.

// ./src/screens/__tests__/UserScreen.test.js

import React from "react"
import { render, waitFor } from "@testing-library/react-native"
import UserScreen from "../UserScreen"

describe("<UserScreen />", () => {
  test("should renders MapView and Marker with user current location", () => {
    render(<UserScreen />)
  })
})

Now, what happens if we try to run the test command that we already have in the package.json file?

npm run test

After running the test command, you will notice that Jest tried to run the two tests files we have. That command will run All the test files we defined in our app. We already have one test by default, and that comes from App.js file. The second test is the one that we write above.

Also, you will see that the test failed! 😱

The test failed, and it's completely normal. You can see that the issue was that Jest tried to import MapView component from react-native-maps library for the UserScreen.test.js file and it failed. That's why we need to mock react-native-maps so our test can pass.

Let's do that! 💪

Open the jest-setup.js file and mock react-native-maps.

jest.mock("react-native-maps", () => {
  const React = require("react")
  const { View } = require("react-native")
  class MockMapView extends React.Component {
    render() {
      const { testID, children, ...props } = this.props

      return (
        <View
          {...{
            ...props,
            testID,
          }}
        >
          {children}
        </View>
      )
    }
  }

  const mockMapTypes = {
    STANDARD: 0,
    SATELLITE: 1,
    HYBRID: 2,
    TERRAIN: 3,
    NONE: 4,
    MUTEDSTANDARD: 5,
  }

  return {
    __esModule: true,
    default: MockMapView,
    MAP_TYPES: mockMapTypes,
    PROVIDER_DEFAULT: "default",
    PROVIDER_GOOGLE: "google",
  }
})

We created a mock for react-native-maps. We used a React Class component, mostly because I had an issue when used a Function Component. Perhaps you could try that instead of a class. We grab whatever props our MapView component could have and also whatever content we pass as children. Lastly, we return MockMapView as default export because when we import MapView from react-native-maps you can see it is a default export.

Next, we need to tell Jest that we have a setupFiles for our tests. We do that inside our jest section on package.json.

"jest": {
    "preset": "react-native",
    "setupFilesAfterEnv": [
      "@testing-library/jest-native/extend-expect"
    ],
    // 👇
    "setupFiles": [
      "./jest-setup.js"
    ]
  }

Try to run the test command again

npm run test

And... It fail!

This time atleast isn't failing on MapView. This time is failing because of react-native-permissions. And it's because we haven't mock that one yet.

Let's do that! 💪

Go back to jest-setup.js and add this:

jest.mock("react-native-permissions", () =>
  require("react-native-permissions/mock")
)

If for some reasons you still have issues regarding export {PERMISSIONS, RESULT} then you could try to fix adding transformIgnorePatterns to your Jest config inside package.json

 "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native-permissions|)" // See I added react-native-permissions
    ],

There is one last mock that we’re missing, and that is Geolocation. Instead of mocking inside our jest-setup.js file, let's create a __mocks__ folder at the root of our project. Inside the mocks folder, add the name of the library react-native-geolocation-service.js. It has to be the same name.

// ./__mocks__/react-native-geolocation-service.js
export default {
  getCurrentPosition: jest.fn().mockImplementation(successCallback => {
    const position = {
      coords: {
        latitude: 57.7,
        longitude: 11.93,
      },
    }
    successCallback(position)
  }),
}

Phew, I think we finished mocking our libraries/components from external packages. It is time to rerun the test, but we can remove the __tests__/App.test.js file. We don’t go to test App.js for now. We‘re focusing on src/screens/__tests__/UserScreen.test.js.

npm run test

And... it should PASS!!

We only tested that the UserScreen component renders. Let's increase our code coverage by testing if the Map is rendered and called for location permissions.

// src/screens/__tests__/UserScreen.test.js
import React from "react"
import { render, waitFor } from "@testing-library/react-native"
import UserScreen from "../UserScreen"
// Import check from react-native-permissions
import { check } from "react-native-permissions"
// Import Geolocation also
import Geolocation from "react-native-geolocation-service"

describe("<UserScreen />", () => {
  test("should renders MapView and Marker with user current location", async () => {
    render(<UserScreen />)

    await waitFor(() => {
      expect(check).toHaveBeenCalledTimes(1)
      expect(Geolocation.getCurrentPosition).toHaveBeenCalledTimes(1)
    })
  })
})

We can safely import the check function from our mocked react-native-permissions library. Same for Geolocation. We use async/await and waitFor from React Testing Library Native because when component mount, we check for permissions first. Second, we call the current user location. Then we update the state with setLocation({latitude, longitude}). So, there're a couple of things going on, and we have to wait to fulfill those operations.

Let's add a testID to our MapView component to make sure that the Map is rendered. Open UserScreen component and add a testID.

...

const UserScreen = () => {
  ...

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle="dark-content" />
      {location && (
        <MapView
          testID="map" // 👈
          ...
        />
      )}
    </SafeAreaView>
  );
};

...

We also need to pass the new testID into our mocked version the MapView component. So open jest-setup.js file and add this:

jest.mock('react-native-maps', () => {
  const React = require('react');
  const {View} = require('react-native');
  class MockMapView extends React.Component {
    render() {
      const {testID, children, ...props} = this.props; // 👈

      return (
        <View
          {...{
            ...props,
            testID, // 👈
          }}>
          {children}
        </View>
      );
    }
  }

...
});

Lets add one last assertion to our UserScreen.test.js file.

import React from "react"
import { render, waitFor } from "@testing-library/react-native"
import UserScreen from "../UserScreen"
import { check } from "react-native-permissions"
import Geolocation from "react-native-geolocation-service"

describe("<UserScreen />", () => {
  test("should renders MapView and Marker with user current location", async () => {
    const { getByTestId } = render(<UserScreen />) // 👈

    await waitFor(() => {
      expect(check).toHaveBeenCalledTimes(1)
      expect(Geolocation.getCurrentPosition).toHaveBeenCalledTimes(1)
      expect(getByTestId("map")).toBeDefined() // 👈
    })
  })
})

We 're using React Testing Library Native getByTestId function to assert that the testID its defined.

🛑 Stop!

I'm finishing for now. Stay tuned for the following parts of this tutorial. Also, feel free to leave your comments.

You can reach me by email at cristian.echeverri4@gmail.com. Also, on Twitter