Android Ready

README.md

@@ -1,29 +1,46 @@
 React Native Starter Kit
 =======
 
-![alt text](https://dl.dropboxusercontent.com/u/46690444/GITHUB/react-native-starter-app.png "Default Screen w/ tabs") ![alt text](https://dl.dropboxusercontent.com/u/46690444/GITHUB/react-native-starter-app-open-menu.png "Sidebar Menu open") ![alt text](https://dl.dropboxusercontent.com/u/46690444/GITHUB/react-native-starter-app-forms.png "Data validation and persistence") ![alt text](https://dl.dropboxusercontent.com/u/46690444/GITHUB/react-native-starter-app-listview.png "List View Example") ![alt text](https://dl.dropboxusercontent.com/u/46690444/GITHUB/react-native-starter-app-listview2.png "List View Example 2")
+| ![alt text](https://dl.dropboxusercontent.com/u/46690444/GITHUB/react-native.png "React Native") | ![alt text](https://dl.dropboxusercontent.com/u/46690444/GITHUB/apple-logo.jpg "iOS Ready") | ![alt text](https://dl.dropboxusercontent.com/u/46690444/GITHUB/android-logo.jpg "Android Ready") |
 
-### Out of the box
+### Screenshots
 
-Contains the following items all setup and ready to go:
+| ![alt text](https://dl.dropboxusercontent.com/u/46690444/GITHUB/react-native-starter-app.png =220x "Default Screen w/ tabs") | ![alt text](https://dl.dropboxusercontent.com/u/46690444/GITHUB/react-native-starter-app-open-menu.png =220x "Sidebar Menu open") | ![alt text](https://dl.dropboxusercontent.com/u/46690444/GITHUB/react-native-starter-app-forms.png =220x "Data validation and persistence") | 
+| ![alt text](https://dl.dropboxusercontent.com/u/46690444/GITHUB/react-native-starter-app-listview.png =220x "List View Example") | ![alt text](https://dl.dropboxusercontent.com/u/46690444/GITHUB/react-native-starter-app-listview2.png =220x "List View Example 2") | ... |
 
-1. Redux - https://github.com/reactjs/react-redux
-2. Sidebar/Hamburger Menu via https://github.com/Kureev/react-native-side-menu
-3. Navigator via https://facebook.github.io/react-native/docs/navigator.html
-4. Custom Navbar via https://github.com/Kureev/react-native-navbar
-5. Icons via https://github.com/oblador/react-native-vector-icons
-6. Form Validation via https://github.com/gcanti/tcomb-form-native
-7. Data persistence via https://github.com/darkrishabh/react-native-db-models
-8. ListView via https://facebook.github.io/react-native/docs/listview.html
-9. Pull to Refresh via https://facebook.github.io/react-native/docs/refreshcontrol.html
-10. TabBarIOS via https://facebook.github.io/react-native/docs/tabbarios.html#content
-11. An example directory/file structure I've found useful for scaling apps
+### Features
+
+| Feature | Summary |
+|---|---|
+| (Redux)[https://github.com/reactjs/react-redux] |  |
+| (Sidebar/Hamburger Menu)[https://github.com/Kureev/react-native-side-menu] | ... |
+| (Custom Navbar)[https://github.com/Kureev/react-native-navbar] | ... |
+| (Icons)[https://github.com/oblador/react-native-vector-icons] | Easily use icons from a wide range of icon libraries, it's as simple as importing the icon font and then `<Icon name={'ios-alert-outline'} size={50} color={"#CCC"} />`. |
+| (Form Validation)[https://github.com/gcanti/tcomb-form-native] | An exmaple on how to create forms with validation. |
+| (Data persistence)[https://github.com/darkrishabh/react-native-db-models] | Shows how to persist data, even after closing/reopening the app. |
+| Style Guide | A bunch of elements and components to get you started - styled headings, buttons, list rows, alerts etc. |
+| An example directory/file structure I've found useful for scaling apps | ... |
 
 ### Getting Started
 
-1. Clone this project
-2. Run `npm install` from root directory
-3. Open the /ios/StarterKit.xcodeproj file in Xcode
+1. Ensure you've followed the [React Native - Get Started Guide](https://facebook.github.io/react-native/docs/getting-started.html) for the platform/s of choice
+2. Clone this project
+3. Run `npm install` from root directory
+
+### Run on iOS
+
+1. Open the /ios/StarterKit.xcodeproj file in Xcode
+2. Run in an iOS simulator by pressing the Play (triangle) icon at the top left
+
+### Run on Android
+
+1. Start an Android Simulator first - in terminal, type `android avd`. This will open the Android Virtual Device Manager. Select a device to open
+2. Once it's running, in a new terminal tab/window, type `react-native run-android`
+
+### Opening the Debug Menu
+
+- **iOS**: CMD + D
+- **Android**: CMD + M
 
 ### Any advice?
 

ReactApp/components/button.js

@@ -79,6 +79,7 @@ const styles = StyleSheet.create({
     color: "#FFF",
     textAlign: 'center',
     fontSize: 15,
+    lineHeight: parseInt(15 + (15 * 0.5)),
     fontFamily: AppConfig.baseFont,
     fontWeight: '800',
   },
@@ -99,6 +100,7 @@ const styles = StyleSheet.create({
   },
   buttonLrg_text: {
     fontSize: 18,
+    lineHeight: parseInt(18 + (18 * 0.5)),
   },
 
   // Small
@@ -107,6 +109,7 @@ const styles = StyleSheet.create({
   },
   buttonSml_text: {
     fontSize: 12,
+    lineHeight: parseInt(12 + (12 * 0.5)),
   },
 
   // Disabled

ReactApp/components/menu.js

@@ -20,7 +20,6 @@ import AppStyles from '../styles'
 import AppConfig from '../config'
 
 // Screens
-import Index from '../screens/tabbar'
 import StyleGuide from '../screens/style.guide'
 import ComingSoon from '../screens/soon'
 import FormExample from '../screens/forms'
@@ -35,7 +34,7 @@ class Menu extends Component {
     // Initial state
     this.state = {
       menu: [
-        {title: 'Tab Bar', component: Index},
+        {title: 'Home', component: ComingSoon, props: {passProps: {placeholder: 'Hey there, you passProps bro?'}}},
         {title: 'Style Guide', component: StyleGuide},
         {title: 'Forms', component: FormExample},
         {title: 'List Example', component: ListViewExample, props: {noImages: true}},
@@ -104,9 +103,9 @@ const styles = StyleSheet.create({
   },
   menuItem_text: {
     fontSize: 18,
-    lineHeight: 18 + (18 * 0.4),
+    lineHeight: parseInt(18 + (18 * 0.5)),
     fontWeight: '500',
-    paddingTop: 10,
+    marginTop: 10,
     flex: 1,
     color: "#EEE"
   },

ReactApp/containers/app.js

@@ -33,15 +33,15 @@ import Menu from '../components/menu';
 import NavbarElements from '../components/navbar.elements';
 
 // Screens
-import Index from '../screens/tabbar';
+import Index from '../screens/soon.js';
 
 /* Component ==================================================================== */
 class AppContainer extends Component {
   /**
     * On first load
     */
   componentDidMount = () => {
-    StatusBar.setHidden('slide');
+    StatusBar.setHidden(false, 'slide');
   }
 
   /**

ReactApp/screens/listview.js

@@ -135,7 +135,7 @@ class ListViewExample extends Component {
           automaticallyAdjustContentInsets={false}
           dataSource={this.state.dataSource}
           renderRow={this._renderRow}
-          contentContainerStyle={styles.container} 
+          contentContainerStyle={AppStyles.paddingBottom} 
           refreshControl={
             <RefreshControl
               refreshing={this.state.isRefreshing}
@@ -149,9 +149,6 @@ class ListViewExample extends Component {
 
 /* Styles ==================================================================== */
 const styles = StyleSheet.create({
-  container: {
-    paddingBottom: AppConfig.tabBarHeight,
-  },
 });
 
 /* Export Component ==================================================================== */

ReactApp/screens/soon.js

@@ -13,6 +13,7 @@ import {
   View,
   Text,
   TouchableOpacity,
+  Modal,
 } from 'react-native'
 
 // App Globals
@@ -21,10 +22,23 @@ import AppStyles from '../styles'
 // Components
 import Button from '../components/button'
 
+// Screens
+import FirstLoad from './first.load'
+
 /* Component ==================================================================== */
 class ComingSoon extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      splashScreenVisible: this.props.showSplashScreen || false,
+    }
+  }
+
   static propTypes = {
     navigator: React.PropTypes.object.isRequired,
+    showSplashScreen: React.PropTypes.bool,
+    placeholder: React.PropTypes.string,
   }
 
   /**
@@ -38,6 +52,13 @@ class ComingSoon extends Component {
     });
   }
 
+  /**
+    * Splash Screen - Skip
+    */
+  onSplashSkip = () => {
+    this.setState({ splashScreenVisible: false })
+  }
+
   /**
     * RENDER
     */
@@ -56,6 +77,14 @@ class ComingSoon extends Component {
         <Button type={'outlined'}
           text={'Tap to test the back button'}
           onPress={()=>this._navigate(text)} />
+
+        <Modal animationType={'fade'} 
+          transparent={false} 
+          visible={this.state.splashScreenVisible}
+          onRequestClose={()=>{}}>
+          <FirstLoad navigator={this.props.navigator}
+            close={this.onSplashSkip} />
+        </Modal>
       </View>
     );
   }

ReactApp/styles.js

@@ -42,12 +42,12 @@ module.exports = StyleSheet.create({
     fontWeight: '500',
     color: AppConfig.textColor,
     fontSize: AppConfig.baseFontSize,
-    lineHeight: AppConfig.baseFontSize + (AppConfig.baseFontSize * 0.4),
+    lineHeight: parseInt(AppConfig.baseFontSize + (AppConfig.baseFontSize * 0.5)),
   },
   h1: {
     fontFamily: AppConfig.baseFont,
     fontSize: AppConfig.baseFontSize * 2,
-    lineHeight: (AppConfig.baseFontSize * 2) + (AppConfig.baseFontSize * 0.4),
+    lineHeight: parseInt((AppConfig.baseFontSize * 2) + (AppConfig.baseFontSize * 0.5)),
     color: AppConfig.primaryColor,
     fontWeight: '800',
     margin: 0,
@@ -60,7 +60,7 @@ module.exports = StyleSheet.create({
     fontFamily: AppConfig.baseFont,
     color: AppConfig.primaryColor,
     fontSize: AppConfig.baseFontSize * 1.5,
-    lineHeight: (AppConfig.baseFontSize * 1.5) + (AppConfig.baseFontSize * 0.4),
+    lineHeight: parseInt((AppConfig.baseFontSize * 1.5) + (AppConfig.baseFontSize * 0.5)),
     margin: 0,
     marginTop: 4,
     marginBottom: 4,
@@ -72,7 +72,7 @@ module.exports = StyleSheet.create({
     fontWeight: '500',
     color: AppConfig.primaryColor,
     fontSize: AppConfig.baseFontSize * 1.25,
-    lineHeight: (AppConfig.baseFontSize * 1.25) + (AppConfig.baseFontSize * 0.4),
+    lineHeight: parseInt((AppConfig.baseFontSize * 1.25) + (AppConfig.baseFontSize * 0.5)),
     margin: 0,
     marginTop: 4,
     marginBottom: 4,
@@ -84,7 +84,7 @@ module.exports = StyleSheet.create({
     fontWeight: '800',
     color: AppConfig.primaryColor,
     fontSize: AppConfig.baseFontSize * 1.1,
-    lineHeight: (AppConfig.baseFontSize * 1.1) + (AppConfig.baseFontSize * 0.4),
+    lineHeight: parseInt((AppConfig.baseFontSize * 1.1) + (AppConfig.baseFontSize * 0.5)),
     margin: 0,
     marginTop: 4,
     marginBottom: 4,
@@ -97,7 +97,7 @@ module.exports = StyleSheet.create({
     fontWeight: '500',
     color: AppConfig.textColor,
     fontSize: AppConfig.baseFontSize,
-    lineHeight: AppConfig.baseFontSize + (AppConfig.baseFontSize * 0.4),
+    lineHeight: parseInt(AppConfig.baseFontSize + (AppConfig.baseFontSize * 0.5)),
   },
   strong: {
     fontWeight: '900',

ios/StarterKit/AppDelegate.m

@@ -31,7 +31,7 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
    * on the same Wi-Fi network.
    */
 
-  // jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
+  // jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
 
   /**
    * OPTION 2
@@ -48,7 +48,7 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
    * Autoload which one, depending on environment type
    */
   #ifdef DEBUG
-    jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
+    jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
   #else
     jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
   #endif