# react-native-togglebox

> React Native Component for displaying content in an animated accordian style container. Based on https://github.com/jvaclavik/react-native-show-hide-toggle-box

Latest version **1.0.3** (published 2017-12-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-togglebox
pnpm add react-native-togglebox
yarn add react-native-togglebox
bun add react-native-togglebox
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2017-12-04 |
| First published | 2017-07-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Paul McBride |
| Maintainers | thepaulmcbride |
| Keywords | react-component, react-native, ios, android, toggle, display, visibility |

## Links

- npm: https://www.npmjs.com/package/react-native-togglebox
- Repository: https://github.com/thepaulmcbride/react-native-togglebox
- Homepage: https://github.com/thepaulmcbride/react-native-togglebox#readme
- Issues: https://github.com/thepaulmcbride/react-native-togglebox/issues
- npm.io page: https://npm.io/package/react-native-togglebox

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
- [react-style-proptype](https://npm.io/package/react-style-proptype.md) ^3.0.0

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2017-12-04
- 1.0.2 — 2017-07-20
- 1.0.1 — 2017-07-20
- 1.0.0 — 2017-07-20

## README

# react-native-togglebox
React Native Toggle Box for showing/hiding content with sliding effect. Should looks like classical [slideToggle()](http://api.jquery.com/slidetoggle/) from jQuery.

* The `ToggleBox` scene should be wrapped in a `ScrollView` to allow the page to grow as the toggle opens
* PRs welcome

## Demo

![Showtime](.github/react-native-show-hide-toggle-box.gif?raw=true "Showtime")

## Installation

```bash
npm i react-native-togglebox --save
```

or

```bash
yarn add react-native-togglebox --save
```

## Use

```javascript
import ToggleBox from 'react-native-show-hide-toggle-box'

...

<ScrollView style={styles.container}>
  <ToggleBox label='Toggle this box' value='Tap Me' style={{backgroundColor: '#ddd', borderBottomWidth: 1}}>
    <View style={{height: 300, alignItems: 'center', justifyContent: 'center', backgroundColor: '#eee'}}>
      <Text>Hello, world!</Text>
    </View>
  </ToggleBox>
</ScrollView>
```

## Props

|Prop name | Default prop | Required | Note
| --- | --- | --- | --- |
| `arrowColor` | `rgb(178, 178, 178)` | - | - |
| `arrowSize` | `30` | - | - |
| `arrowDownType` | `'keyboard-arrow-down'` | - | Icon name from`react-native-vector-icons/MaterialIcons` |
| `arrowUpType` | `'keyboard-arrow-up'` | - | Icon name from`react-native-vector-icons/MaterialIcons` |
| `children` | - | Yes | Element which you want to show inside of the box |
| `expanded` | `false` | - | Boolean if box should be expanded or not |
| `label` | - | Yes | Left label on the left of title |
| `style` | `{}` | - | Custom styles |
| `value` | `null` | - | Value on the right title |

---
_Source: https://npm.io/package/react-native-togglebox · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._