These integration guides are not official documentation and the Strapi Support Team will not provide assistance with them.

Why Use Expo?

Expo adds useful abstractions and tools that make app creation smoother. Building cross-platform mobile apps becomes much easier when Expo's managed workflow handles the complicated parts of native development. Expo shines by giving you unified access to native device features through pre-built modules—no platform-specific code needed. The framework speeds up your work with live reloading and hot module replacement, dramatically cutting down your development time. For a broader perspective on different platforms, see our mobile platform comparison.

Testing couldn't be simpler with Expo. Just grab the Expo Go app to test on real devices without building native code. Plus, you can push updates directly to users' devices through over-the-air (OTA) updates, bypassing app store reviews entirely.

For all the details on what Expo can do, check out the official Expo Documentation.

Why Use Strapi?

Strapi is the leading open-source headless CMS offering features, like customizable APIs, role-based permissions, multilingual support, etc. It simplifies content management and integrates effortlessly with modern frontend frameworks.

Explore the Strapi documentation for more details.

Strapi 5 Highlights

The out-of-the-box Strapi features allow you to get up and running in no time: 1. Single types: Create one-off pages that have a unique content structure. 2. Draft and Publish: Reduce the risk of publishing errors and streamline collaboration. 3. 100% TypeScript Support: Enjoy type safety & easy maintainability 4. Customizable API: With Strapi, you can just hop in your code editor and edit the code to fit your API to your needs. 5. Integrations: Strapi supports integrations with Cloudinary, SendGrid, Algolia, and others. 6. Editor interface: The editor allows you to pull in dynamic blocks of content. 7. Authentication: Secure and authorize access to your API with JWT or providers. 8. RBAC: Help maximize operational efficiency, reduce dev team support work, and safeguard against unauthorized access or configuration modifications. 9. i18n: Manage content in multiple languages. Easily query the different locales through the API. 10. Plugins: Customize and extend Strapi using plugins.

Learn more about Strapi 5 feature.

See Strapi in action with an interactive demo

Explore Strapi in an instant, hands-on demo set up just for you.

• Access Live Demo!

Setup Strapi 5 Headless CMS

We are going to start by setting up our Strapi 5 project with the following command:

🖐️ Note: make sure that you have created a new directory for your project.

You can find the full documentation for Strapi 5 here.

Install Strapi

npx create-strapi-app@latest server

You will be asked to choose if you would like to use Strapi Cloud we will choose to skip for now.

 Strapi   v5.6.0 🚀 Let's create your new project

 
We can't find any auth credentials in your Strapi config.

Create a free account on Strapi Cloud and benefit from:

- ✦ Blazing-fast ✦ deployment for your projects
- ✦ Exclusive ✦ access to resources to make your project successful
- An ✦ Awesome ✦ community and full enjoyment of Strapi's ecosystem

Start your 14-day free trial now!


? Please log in or sign up. 
  Login/Sign up 
❯ Skip 

After that, you will be asked how you would like to set up your project. We will choose the following options:

? Do you want to use the default database (sqlite) ? Yes
? Start with an example structure & data? Yes <-- make sure you say yes 
? Start with Typescript? Yes
? Install dependencies with npm? Yes
? Initialize a git repository? Yes

Once everything is set up and all the dependencies are installed, you can start your Strapi server with the following command:

cd server
npm run develop

You will be greeted with the Admin Create Account screen.

Go ahead and create your first Strapi user. All of this is local so you can use whatever you want.

Once you have created your user, you will be redirected to the Strapi Dashboard screen.

Publish Article Entries

Since we created our app with the example data, you should be able to navigate to your Article collection and see the data that was created for us.

Now, let's make sure that all of the data is published. If not, you can select all items via the checkbox and then click the Publish button.

Enable API Access

Once all your articles are published, we will expose our Strapi API for the Articles Collection. This can be done in Settings -> Users & Permissions plugin -> Roles -> Public -> Article.

You should have find and findOne selected. If not, go ahead and select them.

Test API

Now, if we make a GET request to http://localhost:1337/api/articles, we should see the following data for our articles.

🖐️ Note: The article covers (images) are not returned. This is because the REST API by default does not populate any relations, media fields, components, or dynamic zones.. Learn more about REST API: Population & Field Selection.

So, let's get the article covers by using the populate=* parameter: http://localhost:1337/api/articles?populate=*

Getting Started With Expo

Integrating Expo with Strapi lets you build robust cross-platform mobile apps that talk smoothly with your Strapi backend. Check out the Strapi showcase for examples of what you can create.

