This is an assignment project created by Carlos Zinato.
The idea of this app is to suggest places around users location using TomTom's "poiSearch" endpoint. Besides that, this project also works as a proof of concept of how easy/simple it's to make all the API request and response parsing in a native module. In this case, the iOS native module is written with Swift and the Android one with Java.
In order to run this app, I'm using the following tools and versions:
- NodeJS: 12.18.3
- yarn: 1.22.4
- Xcode: 12.2
- iOS Simulators 14.2
- Android Studio: 4.2.1
- ReactJS: 17.0.1
- React Native: 0.64.2
First clone or download this repository and in a terminal shell type:
$ yarn start
Or this one if you're not using Yarn but NPM
$ npm run start
This will clean the project, install all dependencies, prepare the Podfile for iOS and start React's Metro Bundler.
PS: Note that this script will make use of npx react-native
so you don't even need react-native cli installed on your machine
After that, in another terminal shell, cd
to the repository and use:
$ npx react-native run-ios
to run the app in an iOS simulator or
$ npx react-native run-android
to run it in an Android connected device.
Besides the React Native Native Modules written specifically for this app, there's only one dependency added to this project. This dependency is the react-native-location library. React Native doesn't implement location or geo location APIs out of the box and in their documentation they suggest users to use a community package instead.
A Swift and a Java React Native Module were made for this project in order to fetch TomTom's API and parse the responses natively.
On iOS land, this code can be accessed using Xcode by opening the file /ios/poi.xcworkspace
. There you can find three main files:
- PoiApi.swift
- PoiApi.m
- poi-Bridging-Header.h
Let's start with the simple ones first: poi-Bridging-Header.h
is just a Objective-C -> Swift bridge for our module. PoiApi.m
is where we expose our Objective-C methods to the Swift file using React Native's interfaces.
The PoiApi.swift
is where the code is. It has 4 methods:
These methods, as their names already say, receives a Data object from our API response and parses it the way we prefer to read our data structure, returning a NSDictionary
or an Array of all items already processed.
This is an exposed method that can be called from the React Native land. It receives a "configuration" object and calls TomTom's API to fetch Points Of Interest based on the search and location of the user. After fetching this data and parsing them with above mentioned methods, it returns an Array with both a summary of this query and a list of results as a Promise Resolve to the JS side of the app.
A React Native method that exposes constants that can be read from the JS part of the app
On Android land, this code can be accessed using Android Studio or any other IDE by opening the /android/
directory. On the /android/app/src/main/java/com/poi/
directory you can find two main files:
- PoiApi.java
- PoiPackage.java
The PoiPackage.java
file implements ReactPackage
class and adds our PoiPackage
module in the list of native modules that React Native needs to know to compile when building our app.
The PoiApi.java
is where the code is. It has 4 methods:
- getName: React Native's method that returns the chosen name of our Native Module so that can be used from the JS side of the app
- okRun: simply checks if we can request or not the passed URL (String)
- getConstants: A React Native method that exposes constants accessible on the JS land
- getPointsOfInterest:
This is an exposed method that can be called from the React Native land. It receives a "configuration" object and calls TomTom's API to fetch Points Of Interest based on the search and location of the user. After fetching this data it then parses it using Android's JSONObject and JSONArray in the structure we prefer to handle these results. After iterating through all the results and parsing them this method calls a Promise.resolve function so we have access to these objects on the JS side.
At ./api/NativePoiModule
we export our PoiApi
(same name for Android and iOS) Native Module and on api/index
is where we make use of it importing with NativePoiModule
. We would then have access to the getConstants
and getPointsOfInterest
native implementations. The method searchPointsOfInterest
is public and available for the search screen to use it and finally query TomTom's API.