Skip to content
This repository was archived by the owner on Nov 12, 2019. It is now read-only.

Commit 390990a

Browse files
jineshshah36jineshshah36
committed
Merge pull request #2 from jineshshah36/stateless-components
Stateless components
2 parents 821a4db + e2f0de1 commit 390990a

File tree

10 files changed

+210
-168
lines changed

10 files changed

+210
-168
lines changed

‎.flowconfig

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
[ignore]
2+
3+
# We fork some components by platform.
4+
.*/*.web.js
5+
.*/*.android.js
6+
7+
# Some modules have their own node_modules with overlap
8+
.*/node_modules/node-haste/.*
9+
10+
# Ugh
11+
.*/node_modules/babel.*
12+
.*/node_modules/babylon.*
13+
.*/node_modules/invariant.*
14+
15+
# Ignore react and fbjs where there are overlaps, but don't ignore
16+
# anything that react-native relies on
17+
.*/node_modules/fbjs/lib/Map.js
18+
.*/node_modules/fbjs/lib/fetch.js
19+
.*/node_modules/fbjs/lib/ExecutionEnvironment.js
20+
.*/node_modules/fbjs/lib/ErrorUtils.js
21+
22+
# Flow has a built-in definition for the 'react' module which we prefer to use
23+
# over the currently-untyped source
24+
.*/node_modules/react/react.js
25+
.*/node_modules/react/lib/React.js
26+
.*/node_modules/react/lib/ReactDOM.js
27+
28+
.*/__mocks__/.*
29+
.*/__tests__/.*
30+
31+
.*/commoner/test/source/widget/share.js
32+
33+
# Ignore commoner tests
34+
.*/node_modules/commoner/test/.*
35+
36+
# See https://github.com/facebook/flow/issues/442
37+
.*/react-tools/node_modules/commoner/lib/reader.js
38+
39+
# Ignore jest
40+
.*/node_modules/jest-cli/.*
41+
42+
# Ignore Website
43+
.*/website/.*
44+
45+
[include]
46+
47+
[libs]
48+
node_modules/react-native/Libraries/react-native/react-native-interface.js
49+
50+
[options]
51+
module.system=haste
52+
53+
esproposal.class_static_fields=enable
54+
esproposal.class_instance_fields=enable
55+
56+
munge_underscores=true
57+
58+
module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
59+
module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\)$' -> 'RelativeImageStub'
60+
61+
suppress_type=$FlowIssue
62+
suppress_type=$FlowFixMe
63+
suppress_type=$FixMe
64+
65+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-1]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
66+
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-1]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
67+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
68+
69+
[version]
70+
0.21.0

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -343,9 +343,11 @@ To find a preview of all examples go to the [examples](https://github.com/jinesh
343343
- [iOS Light](https://github.com/jineshshah36/react-native-nav/tree/master/examples/ios-light.js)
344344
- [iOS Dark](https://github.com/jineshshah36/react-native-nav/tree/master/examples/ios-dark.js)
345345
- [iOS Colored](https://github.com/jineshshah36/react-native-nav/tree/master/examples/ios-colored.js)
346+
- [iOS Icons Buttons](https://github.com/jineshshah36/react-native-nav/tree/master/examples/ios-image-icons.js)
346347
- [Android Light](https://github.com/jineshshah36/react-native-nav/tree/master/examples/android-light.js)
347348
- [Android Dark](https://github.com/jineshshah36/react-native-nav/tree/master/examples/android-dark.js)
348349
- [Android Colored](https://github.com/jineshshah36/react-native-nav/tree/master/examples/android-colored.js)
350+
- [Android Icons Buttons](https://github.com/jineshshah36/react-native-nav/tree/master/examples/android-image-icons.js)
349351

350352
### Questions?
351353

‎components/NavButton.js

Lines changed: 24 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,10 @@
11
/* @flow */
22
import React from 'react-native'
3-
const {
4-
Platform,
5-
TouchableOpacity,
6-
Component,
7-
View,
8-
PropTypes,
9-
} = React
3+
const { Platform, TouchableOpacity, View, PropTypes } = React
104
import styles from '../styles'
115

12-
export class NavButton extends Component {
13-
static propTypes = {
14-
style: View.propTypes.style,
15-
children: PropTypes.node,
16-
onPress: PropTypes.func,
17-
}
18-
19-
static defaultProps = {
20-
style: {},
21-
}
22-
23-
getNavBarButtonStyles(): Array {
24-
const { style } = this.props
6+
function NavButton({ style, onPress, children }: Object): React.Element {
7+
const getNavBarButtonStyles = (): Array<Object> => {
258
if (Platform.OS === 'ios') {
269
return [
2710
styles.navBarButtonIOS,
@@ -33,21 +16,28 @@ export class NavButton extends Component {
3316
style,
3417
]
3518
}
36-
return null
19+
return []
3720
}
3821

39-
getTouchable(): React.Element {
40-
const { onPress, children } = this.props
41-
return (
42-
<TouchableOpacity onPress={onPress}>
43-
<View style={this.getNavBarButtonStyles()}>
44-
{children}
45-
</View>
46-
</TouchableOpacity>
47-
)
48-
}
22+
const getTouchable = () => (
23+
<TouchableOpacity onPress={onPress}>
24+
<View style={getNavBarButtonStyles()}>
25+
{children}
26+
</View>
27+
</TouchableOpacity>
28+
)
4929

50-
render(): React.Element {
51-
return this.getTouchable()
52-
}
30+
return getTouchable()
5331
}
32+
33+
NavButton.propTypes = {
34+
children: PropTypes.node,
35+
onPress: PropTypes.func,
36+
style: View.propTypes.style,
37+
}
38+
39+
NavButton.defaultProps = {
40+
style: {},
41+
}
42+
43+
export { NavButton }

‎components/NavButtonText.js

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,23 @@
1+
/* @flow */
12
import React from 'react-native'
2-
const {
3-
Text,
4-
Component,
5-
PropTypes,
6-
} = React
3+
const { Text, PropTypes } = React
74
import styles from '../styles'
85

9-
export class NavButtonText extends Component {
10-
static propTypes = {
11-
style: Text.propTypes.style,
12-
children: PropTypes.node,
13-
}
6+
function NavButtonText({ style, children }: Object): React.Element {
7+
return (
8+
<Text style={[styles.navBarButtonText, style]}>
9+
{children}
10+
</Text>
11+
)
12+
}
1413

15-
static defaultProps = {
16-
style: {},
17-
}
14+
NavButtonText.propTypes = {
15+
style: Text.propTypes.style,
16+
children: PropTypes.node,
17+
}
1818

19-
render(): React.Element {
20-
const { style, children } = this.props
21-
return (
22-
<Text style={[styles.navBarButtonText, style]}>
23-
{children}
24-
</Text>
25-
)
26-
}
19+
NavButtonText.defaultProps = {
20+
style: {},
2721
}
22+
23+
export { NavButtonText }

‎components/NavGroup.js

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,23 @@
11
/* @flow */
22
import React from 'react-native'
3-
const {
4-
View,
5-
Component,
6-
PropTypes,
7-
} = React
3+
const { View, PropTypes } = React
84
import styles from '../styles'
95

10-
export class NavGroup extends Component {
11-
static propTypes = {
12-
style: View.propTypes.style,
13-
children: PropTypes.node,
14-
}
6+
function NavGroup({ style, children }: Object): React.Element {
7+
return (
8+
<View style={[styles.navGroup, style]}>
9+
{children}
10+
</View>
11+
)
12+
}
1513

16-
static defaultProps = {
17-
style: {},
18-
}
14+
NavGroup.propTypes = {
15+
style: View.propTypes.style,
16+
children: PropTypes.node,
17+
}
1918

20-
render(): React.Element {
21-
const { style, children } = this.props
22-
return (
23-
<View style={[styles.navGroup, style]}>
24-
{children}
25-
</View>
26-
)
27-
}
19+
NavGroup.defaultProps = {
20+
style: {},
2821
}
22+
23+
export { NavGroup }

‎components/NavTitle.js

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,23 @@
11
/* @flow */
22
import React from 'react-native'
3-
const {
4-
Text,
5-
Component,
6-
PropTypes,
7-
} = React
3+
const { Text, PropTypes } = React
84
import styles from '../styles'
95

10-
export class NavTitle extends Component {
11-
static propTypes = {
12-
style: Text.propTypes.style,
13-
children: PropTypes.node,
14-
}
6+
function NavTitle({ style, children }: Object): React.Element {
7+
return (
8+
<Text style={[styles.navBarTitleText, style]}>
9+
{children}
10+
</Text>
11+
)
12+
}
1513

16-
static defaultProps = {
17-
style: {},
18-
}
14+
NavTitle.propTypes = {
15+
style: Text.propTypes.style,
16+
children: PropTypes.node,
17+
}
1918

20-
render(): React.Element {
21-
const { style, children } = this.props
22-
return (
23-
<Text style={[styles.navBarTitleText, style]}>
24-
{children}
25-
</Text>
26-
)
27-
}
19+
NavTitle.defaultProps = {
20+
style: {},
2821
}
22+
23+
export { NavTitle }

‎components/StatusBarEnhanced.js

Lines changed: 23 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,10 @@
11
/* @flow */
22
import React from 'react-native'
3-
const {
4-
Platform,
5-
Component,
6-
View,
7-
PropTypes,
8-
StatusBar,
9-
} = React
3+
const { Platform, View, PropTypes, StatusBar } = React
104
import styles from '../styles'
115

12-
export default class StatusBarEnhanced extends Component {
13-
14-
static propTypes = {
15-
statusBarTintColor: PropTypes.string,
16-
statusBar: PropTypes.object,
17-
style: View.propTypes.style,
18-
}
19-
20-
static defaultProps = {
21-
statusBarTintColor: '#fff',
22-
style: {},
23-
statusBar: {},
24-
}
25-
26-
getConfig(): Object {
27-
const { statusBar } = this.props
6+
function StatusBarEnhanced({ statusBar, style }: Object): React.Element {
7+
const getConfig = (): Object => {
288
if (Platform.OS === 'ios') {
299
const statusBarConfig = {
3010
animated: true,
@@ -44,11 +24,10 @@ export default class StatusBarEnhanced extends Component {
4424
}
4525
return Object.assign({}, statusBarConfig, statusBar)
4626
}
47-
return null
27+
return {}
4828
}
4929

50-
getStyles(): Array {
51-
const { style } = this.props
30+
const getStyles = (): Array<Object> => {
5231
if (Platform.OS === 'ios') {
5332
return [
5433
styles.statusBarIOS,
@@ -60,15 +39,24 @@ export default class StatusBarEnhanced extends Component {
6039
style,
6140
]
6241
}
63-
return null
42+
return [{}]
6443
}
6544

66-
render(): React.Element {
67-
const config: Object = this.getConfig()
68-
return (
69-
<View style={this.getStyles()}>
70-
<StatusBar {...config} />
71-
</View>
72-
)
73-
}
45+
return (
46+
<View style={getStyles()}>
47+
<StatusBar {...getConfig()} />
48+
</View>
49+
)
7450
}
51+
52+
StatusBarEnhanced.propTypes = {
53+
statusBar: PropTypes.object,
54+
style: View.propTypes.style,
55+
}
56+
57+
StatusBarEnhanced.defaultProps = {
58+
style: {},
59+
statusBar: {},
60+
}
61+
62+
export { StatusBarEnhanced }

0 commit comments

Comments
 (0)