React Native Slack Bottom Sheet

React Native binding for Slack Bottom Sheet

Rainbow App. The first consumer of this library.

TODOs

• Add motivation to README
• Add gifs to README
• Add usage example in readme
• Add callbacks on close / open / transition
• Describe props
• Export more options from Slack library
• Add stub on Android and explanation
• Add commit name check
• Squash commits and release
• add typings to native component and probably some wrapper
• Navigation bindings and adapter for android bottom-sheet

It's WIP so use it if you're brave enough.

Usage

import SlackBottomSheet from 'react-native-slack-bottom-sheet';

<SlackBottomSheet
 topOffset={100}
 unmountAnimation={false}
 initialAnimation={false}
 presentGlobally={false}
 backgroundOpacity={0}
 allowsDragToDismiss={false}
 allowsTapToDismiss={false}
 isHapticFeedbackEnabled={false}
 blocksBackgroundTouches={false}
 interactsWithOuterScrollView
>
 <View style={StyleSheet.absoluteFillObject}>
   <ScrollView>
     <Lorem />
   </ScrollView>
 </View>
</SlackBottomSheet>

Props

none of props but for children are required. If prop is experimental it means that setting it might leads to unexpected behavior. Probably I'm using most of them so don't be too concerned.

name	default	experimental	description
allowsDragToDismiss	true		A flag to determine if dismissal should be initiated when swiping down on the presented view.
allowsTapToDismiss	true		A flag to determine if dismissal should be initiated when tapping on the dimmed background view.
anchorModalToLongForm	true		A flag to determine if scrolling should be limited to the longFormHeight. Set false to cap scrolling at .max height
backgroundColor	#000000		The background view color
backgroundOpacity	0.7		The background view color opacity
blocksBackgroundTouches	true	💁 💁	A flag to determine if the content below background should accept touches
cornerRadius	8.0		The corner radius used when shouldRoundTopCorners is enabled
headerHeight	0		The Height of spaces on the top of modal always prioritizing dismissing over scrolling content
initialAnimation	true	💁	A flag to determine of the component should animate on mount
interactsWithOuterScrollView	false	💁 💁	A flag to determine if ScrollView wrapping modal should accept touches. Note: works only with presentGlobally: false
isHapticFeedbackEnabled	true		A flag to determine if haptic feedback should be enabled during presentation.
isShortFormEnabled	true		A flag to determine if the short form of modal should be available
isUserInteractionEnabled	true		A flag to toggle user interactions on the container view. Note: Return false to forward touches to the presentingViewController.
longFormHeight	maxHeight + offset		The height of the pan modal container view when in the longForm presentation state. This value is capped to .max, if provided value exceeds the space available
onDidDismiss			Callback on did dismiss
onWillDismiss			Callback on will dismiss
onWillTransition			Callback on will transition
presentGlobally	true	💁 💁 💁	Bottom Sheet is presented over the whole content by default. If this flag is set to true, sheet could be presented inside another component as well
shortFormHeight	300		The height of the pan modal container view when in the shortForm presentation state. This value is capped to .max, if the provided value exceeds the space available
shouldRoundTopCorners	true		A flag to determine if the top corners should be rounded.
showDragIndicator	true		A flag to determine if a drag indicator should be shown above the pan modal container view
springDamping	0.8		The springDamping value used to determine the amount of 'bounce' seen when transitioning to short/long form
startFromShortForm	false		A flag to determine if the component should start from instead of long one
topOffset	42		The offset between the top of the screen and the top of the pan modal container view.
transitionDuration	0.5		The transitionDuration value is used to set the speed of animation during a transition, including initial presentation
unmountAnimation	true	💁	A flag to determine of the component should animate on unmount
visible	true	💁	A flag for hiding or showing modal. Basically works in the same way like mounting and unmounting.

RN Screens

It does not work with modals from RN Screens. If your app's using RN Screens unmount all bottom sheets before pushing any modals.

Installation

1. Change platform :ios, '9.0' to platform :ios, '10.0' in Podfile

2. Open ios/YourAppName.xcworkplace in Xcode

   Right-click on Your App Name in the Project Navigator on the left, and click New File…

   Create a single empty Swift file to the project (make sure that Your App Name target is selected when adding), and when Xcode asks, press Create Bridging Header and do not remove Swift file then.

   (detailed screenshots in installation folder)

npm install react-native-slack-bottom-sheet
cd ios && pod install && cd ..

License

MIT