Skip to content

Commit 93a91ab

Browse files
gurbelagurbela
committed
Action sheet title is not required
1 parent 4fb8eae commit 93a91ab

File tree

4 files changed

+31
-28
lines changed

4 files changed

+31
-28
lines changed

‎README.md‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ import {SafeAreaView, Text, ScrollView, TouchableOpacity} from 'react-native';
3232
import {ActionSheet} from 'react-native-actionsheet-cstm';
3333

3434
const App = () => {
35-
const [showActionSheed, setShowActionSheet] = useState<boolean>(false);
35+
const [showActionSheet, setShowActionSheet] = useState<boolean>(false);
3636

3737
const onShowActionSheet = () => {
3838
setShowActionSheet(true);
@@ -58,7 +58,7 @@ const App = () => {
5858
</TouchableOpacity>
5959

6060
<ActionSheet
61-
visible={showActionSheed}
61+
visible={showActionSheet}
6262
onClose={onCloseActionSheet}
6363
actionItems={[
6464
{
@@ -94,22 +94,22 @@ export default App;
9494

9595
## ActionSheetProps
9696

97-
| Name | Type | Default | Description |
98-
| -------------------- | -------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------- |
99-
| visible | boolean | false | Show the Action sheet |
100-
| onClose | function | null | Trigger a function asking to close the Action sheet. |
101-
| actionItems | Array<ActionItem> | null | (array of ActionItem) - a list of button |
102-
| onShow? | function | null | The onShow prop allows passing a function that will be called once the Action sheet has been shown. |
103-
| onDismiss? | function | null | The onDismiss prop allows passing a function that will be called once the Action sheet has been dismissed. |
104-
| backdropStyle? | StyleProp<ViewStyle> | null | Back drop style |
105-
| containerStyle? | StyleProp<ViewStyle> | null | Container style |
106-
| titleContainerStyle? | StyleProp<ViewStyle> | null | Container title style |
107-
| title? | string | 'Action Sheet Title' | Action sheet title |
108-
| titleTextStyle? | StyleProp<ViewStyle> | null | Action sheet title style |
109-
| cancelButtonStyle? | StyleProp<ViewStyle> | null | Action sheet cancel button style |
110-
| cancelText? | string | 'Cancel' | Action sheet cancel button title |
111-
| cancelTextStyle? | StyleProp<ViewStyle> | null | Action sheet cancel button text style |
112-
| hiddeCancel | boolean | false | Hidde the Action sheet Cancel button |
97+
| Name | Type | Default | Description |
98+
| -------------------- | -------------------- | -------- | ---------------------------------------------------------------------------------------------------------- |
99+
| visible | boolean | false | Show the Action sheet |
100+
| onClose | function | null | Trigger a function asking to close the Action sheet. |
101+
| actionItems | Array<ActionItem> | null | (array of ActionItem) - a list of button |
102+
| onShow? | function | null | The onShow prop allows passing a function that will be called once the Action sheet has been shown. |
103+
| onDismiss? | function | null | The onDismiss prop allows passing a function that will be called once the Action sheet has been dismissed. |
104+
| backdropStyle? | StyleProp<ViewStyle> | null | Back drop style |
105+
| containerStyle? | StyleProp<ViewStyle> | null | Container style |
106+
| titleContainerStyle? | StyleProp<ViewStyle> | null | Container title style |
107+
| title? | string | null | Action sheet title (Not required) |
108+
| titleTextStyle? | StyleProp<ViewStyle> | null | Action sheet title style |
109+
| cancelButtonStyle? | StyleProp<ViewStyle> | null | Action sheet cancel button style |
110+
| cancelText? | string | 'Cancel' | Action sheet cancel button title |
111+
| cancelTextStyle? | StyleProp<ViewStyle> | null | Action sheet cancel button text style |
112+
| hideCancel | boolean | false | Hidde the Action sheet Cancel button |
113113

114114
## ActionItem
115115

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-actionsheet-cstm",
3-
"version": "0.0.4",
3+
"version": "1.0.0",
44
"description": "Custom ActionSheet for React Native",
55
"main": "index.tsx",
66
"scripts": {

‎src/ActionSheet.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,15 @@ import st from './style';
1313

1414
export const ActionSheet: React.FC<ActionSheetProps> = props => {
1515
const top = new Animated.Value(100);
16-
const hiddeCancel: boolean = props.hiddeCancel || false;
16+
const hideCancel: boolean = props.hideCancel || false;
1717

1818
useEffect(() => {
1919
Animated.timing(top, {
2020
toValue: props.visible ? -1 : 100,
2121
duration: 100,
2222
delay: 5,
2323
}).start();
24-
}, [props.visible]);
24+
}, [props.visible, top]);
2525

2626
return (
2727
<Modal
@@ -38,11 +38,13 @@ export const ActionSheet: React.FC<ActionSheetProps> = props => {
3838

3939
<Animated.View style={{top}}>
4040
<View style={[st.container, st.shadow, props.containerStyle]}>
41-
<View style={[st.titleContainer, props.titleContainerStyle]}>
42-
<Text style={[st.title, props.titleTextStyle]}>
43-
{props.title || 'Action Sheet Title'}
44-
</Text>
45-
</View>
41+
{!!props.title && (
42+
<View style={[st.titleContainer, props.titleContainerStyle]}>
43+
<Text style={[st.title, props.titleTextStyle]}>
44+
{props.title}
45+
</Text>
46+
</View>
47+
)}
4648

4749
{props.actionItems.map((actionItem, i) => {
4850
return (
@@ -51,6 +53,7 @@ export const ActionSheet: React.FC<ActionSheetProps> = props => {
5153
activeOpacity={0.9}
5254
style={[
5355
st.btnContainer,
56+
i === 0 && !props.title && st.titleContainer,
5457
i === props.actionItems.length - 1
5558
? st.lastBtnContainer
5659
: st.btnContainerBorder,
@@ -64,7 +67,7 @@ export const ActionSheet: React.FC<ActionSheetProps> = props => {
6467
})}
6568
</View>
6669

67-
{!hiddeCancel && (
70+
{!hideCancel && (
6871
<TouchableOpacity
6972
activeOpacity={0.9}
7073
style={[st.shadow, st.cancelContainer, props.cancelButtonStyle]}

‎src/utils.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export interface ActionSheetProps {
2020
cancelButtonStyle?: StyleProp<ViewStyle>;
2121
cancelText?: string;
2222
cancelTextStyle?: StyleProp<ViewStyle>;
23-
hiddeCancel?: boolean;
23+
hideCancel?: boolean;
2424

2525
// Default Action Sheet Provided
2626
visible: boolean;

0 commit comments

Comments
 (0)