@fluentui-react-native/tester 0.65.5 → 0.67.0

package/lib-commonjs/FluentTester/testPages.web.js

@@ -24,7 +24,7 @@ exports.tests = [
     },
     {
         name: 'Avatar Test',
-        component: Avatar_1.JSAvatarTest,
+        component: Avatar_1.AvatarTest,
         testPage: Avatar_1.HOMEPAGE_AVATAR_BUTTON,
     },
     {

package/lib-commonjs/FluentTester/testPages.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"testPages.web.js","sourceRoot":"","sources":["../../src/FluentTester/testPages.web.ts"],"names":[],"mappings":";;;AACA,kDAA+E;AAC/E,gDAAmE;AACnE,kDAA6E;AAC7E,sDAAmF;AACnF,8CAAuE;AACvE,oDAAgF;AAChF,4DAA4F;AAC5F,wDAAsF;AACtF,0DAAyF;AACzF,wDAAsF;AACtF,8CAAuE;AACvE,sEAA4G;AAC5G,gDAA0E;AAC1E,kDAA2E;AAC3E,wEAA+G;AAElG,QAAA,KAAK,GAAsB;IACtC;QACE,IAAI,EAAE,wBAAwB;QAC9B,SAAS,EAAE,yCAAqB;QAChC,QAAQ,EAAE,sDAAkC;KAC7C;IACD;QACE,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,qBAAY;QACvB,QAAQ,EAAE,+BAAsB;KACjC;IACD;QACE,IAAI,EAAE,YAAY;QAClB,SAAS,EAAE,iBAAS;QACpB,QAAQ,EAAE,sBAAc;KACzB;IACD;QACE,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,mBAAU;QACrB,QAAQ,EAAE,+BAAsB;KACjC;IACD;QACE,IAAI,EAAE,eAAe;QACrB,SAAS,EAAE,uBAAY;QACvB,QAAQ,EAAE,mCAAwB;KACnC;IACD;QACE,IAAI,EAAE,gBAAgB;QACtB,SAAS,EAAE,yBAAa;QACxB,QAAQ,EAAE,qCAAyB;KACpC;IACD;QACE,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,eAAQ;QACnB,QAAQ,EAAE,2BAAoB;KAC/B;IACD;QACE,IAAI,EAAE,gBAAgB;QACtB,SAAS,EAAE,yBAAa;QACxB,QAAQ,EAAE,qCAAyB;KACpC;IACD;QACE,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,eAAQ;QACnB,QAAQ,EAAE,2BAAoB;KAC/B;IACD;QACE,IAAI,EAAE,wBAAwB;QAC9B,SAAS,EAAE,uCAAoB;QAC/B,QAAQ,EAAE,oDAAiC;KAC5C;IACD;QACE,IAAI,EAAE,YAAY;QAClB,SAAS,EAAE,iBAAS;QACpB,QAAQ,EAAE,6BAAqB;KAChC;IACD;QACE,IAAI,EAAE,kBAAkB;QACxB,SAAS,EAAE,6BAAe;QAC1B,QAAQ,EAAE,yCAA2B;KACtC;IACD;QACE,IAAI,EAAE,iBAAiB;QACvB,SAAS,EAAE,2BAAc;QACzB,QAAQ,EAAE,uCAA0B;KACrC;IACD;QACE,IAAI,EAAE,cAAc;QACpB,SAAS,EAAE,qBAAW;QACtB,QAAQ,EAAE,iCAAuB;KAClC;IACD;QACE,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,kBAAS;QACpB,QAAQ,EAAE,8BAAqB;KAChC;CACF,CAAC"}
+{"version":3,"file":"testPages.web.js","sourceRoot":"","sources":["../../src/FluentTester/testPages.web.ts"],"names":[],"mappings":";;;AACA,kDAA6E;AAC7E,gDAAmE;AACnE,kDAA6E;AAC7E,sDAAmF;AACnF,8CAAuE;AACvE,oDAAgF;AAChF,4DAA4F;AAC5F,wDAAsF;AACtF,0DAAyF;AACzF,wDAAsF;AACtF,8CAAuE;AACvE,sEAA4G;AAC5G,gDAA0E;AAC1E,kDAA2E;AAC3E,wEAA+G;AAElG,QAAA,KAAK,GAAsB;IACtC;QACE,IAAI,EAAE,wBAAwB;QAC9B,SAAS,EAAE,yCAAqB;QAChC,QAAQ,EAAE,sDAAkC;KAC7C;IACD;QACE,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,mBAAU;QACrB,QAAQ,EAAE,+BAAsB;KACjC;IACD;QACE,IAAI,EAAE,YAAY;QAClB,SAAS,EAAE,iBAAS;QACpB,QAAQ,EAAE,sBAAc;KACzB;IACD;QACE,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,mBAAU;QACrB,QAAQ,EAAE,+BAAsB;KACjC;IACD;QACE,IAAI,EAAE,eAAe;QACrB,SAAS,EAAE,uBAAY;QACvB,QAAQ,EAAE,mCAAwB;KACnC;IACD;QACE,IAAI,EAAE,gBAAgB;QACtB,SAAS,EAAE,yBAAa;QACxB,QAAQ,EAAE,qCAAyB;KACpC;IACD;QACE,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,eAAQ;QACnB,QAAQ,EAAE,2BAAoB;KAC/B;IACD;QACE,IAAI,EAAE,gBAAgB;QACtB,SAAS,EAAE,yBAAa;QACxB,QAAQ,EAAE,qCAAyB;KACpC;IACD;QACE,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,eAAQ;QACnB,QAAQ,EAAE,2BAAoB;KAC/B;IACD;QACE,IAAI,EAAE,wBAAwB;QAC9B,SAAS,EAAE,uCAAoB;QAC/B,QAAQ,EAAE,oDAAiC;KAC5C;IACD;QACE,IAAI,EAAE,YAAY;QAClB,SAAS,EAAE,iBAAS;QACpB,QAAQ,EAAE,6BAAqB;KAChC;IACD;QACE,IAAI,EAAE,kBAAkB;QACxB,SAAS,EAAE,6BAAe;QAC1B,QAAQ,EAAE,yCAA2B;KACtC;IACD;QACE,IAAI,EAAE,iBAAiB;QACvB,SAAS,EAAE,2BAAc;QACzB,QAAQ,EAAE,uCAA0B;KACrC;IACD;QACE,IAAI,EAAE,cAAc;QACpB,SAAS,EAAE,qBAAW;QACtB,QAAQ,EAAE,iCAAuB;KAClC;IACD;QACE,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,kBAAS;QACpB,QAAQ,EAAE,8BAAqB;KAChC;CACF,CAAC"}

