Shoutem is a platform that enables you to build, publish and manage high-quality native iOS and Android apps. It’s built on top of React Native and open sourced for developers. The philosophy behind Shoutem is to let you build apps efficiently without restricting you how to use React Native.
The efficiency of building apps is achieved with a simple architecture: apps are built using smaller modules called
extensions. The extension is a self-contained and complete functionality that can be reused. Everything in the app is an extension: navigation, places (list and details), push notifications, analytics, ads, etc…
Shoutem prepared and open sourced a lot of extensions that you can use in your apps. Don’t reinvent the wheel: reuse extensions which are suitable for you, customize them or create new ones. It’s the world-first WordPress-like solution for mobile apps.
Shoutem apps are managed on the beautiful web interface called the Builder. This allows people of any technical level to create apps from extensions built by Shoutem and the community. If you haven’t already, go to the Builder and create an account. Once signed in, you can create an app from some template or a blank app. Start with
News app template.
Your app is prefilled with some content.
Your app can be previewed on your device or inside the Builder. Click the Preview on device button and scan the QR code. This will lead you to download the Shoutem Preview app (available for iOS and Android) which you can use to get your app on the device fast. After the installation, Shoutem Preview will automatically open the app.
You can manage your app inside of the Builder. App structure can be seen under Screens. It starts with Main navigation which has multiple screens nested inside. Those are the starting screens of extensions which you can delete or add new ones by clicking on
+. Delete About screen by selecting it, clicking on the three dots (
...) on the top right corner and selecting Delete.
Let’s create a new extension with
Hello World screen and add it to the app.
Start by installing Shoutem CLI - tool that speeds up the development of an extension.
$ npm install -g @shoutem/cli
If previous command fails because of permission issues, you need to run it with
sudo npm install -g @shoutem/cli.
Register your developer name. Use
shoutem login command with Shoutem credentials (“tom” is used for developer name in this example).
$ shoutem login Enter your Shoutem credentials (obtained at https://builder.shoutem.com): Email: email@example.com Password: Logged in as firstname.lastname@example.org. Enter developer name. Developer name: tom Registered as `tom`.
Create new extension:
$ shoutem init hello-world Enter information about your extension. Press `return` to accept (default) values. Title: Hello World! Version: 0.0.1 Description: My first extension Initializing extension: ... Extension initialized!
shoutem init command bootstrapped the
hello-world folder with extension files. Locate to the extension folder:
$ cd hello-world
Create a screen with a shortcut (pointer to the starting screen of an extension):
$ shoutem screen add Hello --shortcut Hello Enter shortcut information: Title: Hello Screen `List` is created in file `app/screens/List.js`! Shortcut `List` is created! Shortcut `List` opens `List` screen. File `app/extension.js` was modified. File `extension.json` was modified.
Hello World screen in
app/screens/List.js file. Let’s push what we’ve built to Shoutem.
$ shoutem push Uploading `Hello World` extension to Shoutem... Success!
Install the extension to the app. Command
shoutem install lists all the available apps on which you can install the extension. Select the created app.
$ shoutem install Select app to install extension (Use arrow keys) > News app ------------- Create a new app Extension installed. See it in the builder: https://builder.shoutem.com/app/8074
Open the app in the builder. Click on the
+ next to Screens and select
Custom category. You can see your starting screen there.
Click on it to add it to the app structure.
Great! Let’s preview the app on our device. Shoutem enables you develop React Native apps without having Xcode and Android Studio installed. Moreover, you can use Windows to preview apps on iOS devices. Do
shoutem run to bundle your extensions into the app.
$ shoutem run Select your app: News app (8074) Creating the bundle for your app... ...
Once the app is bundled, CLI will print the QR code to the terminal. Scan it with with Shoutem Preview app. Make sure you’re connected to the same WiFi network on both your computer and smartphone (we’ll soon make it possible to do it without being connected to the same WiFi).
This is the result:
Well done! You’ve just built your first app using your custom built extension!
To leverage the full power of Shoutem, we’d suggest you go through My first extension tutorial, which explains the underlying concepts in more detail.