Skip to content

Commit

Permalink
Default behaviour now is to show native-like ActionSheet for iOS Acti…
Browse files Browse the repository at this point in the history
…onSheetCustom and old version for Android. Can be changed using theme prop.
  • Loading branch information
Alessio Cancian committed Jul 1, 2021
1 parent ed2b763 commit 0e5e3db
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 4 deletions.
3 changes: 1 addition & 2 deletions lib/ActionSheetCustom.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ class ActionSheet extends React.Component {
onPress: () => {},
styles: {},
useNativeDriver: true,
theme: "default",
}

onLayout = (e: LayoutChangeEvent) => {
Expand Down Expand Up @@ -159,7 +158,7 @@ class ActionSheet extends React.Component {

render () {
const styles = getMergedStyles(this.props.styles)
const iosStyle = this.props.theme == "ios"
const iosStyle = this.props.theme ? this.props.theme == "ios" : Platform.OS == "ios"
const boxStyle = iosStyle ? styles.roundedBox : {}
const { visible, sheetAnim, scrollEnabled, translateY } = this.state
const darkMode = this._isDarkMode()
Expand Down
19 changes: 17 additions & 2 deletions lib/ts/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ type Props = {
tintColor?: string;
cancelButtonIndex?: number;
destructiveButtonIndex?: number;
theme?: "default" | "ios";
/**
* Only for Android or ActionSheetCustom
*/
Expand All @@ -32,10 +31,16 @@ type Props = {

type ActionSheetProps = Props & {
/**
* iOS only, change default theme
* Change theme color
* @default system theme color
*/
userInterfaceStyle?: "light" | "dark"
/**
* Android only.
* **ios** theme is similar to the iOS ActionSheet with rounded boxes
* @default flat
*/
theme?: "flat" | "ios"
}

export default class ActionSheet extends Component<ActionSheetProps> {
Expand All @@ -46,6 +51,16 @@ type ActionSheetCustomProps = Props | {
title?: string | React.ReactNode
message?: string | React.ReactNode
options: (string | React.ReactChild)[]

/**
* Starting from v3.0.0 ActionSheetCustom uses a native-like theme build using react-native to allow React Components as options (or title or message)
*
* **flat** is the default option for Android (use theme="flat" to use it on iOS too)
*
* Use theme="ios" to use rounded boxes (like iOS theme) on Android
* @default flat for Android and native-like for iOS
*/
theme?: "flat" | "ios"
}

export class ActionSheetCustom extends Component<ActionSheetCustomProps> {
Expand Down

0 comments on commit 0e5e3db

Please sign in to comment.