@fluentui-react-native/tester 0.69.5 → 0.70.0

package/src/FluentTester/TestComponents/Avatar/BasicAvatar.tsx

@@ -1,12 +1,13 @@
 import React, { useState, useCallback, FunctionComponent } from 'react';
 import { AvatarSize, AvatarSizes, AvatarColor, AvatarColors, Avatar, AvatarActive } from '@fluentui-react-native/avatar';
 import { PresenceBadgeStatuses, PresenceBadgeStatus } from '@fluentui-react-native/badge';
-import { Switch, View, Text, Picker, ColorValue, Platform } from 'react-native';
+import { Switch, View, Text, ColorValue, Platform } from 'react-native';
 import { satyaPhotoUrl, undefinedText } from './../PersonaCoin/styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import { useTheme } from '@fluentui-react-native/theme-types';
 import TestSvg from '../../test-data/test.svg';
 import { SvgIconProps } from '@fluentui-react-native/icon';
+import { StyledPicker } from '../Common/StyledPicker';
 
 type WithUndefined<T> = T | typeof undefinedText;
 
@@ -16,19 +17,6 @@ const avatarColors: AvatarColor[] = ['neutral', 'brand', 'colorful', ...AvatarCo
 const allSizes: WithUndefined<AvatarSize>[] = [undefinedText, ...AvatarSizes];
 const allPresences: WithUndefined<PresenceBadgeStatus>[] = [undefinedText, ...PresenceBadgeStatuses];
 
-const StyledPicker = (props) => {
-  const { prompt, selected, onChange, collection } = props;
-  const theme = useTheme();
-  const pickerStyles = { color: theme.colors.inputText as ColorValue, ...commonStyles.header };
-  return (
-    <Picker prompt={prompt} style={pickerStyles} selectedValue={selected} onValueChange={onChange}>
-      {collection.map((value, index) => (
-        <Picker.Item label={value} key={index} value={value} />
-      ))}
-    </Picker>
-  );
-};
-
 export const StandardUsage: FunctionComponent = () => {
   const [isSquare, setSquare] = useState(false);
   const [showImage, setShowImage] = useState(true);
@@ -64,7 +52,7 @@ export const StandardUsage: FunctionComponent = () => {
 
   return (
     <View style={commonStyles.root}>
-      <View style={commonStyles.settings}>
+      <View style={commonStyles.settingsPicker}>
         <View style={commonStyles.switch}>
           <Text style={textStyles}>Show image</Text>
           <Switch value={showImage} onValueChange={setShowImage} />
@@ -84,58 +72,60 @@ export const StandardUsage: FunctionComponent = () => {
         <StyledPicker prompt="Avatar Color" selected={avatarColor} onChange={onAvatarColorChange} collection={avatarColors} />
         <StyledPicker prompt="Presence status" selected={presence} onChange={onPresenceChange} collection={allPresences} />
       </View>
-      <Avatar
-        accessibilityLabel="Fall-back Icon"
-        accessibilityHint="A picture representing a user"
-        size={imageSize === undefinedText ? undefined : imageSize}
-      />
-      <Avatar
-        active={active}
-        activeAppearance={activeAppearance}
-        size={imageSize === undefinedText ? undefined : imageSize}
-        name="Satya Nadella"
-        shape={isSquare ? 'square' : 'circular'}
-        accessibilityLabel="Photo of Satya Nadella"
-        badge={{ status: presence === undefinedText ? undefined : presence, outOfOffice }}
-        imageUrl={showImage ? satyaPhotoUrl : undefined}
-        avatarColor={avatarColor}
-      />
-      <Avatar
-        active={active}
-        activeAppearance={activeAppearance}
-        size={imageSize === undefinedText ? undefined : imageSize}
-        shape={isSquare ? 'square' : 'circular'}
-        accessibilityLabel="Icon"
-        name="* Richard Faynman *"
-        avatarColor="#ff0099"
-        initialsColor="yellow"
-      />
-      {svgIconsEnabled && (
-        <>
-          <Avatar
-            active={active}
-            activeAppearance={activeAppearance}
-            size={imageSize === undefinedText ? undefined : imageSize}
-            shape={isSquare ? 'square' : 'circular'}
-            accessibilityLabel="SVG Icon"
-            icon={{ fontSource: { ...fontBuiltInProps, fontSize: 32 }, color: 'red' }}
-            avatarColor={avatarColor}
-            badge={{ status: 'outOfOffice', outOfOffice }}
-          />
-          <Avatar
-            accessibilityHint="A picture representing a user"
-            active={active}
-            activeAppearance={activeAppearance}
-            size={imageSize === undefinedText ? undefined : imageSize}
-            shape={isSquare ? 'square' : 'circular'}
-            accessibilityLabel="SVG Icon"
-            icon={{ svgSource: svgProps }}
-            avatarColor={avatarColor}
-            badge={{ status: 'away', outOfOffice }}
-            idForColor="15"
-          />
-        </>
-      )}
+      <View style={commonStyles.pickerControlled}>
+        <Avatar
+          accessibilityLabel="Fall-back Icon"
+          accessibilityHint="A picture representing a user"
+          size={imageSize === undefinedText ? undefined : imageSize}
+        />
+        <Avatar
+          active={active}
+          activeAppearance={activeAppearance}
+          size={imageSize === undefinedText ? undefined : imageSize}
+          name="Satya Nadella"
+          shape={isSquare ? 'square' : 'circular'}
+          accessibilityLabel="Photo of Satya Nadella"
+          badge={{ status: presence === undefinedText ? undefined : presence, outOfOffice }}
+          imageUrl={showImage ? satyaPhotoUrl : undefined}
+          avatarColor={avatarColor}
+        />
+        <Avatar
+          active={active}
+          activeAppearance={activeAppearance}
+          size={imageSize === undefinedText ? undefined : imageSize}
+          shape={isSquare ? 'square' : 'circular'}
+          accessibilityLabel="Icon"
+          name="* Richard Faynman *"
+          avatarColor="#ff0099"
+          initialsColor="yellow"
+        />
+        {svgIconsEnabled && (
+          <>
+            <Avatar
+              active={active}
+              activeAppearance={activeAppearance}
+              size={imageSize === undefinedText ? undefined : imageSize}
+              shape={isSquare ? 'square' : 'circular'}
+              accessibilityLabel="SVG Icon"
+              icon={{ fontSource: { ...fontBuiltInProps, fontSize: 32 }, color: 'red' }}
+              avatarColor={avatarColor}
+              badge={{ status: 'outOfOffice', outOfOffice }}
+            />
+            <Avatar
+              accessibilityHint="A picture representing a user"
+              active={active}
+              activeAppearance={activeAppearance}
+              size={imageSize === undefinedText ? undefined : imageSize}
+              shape={isSquare ? 'square' : 'circular'}
+              accessibilityLabel="SVG Icon"
+              icon={{ svgSource: svgProps }}
+              avatarColor={avatarColor}
+              badge={{ status: 'away', outOfOffice }}
+              idForColor="15"
+            />
+          </>
+        )}
+      </View>
     </View>
   );
 };

package/src/FluentTester/TestComponents/Callout/CalloutTest.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ScreenRect, Text, View, Switch, Picker, ScrollView } from 'react-native';
+import { ScreenRect, Text, View, Switch, ScrollView } from 'react-native';
 import {
   Button,
   Callout,
@@ -14,6 +14,7 @@ import { CALLOUT_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { E2ECalloutTest } from './CalloutE2ETest';
 import { fluentTesterStyles } from '../Common/styles';
+import { MenuPicker } from '../Common/MenuPicker';
 
 const StandardCallout: React.FunctionComponent = () => {
   const [showStandardCallout, setShowStandardCallout] = React.useState(false);
@@ -233,35 +234,24 @@ const StandardCallout: React.FunctionComponent = () => {
             <Text>Enable ScrollView Callout</Text>
           </View>
 
-          <Picker
+          <MenuPicker
             prompt="Background Color"
-            selectedValue={selectedBackgroundColor || colorDefault}
-            onValueChange={(color) => setSelectedBackgroundColor(color === colorDefault ? undefined : color)}
-          >
-            {colorSelections.map((color, index) => (
-              <Picker.Item label={color} key={index} value={color} />
-            ))}
-          </Picker>
-
-          <Picker
+            selected={selectedBackgroundColor || colorDefault}
+            onChange={(color) => setSelectedBackgroundColor(color === colorDefault ? undefined : color)}
+            collection={colorSelections}
+          />
+          <MenuPicker
             prompt="Border Color"
-            selectedValue={selectedBorderColor || colorDefault}
-            onValueChange={(color) => setSelectedBorderColor(color === colorDefault ? undefined : color)}
-          >
-            {colorSelections.map((color, index) => (
-              <Picker.Item label={color} key={index} value={color} />
-            ))}
-          </Picker>
-
-          <Picker
+            selected={selectedBorderColor || colorDefault}
+            onChange={(color) => setSelectedBorderColor(color === colorDefault ? undefined : color)}
+            collection={colorSelections}
+          />
+          <MenuPicker
             prompt="Border Width"
-            selectedValue={selectedBorderWidth || borderWidthDefault}
-            onValueChange={(width) => setSelectedBorderWidth(width === borderWidthDefault ? undefined : width)}
-          >
-            {borderWidthSelections.map((width, index) => (
-              <Picker.Item label={width} key={index} value={width} />
-            ))}
-          </Picker>
+            selected={selectedBorderWidth || borderWidthDefault}
+            onChange={(color) => setSelectedBorderWidth(color === colorDefault ? undefined : color)}
+            collection={borderWidthSelections}
+          />
         </View>
 
         <Separator vertical />

package/src/FluentTester/TestComponents/Common/AlignmentPicker.tsx

@@ -1,28 +1,32 @@
 import * as React from 'react';
 import { undefinedText } from '../PersonaCoin/styles';
 import { IconAlignment } from '@fluentui/react-native';
-import { Picker, StyleProp, ViewStyle } from 'react-native';
+import { StyleProp, ViewStyle } from 'react-native';
+import { MenuPicker } from './MenuPicker';
 
 const alignmentValues: Array<typeof undefinedText | IconAlignment> = [undefinedText, 'start', 'center', 'end'];
 
 interface IAlignmentPickerProps {
   style?: StyleProp<ViewStyle>;
   label: string;
-  onSelectionChange: (value: IconAlignment | undefined) => void;
+  onSelectionChange: (value: IconAlignment) => void;
 }
 
 export const AlignmentPicker: React.FunctionComponent<IAlignmentPickerProps> = (props: IAlignmentPickerProps) => {
   const { label, onSelectionChange, style } = props;
+  const [selectedValue, setSelectedValue] = React.useState<IconAlignment>();
+
   return (
-    <Picker
+    <MenuPicker
       style={style}
       prompt={label}
-      selectedValue={undefinedText}
-      onValueChange={(value, index) => onSelectionChange(index == 0 ? undefined : value)}
-    >
-      {alignmentValues.map((alignment, index) => (
-        <Picker.Item label={alignment} key={index} value={alignment} />
-      ))}
-    </Picker>
+      selected={selectedValue || undefinedText}
+      onChange={(value: IconAlignment, index: number) => {
+        const alignmentValue = index == 0 ? undefined : value;
+        onSelectionChange(alignmentValue);
+        setSelectedValue(alignmentValue);
+      }}
+      collection={alignmentValues}
+    />
   );
 };

package/src/FluentTester/TestComponents/Common/MenuPicker.desktop.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { Text, View, StyleSheet } from 'react-native';
+import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu';
+import { ButtonV1 as Button } from '@fluentui/react-native';
+import { SvgXml } from 'react-native-svg';
+
+const chevronXml = `
+<svg width="12" height="16" viewBox="0 0 11 6" color="#000">
+  <path fill='currentColor' d='M0.646447 0.646447C0.841709 0.451184 1.15829 0.451184 1.35355 0.646447L5.5 4.79289L9.64645 0.646447C9.84171 0.451185 10.1583 0.451185 10.3536 0.646447C10.5488 0.841709 10.5488 1.15829 10.3536 1.35355L5.85355 5.85355C5.65829 6.04882 5.34171 6.04882 5.14645 5.85355L0.646447 1.35355C0.451184 1.15829 0.451184 0.841709 0.646447 0.646447Z' />
+</svg>`;
+
+interface MenuPickerProps {
+  prompt?: string;
+  selected?: any;
+  onChange?: (value: any, index?: number) => void;
+  collection?: any[];
+  style?: any;
+}
+
+export const MenuPicker: React.FunctionComponent<MenuPickerProps> = (props: MenuPickerProps) => {
+  const { prompt, selected, onChange, collection } = props;
+  return (
+    <View style={menuPickerStyles.container}>
+      <Text style={menuPickerStyles.prompt}>{prompt}</Text>
+      <Menu>
+        <MenuTrigger>
+          <Button>
+            <Text>{selected}</Text>
+            <View style={menuPickerStyles.chevronContainer}>
+              <SvgXml xml={chevronXml} />
+            </View>
+          </Button>
+        </MenuTrigger>
+        <MenuPopover>
+          <MenuList>
+            {collection.map((value, index) => (
+              <MenuItem onClick={() => onChange(value, index)} key={index}>
+                {value}
+              </MenuItem>
+            ))}
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    </View>
+  );
+};
+
+const menuPickerStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    margin: 5,
+  },
+  prompt: {
+    marginRight: 5,
+  },
+  chevronContainer: {
+    padding: 4,
+  },
+});

package/src/FluentTester/TestComponents/Common/MenuPicker.macos.tsx

@@ -0,0 +1 @@
+export * from './MenuPicker.desktop';

package/src/FluentTester/TestComponents/Common/MenuPicker.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { Picker } from '@react-native-picker/picker';
+
+/*
+ * The MenuPicker was created because the RN Core Picker was deprecated (preventing us from updating to RN 0.66).
+ * MenuPicker uses the community Picker package for iOS/Win32 and our own Picker for Win32/MacOS.
+ */
+
+interface MenuPickerProps {
+  prompt?: string;
+  selected?: any;
+  onChange?: (value: any, index?: number) => void;
+  collection?: any[];
+  style?: any;
+}
+
+export const MenuPicker: React.FunctionComponent<MenuPickerProps> = (props: MenuPickerProps) => {
+  const { prompt, selected, onChange, collection, style } = props;
+
+  return (
+    <Picker
+      prompt={prompt}
+      selectedValue={selected}
+      onValueChange={(itemValue: any, index: number) => onChange(itemValue, index)}
+      style={{ ...style }}
+    >
+      {collection.map((value, index) => (
+        <Picker.Item label={value} key={index} value={value} />
+      ))}
+    </Picker>
+  );
+};

package/src/FluentTester/TestComponents/Common/MenuPicker.win32.tsx

@@ -0,0 +1 @@
+export * from './MenuPicker.desktop';

package/src/FluentTester/TestComponents/Common/MenuPicker.windows.tsx

@@ -0,0 +1,38 @@
+export * from './MenuPicker.desktop';
+import * as React from 'react';
+import { Button, Text, View, StyleSheet } from 'react-native';
+
+interface MenuPickerProps {
+  prompt?: string;
+  selected?: any;
+  onChange?: (value: any, index?: number) => void;
+  collection?: any[];
+  style?: any;
+}
+
+export const MenuPicker: React.FunctionComponent<MenuPickerProps> = (props: MenuPickerProps) => {
+  const { prompt, onChange, collection } = props;
+  return (
+    <View style={menuPickerStyles.container}>
+      <Text style={menuPickerStyles.prompt}>{prompt}</Text>
+      {collection.map((value, index) => (
+        <Button onPress={() => onChange(value, index)} key={index} title={value} />
+      ))}
+    </View>
+  );
+};
+
+const menuPickerStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    margin: 5,
+  },
+  prompt: {
+    marginRight: 5,
+  },
+  chevronContainer: {
+    padding: 4,
+  },
+});

