Skip to content

Commit 3a26822

Browse files
author
amoreno
committed
iOS support and add content style prop
Update package.json
1 parent 46baf6d commit 3a26822

3 files changed

Lines changed: 143 additions & 77 deletions

File tree

‎Example/index.android.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
/* @flow */
22

3-
import React, { Component } from 'react'
4-
import { AppRegistry, StyleSheet, Text, View, Button } from 'react-native'
5-
import BottomSheet from 'react-native-js-bottom-sheet'
6-
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
7-
import Entypo from 'react-native-vector-icons/Entypo'
3+
import React, { Component } from 'react';
4+
import { AppRegistry, StyleSheet, Text, View, Button } from 'react-native';
5+
import BottomSheet from 'react-native-js-bottom-sheet';
6+
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
7+
import Entypo from 'react-native-vector-icons/Entypo';
88

99
export default class Example extends React.PureComponent<{}> {
10-
bottomSheet: BottomSheet
10+
bottomSheet: BottomSheet;
1111

1212
_onPressButton = () => {
13-
this.bottomSheet.open()
14-
}
13+
this.bottomSheet.open();
14+
};
1515

1616
render() {
1717
return (
1818
<View style={styles.container}>
1919
<Button title="Open" onPress={this._onPressButton} />
2020
<BottomSheet
2121
ref={(ref: BottomSheet) => {
22-
this.bottomSheet = ref
22+
this.bottomSheet = ref;
2323
}}
2424
itemDivider={3}
2525
backButtonEnabled={true}
@@ -71,14 +71,14 @@ export default class Example extends React.PureComponent<{}> {
7171
isOpen={false}
7272
/>
7373
</View>
74-
)
74+
);
7575
}
7676
}
7777

7878
const styles = StyleSheet.create({
7979
container: {
8080
flex: 1
8181
}
82-
})
82+
});
8383

84-
AppRegistry.registerComponent('Example', () => Example)
84+
AppRegistry.registerComponent('Example', () => Example);

‎lib/BottomSheet.js‎

Lines changed: 121 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,117 +1,178 @@
11
/* @flow */
22

3-
import React from 'react'
4-
import PropTypes from 'prop-types'
3+
import React from 'react';
4+
import PropTypes from 'prop-types';
55
import {
66
Text,
77
TouchableNativeFeedback,
8+
TouchableHighlight,
89
Platform,
910
StyleSheet,
10-
ScrollView,
1111
PixelRatio,
1212
View
13-
} from 'react-native'
14-
import Modal from 'react-native-modalbox'
13+
} from 'react-native';
14+
import Modal from 'react-native-modalbox';
1515

1616
type Props = {
1717
styleContainer?: Object,
1818
coverScreen?: boolean,
1919
backButtonEnabled?: boolean,
2020
height?: number,
2121
title?: string,
22-
options: Array<Object>,
22+
options?: Array<Object>,
2323
fontFamily?: string,
2424
titleFontFamily?: string,
2525
isOpen?: boolean,
2626
cancelButtonIndex?: number,
27-
itemDivider?: number
28-
}
27+
itemDivider?: number,
28+
contentStyle?: any,
29+
children: any
30+
};
2931

3032
class BottomSheet extends React.PureComponent<Props> {
31-
bottomSheet: Modal
33+
bottomSheet: Modal;
3234

3335
static propTypes = {
3436
styleContainer: PropTypes.object,
3537
coverScreen: PropTypes.bool,
3638
backButtonEnabled: PropTypes.bool,
3739
height: PropTypes.number,
3840
title: PropTypes.string,
39-
options: PropTypes.arrayOf(PropTypes.object).isRequired,
41+
options: PropTypes.arrayOf(PropTypes.object),
4042
fontFamily: PropTypes.string,
4143
titleFontFamily: PropTypes.string,
4244
isOpen: PropTypes.bool,
4345
cancelButtonIndex: PropTypes.number,
44-
itemDivider: PropTypes.number
45-
}
46-
47-
renderOption = (options: Array<Object>) => {
48-
return options.map((item, index) => {
49-
return (
50-
<View style={{ flexDirection: 'column' }} key={index}>
51-
<TouchableNativeFeedback
52-
onPress={item.onPress}
53-
background={TouchableNativeFeedback.SelectableBackground()}>
54-
<View style={styles.item}>
55-
{item.icon}
56-
<Text style={[styles.text, { fontFamily: this.props.fontFamily }]}>
57-
{item.title}
58-
</Text>
59-
</View>
60-
</TouchableNativeFeedback>
61-
{this.props.itemDivider === index + 1 ? (
62-
<View style={styles.separator} />
63-
) : null}
64-
</View>
65-
)
66-
})
67-
}
46+
itemDivider: PropTypes.number,
47+
contentStyle: PropTypes.object
48+
};
6849

6950
/**
7051
* Open the BottomSheet
7152
*/
7253
open() {
73-
this.bottomSheet.open()
54+
this.bottomSheet.open();
7455
}
7556

7657
/**
7758
* Close the BottomSheet
7859
*/
7960
close() {
80-
this.bottomSheet.close()
61+
this.bottomSheet.close();
8162
}
8263

