npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@eliav2/react-native-collapsible-view

v1.5.1

Published

A collapsible View element implemented using react-native-collapsible

Downloads

694

Readme

react-native-collapsible-view

Animated collapsible view component for React Native based on react-native-collapsible

Overview

A simple component of a common use case of collapsible - a visible title with a collapsible view beneath it.

main features

  • Super simple API but fully customizable!
  • Arrow animation indicating whether the collapsible is expanded or not.
  • unmountOnCollapse property which unmount the collapsible when it is not expanded(very useful for performance! use wisely!).
  • Support both RTL and LTR languages(if not specified, default direction based on the device language is chosen).
  • State can be managed by other component(controlled) or independently(uncontrolled).
  • Fully supported on Android, iOS and Web!

Demo

gif

collapsible-view1 2

Snack

play live on Snack! https://snack.expo.io/@eliav2/react-native-collapsible-view

Installation

$ npm install @eliav2/react-native-collapsible-view react-native-svg

// or with yarn
$ yarn add @eliav2/react-native-collapsible-view react-native-svg

you have to add react-native-svg as a direct dependency for your project so auto-linking will work properly. see details

Simple Usage

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>
  );
};

Properties

title

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=''

expanded

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}

initExpanded

if true then the collapsible will be expanded on mounting. makes a difference only when uncontrolled. examples:

  • initExpanded={true}

default value: initExpanded = {false}

unmountOnCollapse

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}

isRTL

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"

duration

sets the animation duration of both collapsible element and the arrow rotation. examples:

  • duration = 4000

default value: duration = {300}

collapsibleProps

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 = {{}}

style

give custom style to the touchable containing the collapsible(the container). examples:

  • style={{ borderWidth: 0, backgroundColor: "#6495ED" }}

default value: style={{}}

activeOpacityFeedback

determines the opacity level with the touchable is clicked. examples:

  • activeOpacityFeedback = {1} will disable any feedback.

default value: activeOpacityFeedback = {0.3}

collapsibleContainerStyle

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={{}}

arrowStyling

object with the optional following properties:

  1. size {number} - how big the arrow will be.
  2. thickness {number} - how thick the arrow will be.
  3. color {string} - color of the arrow.
  4. rounded {boolean} - make the corners of the arrow rounded or not.
  5. polylineProps {object} - optional extra properties passed down to the react-native svg component drawing the arrow. can be used in advanced customization.
  6. svgProps {object} - same as polylineProps but passed to the svg canvas. for 5-6 properties see react-native-svg.

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 = {}}

noArrow

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}

Versions

see CHANGELOG.md