Version: 3.0.0-next.36

Actionsheet

We have sliced Actionsheet into multiple smaller component which not only provides more control over the the code but also makes it more readable.

Overview#

Migrating Checkbox components can broadly described in these points:

  • options (prop) → Actionsheet.Item (component).
  • Pros like cancelButtonIndex, cancelButtonIndex are no longer required as components like Actionsheet.Item can be customised as per need.
  • title (prop) → Actionsheet.Header (component).
  • show(), hide()isOpen, If true, actionsheet will be open..

Code Comparison#

import React, { Component } from 'react';
import {
Container,
Header,
Button,
Content,
ActionSheet,
Text,
} from 'native-base';
var BUTTONS = ['Option 1', 'Option 2', 'Option 3', 'Delete', 'Cancel'];
var DESTRUCTIVE_INDEX = 3;
var CANCEL_INDEX = 4;
export default class ActionSheetExample extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<Container>
<Content padder>
<Button
onPress={() =>
ActionSheet.show(
{
options: BUTTONS,
cancelButtonIndex: CANCEL_INDEX,
destructiveButtonIndex: DESTRUCTIVE_INDEX,
title: 'Header',
},
(buttonIndex) => {
this.setState({ clicked: BUTTONS[buttonIndex] });
}
)
}
>
<Text>Actionsheet</Text>
</Button>
</Content>
</Container>
);
}
}