Getting Started

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?

As shown in the following picture, every Shoutem app is made of smaller modules, which we call extensions.

Extensions represent features that are connected to the app. Application owner connects extensions to application’s main navigation through 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 UI (View from MVC pattern), while React Native exposes iOS and Android native components so they can be used in React environment. If you never used these technologies, check out our React Native school!

We use JSX as a simpler way to write UI components. Making a screen with JSX looks like this:

On top of React and React Native, we’re using Redux, a library for simpler state management. There are several constructs in Redux explained on the next picture.

Each application has a Redux store which holds the application state (i.e. its data). When the state changes, React automatically updates the UI components. An application can dispatch Redux actions on events (such as tapping on the button) which hold information about the triggered event. Dispatched actions will be handled by Redux reducers which specify what is the next state given the action. Once reducers handle the action, an application goes to the new state and React automatically updates the UI component to reflect the new state.

Create extension

Best way to understand the power of extensions, is to get your hands dirty. We’ll start with setting up your development environment.