PhoneGap Sample App - ReactJS
This sample app is an iTunes Media Finder app built with ReactJS and TouchstoneJS. TouchstoneJS is a mobile UI framework built on top of ReactJS/HTML5/CSS3 and Cordova. The sample allows you to search for songs, music videos or movies and preview them or open a result in iTunes.
You can try this sample out quickly in the web app version located here. Enter the desired search term
and criteria, then click Show Results to query the iTunes Search API.
- Create a phonegap project using the PhoneGap Desktop Application or the PhoneGap CLI
$ phonegap create myApp
- Clone/download this project
- Copy in the following from the PhoneGap React Sample into to your newly created project (overwrite the existing)
resourcesfolder for the custom icons and splash screens to be used.
- Start the server for your app using the PhoneGap CLI ((
$ phonegap serve) or PhoneGap Desktop Application
- Open the PhoneGap Developer app on your mobile device (available from app stores) and connect to the IP Address your app was served on.
See the PhoneGap Docs Quick Start for more details on this process.
To build and preview locally, install the node dependences (
$ npm install) and run the
gulp dev task. It will build the app with
browserify, create the cordova assets (www folder etc) for mobile and start a preview server at localhost:8000.
- Open your browser to http://localhost:8000
Once you've run
gulp dev you can run the app on a mobile device by building/running using the PhoneGap or Cordova CLI. Live reload will not work when running directling
with the CLI unless you just serve the app with it and pair/connect using the PhoneGap Developer app on your device. Details on how to do this can be found in the
PhoneGap Docs Quick Start.
PhoneGap CLI Instructions
phonegap run ios(or
phonegap run android)
Cordova CLI Instructions
cordova platform add ios (or cordova platform add android)
Select Control Issue
- If you build locally, you may find an issue with the select control use for selecting the media type (song, music video, movie), where it doesn't
select it properly. This is due to an issue with the version of the
LabelSelectsource that is currently being retrieved from TouchstoneJS in npm. To fix it, you can either get the latest TouchstoneJS project clone and
npm linkto that instead, or use the code in the LabelSelectFix.js source file in the root of this sample project. Simply replace the contents of LabelSelect.js located at
<your-project>/node_modules/touchstonejs/ui/LabelSelect.jswith the contents in LabelSelectFix.js.
The plugin dependencies will be fetched and added by the PhoneGap/Cordova CLI for you upon adding the platforms since they are specified in the config.xml. However, you can check to see if they've been added by running:
$ phonegap plugin list or
$ cordova plugin list
2. cordova-plugin-device 3. cordova-plugin-statusbar 4. cordova-plugin-splashscreen 5. cordova-plugin-console 6. cordova-plugin-inappbrowser
You can manually add them with the CLI:
$ cordova plugin add cordova-plugin-whitelist
$ phonegap plugin add cordova-plugin-whitelist