https://github.com/jvaclavik/react-native-show-hide-toggle-box

React Native Toggle Box for showing/hiding content
https://github.com/jvaclavik/react-native-show-hide-toggle-box

Last synced: 2 months ago
JSON representation

React Native Toggle Box for showing/hiding content

• Host: GitHub
• URL: https://github.com/jvaclavik/react-native-show-hide-toggle-box
• Owner: jvaclavik
• License: mit
• Created: 2017-02-19T13:20:36.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-02-19T16:27:27.000Z (almost 8 years ago)
• Last Synced: 2024-04-25T01:08:26.550Z (9 months ago)
• Language: JavaScript
• Size: 290 KB
• Stars: 5
• Watchers: 2
• Forks: 3
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-show-hide-toggle-box

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

* `ToggleBox` must be surrounded with `ScrollView` (not as the closest parent)

* PRs welcome

## Demo

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

## Installation

```bash

npm i react-native-show-hide-toggle-box --save

```

or

```bash

yarn add react-native-show-hide-toggle-box --save

```

## Use

```javascript

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

...

  

    

      Hello, how are you?

    

  

```

## 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 |