Code demo
Top drawer
import { Drawer, Utils } from 'tuya-panel-kit';
const { viewWidth, convertX: cx } = Utils.RatioUtils;
const [state, setState] = React.useState({
visible: false,
placement: 'top',
});
<Drawer
width={winWidth}
height={winHeight / 2}
hasMask={false}
placement={state.placement}
visible={state.visible}
onMaskPress={() => {
setState({ visible: false, placement: state.placement });
}}
onStateChange={state => {
console.log(state);
}}
>
<View
style={{
width: '100%',
height: '100%',
backgroundColor: 'red',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Text style={{ fontSize: 24 }}>I don't have a mask</Text>
</View>
</Drawer>
On the right side of the drawer
import { Drawer, Utils } from 'tuya-panel-kit';
const { viewWidth, convertX: cx } = Utils.RatioUtils;
const [state, setState] = React.useState({
visible: false,
placement: 'right',
});
<Drawer
width={winWidth / 2}
height={winHeight}
hasMask={true}
placement={state.placement}
visible={state.visible}
onMaskPress={() => {
setState({ visible: false, placement: state.placement });
}}
onStateChange={state => {
console.log(state);
}}
>
<View
style={{
width: '100%',
height: '100%',
backgroundColor: 'red',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Text style={{ fontSize: 24 }}>I have a mask</Text>
<TouchableOpacity
style={{
backgroundColor: '#fff',
width: 88,
height: 32,
marginTop: 20,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 12,
zIndex: 10,
}}
onPress={() => {
setState({ visible: false, placement: state.placement });
}}
>
<Text> Click Me</Text>
</TouchableOpacity>
</View>
</Drawer>
Bottom drawer
import { Drawer, Utils } from 'tuya-panel-kit';
const { viewWidth, convertX: cx } = Utils.RatioUtils;
const [state, setState] = React.useState({
visible: false,
placement: 'bottom',
});
<Drawer
width={winWidth}
height={winHeight / 2}
hasMask={false}
placement={state.placement}
visible={state.visible}
onMaskPress={() => {
setState({ visible: false, placement: state.placement });
}}
onStateChange={state => {
console.log(state);
}}
>
<View
style={{
width: '100%',
height: '100%',
backgroundColor: 'red',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Text style={{ fontSize: 24 }}>I don't have a mask</Text>
</View>
</Drawer>
On the left side of the drawer
import { Drawer, Utils } from 'tuya-panel-kit';
const { viewWidth, convertX: cx } = Utils.RatioUtils;
const [state, setState] = React.useState({
visible: false,
placement: 'left',
});
<Drawer
width={winWidth / 2}
height={winHeight}
hasMask={true}
placement={state.placement}
visible={state.visible}
onMaskPress={() => {
setState({ visible: false, placement: state.placement });
}}
onStateChange={state => {
console.log(state);
}}
>
<View
style={{
width: '100%',
height: '100%',
backgroundColor: 'red',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Text style={{ fontSize: 24 }}>I have a mask</Text>
<TouchableOpacity
style={{
backgroundColor: '#fff',
width: 88,
height: 32,
marginTop: 20,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 12,
zIndex: 10,
}}
onPress={() => {
setState({ visible: false, placement: state.placement });
}}
>
<Text> Click Me</Text>
</TouchableOpacity>
</View>
</Drawer>
API
Drawer
| Name | Description | Type | Default |
|---|
| visible | Drawer open | boolean | false |
| children | Customize child components | ReactNode | null |
| maskStyle | Mask style | StyleProp | null |
| drawerStyle | Drawer style | StyleProp | null |
| style | Outermost container | StyleProp | null |
| placement | Direction of drawer appearance | "left" | "right" | "top" | "bottom" | 'left' |
| onMaskPress | Click the mask callback | () => void | null |
| onStateChange | Drawer state callback | (visible?: boolean) => void | null |
| width | Width | number | winWidth / 2 |
| height | Height | number | winHeight |
| maskClosable | Click on whether the mask is allowed to close | boolean | true |
| hasMask | Drawer ejection is accompanied by a mask | boolean | true |
| animationConfig | Animation configuration | { easing?: (...args: any[]) => any; duration?: number; delay?: number; isInteraction?: boolean; } | { easing: Easing.linear, duration: 400, delay: 0, isInteraction: true } |