About

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

Requirements

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/domain.com)
• 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: http://domain.com/api/v1/APITest

The Admin panel will be available at http://domain.com/admin/

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

export default {
              AppName: 'My app',
              DownloadFolder: 'My app',
              APIServer: 'https://yourapi.com/api/v1/', // 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
            }
                

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).

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.

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:

• Android: Integrate Admob (AndroidManifest.xml or Strings.xml file)
• Ios: Integrate Admob (Info.plist file)

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

• Generatating Android build on Windows/MacOS - Official docs
• Generatating Ios build on MacOS - Official docs

Contact us

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