How to use Turf.js in a React Native app

Turf.js is a JavaScript library specifically designed for geospatial analysis and provides a wide range of tools for working with geographic data.

A step-by-step guide

Here’s a step-by-step guide on how to use Turf.js in a React Native app:

Step 1: Set up the React Native project

First, initiate the setup of the React Native project by opening the terminal and typing the following command:

npx react-native init YourProjectName

This command initiates the creation of a new project. Upon completion, navigate to the project’s directory with the following command:

cd YourProjectName

Step 2: Install Turf.js

To install Turf.js, open a terminal in the project directory and execute the following npm command:

npm install @turf/turf

Executing this command will install Turf.js. Following the installation, the subsequent step involves importing it into the React Native component.

Step 3: Import Turf.js in the React Native component

Within the component intended for Turf.js function utilization, import the necessary modules:

import * as turf from '@turf/turf';

This statement will import the Turf into the component and now you can use it.

Step 4: Use Turf.js functions

We can now use Turf.js functions in the React Native component. Here’s an example of using Turf.js to calculate the distance between two points:

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import * as turf from '@turf/turf';
const App = () => {
  // Example coordinates for two points
  const point1 = turf.point([-73.9857, 40.7484]);
  const point2 = turf.point([-74.006, 40.7128]);
  const [distance, setDistance] = useState(null);
  useEffect(() => {
    // Calculate distance between points
    const calculatedDistance = turf.distance(point1, point2);
    // Set the distance to the state
    setDistance(calculatedDistance);
    console.log('Distance between points:', calculatedDistance);
  }, [point1, point2]);
  return (
    <View>
      {distance !== null && (
        <Text>
          Distance between points: {distance.toFixed(2)} kilometers
        </Text>
      )}
    </View>
  );
};
export default App;

Step 5: Run the React Native app

The app is executable on both Android and web platforms. To run the React Native app, utilize the following commands:

To run on an Android emulator or connected device:

npm run android

To start the development server for a React app and open it in a web browser for testing and previewing the application on the web platform:

npm run web

Example

The running code example of React Native using Turf.js on a web browser is as follows:

{
  "name": "turfProject",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~48.0.18",
    "expo-status-bar": "~1.4.4",
    "react": "18.2.0",
    "react-native": "0.71.8",
    "react-native-web": "~0.18.10",
    "react-dom": "18.2.0",
    "@expo/webpack-config": "^18.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}
React Native code using Turf.js

The explanation of the code above is as follows:

  • Line 1–3: We import React and necessary hooks and components in these lines.

  • Line 5: Here, we define the functional component App.

  • Lines 7–8: In these lines, we define the example coordinates for two points using Turf.js. We have used the turf.point method with longitude and latitude coordinates.

  • Line 10: Use the useState hook to manage the distance state. Initialized a state variable distance with an initial value of null. The setDistance function is used to update the value of distance.

  • Line 12–20: The useEffect hook performs side effects in function components. In this case:

    • Line 14: Calculates the distance between points.

    • Line 17: Sets the distance to the state.

  • Line 22–31: In these lines, we return the JSX representing the UI of the component. It includes a View component containing a greeting text and, if the distance is not null, a text displaying the distance between points.

  • Line 34: This line made the App component the default module export, allowing it to be imported and used in other files.

Conclusion

In conclusion, Turf.js is a specialized JavaScript library. The Answer provided a step-by-step guide to integrate Turf.js into React Native projects. By following these steps, developers can effortlessly use Turf.js in the React Native app and enhance the application with powerful geospatial analysis functionalities, opening new possibilities for location-aware development.

Free Resources

Copyright ©2026 Educative, Inc. All rights reserved