Playground facelift (#3708)

* wip

* fix imports

* use stylesheet for margin

stylesheet now correct

* also remove old headerLeft

* improve header buttons color

* remove ios button margin

examples/NavigationPlayground/js/SimpleStack.js

@@ -8,9 +8,11 @@ import type {
 } from 'react-navigation';
 
 import * as React from 'react';
-import { Button, ScrollView, StatusBar } from 'react-native';
+import { ScrollView, StatusBar } from 'react-native';
 import { StackNavigator, SafeAreaView, withNavigation } from 'react-navigation';
 import SampleText from './SampleText';
+import { Button } from './commonComponents/ButtonWithMargin';
+import { HeaderButtons } from './commonComponents/HeaderButtons';
 
 type MyNavScreenProps = {
   navigation: NavigationScreenProp<*>,
@@ -19,7 +21,11 @@ type MyNavScreenProps = {
 
 class MyBackButton extends React.Component<any, any> {
   render() {
-    return <Button onPress={this._navigateBack} title="Custom Back" />;
+    return (
+      <HeaderButtons>
+        <HeaderButtons.Item title="Back" onPress={this._navigateBack} />
+      </HeaderButtons>
+    );
   }
 
   _navigateBack = () => {
@@ -169,12 +175,14 @@ MyProfileScreen.navigationOptions = props => {
     // Render a button on the right side of the header.
     // When pressed switches the screen to edit mode.
     headerRight: (
-      <Button
-        title={params.mode === 'edit' ? 'Done' : 'Edit'}
-        onPress={() =>
-          setParams({ mode: params.mode === 'edit' ? '' : 'edit' })
-        }
-      />
+      <HeaderButtons>
+        <HeaderButtons.Item
+          title={params.mode === 'edit' ? 'Done' : 'Edit'}
+          onPress={() =>
+            setParams({ mode: params.mode === 'edit' ? '' : 'edit' })
+          }
+        />
+      </HeaderButtons>
     ),
   };
 };