Last Updated on : 2024-06-05 03:14:31download
Collapsible
is used to show the animation effect of a collapse drop-down.
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;
Container style.
Type | Required | Default value |
---|---|---|
ViewPropTypes.style |
No | None |
Alignment of child elements.
Type | Required | Default value |
---|---|---|
top center bottom |
No | top |
Collapse or not.
Type | Required | Default value |
---|---|---|
boolean |
No | true |
The height to be collapsed.
Type | Required | Default value |
---|---|---|
number |
No | 0 |
Collapse animation duration.
Type | Required | Default value |
---|---|---|
number |
No | 300 |
Animation easing function.
Type | Required | Default value |
---|---|---|
Easing | No | EaseOutCubic |
Change callback method.
Type | Required | Default value |
---|---|---|
() => void |
No | null |
The child element to be collapsed.
Type | Required | Default value |
---|---|---|
ReactNode |
No | null |
Is this page helpful?
YesFeedbackIs this page helpful?
YesFeedback