[RNMobile] Fix item width inside Inserter (#20238)

* Correct item width within inserter * Correct label width
WordPress · Feb 17, 2020 · 5870caf · 5870caf
1 parent 102e8b5
commit 5870caf
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js
@@ -70,23 +70,22 @@ export class InserterMenu extends Component {
 
 	calculateColumnsProperties() {
 		const bottomSheetWidth = BottomSheet.getWidth();
-		const {
-			paddingLeft: containerPaddingLeft,
-			paddingRight: containerPaddingRight,
-		} = styles.content;
+		const { paddingLeft, paddingRight } = styles.columnPadding;
 		const itemTotalWidth = this.calculateItemWidth();
 		const containerTotalWidth =
-			bottomSheetWidth - ( containerPaddingLeft + containerPaddingRight );
+			bottomSheetWidth - ( paddingLeft + paddingRight );
 		const numofColumns = Math.floor( containerTotalWidth / itemTotalWidth );
 
 		if ( numofColumns < MIN_COL_NUM ) {
 			return {
 				numOfColumns: MIN_COL_NUM,
 				itemWidth: this.calculateMinItemWidth( bottomSheetWidth ),
+				maxWidth: containerTotalWidth / MIN_COL_NUM,
 			};
 		}
 		return {
 			numOfColumns: numofColumns,
+			maxWidth: containerTotalWidth / numofColumns,
 		};
 	}
 
@@ -153,7 +152,12 @@ export class InserterMenu extends Component {
 								accessibilityLabel={ item.title }
 								onPress={ () => onSelect( item ) }
 							>
-								<View style={ styles.modalItem }>
+								<View
+									style={ [
+										styles.modalItem,
+										{ width: columnProperties.maxWidth },
+									] }
+								>
 									<View
 										style={ [
 											modalIconWrapperStyle,

diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js
@@ -9,6 +9,7 @@ import {
 	Dimensions,
 	ScrollView,
 	Keyboard,
+	StatusBar,
 } from 'react-native';
 import Modal from 'react-native-modal';
 import SafeArea from 'react-native-safe-area';
@@ -111,10 +112,15 @@ class BottomSheet extends Component {
 	onSetMaxHeight() {
 		const { height, width } = Dimensions.get( 'window' );
 		const { safeAreaBottomInset, keyboardHeight } = this.state;
+		const statusBarHeight =
+			Platform.OS === 'android' ? StatusBar.currentHeight : 0;
 
 		// `maxHeight` when modal is opened alon with a keyboard
 		const maxHeightWithOpenKeyboard =
-			0.95 * ( Dimensions.get( 'window' ).height - keyboardHeight );
+			0.95 *
+			( Dimensions.get( 'window' ).height -
+				keyboardHeight -
+				statusBarHeight );
 
 		// On horizontal mode `maxHeight` has to be set on 90% of width
 		if ( width > height ) {

diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss
@@ -123,6 +123,7 @@
 	font-size: 17px;
 	color: #2e4453;
 	margin-right: 12px;
+	flex-shrink: 1;
 }
 
 .cellLabelCentered {