From 12c6f5acf77ed36fdc6374e090c714b68d14f586 Mon Sep 17 00:00:00 2001
From: Stefanos Togkoulidis <stefanostogoulidis@gmail.com>
Date: Fri, 17 Aug 2018 02:54:42 +0300
Subject: [PATCH 1/6] Dedicated components for SVG, Path

---
 packages/components/src/dashicon/index.js     | 17 ++++++++++----
 packages/components/src/dashicon/path.js      |  1 +
 .../components/src/dashicon/path.native.js    |  3 +++
 packages/components/src/dashicon/svg.js       | 22 +++++--------------
 .../components/src/dashicon/svg.native.js     | 15 +++++--------
 5 files changed, 28 insertions(+), 30 deletions(-)
 create mode 100644 packages/components/src/dashicon/path.js
 create mode 100644 packages/components/src/dashicon/path.native.js

diff --git a/packages/components/src/dashicon/index.js b/packages/components/src/dashicon/index.js
index a59fa094609ce..e92b506b504c4 100644
--- a/packages/components/src/dashicon/index.js
+++ b/packages/components/src/dashicon/index.js
@@ -10,6 +10,7 @@ OR if you're looking to change now SVGs get output, you'll need to edit strings
  */
 import { Component } from '@wordpress/element';
 import SVG from './svg';
