Skip to content

Commit

Permalink
Upgrade RN0.28, Add Redux, Add Styleguide, Ready for Android
Browse files Browse the repository at this point in the history
  • Loading branch information
mcnamee committed Jun 30, 2016
1 parent 03b9d76 commit 7adcd16
Show file tree
Hide file tree
Showing 46 changed files with 973 additions and 329 deletions.
8 changes: 5 additions & 3 deletions .flowconfig
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,8 @@ module.system=haste
esproposal.class_static_fields=enable
esproposal.class_instance_fields=enable

experimental.strict_type_args=true

munge_underscores=true

module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
Expand All @@ -89,9 +91,9 @@ suppress_type=$FlowIssue
suppress_type=$FlowFixMe
suppress_type=$FixMe

suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-5]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-5]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-6]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-6]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy

[version]
^0.25.0
^0.26.0
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ project.xcworkspace

# Android/IJ
#
*.iml
.idea
.gradle
local.properties
Expand Down
20 changes: 11 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,17 @@ React Native Starter Kit

Contains the following items all setup and ready to go:

1. Sidebar/Hamburger Menu via https://github.com/Kureev/react-native-side-menu
2. Navigator via https://facebook.github.io/react-native/docs/navigator.html
3. Custom Navbar via https://github.com/Kureev/react-native-navbar
4. TabBarIOS via https://facebook.github.io/react-native/docs/tabbarios.html#content
5. Form Validation via https://github.com/gcanti/tcomb-form-native
6. Data persistence via https://github.com/darkrishabh/react-native-db-models
7. ListView via https://facebook.github.io/react-native/docs/listview.html
8. Pull to Refresh via https://facebook.github.io/react-native/docs/refreshcontrol.html
9. An example directory/file structure I've found useful for scaling apps
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

### Getting Started

Expand Down
25 changes: 25 additions & 0 deletions ReactApp/actions/sidemenu.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
/**
* Sidemenu Actions
*
* React Native Starter App
* https://github.com/mcnamee/react-native-starter-app
*/
'use strict';

export function toggle() {
return {
type: 'SIDEMENU_TOGGLE'
}
}

export function open() {
return {
type: 'SIDEMENU_OPEN'
}
}

export function close() {
return {
type: 'SIDEMENU_CLOSE'
}
}
117 changes: 117 additions & 0 deletions ReactApp/components/alerts.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
/**
* Alerts - Status/Success/Error Messages
*
* USAGE:
<Alerts status={'Something\'s happening...'} success={'Hello Success'} error={'Error hey'} />
*
* React Native Starter App
* https://github.com/mcnamee/react-native-starter-app
*/
'use strict';

/* Setup ==================================================================== */
import React, { Component } from 'react'
import {
StyleSheet,
View,
Text,
} from 'react-native'

// App Globals
import AppStyles from '../styles'

/* Component ==================================================================== */
class Alerts extends Component {
static propTypes = {
status: React.PropTypes.string,
success: React.PropTypes.string,
error: React.PropTypes.string,
}

static defaultProps = {
status: '',
success: '',
error: '',
}

render = () => {
let { status, success, error } = this.props;

// Allows you to show both error and success
return (
<View style={styles.alerts}>
{success != '' &&
<View>
<View style={[styles.msg]}>
<Text style={[AppStyles.baseText, styles.msg_text]}>{success}</Text>
</View>
<View style={AppStyles.spacer_20} />
</View>
}

{status != '' &&
<View>
<View style={[styles.msg, styles.msgStatus]}>
<Text style={[AppStyles.baseText, styles.msg_text, styles.msgStatus_text]}>{status}</Text>
</View>
<View style={AppStyles.spacer_20} />
</View>
}

{error != '' &&
<View>
<View style={[styles.msg, styles.msgError]}>
<Text style={[AppStyles.baseText, styles.msg_text, styles.msgError_text]}>{error}</Text>
</View>
<View style={AppStyles.spacer_20} />
</View>
}
</View>
)
}
}

/* Styles ==================================================================== */
const styles = StyleSheet.create({
alerts: {
left: 0,
right: 0,
},
// Success
msg: {
right: 0,
left: 0,
paddingVertical: 10,
paddingHorizontal: 10,
borderLeftWidth: 3,
borderColor: "#1C854C",
backgroundColor: "#59DC9A",
// borderRadius: 2,
},
msg_text: {
textAlign: "center",
color: "#16693c",
fontWeight: "500"
},

// Error
msgError: {
borderColor: "#C02827",
backgroundColor: "#FB6567",
},
msgError_text: {
color: "#7f1a1a",
},

// Status
msgStatus: {
borderColor: "#408491",
backgroundColor: "#8EDBE5",
},
msgStatus_text: {
color: "#2f606a",
},
});

