diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js
index 032e1a01c30ad..130cde1c2303b 100644
--- a/packages/block-editor/src/components/index.native.js
+++ b/packages/block-editor/src/components/index.native.js
@@ -37,8 +37,7 @@ export { default as VideoPlayer, VIDEO_ASPECT_RATIO } from './video-player';
 // Content Related Components
 export {
 	__experimentalPageTemplatePicker,
-	__experimentalUsePageTemplatePickerVisible,
-	__experimentalWithPageTemplatePickerVisible,
+	__experimentalWithPageTemplatePicker,
 } from './page-template-picker';
 export { default as BlockList } from './block-list';
 export { default as BlockMover } from './block-mover';
diff --git a/packages/block-editor/src/components/page-template-picker/button.native.js b/packages/block-editor/src/components/page-template-picker/button.native.js
index 9c03d10379f65..063703f152596 100644
--- a/packages/block-editor/src/components/page-template-picker/button.native.js
+++ b/packages/block-editor/src/components/page-template-picker/button.native.js
@@ -1,25 +1,29 @@
 /**
  * External dependencies
  */
-import { TouchableOpacity, Text } from 'react-native';
+import { TouchableOpacity, Text, View } from 'react-native';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { withPreferredColorScheme } from '@wordpress/compose';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import styles from './styles.scss';
 
