Revamp ThemePicker in FluentTester Header (#633)

* Initial commit * Working Modal on iOS * Working iOS Modal * Change PartPickerLabel to headerSemibold * Clean up Android Picker a bit * Use thecore picker for windows too * Use Contextual Menu for iOS Header * Forgot to commit some files * Change files * Update podfile lock * ok.. only use the community module on apple * Some more updates * Remove unused imports * Use Button instead of StealthButton * Actually.. let's use StealthButton * Fix typo * Refactor attempts make ios great but desktop bad * Remove Android ThemePicker, fix up more of FluentTester * Very close, desktop test component view is slightly cut * Remove DisplayIfVisible, as it's no longer needed * Change files * Dektop lays out properly * Last bit of cleanup * Remove iOS RNCPicker dependency
2021-03-11 13:34:51 -06:00 · 2021-03-11 13:34:51 -06:00 · 78158ad081
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -75,6 +75,7 @@
    "macos",
    "monospace",
    "nuget",
+    "stylesheet",
    "uifabricshared",
    "unemphasized"
  ]
--- a/apps/fluent-tester/package.json
+++ b/apps/fluent-tester/package.json
@ -39,6 +39,8 @@
    "@fluentui-react-native/themed-stylesheet": "^1.2.0",
    "@fluentui-react-native/win32-theme": ">=0.6.0 <1.0.0",
    "@fluentui/react-native": ">=0.23.0 <1.0.0",
