Skip to content

Commit 7adcd16

Browse files
mcnameemcnamee
committed
Upgrade RN0.28, Add Redux, Add Styleguide, Ready for Android
1 parent 03b9d76 commit 7adcd16

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+973
-329
lines changed

‎.flowconfig

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,8 @@ module.system=haste
8080
esproposal.class_static_fields=enable
8181
esproposal.class_instance_fields=enable
8282

83+
experimental.strict_type_args=true
84+
8385
munge_underscores=true
8486

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

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

9698
[version]
97-
^0.25.0
99+
^0.26.0

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ project.xcworkspace
2424

2525
# Android/IJ
2626
#
27+
*.iml
2728
.idea
2829
.gradle
2930
local.properties

‎README.md

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,17 @@ React Native Starter Kit
77

88
Contains the following items all setup and ready to go:
99

10-
1. Sidebar/Hamburger Menu via https://github.com/Kureev/react-native-side-menu
11-
2. Navigator via https://facebook.github.io/react-native/docs/navigator.html
12-
3. Custom Navbar via https://github.com/Kureev/react-native-navbar
13-
4. TabBarIOS via https://facebook.github.io/react-native/docs/tabbarios.html#content
14-
5. Form Validation via https://github.com/gcanti/tcomb-form-native
15-
6. Data persistence via https://github.com/darkrishabh/react-native-db-models
16-
7. ListView via https://facebook.github.io/react-native/docs/listview.html
17-
8. Pull to Refresh via https://facebook.github.io/react-native/docs/refreshcontrol.html
18-
9. An example directory/file structure I've found useful for scaling apps
10+
1. Redux - https://github.com/reactjs/react-redux
11+
2. Sidebar/Hamburger Menu via https://github.com/Kureev/react-native-side-menu
12+
3. Navigator via https://facebook.github.io/react-native/docs/navigator.html
13+
4. Custom Navbar via https://github.com/Kureev/react-native-navbar
14+
5. Icons via https://github.com/oblador/react-native-vector-icons
15+
6. Form Validation via https://github.com/gcanti/tcomb-form-native
16+
7. Data persistence via https://github.com/darkrishabh/react-native-db-models
17+
8. ListView via https://facebook.github.io/react-native/docs/listview.html
18+
9. Pull to Refresh via https://facebook.github.io/react-native/docs/refreshcontrol.html
19+
10. TabBarIOS via https://facebook.github.io/react-native/docs/tabbarios.html#content
20+
11. An example directory/file structure I've found useful for scaling apps
1921

2022
### Getting Started
2123

‎ReactApp/actions/sidemenu.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/**
2+
* Sidemenu Actions
3+
*
4+
* React Native Starter App
5+
* https://github.com/mcnamee/react-native-starter-app
6+
*/
7+
'use strict';
8+
9+
export function toggle() {
10+
return {
11+
type: 'SIDEMENU_TOGGLE'
12+
}
13+
}
14+
15+
export function open() {
16+
return {
17+
type: 'SIDEMENU_OPEN'
18+
}
19+
}
20+
21+
export function close() {
22+
return {
23+
type: 'SIDEMENU_CLOSE'
24+
}
25+
}

‎ReactApp/components/alerts.js

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
/**
2+
* Alerts - Status/Success/Error Messages
3+
*
4+
* USAGE:
5+
<Alerts status={'Something\'s happening...'} success={'Hello Success'} error={'Error hey'} />
6+
*
7+
* React Native Starter App
8+
* https://github.com/mcnamee/react-native-starter-app
9+
*/
10+
'use strict';
11+
12+
/* Setup ==================================================================== */
13+
import React, { Component } from 'react'
14+
import {
15+
StyleSheet,
16+
View,
17+
Text,
18+
} from 'react-native'
19+
20+
// App Globals
21+
import AppStyles from '../styles'
22+
23+
/* Component ==================================================================== */
24+
class Alerts extends Component {
25+
static propTypes = {
26+
status: React.PropTypes.string,
27+
success: React.PropTypes.string,
28+
error: React.PropTypes.string,
29+
}
30+
31+
static defaultProps = {
32+
status: '',
33+
success: '',
34+
error: '',
35+
}
36+
37+
render = () => {
38+
let { status, success, error } = this.props;
39+
40+
// Allows you to show both error and success
41+
return (
42+
<View style={styles.alerts}>
43+
{success != '' &&
44+
<View>
45+
<View style={[styles.msg]}>
46+
<Text style={[AppStyles.baseText, styles.msg_text]}>{success}</Text>
47+
</View>
48+
<View style={AppStyles.spacer_20} />
49+
</View>
50+
}
51+
52+
{status != '' &&
53+
<View>
54+
<View style={[styles.msg, styles.msgStatus]}>
55+
<Text style={[AppStyles.baseText, styles.msg_text, styles.msgStatus_text]}>{status}</Text>
56+
</View>
57+
<View style={AppStyles.spacer_20} />
58+
</View>
59+
}
60+
61+
{error != '' &&
62+
<View>
63+
<View style={[styles.msg, styles.msgError]}>
64+
<Text style={[AppStyles.baseText, styles.msg_text, styles.msgError_text]}>{error}</Text>
65+
</View>
66+
<View style={AppStyles.spacer_20} />
67+
</View>
68+
}
69+
</View>
70+
)
71+
}
72+
}
73+
74+
/* Styles ==================================================================== */
75+
const styles = StyleSheet.create({
76+
alerts: {
77+
left: 0,
78+
right: 0,
79+
},
80+
// Success
81+
msg: {
82+
right: 0,
83+
left: 0,
84+
paddingVertical: 10,
85+
paddingHorizontal: 10,
86+
borderLeftWidth: 3,
87+
borderColor: "#1C854C",
88+
backgroundColor: "#59DC9A",
89+
// borderRadius: 2,
90+
},
91+
msg_text: {
92+
textAlign: "center",
93+
color: "#16693c",
94+
fontWeight: "500"
95+
},
96+
97+
// Error
98+
msgError: {
99+
borderColor: "#C02827",
100+
backgroundColor: "#FB6567",
101+
},
102+
msgError_text: {
103+
color: "#7f1a1a",
104+
},
105+
106+
// Status
107+
msgStatus: {
108+
borderColor: "#408491",
109+
backgroundColor: "#8EDBE5",
110+
},
111+
msgStatus_text: {
112+
color: "#2f606a",
113+
},
114+
});
115+
116+
/* Export Component ==================================================================== */
117+
export default Alerts