For more insights into Strapi's capabilities, explore the StrapiConf highlights. This page provides detailed information on product updates, features, and expert talks from the conference, helping users understand Strapi's functionalities and potential applications. To set everything up from scratch, ensure your Strapi installation is up to date. For guidance on updating, refer to Strapi version updates.

Configuring Strapi Environment

Strapi recommends using Strapi Cloud for cloud deployments, offering a complete package that includes server, database, asset storage, and CDN services. This solution is particularly advantageous for small to medium businesses seeking an all-in-one hosting and infrastructure management option.

To begin:

1. Create a .env file at your Strapi project root. If you're new to API integration, reviewing API integration basics can be helpful.
2. Define variables using Strapi's supported environment variable names for any values your Expo app needs to access.

Here's a sample .env file:

1STRAPI_ADMIN_API_URL=http://localhost:1337
2STRAPI_ADMIN_API_TOKEN=your_strapi_api_token

Strapi allows access to these variables in configuration files with the env() utility:

1module.exports = ({ env }) => ({
2  host: env('HOST', '0.0.0.0'),
3  port: env.int('PORT', 1337),
4});

This approach keeps your configuration flexible without hardcoding sensitive data. Additionally, for scheduled operations, you can utilize Strapi Cron Jobs to manage periodic tasks efficiently.

Installing and Adjusting Settings in Expo

1. Install Expo CLI globally:

   1npm install -g expo-cli

2. Create a new Expo project:

   1npx create-expo-app my-app
   2cd my-app

3. Install needed dependencies:

   1expo install @react-native-async-storage/async-storage
   2expo install @react-navigation/native @react-navigation/stack
   3npm install axios

4. Create an app.config.js file in your project root:

   1export default {
   2  expo: {
   3    name: "My Strapi App",
   4    slug: "my-strapi-app",
   5    extra: {
   6      apiUrl: process.env.EXPO_PUBLIC_API_URL,
   7      apiToken: process.env.EXPO_PUBLIC_API_TOKEN,
   8    },
   9  },
   10};

This setup is designed to connect your Expo app to environment variables, facilitating integration with a Strapi backend.

Implementing the Code to Integrate Expo With Strapi

To connect your Expo app with Strapi, follow these steps:

1. Create an API service file:

1// api.js
2import axios from 'axios';
3import Constants from 'expo-constants';
4
5const api = axios.create({
6  baseURL: Constants.manifest.extra.apiUrl,
7  headers: {
8    Authorization: `Bearer ${Constants.manifest.extra.apiToken}`,
9  },
10});
11
12export const fetchData = async (endpoint) => {
13  try {
14    const response = await api.get(endpoint);
15    return response.data;
16  } catch (error) {
17    console.error('API Error:', error);
18    throw error;
19  }
20};

2. Use this API service in your React Native components:

1import React, { useEffect, useState } from 'react';
2import { View, Text, FlatList } from 'react-native';
3import { fetchData } from './api';
4
5export default function DataList() {
6  const [data, setData] = useState([]);
7
8  useEffect(() => {
9    const loadData = async () => {
10      try {
11        const result = await fetchData('/api/your-strapi-endpoint');
12        setData(result.data);
13      } catch (error) {
14        console.error('Failed to load data:', error);
15      }
16    };
17    loadData();
18  }, []);
19
20  return (
21    <View>
22      <FlatList
23        data={data}
24        keyExtractor={(item) => item.id.toString()}
25        renderItem={({ item }) => <Text>{item.name}</Text>}
26      />
27    </View>
28  );
29}

3. To display images from Strapi, append the API URL to the image path:

1import { Image } from 'react-native';
2import Constants from 'expo-constants';
3
4function ProductImage({ imageUrl }) {
5  const fullImageUrl = `${Constants.manifest.extra.apiUrl}${imageUrl}`;
6  return <Image source={{ uri: fullImageUrl }} style={{ width: 200, height: 200 }} />;
7}

By following these steps, you can effectively integrate Expo with Strapi, allowing your mobile app to interact seamlessly with your backend. For more ways to expand your skills, check out these API project ideas to kickstart your development. To enhance your app further, consider implementing features like geolocation in apps to offer location-based services.

Congrats, well done!

Strapi Open Office Hours

If you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at Strapi's Discord Open Office Hours Monday through Friday at 12:30 pm - 1:30 pm CST: Strapi Discord Open Office Hours

For more details, visit the Strapi documentation and Expo documentation.