83-
renderTitle = () => {
84-
if (!this.props.title) {
85-
return
64+
/**
65+
* Renders content based on the options or children
66+
* @returns {*}
67+
*/
68+
renderContent() {
69+
const {
70+
options,
71+
title,
72+
children,
73+
fontFamily,
74+
itemDivider,
75+
titleFontFamily
76+
} = this.props;
77+
78+
if (options && options.length) {
79+
title && (
80+
<Text
81+
style={[
82+
styles.title,
83+
{
84+
fontFamily: titleFontFamily
85+
}
86+
]}>
87+
{title}
88+
</Text>
89+
);
90+
return options.map(
91+
(
92+
item: {
93+
onPress: Function,
94+
icon: any,
95+
title: string
96+
},
97+
index: number
98+
) => {
99+
return (
100+
<View
101+
style={{
102+
flexDirection: 'column'
103+
}}
104+
key={index}>
105+
{Platform.OS === 'android' ? (
106+
<TouchableNativeFeedback
107+
onPress={item.onPress}
108+
background={TouchableNativeFeedback.SelectableBackground()}>
109+
<View style={styles.item}>
110+
{item.icon}
111+
<Text
112+
style={[
113+
styles.text,
114+
{
115+
fontFamily: fontFamily
116+
}
117+
]}>
118+
{item.title}
119+
</Text>
120+
</View>
121+
</TouchableNativeFeedback>
122+
) : (
123+
<TouchableHighlight
124+
onPress={item.onPress}
125+
underlayColor="#F5F5F5">
126+
<View style={styles.item}>
127+
{item.icon}
128+
<Text
129+
style={[
130+
styles.text,
131+
{
132+
fontFamily: fontFamily
133+
}
134+
]}>
135+
{item.title}
136+
</Text>
137+
</View>
138+
</TouchableHighlight>
139+
)}
140+
{itemDivider === index + 1 && <View style={styles.separator} />}
141+
</View>
142+
);
143+
}
144+
);
86145
}
87-
return (
88-
<Text style={[styles.title, { fontFamily: this.props.titleFontFamily }]}>
89-
{this.props.title}
90-
</Text>
91-
)
146+
return children;
92147
}
93148

94149
render() {
95-
if (Platform.OS !== 'android') {
96-
console.warn('Bottom Sheet is only available on Android.')
97-
return null
98-
}
150+
const {
151+
height,
152+
backButtonEnabled,
153+
isOpen,
154+
coverScreen,
155+
contentStyle,
156+
styleContainer
157+
} = this.props;
99158
return (
100159
<Modal
101160
ref={(ref: any) => {
102-
this.bottomSheet = ref
161+
this.bottomSheet = ref;
103162
}}
104-
style={[this.props.styleContainer, { height: this.props.height }]}
105-
backButtonClose={this.props.backButtonEnabled}
163+
style={[
164+
styleContainer,
165+
{
166+
height: height
167+
}
168+
]}
169+
backButtonClose={backButtonEnabled}
106170
position="bottom"
107-
isOpen={this.props.isOpen}
108-
coverScreen={this.props.coverScreen}>
109-
<ScrollView style={styles.modal}>
110-
{this.renderTitle()}
111-
{this.renderOption(this.props.options)}
112-
</ScrollView>
171+
isOpen={isOpen}
172+
coverScreen={coverScreen}>
173+
<View style={[styles.modal, contentStyle]}>{this.renderContent()}</View>
113174
</Modal>
114-
)
175+
);
115176
}
116177
}
117178

@@ -146,6 +207,6 @@ const styles = StyleSheet.create({
146207
marginBottom: 8,
147208
width: '100%'
148209
}
149-
})
210+
});
150211

151-
export default BottomSheet
212+
export default BottomSheet;

‎package.json‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
{
22
"name": "react-native-js-bottom-sheet",
33
"version": "1.0.0",
4-
"description":
5-
"Modal bottom sheet component for Android that follows the guidelines of Material Design.",
4+
"description": "Modal bottom sheet component for Android and iOS that follows the guidelines of Material Design.",
65
"author": "Antonio Moreno Valls <amoreno@apsl.net>",
76
"license": "MIT",
87
"repository": {
@@ -12,21 +11,27 @@
1211
"bugs": {
1312
"url": "https://github.com/InterfaceKit/react-native-js-bottom-sheet/issues"
1413
},
15-
"tags": ["react", "react-native", "react-component", "android"],
14+
"tags": [
15+
"react",
16+
"react-native",
17+
"react-component",
18+
"android",
19+
"ios"
20+
],
1621
"keywords": [
1722
"react",
1823
"react-native",
1924
"bottom",
2025
"sheet",
2126
"android",
27+
"ïos",
2228
"react-component",
2329
"bottom-sheet",
2430
"multiplatform",
2531
"bottomsheet"
2632
],
2733
"scripts": {
28-
"prettier":
29-
"prettier --single-quote --print-width 81 --write index.js lib/BottomSheet.js",
34+
"prettier": "prettier --single-quote --print-width 81 --write index.js lib/BottomSheet.js",
3035
"start": "node node_modules/react-native/local-cli/cli.js start",
3136
"test": "jest"
3237
},

0 commit comments

Comments
 (0)