package/src/FluentTester/TestComponents/Common/StyledPicker.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { MenuPicker } from './MenuPicker';
+import { ColorValue } from 'react-native';
+import { useTheme } from '@fluentui-react-native/theme-types';
+import { commonTestStyles as commonStyles } from './styles';
+
+export const StyledPicker = (props) => {
+  const { prompt, selected, onChange, collection } = props;
+  const theme = useTheme();
+  const pickerStyles = { color: theme.colors.inputText as ColorValue, ...commonStyles.header };
+  return <MenuPicker prompt={prompt} style={pickerStyles} selected={selected} onChange={onChange} collection={collection} />;
+};

package/src/FluentTester/TestComponents/Common/styles.ts

@@ -26,6 +26,14 @@ export const commonTestStyles = StyleSheet.create({
   settings: {
     flexGrow: 1,
   },
+  settingsPicker: {
+    flexDirection: 'column',
+    flex: 1,
+  },
+  pickerControlled: {
+    flex: 1,
+    flexDirection: 'row',
+  },
   vmargin: {
     marginVertical: 6,
   },

package/src/FluentTester/TestComponents/Notification/NotificationTest.tsx

@@ -4,7 +4,13 @@ import { Test, TestSection, PlatformStatus } from '../Test';
 
 const PrimaryTest: React.FunctionComponent = () => {
   return (
-    <Notification variant={'primary'} endText="Undo">
+    <Notification
+      variant={'primary'}
+      action="Undo"
+      onPress={() => {
+        console.log('Notification tapped');
+      }}
+    >
       Mail Archived
     </Notification>
   );
@@ -12,7 +18,13 @@ const PrimaryTest: React.FunctionComponent = () => {
 
 const NeutralTest: React.FunctionComponent = () => {
   return (
-    <Notification variant={'neutral'} endText="Sign in">
+    <Notification
+      variant={'neutral'}
+      action="Sign in"
+      onPress={() => {
+        console.log('Notification tapped');
+      }}
+    >
       Some items require you to sign in to view them
     </Notification>
   );
@@ -20,7 +32,13 @@ const NeutralTest: React.FunctionComponent = () => {
 
 const DangerTest: React.FunctionComponent = () => {
   return (
-    <Notification variant={'danger'} endText="Retry">
+    <Notification
+      variant={'danger'}
+      action="Retry"
+      onPress={() => {
+        console.log('Notification tapped');
+      }}
+    >
       There was a problem, and your recent changes may not have saved
     </Notification>
   );
@@ -28,7 +46,13 @@ const DangerTest: React.FunctionComponent = () => {
 
 const WarningTest: React.FunctionComponent = () => {
   return (
-    <Notification variant={'warning'} endText="X">
+    <Notification
+      variant={'warning'}
+      action="X"
+      onPress={() => {
+        console.log('Notification tapped');
+      }}
+    >
       Read Only
     </Notification>
   );

package/src/FluentTester/TestComponents/Persona/StandardUsage.tsx

@@ -2,8 +2,9 @@ import * as React from 'react';
 import { Persona, PersonaSize } from '@fluentui/react-native';
 import { rajeshImageUrl } from './styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';
-import { View, Text, Switch, Picker } from 'react-native';
+import { View, Text, Switch } from 'react-native';
 import { undefinedText } from '../PersonaCoin/styles';
+import { MenuPicker } from '../Common/MenuPicker';
 
 type WithUndefined<T> = T | typeof undefinedText;
 
@@ -53,17 +54,13 @@ export const StandardUsage: React.FunctionComponent = () => {
         <SwitchWithLabel label="Show secondary text" value={showSecondary} onValueChange={setShowSecondary} />
         <SwitchWithLabel label="Show tertiary text" value={showTertiary} onValueChange={setShowTertiary} />
         <SwitchWithLabel label="Show optional text" value={showOptional} onValueChange={setShowOptional} />
-
-        <Picker
+        <MenuPicker
           prompt="Size"
           style={commonStyles.header}
-          selectedValue={imageSize || undefinedText}
-          onValueChange={(size) => setImageSize(size === undefinedText ? undefined : size)}
-        >
-          {allSizes.map((size, index) => (
-            <Picker.Item label={size} key={index} value={size} />
-          ))}
-        </Picker>
+          selected={imageSize || undefinedText}
+          onChange={(size: PersonaSize | typeof undefinedText) => setImageSize(size === undefinedText ? undefined : size)}
+          collection={allSizes}
+        />
       </View>
 
       <Persona

package/src/FluentTester/TestComponents/PersonaCoin/StandardUsage.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { PersonaSize, PersonaCoinFluentColor, PersonaCoin, PersonaPresence } from '@fluentui/react-native';
-import { Switch, View, Text, Picker, ColorValue } from 'react-native';
+import { StyledPicker } from '../Common/StyledPicker';
+import { Switch, View, Text, ColorValue } from 'react-native';
 import { satyaPhotoUrl, undefinedText } from './styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import { useTheme } from '@fluentui-react-native/theme-types';
@@ -46,19 +47,6 @@ const allColors: WithUndefined<PersonaCoinFluentColor>[] = [
 
 const allPresences: WithUndefined<PersonaPresence>[] = [undefinedText, 'none', 'online', 'offline', 'busy', 'dnd', 'blocked', 'away'];
 
-const StyledPicker = (props) => {
-  const { prompt, selected, onChange, collection } = props;
-  const theme = useTheme();
-  const pickerStyles = { color: theme.colors.inputText as ColorValue, ...commonStyles.header };
-  return (
-    <Picker prompt={prompt} style={pickerStyles} selectedValue={selected} onValueChange={onChange}>
-      {collection.map((value, index) => (
-        <Picker.Item label={value} key={index} value={value} />
-      ))}
-    </Picker>
-  );
-};
-
 export const StandardUsage: React.FunctionComponent = () => {
   const [showImage, setShowImage] = React.useState(true);
   const [imageSize, setImageSize] = React.useState<WithUndefined<PersonaSize>>('size72');
@@ -75,26 +63,27 @@ export const StandardUsage: React.FunctionComponent = () => {
   return (
     <View style={commonStyles.root}>
       {/* settings */}
-      <View style={commonStyles.settings}>
+      <View style={commonStyles.settingsPicker}>
         <View style={commonStyles.switch}>
           <Text style={textStyles}>Show image</Text>
           <Switch value={showImage} onValueChange={setShowImage} />
         </View>
-
         <StyledPicker prompt="Size" selected={imageSize} onChange={onSizeChange} collection={allSizes} />
         <StyledPicker prompt="Coin color" selected={coinColor} onChange={onColorChange} collection={allColors} />
         <StyledPicker prompt="Presence status" selected={presence} onChange={onPresenceChange} collection={allPresences} />
       </View>
 
       {/* component under test */}
-      <PersonaCoin
-        size={imageSize === undefinedText ? undefined : imageSize}
-        initials="SN"
-        imageDescription="Photo of Satya Nadella"
-        presence={presence === undefinedText ? undefined : presence}
-        imageUrl={showImage ? satyaPhotoUrl : undefined}
-        coinColorFluent={coinColor === undefinedText ? undefined : coinColor}
-      />
+      <View style={commonStyles.pickerControlled}>
+        <PersonaCoin
+          size={imageSize === undefinedText ? undefined : imageSize}
+          initials="SN"
+          imageDescription="Photo of Satya Nadella"
+          presence={presence === undefinedText ? undefined : presence}
+          imageUrl={showImage ? satyaPhotoUrl : undefined}
+          coinColorFluent={coinColor === undefinedText ? undefined : coinColor}
+        />
+      </View>
     </View>
   );
 };

package/src/FluentTester/theme/ThemePickers.android.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { View, PickerPropsAndroid } from 'react-native';
+import { View } from 'react-native';
 import { Text } from '@fluentui-react-native/experimental-text';
 import { lightnessOptions, 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';
-import { Picker } from '@react-native-picker/picker';
+import { Picker, PickerProps } from '@react-native-picker/picker';
 
 const getThemedDropdownStyles = themedStyleSheet((t: Theme) => {
   return {
@@ -52,13 +52,13 @@ export const ThemePickers: React.FunctionComponent = () => {
 
   type DropdownEntry = { label: string; value: string };
 
-  const dropdownProps: PickerPropsAndroid = {
+  type DropdownProps = { initial: string; onValueChange: (value: string) => void; options: DropdownEntry[] };
+
+  const dropdownProps: Omit<PickerProps, 'onValueChange' | 'selectedValue'> = {
     style: themedPickerStyles.dropdown,
     mode: 'dropdown',
   };
 
-  type DropdownProps = { initial: string; onValueChange: (value: string) => void; options: DropdownEntry[] };
-
   const Dropdown = (props: DropdownProps) => {
     const { initial, onValueChange, options } = props;
     return (