[RNMobile] Use Flexbox for Inserter Menu tabs on mobile (#34126)

* Use flexbox for tab positioning * Make sure height is calculated correctly Co-authored-by: jhnstn <jason@readysetandco.com>
WordPress · Aug 23, 2021 · c238f43 · c238f43
1 parent 518e3c8
commit c238f43
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 12 deletions.
diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js
@@ -204,7 +204,10 @@ function InserterMenu( {
 		>
 			<BottomSheetConsumer>
 				{ ( { listProps } ) => (
-					<TouchableHighlight accessible={ false }>
+					<TouchableHighlight
+						accessible={ false }
+						style={ { flex: 1 } }
+					>
 						{ ! showTabs || filterValue ? (
 							<InserterSearchResults
 								rootClientId={ rootClientId }

diff --git a/packages/block-editor/src/components/inserter/style.native.scss b/packages/block-editor/src/components/inserter/style.native.scss
@@ -51,13 +51,12 @@
 
 .inserter-tabs__wrapper {
 	overflow: hidden;
+	flex: 1;
 }
 
 .inserter-tabs__container {
 	height: 100%;
 	width: 100%;
-}
-
-.inserter-tabs__item {
-	position: absolute;
+	flex: 1;
+	flex-direction: row;
 }
diff --git a/packages/block-editor/src/components/inserter/tabs.native.js b/packages/block-editor/src/components/inserter/tabs.native.js
@@ -100,13 +100,7 @@ function InserterTabs( {
 		>
 			<Animated.View style={ containerStyle }>
 				{ tabs.map( ( { component: TabComponent }, index ) => (
-					<View
-						key={ `tab-${ index }` }
-						style={ [
-							styles[ 'inserter-tabs__item' ],
-							{ left: index * wrapperWidth },
-						] }
-					>
+					<View key={ `tab-${ index }` }>
 						<TabComponent
 							rootClientId={ rootClientId }
 							onSelect={ onSelect }