[RNMobile] FlatList inside the bottom-sheet (#23873)

* use optimised FlatList inside bottom-sheet
WordPress · Jul 29, 2020 · 71bf1b5 · 71bf1b5
1 parent 9594adb
commit 71bf1b5
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 43 deletions.
diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js
@@ -1,7 +1,13 @@
 /**
  * External dependencies
  */
-import { FlatList, View, TouchableHighlight, Dimensions } from 'react-native';
+import {
+ FlatList,
+ View,
+ TouchableHighlight,
+ TouchableWithoutFeedback,
+ Dimensions,
+} from 'react-native';
 import { pick } from 'lodash';
 
 /**
@@ -11,7 +17,7 @@ import { Component } from '@wordpress/element';
 import { createBlock, rawHandler } from '@wordpress/blocks';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { withInstanceId, compose } from '@wordpress/compose';
-import { BottomSheet } from '@wordpress/components';
+import { BottomSheet, BottomSheetConsumer } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -119,29 +125,35 @@ export class InserterMenu extends Component {
  const { items } = this.props;
  const { numberOfColumns } = this.state;
 
- const bottomPadding = styles.contentBottomPadding;
-
  return (
  <BottomSheet
  isVisible={ true }
  onClose={ this.onClose }
- contentStyle={ [ styles.content, bottomPadding ] }
  hideHeader
+ isChildrenScrollable
  >
  <TouchableHighlight accessible={ false }>
- <FlatList
- onLayout={ this.onLayout }
- scrollEnabled={ false }
- key={ `InserterUI-${ numberOfColumns }` } //re-render when numberOfColumns changes
- keyboardShouldPersistTaps="always"
- numColumns={ numberOfColumns }
- data={ items }
- ItemSeparatorComponent={ () => (
- <View style={ styles.rowSeparator } />
+ <BottomSheetConsumer>
+ { ( { listProps } ) => (
+ <FlatList
+ onLayout={ this.onLayout }
+ key={ `InserterUI-${ numberOfColumns }` } //re-render when numberOfColumns changes
+ keyboardShouldPersistTaps="always"
+ numColumns={ numberOfColumns }
+ data={ items }
+ ItemSeparatorComponent={ () => (
+ <TouchableWithoutFeedback
+ accessible={ false }
+ >
+ <View style={ styles.rowSeparator } />
+ </TouchableWithoutFeedback>
+ ) }
+ keyExtractor={ ( item ) => item.name }
+ renderItem={ this.renderItem }
+ { ...listProps }
+ />
  ) }
- keyExtractor={ ( item ) => item.name }
- renderItem={ this.renderItem }
- />
+ </BottomSheetConsumer>
  </TouchableHighlight>
  </BottomSheet>
  );

diff --git a/packages/block-editor/src/components/inserter/style.native.scss b/packages/block-editor/src/components/inserter/style.native.scss
@@ -4,15 +4,6 @@
  border-radius: 8px 8px 8px 8px;
 }
 
-.content {
- padding: 0 0 0 0;
- align-items: center;
-}
-
-.contentBottomPadding {
- padding-bottom: 20px;
-}
-
 .rowSeparator {
  height: 12px;
 }

diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js
@@ -246,6 +246,16 @@ class BottomSheet extends Component {
  return onClose();
  }
 
+ getContentStyle() {
+ const { safeAreaBottomInset } = this.state;
+ return {
+ flexGrow: 1,
+ paddingBottom:
+ ( safeAreaBottomInset || 0 ) +
+ styles.scrollableContent.paddingBottom,
+ };
+ }
+
  onReplaceSubsheet( destination, extraProps, callback ) {
  performLayoutAnimation();
 
@@ -269,6 +279,7 @@ class BottomSheet extends Component {
  contentStyle = {},
  getStylesFromColorScheme,
  onDismiss,
+ isChildrenScrollable,
  children,
  ...rest
  } = this.props;
@@ -317,6 +328,27 @@ class BottomSheet extends Component {
  styles.backgroundDark
  );
 
+ const listProps = {
+ disableScrollViewPanResponder: true,
+ bounces,
+ onScroll: this.onScroll,
+ onScrollBeginDrag: this.onScrollBeginDrag,
+ onScrollEndDrag: this.onScrollEndDrag,
+ scrollEventThrottle: 16,
+ contentContainerStyle: [
+ styles.content,
+ hideHeader && styles.emptyHeader,
+ contentStyle,
+ isChildrenScrollable && this.getContentStyle(),
+ contentStyle,
+ ],
+ style: isMaxHeightSet ? { maxHeight } : {},
+ scrollEnabled,
+ automaticallyAdjustContentInsets: false,
+ };
+
+ const WrapperView = isChildrenScrollable ? View : ScrollView;
+
  return (
  <Modal
  isVisible={ isVisible }
@@ -356,21 +388,10 @@ class BottomSheet extends Component {
  >
  <View style={ styles.dragIndicator } />
  { ! hideHeader && getHeader() }
- <ScrollView
- disableScrollViewPanResponder
- bounces={ bounces }
- onScroll={ this.onScroll }
- onScrollBeginDrag={ () => this.isScrolling( true ) }
- onScrollEndDrag={ () => this.isScrolling( false ) }
- scrollEventThrottle={ 16 }
- style={ isMaxHeightSet ? { maxHeight } : {} }
- contentContainerStyle={ [
- styles.content,
- hideHeader && styles.emptyHeader,
- contentStyle,
- ] }
- scrollEnabled={ scrollEnabled }
- automaticallyAdjustContentInsets={ false }
+ <WrapperView
+ { ...( isChildrenScrollable
+ ? { style: listProps.style }
+ : listProps ) }
  >
  <BottomSheetProvider
  value={ {
@@ -386,14 +407,17 @@ class BottomSheet extends Component {
  onReplaceSubsheet: this.onReplaceSubsheet,
  extraProps,
  currentScreen,
+ listProps,
  } }
  >
  <TouchableHighlight accessible={ false }>
  <>{ children }</>
  </TouchableHighlight>
  </BottomSheetProvider>
- <View style={ { height: safeAreaBottomInset } } />
- </ScrollView>
+ { ! isChildrenScrollable && (
+ <View style={ { height: safeAreaBottomInset } } />
+ ) }
+ </WrapperView>
  </KeyboardAvoidingView>
  </Modal>
  );

diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss
@@ -48,6 +48,10 @@
  padding: 0 16px 0 16px;
 }
 
+.scrollableContent {
+ padding-bottom: 20px;
+}
+
 .head {
  flex-direction: row;
  width: 100%;