package/lib-commonjs/FluentTester/testPages.win32.js

@@ -38,7 +38,7 @@ exports.tests = [
     },
     {
         name: 'Avatar Test',
-        component: Avatar_1.JSAvatarTest,
+        component: Avatar_1.AvatarTest,
         testPage: Avatar_1.HOMEPAGE_AVATAR_BUTTON,
     },
     {

package/lib-commonjs/FluentTester/testPages.win32.js.map

@@ -1 +1 @@
-{"version":3,"file":"testPages.win32.js","sourceRoot":"","sources":["../../src/FluentTester/testPages.win32.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"testPages.win32.js","sourceRoot":"","sources":["../../src/FluentTester/testPages.win32.ts"],"names":[],"mappings":"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"}

package/lib-commonjs/FluentTester/testPages.windows.js

@@ -27,7 +27,7 @@ exports.tests = [
     },
     {
         name: 'Avatar Test',
-        component: Avatar_1.JSAvatarTest,
+        component: Avatar_1.AvatarTest,
         testPage: Avatar_1.HOMEPAGE_AVATAR_BUTTON,
     },
     {

package/lib-commonjs/FluentTester/testPages.windows.js.map

@@ -1 +1 @@
-{"version":3,"file":"testPages.windows.js","sourceRoot":"","sources":["../../src/FluentTester/testPages.windows.ts"],"names":[],"mappings":";;;AAAA,kDAA+E;AAC/E,kDAA6E;AAC7E,gDAAmE;AACnE,oDAAgF;AAChF,sDAAmF;AACnF,2HAA2H;AAC3H,8CAAuE;AACvE,oDAAgF;AAChF,4DAA4F;AAC5F,wDAAsF;AACtF,wDAAsF;AACtF,8CAAuE;AACvE,gDAA0E;AAC1E,8CAAuE;AACvE,sEAA4G;AAC5G,kDAA2E;AAC3E,sEAA4G;AAC5G,wEAA+G;AAElG,QAAA,KAAK,GAAG;IACnB;QACE,IAAI,EAAE,wBAAwB;QAC9B,SAAS,EAAE,yCAAqB;QAChC,QAAQ,EAAE,sDAAkC;KAC7C;IACD;QACE,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,qBAAY;QACvB,QAAQ,EAAE,+BAAsB;KACjC;IACD;QACE,IAAI,EAAE,YAAY;QAClB,SAAS,EAAE,iBAAS;QACpB,QAAQ,EAAE,sBAAc;KACzB;IACD;QACE,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,mBAAU;QACrB,QAAQ,EAAE,+BAAsB;KACjC;IACD;QACE,IAAI,EAAE,cAAc;QACpB,SAAS,EAAE,qBAAW;QACtB,QAAQ,EAAE,iCAAuB;KAClC;IACD;QACE,IAAI,EAAE,gBAAgB;QACtB,SAAS,EAAE,yBAAa;QACxB,QAAQ,EAAE,qCAAyB;KACpC;IACD,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,eAAQ,EAAE,QAAQ,EAAE,2BAAoB,EAAE;IAC1E;QACE,IAAI,EAAE,gBAAgB;QACtB,SAAS,EAAE,yBAAa;QACxB,QAAQ,EAAE,qCAAyB;KACpC;IACD,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,eAAQ,EAAE,QAAQ,EAAE,2BAAoB,EAAE;IAC1E;QACE,IAAI,EAAE,wBAAwB;QAC9B,SAAS,EAAE,uCAAoB;QAC/B,QAAQ,EAAE,oDAAiC;KAC5C;IACD,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAS,EAAE,QAAQ,EAAE,6BAAqB,EAAE;IAC7E;QACE,IAAI,EAAE,kBAAkB;QACxB,SAAS,EAAE,6BAAe;QAC1B,QAAQ,EAAE,yCAA2B;KACtC;IACD;QACE,IAAI,EAAE,cAAc;QACpB,SAAS,EAAE,qBAAW;QACtB,QAAQ,EAAE,iCAAuB;KAClC;IACD;QACE,IAAI,EAAE,eAAe;QACrB,SAAS,EAAE,uBAAY;QACvB,QAAQ,EAAE,mCAAwB;KACnC;IACD,gEAAgE;IAChE,IAAI;IACJ,mCAAmC;IACnC,yCAAyC;IACzC,qDAAqD;IACrD,KAAK;IACL;QACE,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,eAAQ;QACnB,QAAQ,EAAE,2BAAoB;KAC/B;IACD;QACE,IAAI,EAAE,wBAAwB;QAC9B,SAAS,EAAE,uCAAoB;QAC/B,QAAQ,EAAE,oDAAiC;KAC5C;IACD;QACE,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,kBAAS;QACpB,QAAQ,EAAE,8BAAqB;KAChC;IACD,6DAA6D;IAC7D,IAAI;IACJ,2BAA2B;IAC3B,6BAA6B;IAC7B,wCAAwC;IACxC,KAAK;CACN,CAAC"}
+{"version":3,"file":"testPages.windows.js","sourceRoot":"","sources":["../../src/FluentTester/testPages.windows.ts"],"names":[],"mappings":";;;AAAA,kDAA6E;AAC7E,kDAA6E;AAC7E,gDAAmE;AACnE,oDAAgF;AAChF,sDAAmF;AACnF,2HAA2H;AAC3H,8CAAuE;AACvE,oDAAgF;AAChF,4DAA4F;AAC5F,wDAAsF;AACtF,wDAAsF;AACtF,8CAAuE;AACvE,gDAA0E;AAC1E,8CAAuE;AACvE,sEAA4G;AAC5G,kDAA2E;AAC3E,sEAA4G;AAC5G,wEAA+G;AAElG,QAAA,KAAK,GAAG;IACnB;QACE,IAAI,EAAE,wBAAwB;QAC9B,SAAS,EAAE,yCAAqB;QAChC,QAAQ,EAAE,sDAAkC;KAC7C;IACD;QACE,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,mBAAU;QACrB,QAAQ,EAAE,+BAAsB;KACjC;IACD;QACE,IAAI,EAAE,YAAY;QAClB,SAAS,EAAE,iBAAS;QACpB,QAAQ,EAAE,sBAAc;KACzB;IACD;QACE,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,mBAAU;QACrB,QAAQ,EAAE,+BAAsB;KACjC;IACD;QACE,IAAI,EAAE,cAAc;QACpB,SAAS,EAAE,qBAAW;QACtB,QAAQ,EAAE,iCAAuB;KAClC;IACD;QACE,IAAI,EAAE,gBAAgB;QACtB,SAAS,EAAE,yBAAa;QACxB,QAAQ,EAAE,qCAAyB;KACpC;IACD,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,eAAQ,EAAE,QAAQ,EAAE,2BAAoB,EAAE;IAC1E;QACE,IAAI,EAAE,gBAAgB;QACtB,SAAS,EAAE,yBAAa;QACxB,QAAQ,EAAE,qCAAyB;KACpC;IACD,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,eAAQ,EAAE,QAAQ,EAAE,2BAAoB,EAAE;IAC1E;QACE,IAAI,EAAE,wBAAwB;QAC9B,SAAS,EAAE,uCAAoB;QAC/B,QAAQ,EAAE,oDAAiC;KAC5C;IACD,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAS,EAAE,QAAQ,EAAE,6BAAqB,EAAE;IAC7E;QACE,IAAI,EAAE,kBAAkB;QACxB,SAAS,EAAE,6BAAe;QAC1B,QAAQ,EAAE,yCAA2B;KACtC;IACD;QACE,IAAI,EAAE,cAAc;QACpB,SAAS,EAAE,qBAAW;QACtB,QAAQ,EAAE,iCAAuB;KAClC;IACD;QACE,IAAI,EAAE,eAAe;QACrB,SAAS,EAAE,uBAAY;QACvB,QAAQ,EAAE,mCAAwB;KACnC;IACD,gEAAgE;IAChE,IAAI;IACJ,mCAAmC;IACnC,yCAAyC;IACzC,qDAAqD;IACrD,KAAK;IACL;QACE,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,eAAQ;QACnB,QAAQ,EAAE,2BAAoB;KAC/B;IACD;QACE,IAAI,EAAE,wBAAwB;QAC9B,SAAS,EAAE,uCAAoB;QAC/B,QAAQ,EAAE,oDAAiC;KAC5C;IACD;QACE,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,kBAAS;QACpB,QAAQ,EAAE,8BAAqB;KAChC;IACD,6DAA6D;IAC7D,IAAI;IACJ,2BAA2B;IAC3B,6BAA6B;IAC7B,wCAAwC;IACxC,KAAK;CACN,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.65.5",
+  "version": "0.67.0",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -27,11 +27,12 @@
   "dependencies": {
     "@fluentui-react-native/android-theme": ">=0.10.0 <1.0.0",
     "@fluentui-react-native/apple-theme": ">=0.12.3 <1.0.0",
+    "@fluentui-react-native/avatar": "^1.1.0",
     "@fluentui-react-native/badge": ">=0.0.43 <1.0.0",
     "@fluentui-react-native/button": ">=0.22.29 <1.0.0",
     "@fluentui-react-native/default-theme": ">=0.13.0 <1.0.0",
     "@fluentui-react-native/experimental-activity-indicator": ">=0.5.29 <1.0.0",
-    "@fluentui-react-native/experimental-avatar": ">=0.14.45 <1.0.0",
+    "@fluentui-react-native/experimental-avatar": ">=0.15.0 <1.0.0",
     "@fluentui-react-native/experimental-button": "0.15.30",
     "@fluentui-react-native/experimental-checkbox": "0.11.14",
     "@fluentui-react-native/experimental-drawer": ">=0.1.13 <1.0.0",
@@ -44,7 +45,8 @@
     "@fluentui-react-native/framework": ">=0.7.30 <1.0.0",
     "@fluentui-react-native/icon": "0.12.1",
     "@fluentui-react-native/interactive-hooks": ">=0.16.3 <1.0.0",
-    "@fluentui-react-native/menu": ">=0.15.3 <1.0.0",
+    "@fluentui-react-native/menu": ">=0.15.4 <1.0.0",
+    "@fluentui-react-native/notification": "0.1.0",
     "@fluentui-react-native/stack": ">=0.6.29 <1.0.0",
     "@fluentui-react-native/theme": ">=0.6.11 <1.0.0",
     "@fluentui-react-native/theme-types": ">=0.17.0 <1.0.0",

package/src/E2E/Avatar/pages/AvatarPageObject.ts

@@ -1,5 +1,5 @@
 import {
-  JSAVATAR_TESTPAGE,
+  AVATAR_TESTPAGE,
   HOMEPAGE_AVATAR_BUTTON,
   AVATAR_TEST_COMPONENT,
   AVATAR_SECONDARY_TEST_COMPONENT,
@@ -38,7 +38,7 @@ class AvatarPageObject extends BasePage {
   /**************** Getters ****************/
   /*****************************************/
   get _testPage() {
-    return By(JSAVATAR_TESTPAGE);
+    return By(AVATAR_TESTPAGE);
   }
 
   get _pageButton() {

package/src/E2E/Avatar/specs/Avatar.spec.win.ts

@@ -2,9 +2,9 @@ import NavigateAppPage from '../../common/NavigateAppPage.win';
 import AvatarPageObject from '../pages/AvatarPageObject';
 import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
 import {
-  JSAVATAR_ACCESSIBILITY_LABEL,
-  JSAVATAR_ACCESSIBILITY_LABEL_BY_NAME,
-  JSAVATAR_ACCESSIBILITY_HINT,
+  AVATAR_ACCESSIBILITY_LABEL,
+  AVATAR_ACCESSIBILITY_LABEL_BY_NAME,
+  AVATAR_ACCESSIBILITY_HINT,
   ACCESSIBILITY_LABEL_ATTR,
   ACCESSIBILITY_HINT_ATTRIBUTE,
   ACCESSIBILITY_ROLE_ATTRIBUTE,
@@ -42,13 +42,13 @@ describe('Avatar Accessibility Testing', () => {
     expect(AvatarPageObject.didAssertPopup()).toBeFalsy(AvatarPageObject.ERRORMESSAGE_ASSERT);
   });
   it('Validate accessibilityLabel', () => {
-    expect(AvatarPageObject.getPrimaryComponentAttribute(ACCESSIBILITY_LABEL_ATTR)).toEqual(JSAVATAR_ACCESSIBILITY_LABEL);
+    expect(AvatarPageObject.getPrimaryComponentAttribute(ACCESSIBILITY_LABEL_ATTR)).toEqual(AVATAR_ACCESSIBILITY_LABEL);
   });
   it('Validate accessibilityLabel from `name` prop', () => {
-    expect(AvatarPageObject.getSecondaryComponentAttribute(ACCESSIBILITY_LABEL_ATTR)).toEqual(JSAVATAR_ACCESSIBILITY_LABEL_BY_NAME);
+    expect(AvatarPageObject.getSecondaryComponentAttribute(ACCESSIBILITY_LABEL_ATTR)).toEqual(AVATAR_ACCESSIBILITY_LABEL_BY_NAME);
   });
   it('Validate accessibilityHint', () => {
-    expect(AvatarPageObject.getPrimaryComponentAttribute(ACCESSIBILITY_HINT_ATTRIBUTE)).toEqual(JSAVATAR_ACCESSIBILITY_HINT);
+    expect(AvatarPageObject.getPrimaryComponentAttribute(ACCESSIBILITY_HINT_ATTRIBUTE)).toEqual(AVATAR_ACCESSIBILITY_HINT);
   });
   it('Validate accessibilityRole', () => {
     expect(AvatarPageObject.getPrimaryComponentAttribute(ACCESSIBILITY_ROLE_ATTRIBUTE)).toEqual(ACCESSIBILITY_ROLE_LINK);

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

@@ -1,128 +1,29 @@
 import * as React from 'react';
-import { Avatar, Size } from '@fluentui-react-native/experimental-avatar/';
-import { Text } from '@fluentui/react-native';
-import { Stack } from '@fluentui-react-native/stack';
 import { AVATAR_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
-import { testImageSource, rainbowGradientSource } from './testImageSources';
-import { commonTestStyles as commonStyles } from '../Common/styles';
-import { Switch, View } from 'react-native';
-
-export const BasicAvatar: React.FunctionComponent = () => {
-  const [showImage, setShowImage] = React.useState(true);
-  const [showPresence, setShowPresence] = React.useState(false);
-  const [showRing, setShowRing] = React.useState(false);
-
-  return (
-    <View style={commonStyles.root}>
-      {/* settings */}
-      <View style={commonStyles.settings}>
-        <View style={commonStyles.switch}>
-          <Text>Show image</Text>
-          <Switch value={showImage} onValueChange={setShowImage} />
-        </View>
-        <View style={commonStyles.switch}>
-          <Text>Show presence</Text>
-          <Switch value={showPresence} onValueChange={setShowPresence} />
-        </View>
-        <View style={commonStyles.switch}>
-          <Text>Show Ring</Text>
-          <Switch value={showRing} onValueChange={setShowRing} />
-        </View>
-      </View>
-      {/* component under test */}
-      <Avatar
-        primaryText="Kat Larrson"
-        secondaryText="Kat.Larrson@example.com"
-        imageSource={showImage ? testImageSource : undefined}
-        presence={showPresence ? 'available' : null}
-        isRingVisible={showRing}
-        size={'xxLarge'}
-      />
-    </View>
-  );
-};
-
-export const CustomizeColors: React.FunctionComponent = () => {
-  const [showCustomRingColor, setShowCustomRingColor] = React.useState(false);
-  const [showCustomForeground, setShowCustomForeground] = React.useState(false);
-  const [showCustomBackground, setShowCustomBackground] = React.useState(false);
-  const [showCustomBorderImage, setShowCustomBorderImage] = React.useState(false);
-  const [showRingGap, setShowRingGap] = React.useState(false);
-
-  return (
-    <View style={commonStyles.root}>
-      {/* settings */}
-      <View style={commonStyles.settings}>
-        <View style={commonStyles.switch}>
-          <Text>Custom foreground</Text>
-          <Switch value={showCustomForeground} onValueChange={setShowCustomForeground} />
-        </View>
-        <View style={commonStyles.switch}>
-          <Text>Custom background</Text>
-          <Switch value={showCustomBackground} onValueChange={setShowCustomBackground} />
-        </View>
-        <View style={commonStyles.switch}>
-          <Text>Custom ring color</Text>
-          <Switch value={showCustomRingColor} onValueChange={setShowCustomRingColor} />
-        </View>
-        <View style={commonStyles.switch}>
-          <Text>Custom Border Image</Text>
-          <Switch value={showCustomBorderImage} onValueChange={setShowCustomBorderImage} />
-        </View>
-        <View style={commonStyles.switch}>
-          <Text>Show Ring Gap</Text>
-          <Switch value={showRingGap} onValueChange={setShowRingGap} />
-        </View>
-      </View>
-      {/* component under test */}
-      <Avatar
-        primaryText="Kat Larrson"
-        secondaryText="Kat.Larrson@example.com"
-        ringColor={showCustomRingColor ? 'red' : null}
-        foregroundColor={showCustomForeground ? 'green' : null}
-        backgroundColor={showCustomBackground ? 'blue' : null}
-        customBorderImageSource={showCustomBorderImage ? rainbowGradientSource : null}
-        isRingVisible={true}
-        hasRingInnerGap={showRingGap}
-        size={'xxLarge'}
-      />
-    </View>
-  );
-};
-
-const AvatarSizeRamp: React.FunctionComponent = () => {
-  const allSizes: Size[] = ['xSmall', 'small', 'medium', 'large', 'xLarge', 'xxLarge'];
-
-  return (
-    <Stack style={{ flexDirection: 'row' }}>
-      {allSizes.map((size, index) => (
-        <Avatar key={index} primaryText="Kat Larrson" secondaryText="Kat.Larrson@example.com" size={size} />
-      ))}
-    </Stack>
-  );
-};
+import { StandardUsage } from './BasicAvatar';
+import { CustomizeUsage } from './CustomizedAvatar';
+import { E2EAvatarTest } from './E2EAvatarTest';
 
 const avatarSections: TestSection[] = [
   {
-    name: 'Basic Avatar',
+    name: 'Standard Usage',
     testID: AVATAR_TESTPAGE,
-    component: BasicAvatar,
+    component: StandardUsage,
   },
   {
-    name: 'Custom Colors',
-    testID: AVATAR_TESTPAGE,
-    component: CustomizeColors,
+    name: 'Customize Usage',
+    component: CustomizeUsage,
   },
   {
-    name: 'Size Ramp',
-    component: AvatarSizeRamp,
+    name: 'Avatar E2E',
+    component: E2EAvatarTest,
   },
 ];
 
 export const AvatarTest: React.FunctionComponent = () => {
   const status: PlatformStatus = {
-    win32Status: 'Backlog',
+    win32Status: 'Experimental',
     uwpStatus: 'Backlog',
     iosStatus: 'Beta',
     macosStatus: 'Experimental',

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

@@ -4,10 +4,10 @@ import {
   AvatarSizes,
   AvatarColor,
   AvatarColors,
-  JSAvatar,
+  Avatar,
   AvatarActive,
   AvatarActiveAppearance,
-} from '@fluentui-react-native/experimental-avatar';
+} from '@fluentui-react-native/avatar';
 import { PresenceBadgeStatuses, PresenceBadgeStatus } from '@fluentui-react-native/badge';
 import { Switch, View, Text, Picker, ColorValue, Platform } from 'react-native';
 import { satyaPhotoUrl, undefinedText } from './../PersonaCoin/styles';
@@ -100,12 +100,12 @@ 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>
-      <JSAvatar
+      <Avatar
         accessibilityLabel="Fall-back Icon"
         accessibilityHint="A picture representing a user"
         size={imageSize === undefinedText ? undefined : imageSize}
       />
-      <JSAvatar
+      <Avatar
         active={active}
         activeAppearance={activeAppearance}
         size={imageSize === undefinedText ? undefined : imageSize}
@@ -116,7 +116,7 @@ export const StandardUsage: FunctionComponent = () => {
         imageUrl={showImage ? satyaPhotoUrl : undefined}
         avatarColor={avatarColor}
       />
-      <JSAvatar
+      <Avatar
         active={active}
         activeAppearance={activeAppearance}
         size={imageSize === undefinedText ? undefined : imageSize}
@@ -128,7 +128,7 @@ export const StandardUsage: FunctionComponent = () => {
       />
       {svgIconsEnabled && (
         <>
-          <JSAvatar
+          <Avatar
             active={active}
             activeAppearance={activeAppearance}
             size={imageSize === undefinedText ? undefined : imageSize}
@@ -138,7 +138,7 @@ export const StandardUsage: FunctionComponent = () => {
             avatarColor={avatarColor}
             badge={{ status: 'outOfOffice', outOfOffice }}
           />
-          <JSAvatar
+          <Avatar
             accessibilityHint="A picture representing a user"
             active={active}
             activeAppearance={activeAppearance}

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

@@ -1,5 +1,5 @@
 import React, { useState, useMemo } from 'react';
-import { JSAvatar, AvatarSize } from '@fluentui-react-native/experimental-avatar';
+import { Avatar, AvatarSize } from '@fluentui-react-native/avatar';
 import { Switch, View, Text, TextInput, Platform } from 'react-native';
 import { steveBallmerPhotoUrl } from './../PersonaCoin/styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';
@@ -38,7 +38,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
       ringBackgroundColor,
       ringThickness: parseInt(ringThickness),
     };
-    return JSAvatar.customize(tokens);
+    return Avatar.customize(tokens);
   }, [
     avatarColor,
     textColor,
@@ -190,7 +190,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
       </View>
       <View style={{ marginLeft: 20 }}>
         <Text>Avatar customized with props</Text>
-        <JSAvatar
+        <Avatar
           active="active"
           activeAppearance="ring"
           avatarColor={avatarColor}

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

@@ -1,10 +1,10 @@
-import { JSAvatar } from '@fluentui-react-native/experimental-avatar';
+import { Avatar } from '@fluentui-react-native/avatar';
 import * as React from 'react';
 import { View } from 'react-native';
 import {
-  JSAVATAR_ACCESSIBILITY_LABEL,
-  JSAVATAR_ACCESSIBILITY_HINT,
-  JSAVATAR_ACCESSIBILITY_ROLE,
+  AVATAR_ACCESSIBILITY_LABEL,
+  AVATAR_ACCESSIBILITY_HINT,
+  AVATAR_ACCESSIBILITY_ROLE,
   AVATAR_TEST_COMPONENT,
   AVATAR_SECONDARY_TEST_COMPONENT,
 } from './consts';
@@ -12,13 +12,13 @@ import {
 export const E2EAvatarTest: React.FunctionComponent = () => {
   return (
     <View>
-      <JSAvatar
+      <Avatar
         testID={AVATAR_TEST_COMPONENT}
-        accessibilityHint={JSAVATAR_ACCESSIBILITY_HINT}
-        accessibilityLabel={JSAVATAR_ACCESSIBILITY_LABEL}
-        accessibilityRole={JSAVATAR_ACCESSIBILITY_ROLE}
+        accessibilityHint={AVATAR_ACCESSIBILITY_HINT}
+        accessibilityLabel={AVATAR_ACCESSIBILITY_LABEL}
+        accessibilityRole={AVATAR_ACCESSIBILITY_ROLE}
       />
-      <JSAvatar testID={AVATAR_SECONDARY_TEST_COMPONENT} name="Richard" badge={{ status: 'available' }} />
+      <Avatar testID={AVATAR_SECONDARY_TEST_COMPONENT} name="Richard" badge={{ status: 'available' }} />
     </View>
   );
 };

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

@@ -0,0 +1,136 @@
+import * as React from 'react';
+import { NativeAvatar, Size } from '@fluentui-react-native/experimental-avatar/';
+import { Text } from '@fluentui/react-native';
+import { Stack } from '@fluentui-react-native/stack';
+import { NATIVE_AVATAR_TESTPAGE } from './consts';
+import { Test, TestSection, PlatformStatus } from '../Test';
+import { testImageSource, rainbowGradientSource } from './testImageSources';
+import { commonTestStyles as commonStyles } from '../Common/styles';
+import { Switch, View } from 'react-native';
+
+export const BasicAvatar: React.FunctionComponent = () => {
+  const [showImage, setShowImage] = React.useState(true);
+  const [showPresence, setShowPresence] = React.useState(false);
+  const [showRing, setShowRing] = React.useState(false);
+
+  return (
+    <View style={commonStyles.root}>
+      {/* settings */}
+      <View style={commonStyles.settings}>
+        <View style={commonStyles.switch}>
+          <Text>Show image</Text>
+          <Switch value={showImage} onValueChange={setShowImage} />
+        </View>
+        <View style={commonStyles.switch}>
+          <Text>Show presence</Text>
+          <Switch value={showPresence} onValueChange={setShowPresence} />
+        </View>
+        <View style={commonStyles.switch}>
+          <Text>Show Ring</Text>
+          <Switch value={showRing} onValueChange={setShowRing} />
+        </View>
+      </View>
+      {/* component under test */}
+      <NativeAvatar
+        primaryText="Kat Larrson"
+        secondaryText="Kat.Larrson@example.com"
+        imageSource={showImage ? testImageSource : undefined}
+        presence={showPresence ? 'available' : null}
+        isRingVisible={showRing}
+        size={'xxLarge'}
+      />
+    </View>
+  );
+};
+
+export const CustomizeColors: React.FunctionComponent = () => {
+  const [showCustomRingColor, setShowCustomRingColor] = React.useState(false);
+  const [showCustomForeground, setShowCustomForeground] = React.useState(false);
+  const [showCustomBackground, setShowCustomBackground] = React.useState(false);
+  const [showCustomBorderImage, setShowCustomBorderImage] = React.useState(false);
+  const [showRingGap, setShowRingGap] = React.useState(false);
+
+  return (
+    <View style={commonStyles.root}>
+      {/* settings */}
+      <View style={commonStyles.settings}>
+        <View style={commonStyles.switch}>
+          <Text>Custom foreground</Text>
+          <Switch value={showCustomForeground} onValueChange={setShowCustomForeground} />
+        </View>
+        <View style={commonStyles.switch}>
+          <Text>Custom background</Text>
+          <Switch value={showCustomBackground} onValueChange={setShowCustomBackground} />
+        </View>
+        <View style={commonStyles.switch}>
+          <Text>Custom ring color</Text>
+          <Switch value={showCustomRingColor} onValueChange={setShowCustomRingColor} />
+        </View>
+        <View style={commonStyles.switch}>
+          <Text>Custom Border Image</Text>
+          <Switch value={showCustomBorderImage} onValueChange={setShowCustomBorderImage} />
+        </View>
+        <View style={commonStyles.switch}>
+          <Text>Show Ring Gap</Text>
+          <Switch value={showRingGap} onValueChange={setShowRingGap} />
+        </View>
+      </View>
+      {/* component under test */}
+      <NativeAvatar
+        primaryText="Kat Larrson"
+        secondaryText="Kat.Larrson@example.com"
+        ringColor={showCustomRingColor ? 'red' : null}
+        foregroundColor={showCustomForeground ? 'green' : null}
+        backgroundColor={showCustomBackground ? 'blue' : null}
+        customBorderImageSource={showCustomBorderImage ? rainbowGradientSource : null}
+        isRingVisible={true}
+        hasRingInnerGap={showRingGap}
+        size={'xxLarge'}
+      />
+    </View>
+  );
+};
+
+const AvatarSizeRamp: React.FunctionComponent = () => {
+  const allSizes: Size[] = ['xSmall', 'small', 'medium', 'large', 'xLarge', 'xxLarge'];
+
+  return (
+    <Stack style={{ flexDirection: 'row' }}>
+      {allSizes.map((size, index) => (
+        <NativeAvatar key={index} primaryText="Kat Larrson" secondaryText="Kat.Larrson@example.com" size={size} />
+      ))}
+    </Stack>
+  );
+};
+
+const avatarSections: TestSection[] = [
+  {
+    name: 'Basic Avatar',
+    testID: NATIVE_AVATAR_TESTPAGE,
+    component: BasicAvatar,
+  },
+  {
+    name: 'Custom Colors',
+    testID: NATIVE_AVATAR_TESTPAGE,
+    component: CustomizeColors,
+  },
+  {
+    name: 'Size Ramp',
+    component: AvatarSizeRamp,
+  },
+];
+
+export const NativeAvatarTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Backlog',
+    uwpStatus: 'Backlog',
+    iosStatus: 'Beta',
+    macosStatus: 'Experimental',
+    androidStatus: 'Backlog',
+  };
+
+  const description =
+    'AvatarView is a visual representation of a user, entity, or group. If an image is supplied, it is cropped to a circle of the requested size. If an image is not supplied, initials are extracted from the given name and email address provided and displayed on a colorful background.';
+
+  return <Test name="Avatar Test" description={description} sections={avatarSections} status={status} />;
+};

package/src/FluentTester/TestComponents/Avatar/consts.ts

@@ -1,11 +1,12 @@
 export const HOMEPAGE_AVATAR_BUTTON = 'Homepage_Avatar_Button';
-export const AVATAR_TESTPAGE = 'Avatar_TestPage';
-export const JSAVATAR_TESTPAGE = 'Avatar_Win32_TestPage';
+export const HOMEPAGE_NATIVE_AVATAR_BUTTON = 'Homepage_Native_Avatar_Button';
+export const NATIVE_AVATAR_TESTPAGE = 'NativeAvatar_TestPage';
+export const AVATAR_TESTPAGE = 'Avatar_Win32_TestPage';
 
-export const JSAVATAR_ACCESSIBILITY_LABEL = 'E2E Avatar Accessibility label';
-export const JSAVATAR_ACCESSIBILITY_LABEL_BY_NAME = 'Richard, available';
-export const JSAVATAR_ACCESSIBILITY_HINT = 'E2E Avatar Accessibility hint';
-export const JSAVATAR_ACCESSIBILITY_ROLE = 'link';
+export const AVATAR_ACCESSIBILITY_LABEL = 'E2E Avatar Accessibility label';
+export const AVATAR_ACCESSIBILITY_LABEL_BY_NAME = 'Richard, available';
+export const AVATAR_ACCESSIBILITY_HINT = 'E2E Avatar Accessibility hint';
+export const AVATAR_ACCESSIBILITY_ROLE = 'link';
 
 export const AVATAR_TEST_COMPONENT = 'AVATAR_TEST_COMPONENT';
 export const AVATAR_SECONDARY_TEST_COMPONENT = 'AVATAR_SECONDARY_TEST_COMPONENT';

package/src/FluentTester/TestComponents/Avatar/index.ts

@@ -1,3 +1,3 @@
+export * from './NativeAvatarTest';
 export * from './AvatarTest';
-export * from './JSAvatarTest';
 export * from './consts';