BottomSheetScrollView.js

import React, { Component } from 'react'
import {
  Text,
  View,
  ScrollView,
  Dimensions,
  StyleSheet,
  TouchableNativeFeedback,
} from 'react-native'

import {
  CoordinatorLayout,
  BottomSheetBehavior,
} from 'react-native-bottom-sheet-behavior'

const screenHeight = Dimensions.get('window').height

class SimpleView extends Component {
  renderItem() {
    return (
      <TouchableNativeFeedback>
        <View style={styles.button}>
          <Text style={styles.buttonLabel}>Item</Text>
        </View>
      </TouchableNativeFeedback>
    )
  }

  render() {
    return (
      <CoordinatorLayout style={styles.container}>
        <View style={styles.content}>
          <View style={styles.toolbarWrapper}>
            <Text style={styles.title}>Example</Text>
          </View>
          <ScrollView>
            {this.renderItem()}
            {this.renderItem()}
            {this.renderItem()}
            {this.renderItem()}
            {this.renderItem()}
            {this.renderItem()}
            {this.renderItem()}
            {this.renderItem()}
            {this.renderItem()}
            {this.renderItem()}
            {this.renderItem()}
            {this.renderItem()}
            {this.renderItem()}
            {this.renderItem()}
            {this.renderItem()}
            {this.renderItem()}
            {this.renderItem()}
            {this.renderItem()}
            {this.renderItem()}
          </ScrollView>
        </View>
        <BottomSheetBehavior peekHeight={70} hideable={false}>
          <View style={styles.bottomSheet}>
            <View style={styles.bottomSheetHeader}>
              <Text style={styles.label}>BottomSheetBehavior !</Text>
            </View>
            <View style={styles.bottomSheetContent}>
              {this.renderItem()}
              {this.renderItem()}
              {this.renderItem()}
            </View>
          </View>
        </BottomSheetBehavior>
      </CoordinatorLayout>
    )
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF'
  },
  content: {
    height: screenHeight, // Don't use flex: 1 here
    backgroundColor: '#F5FCFF', // Don't remove this
  },
  toolbarWrapper: {
    elevation: 5,
    padding: 20,
    paddingTop: 36,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#4389f2',
  },
  title: {
    color: 'white',
    fontSize: 18,
  },
  bottomSheet: {
    backgroundColor: '#4389f2',
  },
  bottomSheetHeader: {
    padding: 24,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  bottomSheetContent: {
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  button: {
    height: 35,
    padding: 6,
    paddingHorizontal: 14,
    alignSelf: 'stretch',
    alignItems: 'center',
    marginVertical: 1,
    backgroundColor: '#333',
  },
  buttonLabel: {
    color: '#fff'
  },
  label: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#fff',
  },
})

export default SimpleView