/* Export Component ==================================================================== */
export default Alerts
46 changes: 36 additions & 10 deletions ReactApp/components/button.ios.js → ReactApp/components/button.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
<Button
text={text}
type={'outlined'}
size={'medium'}
disabled={false}
onPress={()=>{alert('Go To Entry View')}} />
*
* React Native Starter App
Expand All @@ -22,8 +24,8 @@ import {
} from 'react-native'

// App Globals
import AppStyles from '../styles.ios'
import AppConfig from '../config.ios'
import AppStyles from '../styles'
import AppConfig from '../config'


/* Component ==================================================================== */
Expand All @@ -32,22 +34,28 @@ class Button extends Component {
onPress: React.PropTypes.func.isRequired,
type: React.PropTypes.oneOf(['', 'outlined']),
text: React.PropTypes.string.isRequired,
size: React.PropTypes.oneOf(['', 'small', 'medium', 'large']),
disabled: React.PropTypes.bool,
}

static defaultProps = {
onPress: () => {}, // Do nothing
type: '',
text: 'Click Here',
size: 'medium',
disabled: false,
}

/**
* RENDER
*/
render = ()=> {
let { text, type, onPress } = this.props;
let { text, type, onPress, size, disabled } = this.props;

return (
<TouchableOpacity onPress={onPress} activeOpacity={0.7}
style={[styles.button, type == 'outlined' && styles.buttonOutline]}>
<Text style={[AppStyles.baseText, styles.button_text, type == 'outlined' && styles.buttonOutline_text]}>
<TouchableOpacity onPress={onPress} activeOpacity={0.7} disabled={disabled}
style={[styles.button, type == 'outlined' && styles.buttonOutline, size == 'small' && styles.buttonSml, size == 'large' && styles.buttonLrg, disabled && styles.disabled]}>
<Text style={[AppStyles.baseText, styles.button_text, type == 'outlined' && styles.buttonOutline_text, size == 'small' && styles.buttonSml_text, size == 'large' && styles.buttonLrg_text]}>
{text}
</Text>
</TouchableOpacity>
Expand Down Expand Up @@ -84,11 +92,29 @@ const styles = StyleSheet.create({
buttonOutline_text: {
color: AppConfig.primaryColor,
},

// Large
buttonLrg: {
height: 65,
},
buttonLrg_text: {
fontSize: 18,
},

// Small
buttonSml: {
height: 35,
},
buttonSml_text: {
fontSize: 12,
},

// Disabled
disabled: {
opacity: 25,
},
});


/* Export Component ==================================================================== */
module.exports = Button;
module.exports.details = {
title: 'Button'
};
export default Button
42 changes: 42 additions & 0 deletions ReactApp/components/error.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
/**
* Error Screen
*
<Error text={'Server is down'} />
*
* React Native Starter App
* https://github.com/mcnamee/react-native-starter-app
*/
'use strict';

/* Setup ==================================================================== */
import React, { Component } from 'react'
import {
View,
Text,
} from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons';

// App Globals
import AppStyles from '../styles'
import AppConfig from '../config'

/* Component ==================================================================== */
class Error extends Component {
render = () => {
// What are we Erroring?
var text = this.props.text || 'Woops, Something wen\'t wrong.';

return (
<View style={[AppStyles.container, AppStyles.containerCentered]}>
<Icon name={'ios-alert-outline'} size={50} color={"#CCC"} />

<View style={[AppStyles.spacer_10]} />

<Text style={[AppStyles.baseText]}>{text}</Text>
</View>
);
}
}

/* Export Component ==================================================================== */
export default Error
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,11 @@ import {
} from 'react-native'

// App Globals
import AppStyles from '../styles.ios'
import AppConfig from '../config.ios'

import AppStyles from '../styles'
import AppConfig from '../config'

/* Component ==================================================================== */
class listRow extends Component {
class ListRow extends Component {
static propTypes = {
onPress: React.PropTypes.func.isRequired,
title: React.PropTypes.string.isRequired,
Expand Down Expand Up @@ -103,7 +102,4 @@ const styles = StyleSheet.create({
});

/* Export Component ==================================================================== */
module.exports = listRow;
module.exports.details = {
title: 'listRow'
};
export default ListRow
Loading

0 comments on commit 7adcd16

Please sign in to comment.