My first extension


This tutorial shows how to write custom Shoutem extensions on Shoutem platform. It introduces the most important concepts. After completing it, you will have a running mobile app that uses the created custom extension with components from Shoutem UI Toolkit and retrieves content from the Shoutem Cloud. Final result of extension is open sourced.

Here’s a preview how completed app will look like.

What are extensions?

Extensions represent features in the app. App owner picks extensions which he wants to use in the app through the Shoutem builder. Shoutem prepared a bunch of open sourced extensions which you can easily customize to your needs.

About technology


Shoutem uses React and React Native as frameworks for building cross-platform apps. React is an open source JavaScript library providing a way to build user interfaces (UIs), while React Native exposes iOS and Android native components so they can be used in React environment. If you never used these technologies, our React Native school can help you!

We use JSX as a simpler way to write UI components with tags. Building an app screen with JSX is as easy as:

On top of React and React Native, we’re using Redux, a library which simplifies the state management.

Even though we use Redux, you don’t need to use anything or you can use any other state management library such as MobX.

Create extension

Best way to understand the power of extensions, is to get your hands dirty. Let’s initialize our project.