+import Path from './path';
 
 export default class Dashicon extends Component {
 	shouldComponentUpdate( nextProps ) {
@@ -886,10 +887,18 @@ export default class Dashicon extends Component {
 		const iconClass = [ 'dashicon', 'dashicons-' + icon, className ].filter( Boolean ).join( ' ' );
 
 		return (
-			<SVG className={ iconClass }
-				size={ size }
-				path= { path }				
-			/>			
+			<SVG
+				aria-hidden
+				role="img"
+				focusable="false"
+				className={ iconClass }
+				xmlns="http://www.w3.org/2000/svg"
+				width={ size }
+				height={ size }
+				viewBox="0 0 20 20"
+			>
+				<Path d={ path } />
+			</SVG>
 		);
 	}
 }
diff --git a/packages/components/src/dashicon/path.js b/packages/components/src/dashicon/path.js
new file mode 100644
index 0000000000000..13a9afaf0fd26
--- /dev/null
+++ b/packages/components/src/dashicon/path.js
@@ -0,0 +1 @@
+export default ( props ) => ( <path { ...props } /> );
\ No newline at end of file
diff --git a/packages/components/src/dashicon/path.native.js b/packages/components/src/dashicon/path.native.js
new file mode 100644
index 0000000000000..f398ee57d5e3a
--- /dev/null
+++ b/packages/components/src/dashicon/path.native.js
@@ -0,0 +1,3 @@
+import { Path } from 'react-native-svg';
+
+export default ( props ) => ( <Path { ...props } /> );
\ No newline at end of file
diff --git a/packages/components/src/dashicon/svg.js b/packages/components/src/dashicon/svg.js
index f17cac2b815b5..85538e23895a3 100644
--- a/packages/components/src/dashicon/svg.js
+++ b/packages/components/src/dashicon/svg.js
@@ -1,17 +1,5 @@
-export default function SVG( props, ref ) {
-    const { size, path, iconClass } = props
-    return (
-        <svg
-            aria-hidden
-            role="img"
-            focusable="false"
-            className={ iconClass }
-            xmlns="http://www.w3.org/2000/svg"
-            width={ size }
-            height={ size }
-            viewBox="0 0 20 20"
-        >
-            <path d={ path } />
-        </svg>
-    );
-}
\ No newline at end of file
+export default ( props ) => (
+    <svg { ...props } >
+        { props.children }
+    </svg>
+);
\ No newline at end of file
diff --git a/packages/components/src/dashicon/svg.native.js b/packages/components/src/dashicon/svg.native.js
index 54c8fe92c7ca3..6544acdbf28a6 100644
--- a/packages/components/src/dashicon/svg.native.js
+++ b/packages/components/src/dashicon/svg.native.js
@@ -1,10 +1,7 @@
-import Svg,{ Path } from 'react-native-svg';
+import Svg from 'react-native-svg';
 
-export default function SVG( props, ref ) {
-    const { size, path, iconClass } = props
-    return (
-        <Svg height={ size } width={ size }>        
-            <Path d={ path } />
-        </Svg>
-    );
-}
\ No newline at end of file
+export default ( props ) => (
+    <Svg width= { props.width } height={ props.height } >
+        { props.children }
+    </Svg>
+);
\ No newline at end of file

From 9b306ee40d87fe53365d43ead47dfccfdfb70ed0 Mon Sep 17 00:00:00 2001
From: Stefanos Togkoulidis <stefanostogoulidis@gmail.com>
Date: Fri, 17 Aug 2018 03:20:54 +0300
Subject: [PATCH 2/6] Fix lint errors

---
 packages/components/src/dashicon/path.js      |  2 +-
 .../components/src/dashicon/path.native.js    |  2 +-
 packages/components/src/dashicon/svg.js       |  8 +++----
 .../components/src/dashicon/svg.native.js     |  8 +++----
 .../src/icon-button/index.native.js           | 18 +++++++--------
 packages/components/src/index.native.js       |  2 +-
 .../components/src/toolbar/index.native.js    |  5 ++--
 .../rich-text/format-toolbar/index.native.js  | 19 +++++++--------
 .../src/components/rich-text/index.native.js  | 23 +++++++------------
 packages/keycodes/src/platform.js             |  4 ++--
 packages/keycodes/src/platform.native.js      |  5 ++--
 11 files changed, 43 insertions(+), 53 deletions(-)

diff --git a/packages/components/src/dashicon/path.js b/packages/components/src/dashicon/path.js
index 13a9afaf0fd26..dea52b99946c0 100644
--- a/packages/components/src/dashicon/path.js
+++ b/packages/components/src/dashicon/path.js
@@ -1 +1 @@
-export default ( props ) => ( <path { ...props } /> );
\ No newline at end of file
+export default ( props ) => ( <path { ...props } /> );
diff --git a/packages/components/src/dashicon/path.native.js b/packages/components/src/dashicon/path.native.js
index f398ee57d5e3a..cb7460db3436c 100644
--- a/packages/components/src/dashicon/path.native.js
+++ b/packages/components/src/dashicon/path.native.js
@@ -1,3 +1,3 @@
 import { Path } from 'react-native-svg';
 
-export default ( props ) => ( <Path { ...props } /> );
\ No newline at end of file
+export default ( props ) => ( <Path { ...props } /> );
diff --git a/packages/components/src/dashicon/svg.js b/packages/components/src/dashicon/svg.js
index 85538e23895a3..e99d5b857db5e 100644
--- a/packages/components/src/dashicon/svg.js
+++ b/packages/components/src/dashicon/svg.js
@@ -1,5 +1,5 @@
 export default ( props ) => (
-    <svg { ...props } >
-        { props.children }
-    </svg>
-);
\ No newline at end of file
+	<svg { ...props } >
+		{ props.children }
+	</svg>
+);
diff --git a/packages/components/src/dashicon/svg.native.js b/packages/components/src/dashicon/svg.native.js
index 6544acdbf28a6..f2b156ac6563e 100644
--- a/packages/components/src/dashicon/svg.native.js
+++ b/packages/components/src/dashicon/svg.native.js
@@ -1,7 +1,7 @@
 import Svg from 'react-native-svg';
 
 export default ( props ) => (
-    <Svg width= { props.width } height={ props.height } >
-        { props.children }
-    </Svg>
-);
\ No newline at end of file
+	<Svg width={ props.width } height={ props.height } >
+		{ props.children }
+	</Svg>
+);
diff --git a/packages/components/src/icon-button/index.native.js b/packages/components/src/icon-button/index.native.js
index dc737df347d17..92aaa64efa9c9 100644
--- a/packages/components/src/icon-button/index.native.js
+++ b/packages/components/src/icon-button/index.native.js
@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-import { isString, isArray } from 'lodash';
+import { isString } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -14,23 +13,22 @@ import { Component } from '@wordpress/element';
  */
 //import   Button from '../button';
 import Dashicon from '../dashicon';
