Skip to content
React Native Binding for PanModal by SlackHQ
TypeScript Objective-C Swift Ruby Java Kotlin Other
Branch: master
Clone or download

README.md

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

You can’t perform that action at this time.