‎ReactApp/components/button.ios.js renamed to ‎ReactApp/components/button.js

Lines changed: 36 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
<Button
55
text={text}
66
type={'outlined'}
7+
size={'medium'}
8+
disabled={false}
79
onPress={()=>{alert('Go To Entry View')}} />
810
*
911
* React Native Starter App
@@ -22,8 +24,8 @@ import {
2224
} from 'react-native'
2325

2426
// App Globals
25-
import AppStyles from '../styles.ios'
26-
import AppConfig from '../config.ios'
27+
import AppStyles from '../styles'
28+
import AppConfig from '../config'
2729

2830

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

3741
static defaultProps = {
42+
onPress: () => {}, // Do nothing
43+
type: '',
3844
text: 'Click Here',
45+
size: 'medium',
46+
disabled: false,
3947
}
4048

4149
/**
4250
* RENDER
4351
*/
4452
render = ()=> {
45-
let { text, type, onPress } = this.props;
53+
let { text, type, onPress, size, disabled } = this.props;
4654

4755
return (
48-
<TouchableOpacity onPress={onPress} activeOpacity={0.7}
49-
style={[styles.button, type == 'outlined' && styles.buttonOutline]}>
50-
<Text style={[AppStyles.baseText, styles.button_text, type == 'outlined' && styles.buttonOutline_text]}>
56+
<TouchableOpacity onPress={onPress} activeOpacity={0.7} disabled={disabled}
57+
style={[styles.button, type == 'outlined' && styles.buttonOutline, size == 'small' && styles.buttonSml, size == 'large' && styles.buttonLrg, disabled && styles.disabled]}>
58+
<Text style={[AppStyles.baseText, styles.button_text, type == 'outlined' && styles.buttonOutline_text, size == 'small' && styles.buttonSml_text, size == 'large' && styles.buttonLrg_text]}>
5159
{text}
5260
</Text>
5361
</TouchableOpacity>
@@ -84,11 +92,29 @@ const styles = StyleSheet.create({
8492
buttonOutline_text: {
8593
color: AppConfig.primaryColor,
8694
},
95+
96+
// Large
97+
buttonLrg: {
98+
height: 65,
99+
},
100+
buttonLrg_text: {
101+
fontSize: 18,
102+
},
103+
104+
// Small
105+
buttonSml: {
106+
height: 35,
107+
},
108+
buttonSml_text: {
109+
fontSize: 12,
110+
},
111+
112+
// Disabled
113+
disabled: {
114+
opacity: 25,
115+
},
87116
});
88117

89118

90119
/* Export Component ==================================================================== */
91-
module.exports = Button;
92-
module.exports.details = {
93-
title: 'Button'
94-
};
120+
export default Button

‎ReactApp/components/error.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/**
2+
* Error Screen
3+
*
4+
<Error text={'Server is down'} />
5+
*
6+
* React Native Starter App
7+
* https://github.com/mcnamee/react-native-starter-app
8+
*/
9+
'use strict';
10+
11+
/* Setup ==================================================================== */
12+
import React, { Component } from 'react'
13+
import {
14+
View,
15+
Text,
16+
} from 'react-native'
17+
import Icon from 'react-native-vector-icons/Ionicons';
18+
19+
// App Globals
20+
import AppStyles from '../styles'
21+
import AppConfig from '../config'
22+
23+
/* Component ==================================================================== */
24+
class Error extends Component {
25+
render = () => {
26+
// What are we Erroring?
27+
var text = this.props.text || 'Woops, Something wen\'t wrong.';
28+
29+
return (
30+
<View style={[AppStyles.container, AppStyles.containerCentered]}>
31+
<Icon name={'ios-alert-outline'} size={50} color={"#CCC"} />
32+
33+
<View style={[AppStyles.spacer_10]} />
34+
35+
<Text style={[AppStyles.baseText]}>{text}</Text>
36+
</View>
37+
);
38+
}
39+
}
40+
41+
/* Export Component ==================================================================== */
42+
export default Error

‎ReactApp/components/list.row.ios.js renamed to ‎ReactApp/components/list.row.js

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,11 @@ import {
2222
} from 'react-native'
2323

2424
// App Globals
25-
import AppStyles from '../styles.ios'
26-
import AppConfig from '../config.ios'
27-
25+
import AppStyles from '../styles'
26+
import AppConfig from '../config'
2827

2928
/* Component ==================================================================== */
30-
class listRow extends Component {
29+
class ListRow extends Component {
3130
static propTypes = {
3231
onPress: React.PropTypes.func.isRequired,
3332
title: React.PropTypes.string.isRequired,
@@ -103,7 +102,4 @@ const styles = StyleSheet.create({
103102
});
104103

105104
/* Export Component ==================================================================== */
106-
module.exports = listRow;
107-
module.exports.details = {
108-
title: 'listRow'
109-
};
105+
export default ListRow

0 commit comments

Comments
 (0)