Collapsible
Reusable Collapsible component
Example
import {
Collapsible,
Typography,
} from '@lad-tech/mobydick-core';
export const CollapsibleWidget = () => {
return (
<Collapsible title={'Collapsible'}>
<Typography>
Component to wrap content in Collapsible element with trigger to open
and close
</Typography>
</Collapsible>
);
};
Props
TouchableOpacity Props
Inherits TouchableOpacity Props.
title
| TYPE |
|---|
| string |
Title for Collapsible
duration
| TYPE | DEFAULT |
|---|---|
| number | 250 |
Duration animation in milliseconds
containerStyle
| TYPE |
|---|
| ViewStyle |
Custom styles for collapsible container
headerStyle
| TYPE |
|---|
| ViewStyle |
Custom styles for collapsible header
titleStyle
| TYPE |
|---|
| TextStyle |
Custom styles for collapsible title
fontTitle
| Type | DEFAULT |
|---|---|
| TypographyProp | 'SemiBold-Secondary-M' |
Font for title
typeAnimation
| TYPE | DEFAULT |
|---|---|
| LayoutAnimationType | 'easeInEaseOut' |
An enumeration of animation types to be used
creationPropAnimation
| TYPE | DEFAULT |
|---|---|
| LayoutAnimationProperty | 'scaleY' |
An enumeration of layout properties to be animated to be used
numberOfLines
| TYPE | DEFAULT |
|---|---|
| numberOfLines | 2 |
Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to 0 will result in unsetting this value, which means that no lines restriction will be applied.
initialState
| TYPE | DEFAULT |
|---|---|
| boolean | false |
Initial state
isAnimated
| TYPE | DEFAULT |
|---|---|
| boolean | true |
To use or not to use LayoutAnimation
titleBottomView
| TYPE |
|---|
| ReactElement |
any react component placed title bottom