Skip to content

Releases: cesardeazevedo/react-native-bottom-sheet-behavior

v1.0.0

06 Jul 23:46
Compare
Choose a tag to compare

v1.0.0-beta.7

04 Aug 15:22
Compare
Choose a tag to compare
v1.0.0-beta.7 Pre-release
Pre-release

Fix compatibility with [email protected]

v1.0.0-beta.6

14 Jun 18:32
Compare
Choose a tag to compare
v1.0.0-beta.6 Pre-release
Pre-release

NestedScrollView is now on different package, it was a huge codebase dependency, and it was not required to work with the bottom sheet, also a little bit hard to maintain, it is only useful when you are NOT using the anchor point.

See the repository: https://github.com/cesardeazevedo/react-native-nested-scroll-view

If you are using the NestedScrollView, you should now attach it on the componentDidMount as follows.

import NestedScrollView from 'react-native-nested-scroll-view'

class App extends Component {
  componentDidMount() {
    this.bottomSheet.attachNestedScrollChild(this.nestedScroll)
  }
  render() {
    return (
      <CoordinatorLayout>
        <BottomSheetBehavior ref={ref => { this.bottomSheet = ref}}>
          <NestedScrollView ref={ref => { this.nestedScroll = ref }} />
        </BottomSheetBehavior>
      </CoordinatorLayout>
    )
  }
}

See the NestedScrollView example for better details. https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior/blob/master/example/views/NestedScrollView.js

v1.0.0-beta.1

16 Apr 12:39
Compare
Choose a tag to compare
v1.0.0-beta.1 Pre-release
Pre-release

This patch changes the StatusBars translucent behavior, now translucent is disabled by default, and you should pass the translucent prop either on ScrollingAppBarLayout, or MergedAppBarLayout, which just adjusts the AppBar top margins, and doesn't change anything on the translucent itself, earlier versions automatically enables translucent on StatusBars, now it won't, and you should handle the translucent directly on the react-native StatusBar component.

New props added

ScrollingAppBarLayout:

  • barStyle
  • barStyleTransparent
  • translucent

MergedAppBarLayout

  • barStyle
  • barStyleTransparent
  • translucent

v1.0.0-beta

11 Apr 02:55
Compare
Choose a tag to compare
v1.0.0-beta Pre-release
Pre-release

image

This major release v1.0.0-beta supports anchor state 🎉, which means that you can have a middle state between collapsed and expanded.

This version now uses a custom BottomSheetBehavior implementation from miguelhincapie/CustomBottomSheetBehavior which is basically a fork from the original design-support, but with anchor state support and colors management, even though is custom implementation, old version should work as before, and you can also disable the anchor state with anchorEnabled prop which is disabled by default.

New Components

  • MergedAppBarLayout
  • ScrollingAppBarLayout
  • BackdropBottomSheet
  • BottomSheetHeader

BottomSheetBehavior

  • Added anchorEnabled prop
  • Added anchorPoint prop

AppBarLayouts

We provide some custom AppBars that has custom behaviors, they automatically connects with BottomSheetBehavior in order to connects with ToolbarAndroid and toggle visibility, both AppBars can also manager StatusBar backgrounds.

Currently, AppBars only supports ToolbarAndroid as a child, you may have some troubles trying to render a custom View.

ScrollingAppBarLayout

This behavior hides and sets the StatusBar background to transparent when you starting dragging the BottomSheet, and reappears when the BottomSheet backs to the collapsed state, setting back the StatusBar background color with statusBarColor prop.

image

MergedAppBarLayout

The MergedAppBarLayout behavior appears when the BottomSheet reaches the anchor state (or expanded state if you're not using anchorEnabled). When the BottomSheet is getting over the MergedAppBar, it will partially sets the height of ToolbarAndroid revealing the mergedColor prop, and when the BottomSheet is fully expanded, it sets the ToolbarAndroid with the toolbarColor prop.

image

image

FloatingActionButton

  • FloatingActionButton's has a custom behavior that hides when closely reaches MergedAppBarLayout.

BackdropBottomSheet

This component is rendered behind the BottomSheetBehavior, and behave like a parallax when BottomSheet is dragging. you should pass a fixed height prop that may match with anchorPoint prop from BottomSheet, in order to achieve a full screen view when reaches the anchor state.

BottomSheetHeader

This component abstracts color management between BottomSheet states on the native side, it will find all and components recursively and handles everything out the box.

v0.5.0

08 Apr 11:02
Compare
Choose a tag to compare

Ship with react-native 0.43.2

v0.4.0

02 Mar 11:27
Compare
Choose a tag to compare

Ship with react-native 0.42.0

v0.3.2

02 Mar 06:39
Compare
Choose a tag to compare
  • Added autoAnchor prop to automatically anchor fab with the bottom sheet, this.ref.fab.setAnchorId still works.
  • Added show and hide command actions.
  • Fixed misunderstood hidden prop that was causing crash, now uses show and hide actions directly.
  • Added rippleColor prop.
  • Now only set iconColor through react-native-vector-icons.

v0.2.0

05 Feb 07:13
Compare
Choose a tag to compare

Ship with react-native 0.41.0

v0.1.0

08 Jan 06:59
Compare
Choose a tag to compare

Ship with react-native 0.40.0