react-native-togglebox's Introduction

react-native-togglebox

React Native Toggle Box for showing/hiding content with sliding effect. Should looks like classical 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

Installation

npm i react-native-togglebox --save

yarn add react-native-togglebox --save

Use

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

react-native-togglebox's People

Contributors

Stargazers

Watchers

react-native-togglebox's Issues

Changing of label color

Hi there,
how can I change the color of the label? Specifying color in the style prop doesn't work.
Thank you

[Android] Use togglebox with listview then app is crash

Hello,

we are using this along with listview pagination and app is crash.

I using below code

                                    <LazyloadListView
                                            style={(Platform == 'ios') ? { height: height - 100 } : { height: height - 100 }}
                                            contentContainerStyle={styles.themBackgroundColor}
                                            name="listExample"
                                            dataSource={self.state.dataSource}
                                            pageSize={5}
                                            initialListSize={30}
                                            scrollRenderAheadDistance={500}
                                            renderDistance={500}
                                            enableEmptySections={true}
                                            renderRow={(track, s, rowID) =>

                                                 <ToggleBox label={track.title} arrowSize={1} textStyle={styles.toggleText}>
                                                            <View style={ApplicationStyles.padding5}>
                                                                <Text style={ApplicationStyles.font14}>{track.artist}</Text>
                                                            </View>
                                                        </ToggleBox>
                                        </LazyloadListView>

Scroll list and then click on one list then toggle box open very slow and after 2-3 min app crash.

Recommend Projects