diff --git a/packages/block-editor/src/components/block-list/block-elements.js b/packages/block-editor/src/components/block-list/block-elements.js
new file mode 100644
index 00000000000000..1d71649a1cc479
--- /dev/null
+++ b/packages/block-editor/src/components/block-list/block-elements.js
@@ -0,0 +1,23 @@
+const ELEMENTS = [
+	'p',
+	'div',
+	'h1',
+	'h2',
+	'h3',
+	'h4',
+	'h5',
+	'h6',
+	'ol',
+	'ul',
+	'li',
+	'figure',
+	'nav',
+	'pre',
+	'header',
+	'section',
+	'aside',
+	'footer',
+	'main',
+];
+
+export default ELEMENTS;
diff --git a/packages/block-editor/src/components/block-list/block-wrapper.js b/packages/block-editor/src/components/block-list/block-wrapper.js
index cfcbfccb9a99f9..80a63a15df6ceb 100644
--- a/packages/block-editor/src/components/block-list/block-wrapper.js
+++ b/packages/block-editor/src/components/block-list/block-wrapper.js
@@ -27,6 +27,7 @@ import { isInsideRootBlock } from '../../utils/dom';
 import useMovingAnimation from './moving-animation';
 import { Context, BlockNodes } from './root-container';
 import { BlockContext } from './block';
+import ELEMENTS from './block-elements';
 
 const BlockComponent = forwardRef(
 	( { children, tagName = 'div', __unstableIsHtml, ...props }, wrapper ) => {
@@ -226,29 +227,7 @@ const BlockComponent = forwardRef(
 	}
 );
 
-const elements = [
-	'p',
-	'div',
-	'h1',
-	'h2',
-	'h3',
-	'h4',
-	'h5',
-	'h6',
-	'ol',
-	'ul',
-	'li',
-	'figure',
-	'nav',
-	'pre',
-	'header',
-	'section',
-	'aside',
-	'footer',
-	'main',
-];
-
-const ExtendedBlockComponent = elements.reduce( ( acc, element ) => {
+const ExtendedBlockComponent = ELEMENTS.reduce( ( acc, element ) => {
 	acc[ element ] = forwardRef( ( props, ref ) => {
 		return <BlockComponent { ...props } ref={ ref } tagName={ element } />;
 	} );
diff --git a/packages/block-editor/src/components/block-list/block-wrapper.native.js b/packages/block-editor/src/components/block-list/block-wrapper.native.js
index 69cbf52723125a..c97dae59059f54 100644
--- a/packages/block-editor/src/components/block-list/block-wrapper.native.js
+++ b/packages/block-editor/src/components/block-list/block-wrapper.native.js
@@ -1,20 +1,9 @@
-const elements = [
-	'p',
-	'div',
-	'h1',
-	'h2',
-	'h3',
-	'h4',
-	'h5',
-	'h6',
-	'ol',
-	'ul',
-	'li',
-	'figure',
-	'nav',
-];
+/**
+ * Internal dependencies
+ */
+import ELEMENTS from './block-elements';
 
-const ExtendedBlockComponent = elements.reduce( ( acc, element ) => {
+const ExtendedBlockComponent = ELEMENTS.reduce( ( acc, element ) => {
 	acc[ element ] = element;
 	return acc;
 }, String );
diff --git a/packages/compose/src/hooks/use-preferred-color-scheme/index.android.js b/packages/compose/src/hooks/use-preferred-color-scheme/index.android.js
new file mode 100644
index 00000000000000..6d81eeca5a0852
--- /dev/null
+++ b/packages/compose/src/hooks/use-preferred-color-scheme/index.android.js
@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import {
+	subscribePreferredColorScheme,
+	isInitialColorSchemeDark,
+} from 'react-native-gutenberg-bridge';
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * Returns the color scheme value when it changes. Possible values: [ 'light', 'dark' ]
+ *
+ * @return {string} return current color scheme.
+ */
+const usePreferredColorScheme = function() {
+	const [ currentColorScheme, setCurrentColorScheme ] = useState(
+		isInitialColorSchemeDark ? 'dark' : 'light'
+	);
+	useEffect( () => {
+		subscribePreferredColorScheme( ( { isPreferredColorSchemeDark } ) => {
+			const colorScheme = isPreferredColorSchemeDark ? 'dark' : 'light';
+			if ( colorScheme !== currentColorScheme ) {
+				setCurrentColorScheme( colorScheme );
+			}
+		} );
+	} );
+	return currentColorScheme;
+};
+
+export default usePreferredColorScheme;
diff --git a/packages/compose/src/hooks/use-preferred-color-scheme/index.native.js b/packages/compose/src/hooks/use-preferred-color-scheme/index.ios.js
similarity index 100%
rename from packages/compose/src/hooks/use-preferred-color-scheme/index.native.js
rename to packages/compose/src/hooks/use-preferred-color-scheme/index.ios.js
diff --git a/test/native/setup.js b/test/native/setup.js
index fe55851be4827a..7d656b41eafb42 100644
--- a/test/native/setup.js
+++ b/test/native/setup.js
@@ -14,6 +14,7 @@ jest.mock( 'react-native-gutenberg-bridge', () => {
 		subscribeUpdateHtml: jest.fn(),
 		subscribeMediaAppend: jest.fn(),
 		subscribeAndroidModalClosed: jest.fn(),
+		subscribePreferredColorScheme: () => 'light',
 		editorDidMount: jest.fn(),
 		editorDidAutosave: jest.fn(),
 		subscribeMediaUpload: jest.fn(),
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 8ee1f8b3d415ba..e17cd0ff564d80 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -29,7 +29,9 @@
 
 		/* This needs to be false so our types are possible to consume without setting this */
 		"esModuleInterop": false,
-		"resolveJsonModule": true
+		"resolveJsonModule": true,
+
+		"typeRoots": [ "./node_modules/@types" ]
 	},
 	"exclude": [ "**/benchmark", "**/test/**", "**/build/**", "**/build-*/**" ]
 }