Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
react-native-collapsible-edit
Advanced tools
Readme
Animated collapsible view component for React Native based on react-native-collapsible
A simple component of a common use case of collapsible - a visible title with a collapsible view beneath it.
play live on Snack! https://snack.expo.io/@eliav2/react-native-collapsible-view
$ npm install @eliav2/react-native-collapsible-view
// or with yarn
$ yarn add @eliav2/react-native-collapsible-view
import React from "react";
import { Text } from "react-native";
import CollapsibleView from "@eliav2/react-native-collapsible-view";
export default () => {
return (
<CollapsibleView title="Simple Collapsible View">
<Text>hey there!</Text>
</CollapsibleView>
);
};
can be string, or jsx element. in case of string a default styling is chosen. examples:
title={"Cool View"}
title={<Text style={{ color: "red", fontSize: 36, fontStyle: "italic" }}>Custom Styling</Text>}
default value: title=''
use this property to control the collapsible state by his parent(or some other component). if a value for expanded is given(true or false) - then his state is managed by his parent only(pressing on the collapsible directly will not toggle his state).
if given - the collapsible considered as controlled
(by other component),if not, the collapsible is uncontrolled
(default).
examples:
expanded={true}
default value: expanded = {null}
if true then the collapsible will be expanded on mounting. makes a difference only when uncontrolled. examples:
initExpanded={true}
default value: initExpanded = {false}
if true then the collapsible(beneath the title) will unmount when closing animation ends. can be very useful when considering performance! use wisely! examples:
unmountOnCollapse={true}
default value: unmountOnCollapse = {false}
can be true or false.
set isRTL=true
is your language is arabic or hebrew(text writing direction is RTL).
if not specified, default direction based on the device language is chosen.
Note - if you specify direction, the component will force that direction, means that if you provided isRTL=true
but device language is not RTL language then the flexDirection will be flipped from 'row' to 'row-reverse' so the view will look good.
examples:
isRTL={true}
default value: isRTL = "auto"
sets the animation duration of both collapsible element and the arrow rotation. examples:
duration = 4000
default value: duration = {300}
Object - This properties will be passed down to the collapsible element. These are the available properties. examples:
collapsibleProps={{ onAnimationEnd: () => alert("animation ended") }}
default value: collapsibleProps = {{}}
give custom style to the touchable containing the collapsible(the container). examples:
style={{ borderWidth: 0, backgroundColor: "#6495ED" }}
default value: style={{}}
determines the opacity level with the touchable is clicked. examples:
activeOpacityFeedback = {1}
will disable any feedback.default value: activeOpacityFeedback = {0.3}
A styling for the container of the collapsible(the entire expandable view beneath the title). can be useful in some cases, like implantation of pretty dropdown menu with absolute positioning(see example at the gif and snack demo above). examples:
collapsibleContainerStyle={{position: "absolute", top: "100%"}}
default value: collapsibleContainerStyle={{}}
object with the optional following properties:
examples:
arrowStyling={{ size: 72, rounded: true, thickness: 12, color: "purple" }}
arrowStyling={{size: 72,thickness: 12,svgProps: { style: { backgroundColor: "yellow" } },polylineProps: { strokeLinejoin: "bevel" }}}
default value: arrowStyling={ size = 24,thickness = size / 16,color = "black",rounded = false,svgProps = {},polylineProps = {}}
if set to true the arrow indicating whether the collapsible-view is expanded or not will not be displayed. examples:
noArrow = {true}
default value: noArrow = {false}
titleStyle
and titleProps
you can guess by the name. default value={}.
touchableWrapperStyle
A styling for the touchable wrapper.
touchableWrapperProps
An object containing props for the touchable wrapper.
default value: {}
TouchableComponent
Pressable Component for the touchable wrapper.
examples:
TouchableComponent={TouchableHighlight}
.default value: TouchableComponent={TouchableOpacity}
see CHANGELOG.md
FAQs
A collapsible View element implemented using react-native-collapsible
The npm package react-native-collapsible-edit receives a total of 2 weekly downloads. As such, react-native-collapsible-edit popularity was classified as not popular.
We found that react-native-collapsible-edit demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.