From fb0e700ca2fadc17fd2959504f8ac687c7499135 Mon Sep 17 00:00:00 2001 From: Matt Mcnamee Date: Fri, 1 Jul 2016 10:32:23 +1000 Subject: [PATCH] Android Ready --- README.md | 51 ++++++++++------ ReactApp/components/button.js | 3 + ReactApp/components/menu.js | 7 +-- ReactApp/containers/app.js | 4 +- ReactApp/screens/listview.js | 5 +- ReactApp/screens/soon.js | 29 +++++++++ ReactApp/screens/tabbar.js | 111 ---------------------------------- ReactApp/styles.js | 12 ++-- ios/StarterKit/AppDelegate.m | 4 +- 9 files changed, 80 insertions(+), 146 deletions(-) delete mode 100644 ReactApp/screens/tabbar.js diff --git a/README.md b/README.md index 1119a5ff..e5853a81 100644 --- a/README.md +++ b/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 ``. | +| (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? diff --git a/ReactApp/components/button.js b/ReactApp/components/button.js index 0b5f12b1..b085650a 100644 --- a/ReactApp/components/button.js +++ b/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 diff --git a/ReactApp/components/menu.js b/ReactApp/components/menu.js index ee50c08d..5e25d5df 100644 --- a/ReactApp/components/menu.js +++ b/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" }, diff --git a/ReactApp/containers/app.js b/ReactApp/containers/app.js index 973b25be..c3431a5d 100644 --- a/ReactApp/containers/app.js +++ b/ReactApp/containers/app.js @@ -33,7 +33,7 @@ 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 { @@ -41,7 +41,7 @@ class AppContainer extends Component { * On first load */ componentDidMount = () => { - StatusBar.setHidden('slide'); + StatusBar.setHidden(false, 'slide'); } /** diff --git a/ReactApp/screens/listview.js b/ReactApp/screens/listview.js index 5e623fe2..9d3c4fc4 100644 --- a/ReactApp/screens/listview.js +++ b/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={ { + this.setState({ splashScreenVisible: false }) + } + /** * RENDER */ @@ -56,6 +77,14 @@ class ComingSoon extends Component {