Introduction

The following components are included in this package: -CoordinatorLayout -BottomSheetBehavior -FloatingActionButton -MergedAppBarLayout -ScrollingAppBarLayout -BackdropBottomSheet -BottomSheetHeader

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.

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.

Translucent App Bars Both AppBars supports translucent status bar, you can enable with translucent prop, which will basically adds top margins and NOT change the translucent itself, you should handle the translucent directely on the react-native StatusBar component.

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.

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.

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.

NestedScrollView If you are not using the anchor point, and want to add some nested scroll, you will need to install the react-native-nested-scroll-view to allows you to scroll inside bottom sheet continuously.

Note the react-native-nested-scroll-view is only useful when you are NOT using the anchorPoint.

Installation

npm install react-native-btr --save --force 

Aditional Dependencies

npm install react-native-elements --save --force 

Example

import React, { useState } from 'react';
// import all the components we are going to use
import { SafeAreaView, StyleSheet, View, Text, Button } from 'react-native';
//import basic react native components
import { BottomSheet } from 'react-native-btr';
//import to show social icons
import { SocialIcon } from 'react-native-elements';

const App = () => {
  const [visible, setVisible] = useState(false);

  const toggleBottomNavigationView = () => {
    //Toggling the visibility state of the bottom sheet
    setVisible(!visible);
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.container}>
        <Button
          onPress={toggleBottomNavigationView}
          //on Press of the button bottom sheet will be visible
          title="Show Bottom Sheet"
        />
        <BottomSheet
          visible={visible}
          //setting the visibility state of the bottom shee
          onBackButtonPress={toggleBottomNavigationView}
          //Toggling the visibility state on the click of the back botton
          onBackdropPress={toggleBottomNavigationView}
          //Toggling the visibility state on the clicking out side of the sheet
        >
          {/*Bottom Sheet inner View*/}
          <View style={styles.bottomNavigationView}>
            <View
              style={{
                flex: 1,
                flexDirection: 'column',
                justifyContent: 'space-between',
              }}>
              <Text
                style={{
                  textAlign: 'center',
                  padding: 20,
                  fontSize: 20,
                }}>
                Share Using
              </Text>
              <View style={{ flex: 1, flexDirection: 'row', borderRadius: 10 }}>
                <SocialIcon
                  //Social Icon using react-native-elements
                  type="twitter"
                  //Type of Social Icon
                  onPress={() => {
                    //Action to perform on press of Social Icon
                    toggleBottomNavigationView();
                    alert('twitter');
                  }}
                />
                <SocialIcon
                  type="gitlab"
                  onPress={() => {
                    toggleBottomNavigationView();
                    alert('gitlab');
                  }}
                />
                <SocialIcon
                  type="medium"
                  onPress={() => {
                    toggleBottomNavigationView();
                    alert('medium');
                  }}
                />
                <SocialIcon
                  type="facebook"
                  onPress={() => {
                    toggleBottomNavigationView();
                    alert('facebook');
                  }}
                />
                <SocialIcon
                  type="instagram"
                  onPress={() => {
                    toggleBottomNavigationView();
                    alert('instagram');
                  }}
                />
              </View>
              <View style={{ flex: 1, flexDirection: 'row' }}>
                <SocialIcon
                  type="facebook"
                  onPress={() => {
                    toggleBottomNavigationView();
                    alert('facebook');
                  }}
                />
                <SocialIcon
                  type="instagram"
                  onPress={() => {
                    toggleBottomNavigationView();
                    alert('instagram');
                  }}
                />
                <SocialIcon
                  type="gitlab"
                  onPress={() => {
                    toggleBottomNavigationView();
                    alert('gitlab');
                  }}
                />
                <SocialIcon
                  type="twitter"
                  onPress={() => {
                    toggleBottomNavigationView();
                    alert('twitter');
                  }}
                />
                <SocialIcon
                  type="medium"
                  onPress={() => {
                    toggleBottomNavigationView();
                    alert('medium');
                  }}
                />
              </View>
            </View>
          </View>
        </BottomSheet>
      </View>
    </SafeAreaView>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    margin: 2,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#E0F7FA',
  },
  bottomNavigationView: {
    backgroundColor: '#fff',
    width: '100%',
    height: 250,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 50
  },
});

Tutorial

Coming Soon…