[Fabric] Use the new Fabric custom component

Author: cortinico

App.js

@@ -6,7 +6,8 @@
  * @flow strict-local
  */
 
-import React from 'react';
+import * as React from 'react';
+import {useRef, useState} from 'react';
 import type {Node} from 'react';
 import NativeAnswerSolver from './js/NativeAnswerSolver';
 import {
@@ -27,6 +28,8 @@ import {
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
 import Button from "react-native/Libraries/Components/Button";
+import AnswerViewer, {Commands as AnswerViewerCommands} from './js/NativeAnswerViewer';
+import type {AnswerViewerViewType} from './js/NativeAnswerViewer';
 
 const Section = ({children, title}): Node => {
   const isDarkMode = useColorScheme() === 'dark';
@@ -61,15 +64,21 @@ const App: () => Node = () => {
     backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
   };
 
+  const ref = useRef<React.ElementRef<AnswerViewerViewType> | null>(null);
+  const [step, setStep] = useState(1);
+
   const onPress = () => {
     const theAnswer = NativeAnswerSolver?.answerTheUltimateQuestion("What's the Answer to the Ultimate Question of Life, the Universe, and Everything") || ""
     console.log('The answer is: ' + theAnswer);
+    setStep(step+1);
+    AnswerViewerCommands.changeBackgroundColor(ref.current, "red");
   };
 
   return (
     <SafeAreaView style={backgroundStyle}>
       <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
       <Button title="Click to invoke your Turbo Module!" onPress={onPress} />
+      <AnswerViewer ref={ref} style={{width: "100%", height: 50}} color="yellow" step={step} />
       <ScrollView
         contentInsetAdjustmentBehavior="automatic"
         style={backgroundStyle}>