Collapsible

Last Updated on : 2024-06-05 03:14:31download

Collapsible is used to show the animation effect of a collapse drop-down.

Code demo

Note: for more information, see Collapsible Demo.

import React from "react"; import { TouchableOpacity, Text, View } from "react-native"; import { Collapsible } from "tuya-panel-kit"; class CollapseScene extends React.PureComponent { constructor(props) { super(props); this.state = { collapsed: true, }; } onChange = () => { console.log("Change"); }; tapBtn = () => { this.setState({ collapsed: ! this.state.collapsed }); }; render() { return ( <View style={{ flex: 1 }}> <TouchableOpacity onPress={this.tapBtn} activeOpacity={0.8} style={{ backgroundColor: "#fff", height: 44, justifyContent: "center", alignItems: "center", borderBottomColor: "#eee", borderBottomWidth: 1, }} > <Text style={{ color: "#333" }}>Click me</Text> </TouchableOpacity> <Collapsible collapsed={this.state.collapsed} onChange={this.onChange} align="top" // style={{ position: 'absolute', bottom: 0 }} > <View style={{ borderRadius: 50, width: 375, height: 300, backgroundColor: "#fff", justifyContent: "center", }} > <Text style={{ backgroundColor: "#fff", textAlign: "center", color: "#333", }} > I am Content </Text> </View> </Collapsible> </View> ); } } export default CollapseScene;

API

style

Container style.

Type Required Default value
ViewPropTypes.style No None

align

Alignment of child elements.

Type Required Default value
top
center
bottom
No top

collapsed

Collapse or not.

Type Required Default value
boolean No true

collapsedHeight

The height to be collapsed.

Type Required Default value
number No 0

duration

Collapse animation duration.

Type Required Default value
number No 300

easing

Animation easing function.

Type Required Default value
Easing No EaseOutCubic

onChange

Change callback method.

Type Required Default value
() => void No null

children

The child element to be collapsed.

Type Required Default value
ReactNode No null