Hey, thanks for purchasing . Here you'll find about everything you need in order to get started with launching your app. If you have any questions, don't hesitate do contact us.


is native app template written in React Native 60 that uses a Laravel 7 based backend for the API and admin panel, that allows you to start your own soundboard apps which are customizable via an easy to use admin panel.

  • Name:
  • Author: Qdev Techs
  • Version: 1.0.0
  • Release Dates: 5/27/2020
  • Last update: 5/27/2020


Mobile app
  • A MacOS device & a developer certificate for customizing and publishing your app on the AppStore.
  • A MacOS/PC device & a developer certificate for customizing and publishing your app on the Google Play Store.

To host your backend you will need a webserver with:

  • Apache webserver with mod_rewrite
  • PHP >= 7.2.5
  • BCMath PHP Extension
  • Ctype PHP Extension
  • Fileinfo PHP extension
  • JSON PHP Extension
  • Mbstring PHP Extension
  • OpenSSL PHP Extension
  • PDO PHP Extension
  • Tokenizer PHP Extension
  • XML PHP Extension

Backend Installation

In order to get your API up and running you will need to follow the steps below:

  • Rename the .env .example file to .env
  • Create a database and add it to the .env file along side your mysql credentials, an API Key and admin credentials
  • Copy the content of the `App/Backend` folder into the directory that servers your domain/ip (eg: /var/www/html/
  • SSH into your server, go to the directory you've uploaded the files and run the following commands:
  • composer install
  • php artisan migrate
  • php artisan key:generate
  • php artisan serve (to launch your app in dev mode)

Once done, you should be able to access your API at the following test route:

The Admin panel will be available at

Local env setup

Before proceeding with the install, make sure you've copied the content of App/Native App folder into a folder on your local machine, then you will have to do is to install React Native on your machine. Before doing that, make sure you have latest Node.js and npm installed and Brew if on MacOs then run: npm install -g react-native-cli.

For a more detailed tutorial on setting up your dev environment, please follow this link, then selected your operating system and target OS, using the React Native CLI Quickstart : Setting up the development environment

Configuring the app

Android setup

  • Make sure you have the latest Java SDK and Android Studio installed
  • npm install
  • Open up the android folder in Android SDK and launch an emulator
  • gradlew bundleRelease to get .aab package
  • gradlew assembleRelease to get .apks
  • npm run android:build for production build
  • Open up the android folder via Android SDK,

iOS setup

  • npm install
  • cd ios && pod install
  • cd ../ && react-native run-ios
  • Open up the Template.xcworkspace project into Xcode
  • Hit the play button in Xcode

If everything went well, by now you should be able to have your up running on your emulated device. But we are still not there yet. Next thing we have to do is to edit our App\Config\AppConfig.js following properties:

export default {
              AppName: 'My app',
              DownloadFolder: 'My app',
              APIServer: '', // URL OF Your API installation
              APIKey: 'b346d34-xx-4d77-xo18e-6222a3ac81a3', // API Key for your board
              AdMobBannerID: 'ca-app-pub-3013583685272600/1845981325', // Admob banner ID, leave empty for no ads

AdMobBannerID is the AdMobs's Ad ID code. You can see more about that in the Configuring Google AdMob section.

Customizing the app

Changing the app icon and splash screen

In order to change your icon easier, we advise on using the following helper, making sure you have latest node and image-magick (Select "Install legacy utilities (e.g. convert) on 'Select Additional Tasks' on install).

npm install -g yo generator-rn-toolbox

In order to use it, you will need a single icon file ready somewhere. Resolution of 200x200px is sufficient.

Then in your React Native project, run:

yo rn-toolbox:assets --icon

# For instance

yo rn-toolbox:assets --icon ../icon.jpg

yo rn-toolbox:assets --splash ../icon.jpg

yo rn-toolbox:assets --splash ../icon.jpg --android

yo rn-toolbox:assets --splash ../icon.jpg --ios

You will be asked for the name of your react-native project. For instance, if you created your project with react-native init MyAwesomeProject, your project name is MyAwesomeProject.

When you are asked, ? Overwrite ios/MyAwesomeProject/Images.xcassets/AppIcon.appiconset/Contents.json?, reply with Y.

Changing the app name and bundle identifier

  • Change app name on Ios & Android: Instructions
  • Change bundle name on Android: Instructions
  • Bundle name on ios can be changed from Xcode

Adding Admob

  • Adding adds via Admob is quite easy. First you will have to create an app, then create a new Ad unit of Rewarded video type, as in the image below and then copy the AdUnit id and add it to App/Config/AppConfig.js's AdMobBannerID property.

Once you've created your app and ad unit, you will also need to integrate your App ID into your android and ios projects, as shown in here:

It may take some time for the ads to "propagate" so you can even use the provided app id and ad unit to test your app in dev mode.

Generating buids

Contact us

For questions, do not hesitate to conctact us by sending us an email at or visit our site at Qdev Techs .