-import { TouchableOpacity, Text, View } from 'react-native';
+import { TouchableOpacity } from 'react-native';
 
 // This is intentionally a Component class, not a function component because it
 // is common to apply a ref to the button element (only supported in class)
 class IconButton extends Component {
 	render() {
-		const { icon, children, label, className, tooltip, focus, shortcut, onClick, ...additionalProps } = this.props;
-		const classes = classnames( 'components-icon-button', className );		
-		
-		let element = (
+		const { icon, children, label, onClick } = this.props;
+
+		const element = (
 			<TouchableOpacity
 				accessible={ true }
-  				accessibilityLabel={ label }
+				accessibilityLabel={ label }
 				onPress={ onClick }
-			>				
+			>
 				{ isString( icon ) ? <Dashicon icon={ icon } /> : icon }
-		 		{ children }			
+				{ children }
 			</TouchableOpacity>
 		);
 
diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
index 37a572d803a4f..2527b0070d794 100644
--- a/packages/components/src/index.native.js
+++ b/packages/components/src/index.native.js
@@ -1,4 +1,4 @@
 // Components
 // eslint-disable-next-line camelcase
 export { default as Dashicon } from './dashicon';
-export { default as Toolbar } from './toolbar';
\ No newline at end of file
+export { default as Toolbar } from './toolbar';
diff --git a/packages/components/src/toolbar/index.native.js b/packages/components/src/toolbar/index.native.js
index 23f786ff65540..7ecf14a8387e5 100644
--- a/packages/components/src/toolbar/index.native.js
+++ b/packages/components/src/toolbar/index.native.js
@@ -40,7 +40,8 @@ import IconButton from '../icon-button';
  *
  * @return {ReactElement} The rendered toolbar.
  */
-function Toolbar( { controls = [], children, className } ) {	
+// eslint-disable-next-line no-unused-vars
+function Toolbar( { controls = [], children, className } ) {
 	if (
 		( ! controls || ! controls.length ) &&
 		! children
@@ -55,7 +56,7 @@ function Toolbar( { controls = [], children, className } ) {
 	}
 
 	return (
-		<View style={{flex: 1, flexDirection: 'row'}}>
+		<View style={ { flex: 1, flexDirection: 'row' } }>
 			{ flatMap( controlSets, ( controlSet, indexOfSet ) => (
 				controlSet.map( ( control, indexOfControl ) => (
 					<View
diff --git a/packages/editor/src/components/rich-text/format-toolbar/index.native.js b/packages/editor/src/components/rich-text/format-toolbar/index.native.js
index a25e8e585d4e9..5eea4fb81692d 100644
--- a/packages/editor/src/components/rich-text/format-toolbar/index.native.js
+++ b/packages/editor/src/components/rich-text/format-toolbar/index.native.js
@@ -3,8 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import {	
-	IconButton,	
+import {
 	Toolbar,
 } from '@wordpress/components';
 import { ESCAPE, LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER, displayShortcut } from '@wordpress/keycodes';
@@ -15,9 +14,7 @@ import { prependHTTP } from '@wordpress/url';
  */
 //import PositionedAtSelection from './positioned-at-selection';
 //import URLInput from '../../url-input';
-import { filterURLForDisplay } from '../../../utils/url';
-
-import { Text } from 'react-native'
+//import { filterURLForDisplay } from '../../../utils/url';
 
 const FORMATTING_CONTROLS = [
 	{
@@ -173,9 +170,9 @@ class FormatToolbar extends Component {
 	}
 
 	render() {
-		const { formats, enabledControls = DEFAULT_CONTROLS, customControls = [], selectedNodeId } = this.props;
-		const { linkValue, settingsVisible, opensInNewWindow } = this.state;
-		const isAddingLink = formats.link && formats.link.isAdding;
+		const { enabledControls = DEFAULT_CONTROLS, customControls = [] } = this.props;
+		// const { linkValue, settingsVisible, opensInNewWindow } = this.state;
+		// const isAddingLink = formats.link && formats.link.isAdding;
 
 		const toolbarControls = FORMATTING_CONTROLS.concat( customControls )
 			.filter( ( control ) => enabledControls.indexOf( control.format ) !== -1 )
@@ -197,10 +194,10 @@ class FormatToolbar extends Component {
 					onClick: this.toggleFormat( control.format ),
 					isActive: this.isFormatActive( control.format ),
 				};
-			} );		
+			} );
 
-		return (			
-			<Toolbar controls={ toolbarControls } />			
+		return (
+			<Toolbar controls={ toolbarControls } />
 		);
 	}
 }
diff --git a/packages/editor/src/components/rich-text/index.native.js b/packages/editor/src/components/rich-text/index.native.js
index eb8597cbe8f64..18a92ea6a68ca 100644
--- a/packages/editor/src/components/rich-text/index.native.js
+++ b/packages/editor/src/components/rich-text/index.native.js
@@ -2,15 +2,10 @@
  * External dependencies
  */
 import RCTAztecView from 'react-native-aztec';
-import { View, Text } from "react-native";
+import { View } from 'react-native';
 import {
-	isEqual,
 	forEach,
 	merge,
-	identity,
-	find,
-	defer,
-	noop,
 } from 'lodash';
 
 /**
@@ -93,24 +88,24 @@ export class RichText extends Component {
 		return this.state.formats[ format ] && this.state.formats[ format ].isActive;
 	}
 
+	// eslint-disable-next-line no-unused-vars
 	removeFormat( format ) {
 		//TODO: implement Aztec call to remove format
-		console.log("Remove Format:" + format);
 	}
 
+	// eslint-disable-next-line no-unused-vars
 	applyFormat( format, args, node ) {
 		//TODO: implement Aztec call to apply format
-		console.log("Apply Format:" + format);
 	}
 
 	changeFormats( formats ) {
-		forEach( formats, ( formatValue, format ) => {			
+		forEach( formats, ( formatValue, format ) => {
 			const isActive = this.isFormatActive( format );
 			if ( isActive && ! formatValue ) {
 				this.removeFormat( format );
 			} else if ( ! isActive && formatValue ) {
 				this.applyFormat( format );
-			}			
+			}
 		} );
 
 		this.setState( ( state ) => ( {
@@ -125,13 +120,11 @@ export class RichText extends Component {
 			eventCount,
 			formattingControls,
 			formatters,
-			isSelected,
-			inlineToolbar = true,
 		} = this.props;
 
 		const formatToolbar = (
 			<FormatToolbar
-			    formats={ this.state.formats }								
+				formats={ this.state.formats }
 				onChange={ this.changeFormats }
 				enabledControls={ formattingControls }
 				customControls={ formatters }
@@ -143,7 +136,7 @@ export class RichText extends Component {
 
 		return (
 			<View>
-				{ formatToolbar }			
+				{ formatToolbar }
 				<RCTAztecView
 					text={ { text: html, eventCount: eventCount } }
 					onChange={ this.onChange }
@@ -151,7 +144,7 @@ export class RichText extends Component {
 					color={ 'black' }
 					maxImagesWidth={ 200 }
 					style={ style }
-				/>			
+				/>
 			</View>
 		);
 	}
diff --git a/packages/keycodes/src/platform.js b/packages/keycodes/src/platform.js
index 120abc35dbd1e..faa0bd6fbeaf6 100644
--- a/packages/keycodes/src/platform.js
+++ b/packages/keycodes/src/platform.js
@@ -5,6 +5,6 @@
  *
  * @return {boolean}         True if MacOS; false otherwise.
  */
-export function isAppleOS( _window = window ) {	
+export function isAppleOS( _window = window ) {
 	return _window.navigator.platform.indexOf( 'Mac' ) !== -1;
-}
\ No newline at end of file
+}
diff --git a/packages/keycodes/src/platform.native.js b/packages/keycodes/src/platform.native.js
index 9eb50108b0a38..e355963fa0887 100644
--- a/packages/keycodes/src/platform.native.js
+++ b/packages/keycodes/src/platform.native.js
@@ -7,6 +7,7 @@ import { Platform } from 'react-native';
  *
  * @return {boolean}         True if iOS; false otherwise.
  */
-export function isAppleOS( _window = window ) {		
+// eslint-disable-next-line no-unused-vars
+export function isAppleOS( _window = window ) {
 	return Platform.Version === 'ios';
-}
\ No newline at end of file
+}

From 599774d1fd360f662780a1fecd63ca2b86ddf381 Mon Sep 17 00:00:00 2001
From: Stefanos Togkoulidis <stefanostogoulidis@gmail.com>
Date: Fri, 17 Aug 2018 03:52:09 +0300
Subject: [PATCH 3/6] Dedicated native components for button, icon-button,
 tooltip

---
 .../components/src/button/index.native.js     | 25 ++++++++++++
 .../src/icon-button/index.native.js           | 39 -------------------
 .../components/src/tooltip/index.native.js    |  4 ++
 3 files changed, 29 insertions(+), 39 deletions(-)
 create mode 100644 packages/components/src/button/index.native.js
 delete mode 100644 packages/components/src/icon-button/index.native.js
 create mode 100644 packages/components/src/tooltip/index.native.js

diff --git a/packages/components/src/button/index.native.js b/packages/components/src/button/index.native.js
new file mode 100644
index 0000000000000..3819872dd1a15
--- /dev/null
+++ b/packages/components/src/button/index.native.js
@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { TouchableOpacity } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+export function Button( props ) {
+	const { onClick } = props;
+	const ariaLabel = props[ 'aria-label' ];
+	return (
+		<TouchableOpacity
+			accessible={ true }
+			accessibilityLabel={ ariaLabel }
+			onPress={ onClick }
+		>
+			{ props.children }
+		</TouchableOpacity>
+	);
+}
+
+export default forwardRef( Button );
diff --git a/packages/components/src/icon-button/index.native.js b/packages/components/src/icon-button/index.native.js
deleted file mode 100644
index 92aaa64efa9c9..0000000000000
--- a/packages/components/src/icon-button/index.native.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * External dependencies
- */
-import { isString } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-//import   Button from '../button';
-import Dashicon from '../dashicon';
-import { TouchableOpacity } from 'react-native';
-
-// This is intentionally a Component class, not a function component because it
-// is common to apply a ref to the button element (only supported in class)
-class IconButton extends Component {
-	render() {
-		const { icon, children, label, onClick } = this.props;
-
-		const element = (
-			<TouchableOpacity
-				accessible={ true }
-				accessibilityLabel={ label }
-				onPress={ onClick }
-			>
-				{ isString( icon ) ? <Dashicon icon={ icon } /> : icon }
-				{ children }
-			</TouchableOpacity>
-		);
-
-		return element;
-	}
-}
-
-export default IconButton;
diff --git a/packages/components/src/tooltip/index.native.js b/packages/components/src/tooltip/index.native.js
new file mode 100644
index 0000000000000..549addf4cb4a8
--- /dev/null
+++ b/packages/components/src/tooltip/index.native.js
@@ -0,0 +1,4 @@
+import React from 'react';
+
+// for the native mobile, just shortcircuit the Tooltip to return its child
+export default ( props ) => React.Children.only( props.children );

From e961d1710d91b00f5138d12da69af32112b8326f Mon Sep 17 00:00:00 2001
From: Stefanos Togkoulidis <stefanostogoulidis@gmail.com>
Date: Fri, 17 Aug 2018 04:20:03 +0300
Subject: [PATCH 4/6] Dedicated native mobile comps for Toolbar containers

---
 packages/components/src/toolbar/index.js      | 11 ++-
 .../components/src/toolbar/index.native.js    | 90 -------------------
 .../src/toolbar/toolbar-button-container.js   |  8 ++
 .../toolbar-button-container.native.js        | 13 +++
 .../src/toolbar/toolbar-container.js          | 10 +++
 .../src/toolbar/toolbar-container.native.js   | 10 +++
 6 files changed, 48 insertions(+), 94 deletions(-)
 delete mode 100644 packages/components/src/toolbar/index.native.js
 create mode 100644 packages/components/src/toolbar/toolbar-button-container.js
 create mode 100644 packages/components/src/toolbar/toolbar-button-container.native.js
 create mode 100644 packages/components/src/toolbar/toolbar-container.js
 create mode 100644 packages/components/src/toolbar/toolbar-container.native.js

diff --git a/packages/components/src/toolbar/index.js b/packages/components/src/toolbar/index.js
index 9504304dd3492..ac0e682655458 100644
--- a/packages/components/src/toolbar/index.js
+++ b/packages/components/src/toolbar/index.js
@@ -8,6 +8,8 @@ import { flatMap } from 'lodash';
  * Internal dependencies
  */
 import IconButton from '../icon-button';
+import ToolbarContainer from './toolbar-container';
+import ToolbarButtonContainer from './toolbar-button-container';
 
 /**
  * Renders a toolbar with controls.
@@ -54,11 +56,12 @@ function Toolbar( { controls = [], children, className } ) {
 	}
 
 	return (
-		<div className={ classnames( 'components-toolbar', className ) }>
+		<ToolbarContainer className={ classnames( 'components-toolbar', className ) }>
 			{ flatMap( controlSets, ( controlSet, indexOfSet ) => (
 				controlSet.map( ( control, indexOfControl ) => (
-					<div
+					<ToolbarButtonContainer
 						key={ [ indexOfSet, indexOfControl ].join() }
+						keyProp= { [ indexOfSet, indexOfControl ].join() }
 						className={ indexOfSet > 0 && indexOfControl === 0 ? 'has-left-divider' : null }
 					>
 						<IconButton
@@ -77,11 +80,11 @@ function Toolbar( { controls = [], children, className } ) {
 							disabled={ control.isDisabled }
 						/>
 						{ control.children }
-					</div>
+					</ToolbarButtonContainer>
 				) )
 			) ) }
 			{ children }
-		</div>
+		</ToolbarContainer>
 	);
 }
 
diff --git a/packages/components/src/toolbar/index.native.js b/packages/components/src/toolbar/index.native.js
deleted file mode 100644
index 7ecf14a8387e5..0000000000000
--- a/packages/components/src/toolbar/index.native.js
+++ /dev/null
@@ -1,90 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { flatMap } from 'lodash';
-import { View } from 'react-native';
-
-/**
- * Internal dependencies
- */
-import IconButton from '../icon-button';
-
-/**
- * Renders a toolbar with controls.
- *
- * The `controls` prop accepts an array of sets. A set is an array of controls.
- * Controls have the following shape:
- *
- * ```
- * {
- *   icon: string,
- *   title: string,
- *   subscript: string,
- *   onClick: Function,
- *   isActive: boolean,
- *   isDisabled: boolean
- * }
- * ```
- *
- * For convenience it is also possible to pass only an array of controls. It is
- * then assumed this is the only set.
- *
- * Either `controls` or `children` is required, otherwise this components
- * renders nothing.
- *
- * @param {?Array}        controls  The controls to render in this toolbar.
- * @param {?ReactElement} children  Any other things to render inside the
- *                                  toolbar besides the controls.
- * @param {?string}       className Class to set on the container div.
- *
- * @return {ReactElement} The rendered toolbar.
- */
-// eslint-disable-next-line no-unused-vars
-function Toolbar( { controls = [], children, className } ) {
-	if (
-		( ! controls || ! controls.length ) &&
-		! children
-	) {
-		return null;
-	}
-
-	// Normalize controls to nested array of objects (sets of controls)
-	let controlSets = controls;
-	if ( ! Array.isArray( controlSets[ 0 ] ) ) {
-		controlSets = [ controlSets ];
-	}
-
-	return (
-		<View style={ { flex: 1, flexDirection: 'row' } }>
-			{ flatMap( controlSets, ( controlSet, indexOfSet ) => (
-				controlSet.map( ( control, indexOfControl ) => (
-					<View
-						key={ [ indexOfSet, indexOfControl ].join() }
-						style={ indexOfSet > 0 && indexOfControl === 0 ? 'has-left-divider' : null }
-					>
-						<IconButton
-							icon={ control.icon }
-							label={ control.title }
-							shortcut={ control.shortcut }
-							data-subscript={ control.subscript }
-							onClick={ ( event ) => {
-								event.stopPropagation();
-								control.onClick();
-							} }
-							className={ classnames( 'components-toolbar__control', {
-								'is-active': control.isActive,
-							} ) }
-							aria-pressed={ control.isActive }
-							disabled={ control.isDisabled }
-						/>
-						{ control.children }
-					</View>
-				) )
-			) ) }
-			{ children }
-		</View>
-	);
-}
-
-export default Toolbar;
diff --git a/packages/components/src/toolbar/toolbar-button-container.js b/packages/components/src/toolbar/toolbar-button-container.js
new file mode 100644
index 0000000000000..2ce527597ecff
--- /dev/null
+++ b/packages/components/src/toolbar/toolbar-button-container.js
@@ -0,0 +1,8 @@
+export default ( props ) => (
+	<div
+		key={ props.keykeyProp }
+		className={ props.className }
+	>
+		{ props.children }
+	</div>
+);
diff --git a/packages/components/src/toolbar/toolbar-button-container.native.js b/packages/components/src/toolbar/toolbar-button-container.native.js
new file mode 100644
index 0000000000000..8dd3aaf50aff4
--- /dev/null
+++ b/packages/components/src/toolbar/toolbar-button-container.native.js
@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+export default ( props ) => (
+	<View
+		key={ props.keyProp }
+		style={ props.className }
+	>
+		{ props.children }
+	</View>
+);
diff --git a/packages/components/src/toolbar/toolbar-container.js b/packages/components/src/toolbar/toolbar-container.js
new file mode 100644
index 0000000000000..1d2c532d74324
--- /dev/null
+++ b/packages/components/src/toolbar/toolbar-container.js
@@ -0,0 +1,10 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+export default ( props ) => (
+	<div className={ classnames( 'components-toolbar', props.className ) }>
+		{ props.children }
+	</div>
+);
diff --git a/packages/components/src/toolbar/toolbar-container.native.js b/packages/components/src/toolbar/toolbar-container.native.js
new file mode 100644
index 0000000000000..c3504fc40202c
--- /dev/null
+++ b/packages/components/src/toolbar/toolbar-container.native.js
@@ -0,0 +1,10 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+export default ( props ) => (
+	<View style={ { flex: 1, flexDirection: 'row' } }>
+		{ props.children }
+	</View>
+);

From 6f6f418ea272b954bf93b2e788fa79b051abfe8d Mon Sep 17 00:00:00 2001
From: Stefanos Togkoulidis <stefanostogoulidis@gmail.com>
Date: Fri, 17 Aug 2018 04:37:10 +0300
Subject: [PATCH 5/6] Small code styling fix

---
 packages/components/src/toolbar/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/toolbar/index.js b/packages/components/src/toolbar/index.js
index ac0e682655458..47ae631f0e8dc 100644
--- a/packages/components/src/toolbar/index.js
+++ b/packages/components/src/toolbar/index.js
@@ -61,7 +61,7 @@ function Toolbar( { controls = [], children, className } ) {
 				controlSet.map( ( control, indexOfControl ) => (
 					<ToolbarButtonContainer
 						key={ [ indexOfSet, indexOfControl ].join() }
-						keyProp= { [ indexOfSet, indexOfControl ].join() }
+						keyProp={ [ indexOfSet, indexOfControl ].join() }
 						className={ indexOfSet > 0 && indexOfControl === 0 ? 'has-left-divider' : null }
 					>
 						<IconButton

From aed7db649f41d776aea02550c8a77688c115fd86 Mon Sep 17 00:00:00 2001
From: Stefanos Togkoulidis <stefanostogoulidis@gmail.com>
Date: Fri, 17 Aug 2018 12:06:35 +0300
Subject: [PATCH 6/6] Fix double "key" typo in prop name

---
 packages/components/src/toolbar/toolbar-button-container.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/toolbar/toolbar-button-container.js b/packages/components/src/toolbar/toolbar-button-container.js
index 2ce527597ecff..433ebca90ea75 100644
--- a/packages/components/src/toolbar/toolbar-button-container.js
+++ b/packages/components/src/toolbar/toolbar-button-container.js
@@ -1,6 +1,6 @@
 export default ( props ) => (
 	<div
-		key={ props.keykeyProp }
+		key={ props.keyProp }
 		className={ props.className }
 	>
 		{ props.children }