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

Name	Default	Description
ref		openPanel function on ref can be used to show/hide the panel programatically
width	70	to adjust the width of the panel
height	300	to adjust the height of the panel, must be greater than 100 if provided
top	150	to adjust the top margin of the panel
alignment	'right'	position of the panel on the screen, 'left' and 'right' are supported
slidingWidth	0	extra sliding width to slide panel on to the screen
onShow	()=> {}	do something on panel show
onHide	()=> {}	do something on panel hide
panelBackgroundColor	'rgba(0,0,0,0.8)'	change the background color of the panel
panelStyle	{}	adjust the panel styling
customPanelView	null	provide your own custom view for the panel
buttons	[{}]	provide the array of data for buttons, see below for button item props
showBtnSeparator	true	hide button separators
btnIconsAnimation	true	on/off button icons animation
flipIconsInRTL	false	reverse icons in RTL layout
btnSeparatorColor	'gray'	change the color of the button separators
hideOpenButton	false	to hide default open button of the panel
openBtnBackgroundColor	'rgba(0,0,0,0.8)'	change the background color of the open button
openButtonStyle	{}	adjust styling of the open button

Button Props

Name	Default	Description
onPress	() => {}	onPress of each button
iconWidth	36	width of the icon
iconHeight	36	height of the icon
uri		image uri for the icon e.g uri: 'ic_save'
requireUri		require the. icon file and provide it as a requireUri value e.g. requireUri: require('./assets/save.png'). Overrides uri property
buttonView		null custom view for the button, overrides icon properties, use your own styling on the button view

License

The MIT License