# Native stagedComponent demo

Just used for a quick discussion in a meeting, this will likely not make sense without context

// icon demo

import { stagedComponent, mergeProps, getMemoCache } from '@fluentui-react-native/framework';

<Text> -> RCTText
<UpperText> -> <Text>
<LargeText> -> <UpperText> -> <Text> -> RCTText


LargeText(props)

<Stack> -> React.CE - pushes frame

<View>
      <Text>
        <RCTText>
      </Text>

// icon with slots

const iconCache = getMemoCache();

type IconSlotProps = {
  svg: SvgProps;
  font: FontProps;
}

const useSlots = buildUseSlots<IconSlotProps>({
  slots: {
    svg: Svg;
    font: Font;
  }
});

const Icon = stagedComponent((props: IconProps) => {
  const theme = useTheme();
  const color = props.color || theme.palette.textColor;
  const innerType = .... // sets value for Font | Svg
  const style = getMemoCache(() => {
    // calculate the style you want to pass
  }, [theme, innerType, color]);
  const Slots = useSlots();
  return (rest: IconProps) => {
      const newProps = mergeProps({ style }, props, rest);
      return innerType === 'Font' ? <Slots.font {...newProps} /> : <Slots.svg {...newProps} />;
  }  
})

Object.assign({}, first, second, third);
+
special handling for className ".css1" + ".css2 .css3" => ".css1 .css2 .css3"

In flurn repo:
- packages/experimental/Text
- packages/experimental/Button
- packages/experimental/Stack


const myStyle = {}

<Text style={myStyle} />