How To integrate Odoo and React Native

anchit

18 October 2024

Integrating Odoo with React Native lets you extend your ERP system to use mobile platforms with ease.

This blog covers how to connect Odoo to React Native using its APIs, offering practical tips and examples to build mobile apps that enhance your ERP’s capabilitiess.

Mobikul, already offers a prebuilt mobile app for odoo e-commerce with fully loaded features for customers at its core.

Odoo is a powerful ERP platform used across industries to manage processes like inventory, CRM, sales, and HR. It offers flexibility and integrates with other systems via various API options.

In this blog, we’ll explore different Odoo integration approaches, focusing on three popular methods:

XML-RPC API
JSON-RPC API
REST API (with special mention of Webkul products for Odoo REST API integration)

After covering these, we’ll walk through coding examples for integrating Odoo’s API with a React Native app.

Odoo API Use Cases

When integrating Odoo with other systems or building custom applications APIs play a crucial role. Common Use Cases ->

Mobile Apps: You might want to build a mobile app for your Odoo users to manage CRM, inventory, or any other Odoo module. React Native is often used to create cross-platform apps that communicate with Odoo.

E-Commerce: Connecting your e-commerce platform with Odoo for inventory management, order tracking, and customer data synchronization.

Third-Party Tools: You may want to connect Odoo with third-party tools like CRM systems, HR systems, or data analytics platforms.

API Options Available in Odoo

1. XML-RPC API

XML-RPC API is the traditional way of interacting with Odoo and is widely supported. Being XML-based, it uses XML to structure the data being exchanged between the client and the server.

Coding Example: Integrating Odoo’s XML-RPC in React Native Here’s a simple integration of the XML-RPC API in React Native.

const xmlrpc = require('xmlrpc');

// Create an XML-RPC client
const client = xmlrpc.createClient({
  host: 'your-odoo-domain.com',
  port: 8069,
  path: '/xmlrpc/2/common'
});

// Authenticate the user
client.methodCall('login', &#91;'your-database', 'username', 'password'], function(error, value) {
  if (error) {
    console.log('Error:', error);
  } else {
    console.log('Logged in with user ID:', value);
  }
});

const xmlrpc = require('xmlrpc');

// Create an XML-RPC client

const client = xmlrpc.createClient({

host: 'your-odoo-domain.com',

port: 8069,

path: '/xmlrpc/2/common'

});

// Authenticate the user

client.methodCall('login', ['your-database', 'username', 'password'], function(error, value) {

if (error) {

console.log('Error:', error);

} else {

console.log('Logged in with user ID:', value);

}

});

2. JSON-RPC API

The JSON-RPC API is newer and more widely adopted in modern applications. A lightweight remote procedure call (RPC) protocol encoded in JSON, which makes it easier to work with and more efficient.

Coding Example: Integrating Odoo’s JSON-RPC in React Native

Here’s a basic integration of the JSON-RPC API in React Native.

import axios from 'axios';

const ODOO_URL = 'https://your-odoo-domain.com/jsonrpc';

// Example JSON-RPC call to authenticate the user
const loginToOdoo = async () =&gt; {
  const response = await axios.post(ODOO_URL, {
    jsonrpc: "2.0",
    method: "call",
    params: {
      service: "common",
      method: "login",
      args: &#91;'your-database', 'username', 'password'],
    },
    id: Math.floor(Math.random() * 1000),
  });

  console.log('Login response:', response.data.result);
};

loginToOdoo();

import axios from 'axios';

const ODOO_URL = 'https://your-odoo-domain.com/jsonrpc';

// Example JSON-RPC call to authenticate the user

const loginToOdoo = async () => {

const response = await axios.post(ODOO_URL, {

jsonrpc: "2.0",

method: "call",

params: {

service: "common",

method: "login",

args: ['your-database', 'username', 'password'],

id: Math.floor(Math.random() * 1000),

});

console.log('Login response:', response.data.result);

};

loginToOdoo();

3. REST API (Promoting Webkul Products)

While Odoo doesn’t natively offer a REST API, you can enable RESTful API integration using third-party modules like from Webkul.

REST APIs are ideal for modern web and mobile app development because they work seamlessly with HTTP methods (GET, POST, PUT, DELETE).

Webkul offers a top-rated Odoo REST API module that extends Odoo’s core features as RESTful services, ideal for mobile apps. REST APIs are easier to integrate with frameworks like React Native.

You can check out Webkul’s Odoo REST API here: Webkul Odoo REST API.

Coding Example: Integrating Odoo’s REST API in React Native (via Webkul’s API) Here’s a sample React Native integration using REST API provided by Webkul:

import axios from 'axios';

const ODOO_REST_API_URL = 'https://your-odoo-domain.com/webkul_api_endpoint';

// Function to fetch data from Odoo using REST API
const fetchOdooData = async () =&gt; {
  try {
    const response = await axios.get(`${ODOO_REST_API_URL}/get_products`, {
      headers: {
        'Authorization': `Bearer your-api-token`
      }
    });
    
    console.log('Products:', response.data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

fetchOdooData();

import axios from 'axios';

const ODOO_REST_API_URL = 'https://your-odoo-domain.com/webkul_api_endpoint';

// Function to fetch data from Odoo using REST API

const fetchOdooData = async () => {

try {

const response = await axios.get(`${ODOO_REST_API_URL}/get_products`, {

headers: {

'Authorization': `Bearer your-api-token`

}

});

console.log('Products:', response.data);

} catch (error) {

console.error('Error fetching data:', error);

}

};

fetchOdooData();

Comparing XML-RPC, JSON-RPC, and REST API

Feature	XML-RPC	JSON-RPC	REST API (Webkul)
Data Format	XML	JSON	JSON
Complexity	Verbose	Lightweight	Lightweight
Performance	Slower due to XML	Faster	Fastest (due to REST)
Ease of Use	Difficult to parse XML	Easy to parse JSON	Easiest (via HTTP)
Libraries Available	Wide	Limited	Standard HTTP libraries
Ideal For	Older apps, full Odoo	Modern apps	Modern apps & Mobile

Conclusion

When integrating Odoo with React Native, XML-RPC is stable but slower, JSON-RPC is faster and modern, and REST APIs using tools like Webkul’s module offer the best scalability and ease of us

Choosing the right API for your app’s needs ensures you can build a scalable, efficient, and user-friendly mobile app with Odoo. Stay tuned for more use cases and tutorials on Odoo integrations!

For any doubt, contact us at our support mail.

Thanks for paying attention!!