@fluentui-react-native/tester-core 0.1.1

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

@@ -0,0 +1,263 @@
+import type { FunctionComponent } from 'react';
+import React from 'react';
+import { View } from 'react-native';
+
+import { Avatar } from '@fluentui-react-native/avatar';
+import type { PresenceBadgeStatus } from '@fluentui-react-native/badge';
+import { PresenceBadgeStatuses } from '@fluentui-react-native/badge';
+import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
+import { Switch } from '@fluentui-react-native/switch';
+
+import { StyledPicker } from '../Common/StyledPicker';
+import { mobileStyles } from '../Common/styles';
+import { steveBallmerPhotoUrl } from '../PersonaCoin/styles';
+
+export const StandardUsage: FunctionComponent = () => {
+  const [status, setStatus] = React.useState<PresenceBadgeStatus>('available');
+  const [activityRing, setActivityRing] = React.useState(false);
+  const [outOfOffice, setOutOfOffice] = React.useState(false);
+
+  const onStatusChange = React.useCallback((value) => setStatus(value), []);
+  const toggleActivityState = (_e: InteractionEvent, isActive: boolean) => {
+    setActivityRing(isActive);
+  };
+  const toggleOutOfOffice = (_e: InteractionEvent, isActive: boolean) => {
+    setOutOfOffice(isActive);
+  };
+  const nameAccessibilityLabel = 'Steve Ballmer';
+
+  return (
+    <View style={mobileStyles.pageStyle}>
+      <Switch label={'Show Activity Ring'} defaultChecked={activityRing} onChange={toggleActivityState} />
+      <Switch label={'Out of Office'} defaultChecked={outOfOffice} onChange={toggleOutOfOffice} />
+      <StyledPicker prompt="Status" selected={status} onChange={onStatusChange} collection={PresenceBadgeStatuses} />
+
+      <View style={mobileStyles.testVariants}>
+        {/* Variation  - Initials. */}
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={16} name="Rafi" avatarColor={'colorful'} />
+        <Avatar
+          active={activityRing ? 'active' : 'inactive'}
+          activeAppearance="ring"
+          size={20}
+          name="Richard Faynman"
+          avatarColor={'colorful'}
+        />
+        <Avatar
+          active={activityRing ? 'active' : 'inactive'}
+          activeAppearance="ring"
+          size={24}
+          name="Gita Khawas"
+          avatarColor={'colorful'}
+        />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={32} name="Mary Kom" avatarColor={'colorful'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={40} name="Khan Sir" avatarColor={'colorful'} />
+        <Avatar
+          active={activityRing ? 'active' : 'inactive'}
+          activeAppearance="ring"
+          size={56}
+          name="Harry Potter"
+          avatarColor={'colorful'}
+        />
+        <Avatar
+          active={activityRing ? 'active' : 'inactive'}
+          activeAppearance="ring"
+          size={72}
+          name="Ellie armstrong"
+          avatarColor={'colorful'}
+        />
+      </View>
+
+      <View style={mobileStyles.testVariants}>
+        {/* Variation - Image */}
+        <Avatar
+          active={activityRing ? 'active' : 'inactive'}
+          accessibilityLabel={nameAccessibilityLabel}
+          activeAppearance="ring"
+          size={16}
+          imageUrl={steveBallmerPhotoUrl}
+        />
+        <Avatar
+          active={activityRing ? 'active' : 'inactive'}
+          accessibilityLabel={nameAccessibilityLabel}
+          activeAppearance="ring"
+          size={20}
+          imageUrl={steveBallmerPhotoUrl}
+        />
+        <Avatar
+          active={activityRing ? 'active' : 'inactive'}
+          accessibilityLabel={nameAccessibilityLabel}
+          activeAppearance="ring"
+          size={24}
+          imageUrl={steveBallmerPhotoUrl}
+        />
+        <Avatar
+          active={activityRing ? 'active' : 'inactive'}
+          accessibilityLabel={nameAccessibilityLabel}
+          activeAppearance="ring"
+          size={32}
+          imageUrl={steveBallmerPhotoUrl}
+        />
+        <Avatar
+          active={activityRing ? 'active' : 'inactive'}
+          accessibilityLabel={nameAccessibilityLabel}
+          activeAppearance="ring"
+          size={40}
+          imageUrl={steveBallmerPhotoUrl}
+        />
+        <Avatar
+          active={activityRing ? 'active' : 'inactive'}
+          accessibilityLabel={nameAccessibilityLabel}
+          activeAppearance="ring"
+          size={56}
+          imageUrl={steveBallmerPhotoUrl}
+        />
+        <Avatar
+          active={activityRing ? 'active' : 'inactive'}
+          accessibilityLabel={nameAccessibilityLabel}
+          activeAppearance="ring"
+          size={72}
+          imageUrl={steveBallmerPhotoUrl}
+        />
+      </View>
+
+      <View style={mobileStyles.testVariants}>
+        {/* Variation - Image with Badge */
+        /* Badge is not shown for size 16 on Android. */}
+        <Avatar
+          size={16}
+          accessibilityLabel={nameAccessibilityLabel}
+          badge={{ status: status, outOfOffice: outOfOffice }}
+          imageUrl={steveBallmerPhotoUrl}
+        />
+        <Avatar
+          size={20}
+          accessibilityLabel={nameAccessibilityLabel}
+          badge={{ status: status, outOfOffice: outOfOffice }}
+          imageUrl={steveBallmerPhotoUrl}
+        />
+        <Avatar
+          size={24}
+          accessibilityLabel={nameAccessibilityLabel}
+          badge={{ status: status, outOfOffice: outOfOffice }}
+          imageUrl={steveBallmerPhotoUrl}
+        />
+        <Avatar
+          size={32}
+          accessibilityLabel={nameAccessibilityLabel}
+          badge={{ status: status, outOfOffice: outOfOffice }}
+          imageUrl={steveBallmerPhotoUrl}
+        />
+        <Avatar
+          size={40}
+          accessibilityLabel={nameAccessibilityLabel}
+          badge={{ status: status, outOfOffice: outOfOffice }}
+          imageUrl={steveBallmerPhotoUrl}
+        />
+        <Avatar
+          size={56}
+          accessibilityLabel={nameAccessibilityLabel}
+          badge={{ status: status, outOfOffice: outOfOffice }}
+          imageUrl={steveBallmerPhotoUrl}
+        />
+        <Avatar
+          size={72}
+          accessibilityLabel={nameAccessibilityLabel}
+          badge={{ status: status, outOfOffice: outOfOffice }}
+          imageUrl={steveBallmerPhotoUrl}
+        />
+      </View>
+
+      <View style={mobileStyles.testVariants}>
+        {/* Variation - Standard */}
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={16} avatarColor={'brand'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={20} avatarColor={'brand'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={24} avatarColor={'brand'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={32} avatarColor={'brand'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={40} avatarColor={'brand'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={56} avatarColor={'brand'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={72} avatarColor={'brand'} />
+      </View>
+
+      <View style={mobileStyles.testVariants}>
+        {/* Variation - Standard with Badge */
+        /* Badge is not shown for size 16 on Android. */}
+        <Avatar badge={{ status: status, outOfOffice: outOfOffice }} size={16} avatarColor={'brand'} />
+        <Avatar badge={{ status: status, outOfOffice: outOfOffice }} size={20} avatarColor={'brand'} />
+        <Avatar badge={{ status: status, outOfOffice: outOfOffice }} size={24} avatarColor={'brand'} />
+        <Avatar badge={{ status: status, outOfOffice: outOfOffice }} size={32} avatarColor={'brand'} />
+        <Avatar badge={{ status: status, outOfOffice: outOfOffice }} size={40} avatarColor={'brand'} />
+        <Avatar badge={{ status: status, outOfOffice: outOfOffice }} size={56} avatarColor={'brand'} />
+        <Avatar badge={{ status: status, outOfOffice: outOfOffice }} size={72} avatarColor={'brand'} />
+      </View>
+
+      <View style={mobileStyles.testVariants}>
+        {/* Variation - Standard Inverted */}
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={16} avatarColor={'brandInverted'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={20} avatarColor={'brandInverted'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={24} avatarColor={'brandInverted'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={32} avatarColor={'brandInverted'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={40} avatarColor={'brandInverted'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={56} avatarColor={'brandInverted'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={72} avatarColor={'brandInverted'} />
+      </View>
+
+      <View style={mobileStyles.testVariants}>
+        {/* Variation - Anonymous */}
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={16} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={20} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={24} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={32} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={40} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={56} />
+        <Avatar
+          accessibilityLabel="Fall-back Icon"
+          accessibilityHint="A picture representing a user"
+          size={72}
+          activeAppearance="ring"
+          active={activityRing ? 'active' : 'inactive'}
+        />
+      </View>
+
+      <View style={mobileStyles.testVariants}>
+        {/* Variation - Anonymous accent */}
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={16} avatarColor={'accent'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={20} avatarColor={'accent'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={24} avatarColor={'accent'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={32} avatarColor={'accent'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={40} avatarColor={'accent'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={56} avatarColor={'accent'} />
+        <Avatar
+          accessibilityLabel="Fall-back Icon"
+          accessibilityHint="A picture representing a user"
+          size={72}
+          activeAppearance="ring"
+          active={activityRing ? 'active' : 'inactive'}
+          avatarColor={'accent'}
+        />
+      </View>
+
+      <View style={mobileStyles.testVariants}>
+        {/* Variation - Overflow .*/}
+
+        <Avatar shape={'square'} size={16} name="Rafi" avatarColor={'colorful'} />
+        <Avatar shape={'square'} size={20} name="Richard Faynman" avatarColor={'colorful'} />
+        <Avatar shape={'square'} size={24} name="Gita Khawas" avatarColor={'colorful'} />
+        <Avatar shape={'square'} size={32} name="Mary Kom" avatarColor={'colorful'} />
+        <Avatar shape={'square'} size={40} name="Khan Sir" avatarColor={'colorful'} imageUrl={steveBallmerPhotoUrl} />
+        <Avatar shape={'square'} size={56} name="Harry Potter" avatarColor={'colorful'} />
+        <Avatar shape={'square'} size={72} name="Ellie armstrong" avatarColor={'colorful'} />
+      </View>
+
+      <View style={mobileStyles.testVariants}>
+        {/* Variation - Overflow .*/}
+        <Avatar size={16} initials="20" />
+        <Avatar size={20} initials="11" />
+        <Avatar size={24} initials="88" />
+        <Avatar size={32} initials="20" />
+        <Avatar size={40} initials="20" />
+        <Avatar size={56} initials="56" />
+        <Avatar size={72} initials="20" />
+      </View>
+    </View>
+  );
+};

package/src/TestComponents/Avatar/BasicAvatar.tsx

@@ -0,0 +1,154 @@
+import { useState, useCallback } from 'react';
+import type { FunctionComponent } from 'react';
+import { View, Text, Platform } from 'react-native';
+
+import { ToggleButton } from '@fluentui/react-native';
+import type { AvatarSize, AvatarColor, AvatarActive } from '@fluentui-react-native/avatar';
+import { AvatarSizes, AvatarColors, Avatar } from '@fluentui-react-native/avatar';
+import type { PresenceBadgeStatus } from '@fluentui-react-native/badge';
+import { PresenceBadgeStatuses } from '@fluentui-react-native/badge';
+
+import { svgProps } from '../Common/iconExamples';
+import { StyledPicker } from '../Common/StyledPicker';
+import { commonTestStyles as commonStyles } from '../Common/styles';
+import { satyaPhotoUrl, undefinedText } from '../PersonaCoin/styles';
+
+type WithUndefined<T> = T | typeof undefinedText;
+
+const avatarActive: AvatarActive[] = ['unset', 'active', 'inactive'];
+const avatarColors: AvatarColor[] = ['neutral', 'brand', 'colorful', ...AvatarColors];
+
+const allSizes: WithUndefined<AvatarSize>[] = [undefinedText, ...AvatarSizes];
+const allPresences: WithUndefined<PresenceBadgeStatus>[] = [undefinedText, ...PresenceBadgeStatuses];
+
+export const StandardUsage: FunctionComponent = () => {
+  const [isSquare, setSquare] = useState(false);
+  const [showImage, setShowImage] = useState(true);
+  const [outOfOffice, setOutOfOffice] = useState(false);
+  const [active, setActive] = useState<AvatarActive>('unset');
+  const [imageSize, setImageSize] = useState<WithUndefined<AvatarSize>>(72);
+  const [presence, setPresence] = useState<WithUndefined<PresenceBadgeStatus>>('available');
+  const [avatarColor, setAvatarColor] = useState<AvatarColor>('brass');
+
+  const onActiveChange = useCallback((value) => setActive(value), []);
+  const onAvatarColorChange = useCallback((value) => setAvatarColor(value), []);
+  const onSizeChange = useCallback((value) => setImageSize(value), []);
+
+  const onPresenceChange = useCallback((value) => setPresence(value), []);
+  const avatarSizesForPicker = allSizes.map((size) => size.toString());
+
+  const activeAppearance = 'ring';
+
+  const fontBuiltInProps = {
+    fontFamily: 'Arial',
+    codepoint: 0x2663,
+  };
+
+  const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
+  const badgeStatus = presence === undefinedText ? undefined : presence;
+
+  return (
+    <View style={commonStyles.root}>
+      <View style={commonStyles.settingsPicker}>
+        <ToggleButton onClick={() => setShowImage(!showImage)} checked={showImage} style={commonStyles.vmargin}>
+          {showImage ? 'Hide' : 'Show'} image
+        </ToggleButton>
+        <ToggleButton onClick={() => setSquare(!isSquare)} checked={isSquare} style={commonStyles.vmargin}>
+          Set {isSquare ? ' circle' : ' square'} Avatar
+        </ToggleButton>
+        <ToggleButton onClick={() => setOutOfOffice(!outOfOffice)} checked={outOfOffice} style={commonStyles.vmargin}>
+          Set {outOfOffice ? ' In office' : ' Out of office'}
+        </ToggleButton>
+
+        <StyledPicker
+          style={commonStyles.vmargin}
+          prompt="Size"
+          selected={imageSize.toString()}
+          onChange={onSizeChange}
+          collection={avatarSizesForPicker}
+        />
+        <StyledPicker style={commonStyles.vmargin} prompt="Active" selected={active} onChange={onActiveChange} collection={avatarActive} />
+        {active === 'active' && <Text>Active appearance is ring</Text>}
+        <StyledPicker
+          style={commonStyles.vmargin}
+          prompt="Avatar Color"
+          selected={avatarColor}
+          onChange={onAvatarColorChange}
+          collection={avatarColors}
+        />
+        <StyledPicker
+          style={commonStyles.vmargin}
+          prompt="Presence status"
+          selected={presence}
+          onChange={onPresenceChange}
+          collection={allPresences}
+        />
+      </View>
+      <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: badgeStatus, outOfOffice, accessibilityLabel: badgeStatus }}
+          imageUrl={showImage ? satyaPhotoUrl : undefined}
+          avatarColor={avatarColor}
+        />
+        <Avatar
+          active={active}
+          activeAppearance={activeAppearance}
+          size={imageSize === undefinedText ? undefined : imageSize}
+          shape={isSquare ? 'square' : 'circular'}
+          accessibilityLabel="Icon"
+          image={{ source: showImage ? { uri: satyaPhotoUrl } : undefined }}
+          name="* Richard Faynman *"
+          avatarColor="#ff0099"
+          initialsColor="yellow"
+        />
+        <Avatar
+          active={active}
+          activeAppearance={activeAppearance}
+          size={36}
+          shape={isSquare ? 'square' : 'circular'}
+          accessibilityLabel="SVG Icon"
+          icon={{ fontSource: fontBuiltInProps }}
+          avatarColor={avatarColor}
+          badge={{ status: 'outOfOffice', outOfOffice }}
+        />
+        <Avatar
+          active={active}
+          activeAppearance={activeAppearance}
+          size={imageSize === undefinedText ? undefined : imageSize}
+          shape={isSquare ? 'square' : 'circular'}
+          accessibilityLabel="SVG Icon"
+          icon={{ fontSource: fontBuiltInProps, color: 'green' }}
+          avatarColor={avatarColor}
+          badge={{ status: 'outOfOffice', outOfOffice }}
+        />
+        {svgIconsEnabled && (
+          <>
+            <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/TestComponents/Avatar/CustomizedAvatar.tsx

@@ -0,0 +1,257 @@
+import React, { useState, useMemo } from 'react';
+import { View, Text, TextInput, Platform, StyleSheet } from 'react-native';
+
+import { ToggleButton } from '@fluentui/react-native';
+import type { AvatarSize } from '@fluentui-react-native/avatar';
+import { Avatar } from '@fluentui-react-native/avatar';
+import type { FontWeight } from '@fluentui-react-native/theme-types';
+
+import { svgProps } from '../Common/iconExamples';
+import { commonTestStyles as commonStyles } from '../Common/styles';
+import { steveBallmerPhotoUrl } from '../PersonaCoin/styles';
+
+const styles = StyleSheet.create({
+  avatarTestCaseContainer: { marginLeft: 20 },
+  avatarTokenOptions: { flexDirection: 'row' },
+  fontTokenOptions: { paddingHorizontal: 20 },
+  tokenHeader: { fontWeight: 'bold' },
+});
+
+export const CustomizeUsage: React.FunctionComponent = () => {
+  const [showImage, setShowImage] = useState(true);
+  const [showInitials, setShowInitials] = useState(true);
+  const [avatarColor, setAvatarColor] = useState<string>();
+  const [textColor, setTextColor] = useState<string>();
+  const [size, setSize] = useState<string>('96');
+  const [iconSize, setIconSize] = useState<number>(24);
+  const [iconColor, setIconColor] = useState<string>(undefined);
+  const [initialsSize, setInitialsSize] = useState<number>(16);
+  const [fontWeight, setFontWeight] = useState<string>('normal');
+  const [fontFamily, setFontFamily] = useState<string>('Georgia');
+  const [name, setName] = useState<string>('Steve Ballmer');
+  const [initials, setInitials] = useState<string>('');
+
+  const [ringColor, setRingColor] = useState<string>(undefined);
+  const [ringBackgroundColor, setRingBackgroundColor] = useState<string>('yellow');
+  const [ringThickness, setRingThickness] = useState<string>('4');
+  const [ringInnerGap, setRingInnerGap] = useState<string>('4');
+  const [showRing, setShowRing] = useState<boolean>(true);
+
+  const CustomizedAvatar = useMemo(() => {
+    const tokens = {
+      avatarColor,
+      color: textColor,
+      size: parseInt(size) as AvatarSize,
+      iconSize: iconSize,
+      iconColor,
+      fontSize: initialsSize,
+      fontWeight: fontWeight as FontWeight,
+      fontFamily,
+      ringColor,
+      ringBackgroundColor,
+      ringThickness: parseInt(ringThickness),
+      ringInnerGap: parseInt(ringInnerGap),
+    };
+    return Avatar.customize(tokens);
+  }, [
+    avatarColor,
+    textColor,
+    iconColor,
+    iconSize,
+    initialsSize,
+    size,
+    ringColor,
+    ringBackgroundColor,
+    ringInnerGap,
+    ringThickness,
+    fontWeight,
+    fontFamily,
+  ]);
+
+  const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
+
+  return (
+    <View style={commonStyles.root}>
+      <View style={commonStyles.settings}>
+        <ToggleButton onClick={() => setShowImage(!showImage)} checked={showImage} style={commonStyles.vmargin}>
+          {showImage ? 'Hide' : 'Show'} image
+        </ToggleButton>
+        <ToggleButton onClick={() => setShowInitials(!showInitials)} checked={showInitials} style={commonStyles.vmargin}>
+          {showInitials ? 'Hide' : 'Show'} initials
+        </ToggleButton>
+        <ToggleButton onClick={() => setShowRing(!showRing)} checked={showRing} style={commonStyles.vmargin}>
+          {showRing ? 'Hide' : 'Show'} ring
+        </ToggleButton>
+        <View style={styles.avatarTokenOptions}>
+          <View>
+            <TextInput
+              accessibilityLabel="Name for generating initials"
+              style={commonStyles.textBox}
+              placeholder="Name for generating initials"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setName(e.nativeEvent.text);
+              }}
+            />
+            <TextInput
+              accessibilityLabel="Initials"
+              style={commonStyles.textBox}
+              placeholder="Initials"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setInitials(e.nativeEvent.text);
+              }}
+            />
+            <Text style={styles.tokenHeader}>Avatar tokens</Text>
+            <TextInput
+              accessibilityLabel="Background color"
+              style={commonStyles.textBox}
+              placeholder="Background color"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setAvatarColor(e.nativeEvent.text);
+              }}
+            />
+
+            <TextInput
+              accessibilityLabel="Avatar size"
+              style={commonStyles.textBox}
+              placeholder="Avatar size"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setSize(e.nativeEvent.text);
+              }}
+            />
+
+            <TextInput
+              accessibilityLabel="Icon size"
+              style={commonStyles.textBox}
+              placeholder="Icon size"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setIconSize(parseInt(e.nativeEvent.text));
+              }}
+            />
+            <TextInput
+              accessibilityLabel="Icon color"
+              style={commonStyles.textBox}
+              placeholder="Icon color"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setIconColor(e.nativeEvent.text);
+              }}
+            />
+            <Text style={styles.tokenHeader}>Ring tokens</Text>
+            <TextInput
+              accessibilityLabel="Ring background color"
+              style={commonStyles.textBox}
+              placeholder="Ring background color"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setRingBackgroundColor(e.nativeEvent.text);
+              }}
+            />
+            <TextInput
+              accessibilityLabel="Ring color"
+              style={commonStyles.textBox}
+              placeholder="Ring color"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setRingColor(e.nativeEvent.text);
+              }}
+            />
+            <TextInput
+              accessibilityLabel="Ring thickness"
+              style={commonStyles.textBox}
+              placeholder="Ring thickness"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setRingThickness(e.nativeEvent.text);
+              }}
+            />
+            <TextInput
+              accessibilityLabel="Ring inner gap"
+              style={commonStyles.textBox}
+              placeholder="Ring inner gap"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setRingInnerGap(e.nativeEvent.text);
+              }}
+            />
+          </View>
+          <View style={styles.fontTokenOptions}>
+            <Text style={styles.tokenHeader}>Font tokens</Text>
+            <TextInput
+              accessibilityLabel="Initials text color"
+              style={commonStyles.textBox}
+              placeholder="Initials text color"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setTextColor(e.nativeEvent.text);
+              }}
+            />
+            <TextInput
+              accessibilityLabel="Initials size"
+              style={commonStyles.textBox}
+              placeholder="Initials size"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setInitialsSize(parseInt(e.nativeEvent.text));
+              }}
+            />
+            <TextInput
+              accessibilityLabel="Font weight"
+              style={commonStyles.textBox}
+              placeholder="Font weight"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setFontWeight(e.nativeEvent.text);
+              }}
+            />
+            <TextInput
+              accessibilityLabel="Font family"
+              style={commonStyles.textBox}
+              placeholder="Font family"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setFontFamily(e.nativeEvent.text);
+              }}
+            />
+          </View>
+        </View>
+      </View>
+      <View>
+        <Text>Customized Avatar</Text>
+        <CustomizedAvatar
+          active="active"
+          activeAppearance="ring"
+          avatarColor={avatarColor}
+          accessibilityLabel="Former CEO of Microsoft"
+          initials={showInitials ? initials : undefined}
+          name={showInitials ? name : undefined}
+          imageUrl={showImage ? steveBallmerPhotoUrl : undefined}
+          icon={svgIconsEnabled ? { svgSource: svgProps } : undefined}
+          transparentRing={!showRing}
+        />
+      </View>
+      <View style={styles.avatarTestCaseContainer}>
+        <Text>Avatar customized with props</Text>
+        <Avatar
+          active="active"
+          activeAppearance="ring"
+          avatarColor={avatarColor}
+          accessibilityLabel="Former CEO of Microsoft"
+          initials={showInitials ? initials : undefined}
+          name={showInitials ? name : undefined}
+          imageUrl={showImage ? steveBallmerPhotoUrl : undefined}
+          ringBackgroundColor={ringBackgroundColor}
+          ringColor={ringColor}
+          ringThickness={parseInt(ringThickness)}
+          size={parseInt(size) as AvatarSize}
+          transparentRing={!showRing}
+          ringInnerGap={parseInt(ringInnerGap)}
+        />
+      </View>
+    </View>
+  );
+};