-const PickerButton = ( { icon, label, onPress, getStylesFromColorScheme } ) => {
-	const butonStyles = getStylesFromColorScheme(
+const PickerButton = ( { icon, label, onPress } ) => {
+	const butonWrapperStyles = usePreferredColorSchemeStyle(
+		styles.buttonWrapper,
+		styles.buttonWrapperDark
+	);
+	const buttonStyles = usePreferredColorSchemeStyle(
 		styles.button,
 		styles.buttonDark
 	);
-	const butonTextStyles = getStylesFromColorScheme(
+	const buttonTextStyles = usePreferredColorSchemeStyle(
 		styles.buttonText,
 		styles.buttonTextDark
 	);
@@ -30,12 +34,14 @@ const PickerButton = ( { icon, label, onPress, getStylesFromColorScheme } ) => {
 			accessibilityHint={ __( 'Double tap to select layout' ) }
 			activeOpacity={ 0.7 }
 			onPress={ onPress }
-			style={ butonStyles }
+			style={ butonWrapperStyles }
 		>
-			<Text style={ styles.buttonIcon }>{ icon }</Text>
-			<Text style={ butonTextStyles }>{ label }</Text>
+			<View style={ buttonStyles }>
+				<Text style={ styles.buttonIcon }>{ icon }</Text>
+				<Text style={ buttonTextStyles }>{ label }</Text>
+			</View>
 		</TouchableOpacity>
 	);
 };
 
-export default withPreferredColorScheme( PickerButton );
+export default PickerButton;
diff --git a/packages/block-editor/src/components/page-template-picker/index.native.js b/packages/block-editor/src/components/page-template-picker/index.native.js
index 88fa9323799fc..3fdc5146b2551 100644
--- a/packages/block-editor/src/components/page-template-picker/index.native.js
+++ b/packages/block-editor/src/components/page-template-picker/index.native.js
@@ -2,9 +2,7 @@
  * Internal dependencies
  */
 import __experimentalPageTemplatePicker from './picker';
-import __experimentalWithPageTemplatePickerVisible from './with-page-template-picker-visible';
-import __experimentalUsePageTemplatePickerVisible from './use-page-template-picker-visible';
+import __experimentalWithPageTemplatePicker from './with-page-template-picker';
 
 export { __experimentalPageTemplatePicker };
-export { __experimentalWithPageTemplatePickerVisible };
-export { __experimentalUsePageTemplatePickerVisible };
+export { __experimentalWithPageTemplatePicker };
diff --git a/packages/block-editor/src/components/page-template-picker/picker.js b/packages/block-editor/src/components/page-template-picker/picker.native.js
similarity index 68%
rename from packages/block-editor/src/components/page-template-picker/picker.js
rename to packages/block-editor/src/components/page-template-picker/picker.native.js
index 89eb4f8ede3bf..e419e0bf8d019 100644
--- a/packages/block-editor/src/components/page-template-picker/picker.js
+++ b/packages/block-editor/src/components/page-template-picker/picker.native.js
@@ -1,13 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useState, useEffect, useRef } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * External dependencies
  */
 import { logUserEvent, userEvents } from 'react-native-gutenberg-bridge';
+import { Animated } from 'react-native';
 
 /**
  * Internal dependencies
@@ -19,6 +20,7 @@ import Preview from './preview';
 
 const __experimentalPageTemplatePicker = ( {
 	templates = getDefaultTemplates(),
+	visible,
 } ) => {
 	const { editPost } = useDispatch( 'core/editor' );
 	const { title } = useSelect( ( select ) => {
@@ -30,6 +32,12 @@ const __experimentalPageTemplatePicker = ( {
 	} );
 
 	const [ templatePreview, setTemplatePreview ] = useState();
+	const [ pickerVisible, setPickerVisible ] = useState( visible );
+	const contentOpacity = useRef( new Animated.Value( 0 ) );
+
+	useEffect( () => {
+		onPickerAnimation();
+	}, [ visible ] );
 
 	const onApply = () => {
 		editPost( {
@@ -42,8 +50,28 @@ const __experimentalPageTemplatePicker = ( {
 		setTemplatePreview( undefined );
 	};
 
+	const onPickerAnimation = () => {
+		if ( visible && ! pickerVisible ) {
+			setPickerVisible( true );
+		}
+
+		Animated.timing( contentOpacity.current, {
+			toValue: visible ? 1 : 0,
+			duration: 300,
+			useNativeDriver: true,
+		} ).start( () => {
+			if ( ! visible ) {
+				setPickerVisible( false );
+			}
+		} );
+	};
+
+	if ( ! pickerVisible ) {
+		return null;
+	}
+
 	return (
-		<>
+		<Animated.View style={ [ { opacity: contentOpacity.current } ] }>
 			<Container>
 				{ templates.map( ( template ) => (
 					<Button
@@ -67,7 +95,7 @@ const __experimentalPageTemplatePicker = ( {
 				onDismiss={ () => setTemplatePreview( undefined ) }
 				onApply={ onApply }
 			/>
-		</>
+		</Animated.View>
 	);
 };
 
diff --git a/packages/block-editor/src/components/page-template-picker/preview.native.js b/packages/block-editor/src/components/page-template-picker/preview.native.js
index 8080faae69b84..7ebfbed3f07b8 100644
--- a/packages/block-editor/src/components/page-template-picker/preview.native.js
+++ b/packages/block-editor/src/components/page-template-picker/preview.native.js
@@ -50,6 +50,10 @@ const Preview = ( props ) => {
 		styles.previewContainer,
 		styles.previewContainerDark
 	);
+	const previewContentStyle = usePreferredColorSchemeStyle(
+		styles.previewContent,
+		styles.previewContentDark
+	);
 
 	if ( template === undefined ) {
 		return null;
@@ -79,7 +83,9 @@ const Preview = ( props ) => {
 					title={ template.name }
 					subtitle={ __( 'Template Preview' ) }
 				/>
-				<BlockPreview blocks={ template.blocks } />
+				<View style={ previewContentStyle }>
+					<BlockPreview blocks={ template.blocks } />
+				</View>
 			</SafeAreaView>
 		</Modal>
 	);
diff --git a/packages/block-editor/src/components/page-template-picker/styles.native.scss b/packages/block-editor/src/components/page-template-picker/styles.native.scss
index 427573ba5cc8f..e37dda2ba7aa3 100644
--- a/packages/block-editor/src/components/page-template-picker/styles.native.scss
+++ b/packages/block-editor/src/components/page-template-picker/styles.native.scss
@@ -6,12 +6,21 @@
 	padding: 0 12px;
 }
 
-.button {
-	background-color: rgba($black, 0.04);
+.buttonWrapper {
+	background-color: $white;
 	border-radius: 20px;
-	flex-direction: row;
 	margin-right: 8px;
+	overflow: hidden;
+}
+
+.buttonWrapperDark {
+	background-color: $black;
+}
+
+.button {
+	background-color: rgba($black, 0.04);
 	padding: 9px 18px 9px 14px;
+	flex-direction: row;
 	align-items: center;
 }
 
@@ -41,6 +50,15 @@
 }
 
 .previewContainerDark {
+	background-color: #0f1518;
+}
+
+.previewContent {
+	flex: 1;
+	background-color: $white;
+}
+
+.previewContentDark {
 	background-color: $black;
 }
 
diff --git a/packages/block-editor/src/components/page-template-picker/use-page-template-picker-visible.js b/packages/block-editor/src/components/page-template-picker/use-page-template-picker.js
similarity index 63%
rename from packages/block-editor/src/components/page-template-picker/use-page-template-picker-visible.js
rename to packages/block-editor/src/components/page-template-picker/use-page-template-picker.js
index 29d1508d3b264..53b173324ad69 100644
--- a/packages/block-editor/src/components/page-template-picker/use-page-template-picker-visible.js
+++ b/packages/block-editor/src/components/page-template-picker/use-page-template-picker.js
@@ -4,10 +4,17 @@
 import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 
-const __experimentalUsePageTemplatePickerVisible = () => {
+export const __experimentalUsePageTemplatePickerAvailable = () => {
 	return useSelect( ( select ) => {
 		const { getCurrentPostType } = select( 'core/editor' );
+		return getCurrentPostType() === 'page';
+	}, [] );
+};
+
+export const __experimentalUsePageTemplatePickerVisible = () => {
+	const isTemplatePickerAvailable = __experimentalUsePageTemplatePickerAvailable();
 
+	return useSelect( ( select ) => {
 		const { getBlockOrder, getBlock } = select( 'core/block-editor' );
 
 		const blocks = getBlockOrder();
@@ -16,10 +23,7 @@ const __experimentalUsePageTemplatePickerVisible = () => {
 		const isOnlyUnmodifiedDefault =
 			blocks.length === 1 && isUnmodifiedDefaultBlock( firstBlock );
 		const isEmptyContent = isEmptyBlockList || isOnlyUnmodifiedDefault;
-		const isPage = getCurrentPostType() === 'page';
 
-		return isEmptyContent && isPage;
+		return isEmptyContent && isTemplatePickerAvailable;
 	}, [] );
 };
-
-export default __experimentalUsePageTemplatePickerVisible;
diff --git a/packages/block-editor/src/components/page-template-picker/with-page-template-picker-visible.js b/packages/block-editor/src/components/page-template-picker/with-page-template-picker-visible.js
deleted file mode 100644
index edb7893778ae8..0000000000000
--- a/packages/block-editor/src/components/page-template-picker/with-page-template-picker-visible.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createHigherOrderComponent } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import __experimentalUsePageTemplatePickerVisible from './use-page-template-picker-visible';
-
-const __experimentalWithPageTemplatePickerVisible = createHigherOrderComponent(
-	( WrappedComponent ) => ( props ) => {
-		const showPageTemplatePicker = __experimentalUsePageTemplatePickerVisible();
-		return (
-			<WrappedComponent
-				{ ...props }
-				showPageTemplatePicker={ showPageTemplatePicker }
-			/>
-		);
-	},
-	'__experimentalWithPageTemplatePickerVisible'
-);
-
-export default __experimentalWithPageTemplatePickerVisible;
diff --git a/packages/block-editor/src/components/page-template-picker/with-page-template-picker.js b/packages/block-editor/src/components/page-template-picker/with-page-template-picker.js
new file mode 100644
index 0000000000000..121bd46db9ce1
--- /dev/null
+++ b/packages/block-editor/src/components/page-template-picker/with-page-template-picker.js
@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { createHigherOrderComponent } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import {
+	__experimentalUsePageTemplatePickerVisible,
+	__experimentalUsePageTemplatePickerAvailable,
+} from './use-page-template-picker';
+
+const __experimentalWithPageTemplatePicker = createHigherOrderComponent(
+	( WrappedComponent ) => ( props ) => {
+		const isTemplatePickerVisible = __experimentalUsePageTemplatePickerVisible();
+		const isTemplatePickerAvailable = __experimentalUsePageTemplatePickerAvailable();
+
+		return (
+			<WrappedComponent
+				{ ...props }
+				isTemplatePickerVisible={ isTemplatePickerVisible }
+				isTemplatePickerAvailable={ isTemplatePickerAvailable }
+			/>
+		);
+	},
+	'__experimentalWithPageTemplatePicker'
+);
+
+export default __experimentalWithPageTemplatePicker;
diff --git a/packages/components/src/mobile/modal-header-bar/styles.native.scss b/packages/components/src/mobile/modal-header-bar/styles.native.scss
index 0697ff71e7e55..4ee1ebe584704 100644
--- a/packages/components/src/mobile/modal-header-bar/styles.native.scss
+++ b/packages/components/src/mobile/modal-header-bar/styles.native.scss
@@ -56,5 +56,5 @@
 }
 
 .separatorDark {
-	background-color: $gray-70;
+	background-color: #2d2d2d;
 }
diff --git a/packages/edit-post/src/components/layout/index.native.js b/packages/edit-post/src/components/layout/index.native.js
index 2c8b049dcbc55..9384a0da52b2c 100644
--- a/packages/edit-post/src/components/layout/index.native.js
+++ b/packages/edit-post/src/components/layout/index.native.js
@@ -13,7 +13,7 @@ import { withSelect } from '@wordpress/data';
 import {
 	BottomSheetSettings,
 	__experimentalPageTemplatePicker,
-	__experimentalWithPageTemplatePickerVisible,
+	__experimentalWithPageTemplatePicker,
 } from '@wordpress/block-editor';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { HTMLTextInput, KeyboardAvoidingView } from '@wordpress/components';
@@ -94,9 +94,10 @@ class Layout extends Component {
 
 	render() {
 		const {
-			mode,
 			getStylesFromColorScheme,
-			showPageTemplatePicker,
+			isTemplatePickerAvailable,
+			isTemplatePickerVisible,
+			mode,
 		} = this.props;
 
 		const isHtmlView = mode === 'text';
@@ -143,8 +144,10 @@ class Layout extends Component {
 						parentHeight={ this.state.rootViewHeight }
 						style={ toolbarKeyboardAvoidingViewStyle }
 					>
-						{ showPageTemplatePicker && (
-							<__experimentalPageTemplatePicker />
+						{ isTemplatePickerAvailable && (
+							<__experimentalPageTemplatePicker
+								visible={ isTemplatePickerVisible }
+							/>
 						) }
 						<Header />
 						<BottomSheetSettings />
@@ -168,5 +171,5 @@ export default compose( [
 		};
 	} ),
 	withPreferredColorScheme,
-	__experimentalWithPageTemplatePickerVisible,
+	__experimentalWithPageTemplatePicker,
 ] )( Layout );