+    "@react-native-menu/menu": "^0.1.2",
+    "@react-native-picker/picker": "^1.9.11",
    "react-native-svg": "^11.0.0"
  },
  "devDependencies": {
--- a/apps/fluent-tester/src/FluentTester/FluentTester.tsx
+++ b/apps/fluent-tester/src/FluentTester/FluentTester.tsx
@ -1,5 +1,6 @@
 import { Theme } from '@fluentui-react-native/framework';
-import { StealthButton, Separator } from '@fluentui/react-native';
+import { Separator, StealthButton } from '@fluentui/react-native';
+import { Button } from '@fluentui-react-native/experimental-button';
 import { Text } from '@fluentui-react-native/experimental-text';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
 import * as React from 'react';
@ -19,34 +20,12 @@ MessageQueue.spy(true);
 const EmptyComponent: React.FunctionComponent = () => {
  return <RNText style={fluentTesterStyles.noTest}>Select a component from the left.</RNText>;
 };
-
-const DisplayIfVisible = ({ isVisible, children }) => (isVisible ? <View>{children}</View> : null);
-
 export interface FluentTesterProps {
  initialTest?: string;
  enableSinglePaneView?: boolean;
  enabledTests: TestDescription[];
 }

-const Header: React.FunctionComponent<{}> = () => {
-  const theme = useTheme();
-
-  return (
-    <View style={fluentTesterStyles.header}>
-      <Text
-        style={[fluentTesterStyles.testHeader]}
-        variant="heroLargeSemibold"
-        color={theme.host.palette?.TextEmphasis}
-        testID={BASE_TESTPAGE}
-      >
-        ⚛ FluentUI Tests
-      </Text>
-
-      <ThemePickers />
-    </View>
-  );
-};
-
 const getThemedStyles = themedStyleSheet((t: Theme) => {
  return {
    root: {
@ -58,7 +37,7 @@ const getThemedStyles = themedStyleSheet((t: Theme) => {
      alignItems: 'stretch',
      padding: 4,
    },
-    testListSeparator: {
+    testSeparator: {
      borderColor: t.colors.menuDivider,
      borderWidth: 0.1,
    },
@ -79,7 +58,9 @@ export const FluentTester: React.FunctionComponent<FluentTesterProps> = (props:

  const onBackPress = () => {
    setOnTestListView(true);
-    BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+    if (Platform.OS === 'android') {
+      BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+    }
    return true;
  };

@ -102,71 +83,137 @@ export const FluentTester: React.FunctionComponent<FluentTesterProps> = (props:
    default: View,
  });

+  const Header: React.FunctionComponent<{}> = () => {
+    const theme = useTheme();
+
+    return (
+      <View style={fluentTesterStyles.header}>
+        <Text
+          style={[fluentTesterStyles.testHeader]}
+          variant="heroLargeSemibold"
+          color={theme.host.palette?.TextEmphasis}
+          testID={BASE_TESTPAGE}
+        >
+          ⚛ FluentUI Tests
+        </Text>
+        <ThemePickers />
+      </View>
+    );
+  };
+
+  // iOS needs a software back button, which is shown on a newline along with the ThemePickers
+  const MobileHeader: React.FunctionComponent<{}> = () => {
+    const theme = useTheme();
+
+    return (
+      <View style={mobileStyles.header}>
+        <Text
+          style={[fluentTesterStyles.testHeader]}
+          variant="heroLargeSemibold"
+          color={theme.host.palette?.TextEmphasis}
+          testID={BASE_TESTPAGE}
+        >
+          ⚛ FluentUI Tests
+        </Text>
+        <View style={fluentTesterStyles.header}>
+          {/* on iOS, display a back Button */}
+          <Button
+            ghost
+            content="‹ Back"
+            style={{ alignSelf: 'flex-start', display: Platform.OS === 'ios' ? 'flex' : 'none' }}
+            onClick={onBackPress}
+            disabled={onTestListView}
+          />
+          <ThemePickers />
+        </View>
+      </View>
+    );
+  };
+
+  const isTestListVisible = !enableSinglePaneView || (enableSinglePaneView && onTestListView);
+  const isTestSectionVisible = !enableSinglePaneView || (enableSinglePaneView && !onTestListView);
+
+  const TestList: React.FunctionComponent<{}> = () => {
+    return (
+      <View style={fluentTesterStyles.testList}>
+        <ScrollView contentContainerStyle={fluentTesterStyles.testListContainerStyle}>
+          {sortedTestComponents.map((description, index) => {
+            return (
+              <StealthButton
+                key={index}
+                disabled={index == selectedTestIndex}
+                content={description.name}
+                onClick={() => setSelectedTestIndex(index)}
+                style={fluentTesterStyles.testListItem}
+                testID={description.testPage}
+              />
+            );
+          })}
+        </ScrollView>
+
+        <TestListSeparator vertical style={{ marginHorizontal: 8 }} />
+      </View>
+    );
+  };
+
+  const MobileTestList: React.FunctionComponent<{}> = () => {
+    return (
+      <View style={{ ...mobileStyles.testList, display: isTestListVisible ? 'flex' : 'none' }}>
+        <ScrollView contentContainerStyle={fluentTesterStyles.testListContainerStyle}>
+          {sortedTestComponents.map((description, index) => {
+            return (
+              <View key={index}>
+                <Text
+                  key={index}
+                  onPress={() => {
+                    setOnTestListView(false);
+                    setSelectedTestIndex(index);
+                    if (Platform.OS === 'android') {
+                      BackHandler.addEventListener('hardwareBackPress', onBackPress);
+                    }
+                  }}
+                  style={mobileStyles.testListItem}
+                  testID={description.testPage}
+                >
+                  {description.name}
+                </Text>
+                <Separator style={themedStyles.testSeparator} />
+              </View>
+            );
+          })}
+        </ScrollView>
+      </View>
+    );
+  };
+
+  const TestComponentView: React.FunctionComponent<{}> = () => {
+    return (
+      <ScrollView style={fluentTesterStyles.testSection}>
+        <TestComponent />
+      </ScrollView>
+    );
+  };
+
+  const MobileTestComponentView: React.FunctionComponent<{}> = () => {
+    return (
+      <View style={{ ...mobileStyles.testSection, display: isTestSectionVisible ? 'flex' : 'none' }}>
+        <ScrollView>
+          <TestComponent />
+        </ScrollView>
+      </View>
+    );
+  };
+
  return (
    <RootView style={themedStyles.root}>
-      <Header />
+      {enableSinglePaneView ? <MobileHeader /> : <Header />}

      <HeaderSeparator />

-      {enableSinglePaneView ? (
-        <View style={themedStyles.root}>
-          <DisplayIfVisible isVisible={onTestListView}>
-            <ScrollView style={mobileStyles.testList} contentContainerStyle={fluentTesterStyles.testListContainerStyle}>
-              {sortedTestComponents.map((description, index) => {
-                return (
-                  <View key={index}>
-                    <Text
-                      key={index}
-                      onPress={() => {
-                        setOnTestListView(false);
-                        setSelectedTestIndex(index);
-                        BackHandler.addEventListener('hardwareBackPress', onBackPress);
-                      }}
-                      style={mobileStyles.testListItems}
-                      testID={description.testPage}
-                    >
-                      {description.name}
-                    </Text>
-                    <Separator style={themedStyles.testListSeparator} />
-                  </View>
-                );
-              })}
-            </ScrollView>
-          </DisplayIfVisible>
-          <DisplayIfVisible isVisible={!onTestListView}>
-            <View style={mobileStyles.testSection}>
-              <ScrollView>
-                <TestComponent />
-              </ScrollView>
-            </View>
-          </DisplayIfVisible>
-        </View>
-      ) : (
-        <View style={fluentTesterStyles.testRoot}>
-          <ScrollView style={fluentTesterStyles.testList} contentContainerStyle={fluentTesterStyles.testListContainerStyle}>
-            {sortedTestComponents.map((description, index) => {
-              return (
-                <StealthButton
-                  key={index}
-                  disabled={index == selectedTestIndex}
-                  content={description.name}
-                  onClick={() => setSelectedTestIndex(index)}
-                  style={fluentTesterStyles.testListItem}
-                  testID={description.testPage}
-                />
-              );
-            })}
-          </ScrollView>
-
-          <TestListSeparator vertical style={{ marginHorizontal: 8, width: 2 }} />
-
-          <View style={fluentTesterStyles.testSection}>
-            <ScrollView>
-              <TestComponent />
-            </ScrollView>
-          </View>
-        </View>
-      )}
+      <View style={fluentTesterStyles.testRoot}>
+        {enableSinglePaneView ? <MobileTestList /> : <TestList />}
+        {enableSinglePaneView ? <MobileTestComponentView /> : <TestComponentView />}
+      </View>
    </RootView>
  );
 };
--- a/apps/fluent-tester/src/FluentTester/FluentTesterApp.tsx
+++ b/apps/fluent-tester/src/FluentTester/FluentTesterApp.tsx
@ -7,7 +7,7 @@ import { FluentTester, FluentTesterProps } from './FluentTester';
 import { tests } from './testPages';
 import { testerTheme } from './theme/index';

-const isMobile = Platform.OS == 'android';
+const isMobile = Platform.OS == 'android' || (Platform.OS === 'ios' && Platform.isPad === false);

 export const FluentTesterApp: React.FunctionComponent<FluentTesterProps> = (props) => {
  return (
--- a/apps/fluent-tester/src/FluentTester/TestComponents/Common/styles.ts
+++ b/apps/fluent-tester/src/FluentTester/TestComponents/Common/styles.ts
@ -69,27 +69,6 @@ export const fluentTesterStyles = StyleSheet.create({
    justifyContent: 'space-between',
  },

-  pickerRoot: {
-    flexDirection: 'row',
-  },
-
-  picker: {
-    flexDirection: 'row',
-    padding: 4,
-  },
-
-  pickerLabel: {
-    fontSize: 12,
-    marginTop: 6,
-    fontWeight: 'bold',
-  },
-
-  dropdown: {
-    height: 30,
-    width: 90,
-    fontSize: 12,
-  },
-
  testHeader: {
    marginBottom: 8,
    marginTop: 4,
@ -112,7 +91,7 @@ export const fluentTesterStyles = StyleSheet.create({
  },

  testSection: {
-    width: '85%',
+    flexGrow: 1,
  },

  noTest: {
@ -136,10 +115,15 @@ export const separatorStackStyle: IStackProps['style'] = {
 };

 export const mobileStyles = StyleSheet.create({
+  header: {
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+  },
+
  testList: {
    width: '100%',
  },
-  testListItems: {
+  testListItem: {
    width: '100%',
    height: 'auto',
    fontSize: 18,
--- a/apps/fluent-tester/src/FluentTester/theme/ThemePickers.ios.tsx
+++ b/apps/fluent-tester/src/FluentTester/theme/ThemePickers.ios.tsx
@ -0,0 +1,79 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { Button } from '@fluentui-react-native/experimental-button';
+import { MenuAction, MenuView } from '@react-native-menu/menu';
+import { testerTheme } from './CustomThemes';
+import { themeChoices, ThemeNames } from './applyTheme';
+import { brandOptions, OfficeBrand } from './applyBrand';
+import { Theme, useTheme } from '@fluentui-react-native/framework';
+import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+
+export const themePickerStyles = themedStyleSheet((t: Theme) => {
+  return {
+    pickerRoot: {
+      flexDirection: 'row',
+    },
+    picker: {
+      flexDirection: 'column',
+      alignItems: 'center',
+      padding: 4,
+      flexShrink: 0,
+    },
+    pickerItem: {
+      color: t.colors.bodyText,
+    },
+
+    dropdown: {
+      height: 200,
+      width: 90,
+      fontSize: 12,
+    },
+  };
+});
+
+export const ThemePickers: React.FunctionComponent<{}> = () => {
+  const themedStyles = themePickerStyles(useTheme());
+
+  const onBrandChange = React.useCallback((newBrand: string) => {
+    testerTheme.brand = newBrand as OfficeBrand;
+  }, []);
+
+  const onThemeSelected = React.useCallback((newTheme: string) => {
+    testerTheme.themeName = newTheme as ThemeNames;
+  }, []);
+
+  const themeMenuOptions: MenuAction[] = themeChoices.map((themeChoice) => ({
+    id: themeChoice.value,
+    title: themeChoice.label,
+    state: testerTheme.themeName === themeChoice.value ? 'on' : 'off',
+  }));
+
+  const brandMenuOptions: MenuAction[] = brandOptions.map((brandOption) => ({
+    id: brandOption.value,
+    title: brandOption.label,
+    state: testerTheme.brand === brandOption.value ? 'on' : 'off',
+  }));
+
+  return (
+    <View style={themedStyles.pickerRoot}>
+      <MenuView
+        title="Theme"
+        onPressAction={({ nativeEvent }) => {
+          onThemeSelected(nativeEvent.event);
+        }}
+        actions={themeMenuOptions}
+      >
+        <Button ghost content="Theme" />
+      </MenuView>
+      <MenuView
+        title="Brand"
+        onPressAction={({ nativeEvent }) => {
+          onBrandChange(nativeEvent.event);
+        }}
+        actions={brandMenuOptions}
+      >
+        <Button ghost content="Brand" />
+      </MenuView>
+    </View>
+  );
+};
--- a/apps/fluent-tester/src/FluentTester/theme/ThemePickers.macos.tsx
+++ b/apps/fluent-tester/src/FluentTester/theme/ThemePickers.macos.tsx
@ -0,0 +1,78 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Text } from '@fluentui-react-native/experimental-text';
+import { Picker } from '@react-native-picker/picker';
+import { testerTheme } from './CustomThemes';
+import { themeChoices, ThemeNames } from './applyTheme';
+import { brandOptions, OfficeBrand } from './applyBrand';
+
+export const themePickerStyles = StyleSheet.create({
+  pickerRoot: {
+    flexDirection: 'row',
+  },
+
+  picker: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 4,
+  },
+
+  dropdown: {
+    height: 30,
+    width: 90,
+    fontSize: 12,
+  },
+});
+
+type PartPickerEntry = { label: string; value: string };
+
+type PartPickerProps = {
+  initial: string;
+  contents: PartPickerEntry[];
+  onChange: (value: string) => void;
+};
+
+export const PartPicker: React.FunctionComponent<PartPickerProps> = (props: PartPickerProps) => {
+  const { initial, contents, onChange } = props;
+  const [value, setValue] = React.useState(initial);
+  const onValueChange = React.useCallback(
+    (newValue: string) => {
+      setValue(newValue);
+      onChange(newValue);
+    },
+    [setValue, onChange],
+  );
+  return (
+    <Picker selectedValue={value} style={themePickerStyles.dropdown} onValueChange={onValueChange}>
+      {contents.map((entry: PartPickerEntry, index: number) => (
+        <Picker.Item label={entry.label} value={entry.value} key={`entry${index}`} />
+      ))}
+    </Picker>
+  );
+};
+
+const PickerLabel = Text.customize({ variant: 'bodySemibold' });
+
+export const ThemePickers: React.FunctionComponent<{}> = () => {
+  const onBrandChange = React.useCallback((newBrand: string) => {
+    testerTheme.brand = newBrand as OfficeBrand;
+  }, []);
+
+  const onThemeSelected = React.useCallback((newTheme: string) => {
+    testerTheme.themeName = newTheme as ThemeNames;
+  }, []);
+
+  return (
+    <View style={themePickerStyles.pickerRoot}>
+      <View style={themePickerStyles.picker}>
+        <PickerLabel>Theme: </PickerLabel>
+        <PartPicker initial={testerTheme.themeName} onChange={onThemeSelected} contents={themeChoices} />
+      </View>
+
+      <View style={themePickerStyles.picker}>
+        <PickerLabel>Brand: </PickerLabel>
+        <PartPicker initial={testerTheme.brand} onChange={onBrandChange} contents={brandOptions} />
+      </View>
+    </View>
+  );
+};
--- a/apps/ios/src/Podfile
+++ b/apps/ios/src/Podfile
@ -28,6 +28,7 @@ use_test_app! do |target|
    pod 'FluentUI-React-Native-Avatar', :path => '../../../packages/experimental/Avatar/FluentUIReactNativeAvatar.podspec'
    pod 'FluentUI-React-Native-Shimmer', :path => '../../../packages/components/Shimmer/FluentUIReactNativeShimmer.podspec'
    pod 'FluentUI-React-Native-Button', :path => '../../../packages/experimental/NativeButton/FluentUIReactNativeButton.podspec'
+    pod 'react-native-menu', :path => '../../../node_modules/@react-native-menu/menu'

    script_phase name: 'Start Packager',
                 script: start_packager_script,
--- a/apps/ios/src/Podfile.lock
+++ b/apps/ios/src/Podfile.lock
@ -9,16 +9,16 @@ PODS:
    - React-Core (= 0.63.4)
    - React-jsi (= 0.63.4)
    - ReactCommon/turbomodule/core (= 0.63.4)
-  - FluentUI-React-Native-Apple-Theme (0.3.0):
+  - FluentUI-React-Native-Apple-Theme (0.4.0):
    - MicrosoftFluentUI (~> 0.2.2)
    - React
-  - FluentUI-React-Native-Avatar (0.6.0):
+  - FluentUI-React-Native-Avatar (0.6.1):
    - MicrosoftFluentUI (~> 0.2.2)
    - React
-  - FluentUI-React-Native-Button (0.5.0):
+  - FluentUI-React-Native-Button (0.5.1):
    - MicrosoftFluentUI (~> 0.2.2)
    - React
-  - FluentUI-React-Native-Shimmer (0.6.0):
+  - FluentUI-React-Native-Shimmer (0.6.1):
    - MicrosoftFluentUI (~> 0.2.2)
    - React
  - Folly (2020.01.13.00):
@ -254,6 +254,8 @@ PODS:
    - React-cxxreact (= 0.63.4)
    - React-jsi (= 0.63.4)
  - React-jsinspector (0.63.4)
+  - react-native-menu (0.1.2):
+    - React
  - React-RCTActionSheet (0.63.4):
    - React-Core/RCTActionSheetHeaders (= 0.63.4)
  - React-RCTAnimation (0.63.4):
@ -342,6 +344,7 @@ DEPENDENCIES:
  - React-jsi (from `../../../node_modules/react-native/ReactCommon/jsi`)
  - React-jsiexecutor (from `../../../node_modules/react-native/ReactCommon/jsiexecutor`)
  - React-jsinspector (from `../../../node_modules/react-native/ReactCommon/jsinspector`)
+  - "react-native-menu (from `../../../node_modules/@react-native-menu/menu`)"
  - React-RCTActionSheet (from `../../../node_modules/react-native/Libraries/ActionSheetIOS`)
  - React-RCTAnimation (from `../../../node_modules/react-native/Libraries/NativeAnimation`)
  - React-RCTBlob (from `../../../node_modules/react-native/Libraries/Blob`)
@ -403,6 +406,8 @@ EXTERNAL SOURCES:
    :path: "../../../node_modules/react-native/ReactCommon/jsiexecutor"
  React-jsinspector:
    :path: "../../../node_modules/react-native/ReactCommon/jsinspector"
+  react-native-menu:
+    :path: "../../../node_modules/@react-native-menu/menu"
  React-RCTActionSheet:
    :path: "../../../node_modules/react-native/Libraries/ActionSheetIOS"
  React-RCTAnimation:
@ -435,10 +440,10 @@ SPEC CHECKSUMS:
  DoubleConversion: cde416483dac037923206447da6e1454df403714
  FBLazyVector: 3bb422f41b18121b71783a905c10e58606f7dc3e
  FBReactNativeSpec: f2c97f2529dd79c083355182cc158c9f98f4bd6e
-  FluentUI-React-Native-Apple-Theme: 6e49bd84476c8cdd49e205fb1d791e8f009ef024
-  FluentUI-React-Native-Avatar: 2eee15cc5a43322668b61e1a214927974b555adc
-  FluentUI-React-Native-Button: 9485eb3b3ac48fe9ff7c8201cedc8a6302605acc
-  FluentUI-React-Native-Shimmer: b1c87c072238a69fe0fdf10b79cdeb2299968330
+  FluentUI-React-Native-Apple-Theme: cb23903e77760527bcda56506a8b2d795789b432
+  FluentUI-React-Native-Avatar: a3de9c856424439e0446c7db9f8e03bb0afccd3d
+  FluentUI-React-Native-Button: 0ea3402fe5403a8d0ab57c49c986c1de64ec900f
+  FluentUI-React-Native-Shimmer: abc14008cf700193b941622e5d0e5bb33e452b3f
  Folly: b73c3869541e86821df3c387eb0af5f65addfab4
  glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
  MicrosoftFluentUI: 8a1ef14a8479106c33822d05b774e04051bb33f2
@ -453,6 +458,7 @@ SPEC CHECKSUMS:
  React-jsi: a0418934cf48f25b485631deb27c64dc40fb4c31
  React-jsiexecutor: 93bd528844ad21dc07aab1c67cb10abae6df6949
  React-jsinspector: 58aef7155bc9a9683f5b60b35eccea8722a4f53a
+  react-native-menu: 9fe07f72e075b250295eeae25425490cc9608951
  React-RCTActionSheet: 89a0ca9f4a06c1f93c26067af074ccdce0f40336
  React-RCTAnimation: 1bde3ecc0c104c55df246eda516e0deb03c4e49b
  React-RCTBlob: a97d378b527740cc667e03ebfa183a75231ab0f0
@ -468,6 +474,6 @@ SPEC CHECKSUMS:
  SwiftLint: 0c645fdc6feed3e390c1701ab3cc669f88b42752
  Yoga: 4bd86afe9883422a7c4028c00e34790f560923d6

-PODFILE CHECKSUM: 1236c39b2a369c6c27478060127c88ce50cbe405
+PODFILE CHECKSUM: ced6a59a49df8f93943b0d8c83ff32da91c2746f

 COCOAPODS: 1.10.1
--- a/apps/macos/src/Podfile
+++ b/apps/macos/src/Podfile
@ -27,6 +27,7 @@ use_test_app! do |target|
    pod 'FluentUI-React-Native-Apple-Theme', :path => '../../../packages/theming/apple-theme/FluentUIReactNativeAppleTheme.podspec'
    pod 'FluentUI-React-Native-Button', :path => '../../../packages/experimental/NativeButton/FluentUIReactNativeButton.podspec'
    pod 'FluentUI-React-Native-Avatar', :path => '../../../packages/experimental/Avatar/FluentUIReactNativeAvatar.podspec'
+    pod 'RNCPicker', :path => '../../../node_modules/@react-native-picker/picker'

    script_phase name: 'Start Packager',
                 script: start_packager_script,
--- a/apps/macos/src/Podfile.lock
+++ b/apps/macos/src/Podfile.lock
@ -9,13 +9,13 @@ PODS:
    - React-Core (= 0.63.1)
    - React-jsi (= 0.63.1)
    - ReactCommon/turbomodule/core (= 0.63.1)
-  - FluentUI-React-Native-Apple-Theme (0.3.0):
+  - FluentUI-React-Native-Apple-Theme (0.4.0):
    - MicrosoftFluentUI (~> 0.2.2)
    - React
-  - FluentUI-React-Native-Avatar (0.6.0):
+  - FluentUI-React-Native-Avatar (0.6.1):
    - MicrosoftFluentUI (~> 0.2.2)
    - React
-  - FluentUI-React-Native-Button (0.5.0):
+  - FluentUI-React-Native-Button (0.5.1):
    - MicrosoftFluentUI (~> 0.2.2)
    - React
  - glog (0.3.5)
@ -290,6 +290,8 @@ PODS:
    - React-jsi (= 0.63.1)
  - ReactTestApp-DevSupport (0.3.13)
  - ReactTestApp-Resources (1.0.0-dev)
+  - RNCPicker (1.9.11):
+    - React-Core
  - SwiftLint (0.43.0)
  - Yoga (1.14.0)

@ -327,6 +329,7 @@ DEPENDENCIES:
  - ReactCommon/turbomodule/core (from `../../../node_modules/react-native-macos/ReactCommon`)
  - ReactTestApp-DevSupport (from `../../../node_modules/react-native-test-app`)
  - ReactTestApp-Resources (from `..`)
+  - "RNCPicker (from `../../../node_modules/@react-native-picker/picker`)"
  - SwiftLint
  - Yoga (from `../../../node_modules/react-native-macos/ReactCommon/yoga`)

@ -398,6 +401,8 @@ EXTERNAL SOURCES:
    :path: "../../../node_modules/react-native-test-app"
  ReactTestApp-Resources:
    :path: ".."
+  RNCPicker:
+    :path: "../../../node_modules/@react-native-picker/picker"
  Yoga:
    :path: "../../../node_modules/react-native-macos/ReactCommon/yoga"

@ -406,9 +411,9 @@ SPEC CHECKSUMS:
  DoubleConversion: 56a44bcfd14ab2ff66f5a146b2e875eb4b69b19b
  FBLazyVector: 87ca368919ae0ec70816fb8a42252ef59dc05c94
  FBReactNativeSpec: 7c0591658d85effad209fc4f45b6c9760f9e5842
-  FluentUI-React-Native-Apple-Theme: 6e49bd84476c8cdd49e205fb1d791e8f009ef024
-  FluentUI-React-Native-Avatar: 2eee15cc5a43322668b61e1a214927974b555adc
-  FluentUI-React-Native-Button: 9485eb3b3ac48fe9ff7c8201cedc8a6302605acc
+  FluentUI-React-Native-Apple-Theme: cb23903e77760527bcda56506a8b2d795789b432
+  FluentUI-React-Native-Avatar: a3de9c856424439e0446c7db9f8e03bb0afccd3d
+  FluentUI-React-Native-Button: 0ea3402fe5403a8d0ab57c49c986c1de64ec900f
  glog: 1cb7c408c781ae8f35bbababe459b45e3dee4ec1
  MicrosoftFluentUI: 8a1ef14a8479106c33822d05b774e04051bb33f2
  RCT-Folly: 1347093ffe75e152d846f7e45a3ef901b60021aa
@ -434,9 +439,10 @@ SPEC CHECKSUMS:
  ReactCommon: 2b36aa7cd56bc9a0376b013db964e8b17a6a18f9
  ReactTestApp-DevSupport: 12d9f285a44ff0cb7962a213621f87d3e6de9288
  ReactTestApp-Resources: 5950ae44720217c6778ff03fb1d906c8fb3ce483
+  RNCPicker: 6780c753e9e674065db90d9c965920516402579d
  SwiftLint: 0c645fdc6feed3e390c1701ab3cc669f88b42752
  Yoga: 6f6f412e10cf9acb93bb0e290613784603d2f0c9

-PODFILE CHECKSUM: 54d938735a7c78d6d745f1a0773f405a49414836
+PODFILE CHECKSUM: ee017c1f20907cc14fb6752c327c0c0fc04bbde0

 COCOAPODS: 1.10.1
--- a/change/@fluentui-react-native-2021-03-10-02-05-28-new-picker.json
+++ b/change/@fluentui-react-native-2021-03-10-02-05-28-new-picker.json
@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Update FluentTester to be mobile friendly on iOS",
+  "packageName": "@fluentui/react-native",
+  "email": "saadnajmi2@gmail.com",
+  "dependentChangeType": "patch",
+  "date": "2021-03-10T08:05:25.666Z"
+}
--- a/change/@fluentui-react-native-apple-theme-2021-03-10-02-05-28-new-picker.json
+++ b/change/@fluentui-react-native-apple-theme-2021-03-10-02-05-28-new-picker.json
@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Update FluentTester to be mobile friendly on iOS",
+  "packageName": "@fluentui-react-native/apple-theme",
+  "email": "saadnajmi2@gmail.com",
+  "dependentChangeType": "patch",
+  "date": "2021-03-10T08:05:28.261Z"
+}
--- a/change/@fluentui-react-native-button-2021-03-10-02-05-28-new-picker.json
+++ b/change/@fluentui-react-native-button-2021-03-10-02-05-28-new-picker.json
@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Update FluentTester to be mobile friendly on iOS",
+  "packageName": "@fluentui-react-native/button",
+  "email": "saadnajmi2@gmail.com",
+  "dependentChangeType": "patch",
+  "date": "2021-03-10T08:05:15.892Z"
+}
--- a/change/@fluentui-react-native-experimental-avatar-2021-03-10-02-05-28-new-picker.json
+++ b/change/@fluentui-react-native-experimental-avatar-2021-03-10-02-05-28-new-picker.json
@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Update FluentTester to be mobile friendly on iOS",
+  "packageName": "@fluentui-react-native/experimental-avatar",
+  "email": "saadnajmi2@gmail.com",
+  "dependentChangeType": "patch",
+  "date": "2021-03-10T08:05:20.176Z"
+}
--- a/change/@fluentui-react-native-experimental-native-button-2021-03-10-02-05-28-new-picker.json
+++ b/change/@fluentui-react-native-experimental-native-button-2021-03-10-02-05-28-new-picker.json
@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Update FluentTester to be mobile friendly on iOS",
+  "packageName": "@fluentui-react-native/experimental-native-button",
+  "email": "saadnajmi2@gmail.com",
+  "dependentChangeType": "patch",
+  "date": "2021-03-10T08:05:22.068Z"
+}
--- a/change/@fluentui-react-native-shimmer-2021-03-10-02-05-28-new-picker.json
+++ b/change/@fluentui-react-native-shimmer-2021-03-10-02-05-28-new-picker.json
@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Update FluentTester to be mobile friendly on iOS",
+  "packageName": "@fluentui-react-native/shimmer",
+  "email": "saadnajmi2@gmail.com",
+  "dependentChangeType": "patch",
+  "date": "2021-03-10T08:05:17.973Z"
+}
--- a/change/@fluentui-react-native-tester-2021-03-05-14-37-47-new-picker.json
+++ b/change/@fluentui-react-native-tester-2021-03-05-14-37-47-new-picker.json
@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Revamp ThemePickers in Header",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "saadnajmi2@gmail.com",
+  "dependentChangeType": "patch",
+  "date": "2021-03-05T20:37:47.969Z"
+}
--- a/change/@fluentui-react-native-tester-win32-2021-03-10-02-05-28-new-picker.json
+++ b/change/@fluentui-react-native-tester-win32-2021-03-10-02-05-28-new-picker.json
@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Update FluentTester to be mobile friendly on iOS",
+  "packageName": "@fluentui-react-native/tester-win32",
+  "email": "saadnajmi2@gmail.com",
+  "dependentChangeType": "patch",
+  "date": "2021-03-10T08:05:13.590Z"
+}
--- a/yarn.lock
+++ b/yarn.lock
@ -2219,6 +2219,16 @@
  resolved "https://registry.yarnpkg.com/@react-native-community/eslint-plugin/-/eslint-plugin-1.1.0.tgz#e42b1bef12d2415411519fd528e64b593b1363dc"
  integrity sha512-W/J0fNYVO01tioHjvYWQ9m6RgndVtbElzYozBq1ZPrHO/iCzlqoySHl4gO/fpCl9QEFjvJfjPgtPMTMlsoq5DQ==

+"@react-native-menu/menu@^0.1.2":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@react-native-menu/menu/-/menu-0.1.2.tgz#2a3a9c8c3d142649b89a5c710eafa8ec3f0d7596"
+  integrity sha512-3jgCWoZY31s/cjtTCAbGN0VqapwM7WiGZonb5KSkRT6egkwR1QAWBxe8Pe216u6R5EY/AGC8Z4Bf9wASYpz/1A==
+
+"@react-native-picker/picker@^1.9.11":
+  version "1.9.11"
+  resolved "https://registry.yarnpkg.com/@react-native-picker/picker/-/picker-1.9.11.tgz#490c752417c17d687e2941659b3c0bff9cb79b83"
+  integrity sha512-E7whvvMIl9Ln1sxgug7OAEVWQ69n82iV0d2OWWp5VV52+RW3azKh1IFm4rxdW5/oByMfl7FFL0eHNelGgY4BMQ==
+
 "@rnx-kit/cli@^0.0.3":
  version "0.0.3"
  resolved "https://registry.yarnpkg.com/@rnx-kit/cli/-/cli-0.0.3.tgz#4802437bcfd9ef598080e1e7a12d387df0334ecb"