rn-sliding-button-panel v1.1.1

rn-sliding-button-panel

rn-sliding-button-panel is a highly customizable side panel that provides a button view by default.

However, a custom view can be provided using customPanelView property. It is recommended to set width and height of the custom view to 100% to have the best experience

RTL layout supported

For React Native version >= 0.59.0

Installation

Using npm:

npm install --save rn-sliding-button-panel

Using yarn:

yarn add rn-sliding-button-panel

Examples

Default View	Custom Panel Style	Custom Panel View

"Icon made by FreePik from www.flaticon.com"

Usage

import

import SlideButtonPanel from 'rn-sliding-button-panel';

For Default View:

<SlidingButtonPanel
  panelBackgroundColor={'rgba(40,60,90,0.8)'}
  openBtnBackgroundColor={'rgba(40,60,90,0.8)'}
  btnSeparatorColor={'black'}
  buttons={[
    {
      uri: 'ic_right',
      onPress: onRightPress,
    },
    {
      uri: 'ic_wrong',
      onPress: onWrongPress
    },
  ]}
/>

Using your own open panel button:

<SlidingButtonPanel
  hideOpenButton     // to hide default open button
  panelStyle={{borderRadius:20}}
  ref={(ref)=>{this.slidingPanelRef = ref}} // openPanel function on ref
  buttons={[
    {
      uri: 'ic_right',
      onPress: onRightPress,
    },
    {
      uri: 'ic_wrong',
      onPress: onWrongPress
    },
  ]}
/>

Define your open button and use ref to show/hide the panel like this

<TouchableHighlight onPress={()=>{this.slidingPanelRef.openPanel()}}>
  <View>
    <Text>Toggle Panel</Text>
  </View>
</TouchableHighlight>

Panel Props

Button Props

License

The MIT License