refactor(rn tester app): change activity indicator to hooks (#35071)

Summary:
This pull request migrates the activity indicator example to using React Hooks.

## Changelog
[General] [Changed] - RNTester: Migrate ActivityIndicator to hooks

Pull Request resolved: #35071

Test Plan: The animation works exactly as it did as when it was a class component

Reviewed By: jacdebug

Differential Revision: D40698379

Pulled By: NickGerleman

fbshipit-source-id: 08b275fcc4e3a10b5872e0031fa2ecce5360a7b9

packages/rn-tester/js/examples/ActivityIndicator/ActivityIndicatorExample.js

@@ -10,46 +10,35 @@
 
 import type {Node} from 'React';
 import {ActivityIndicator, StyleSheet, View} from 'react-native';
-import React, {Component} from 'react';
+import React, {useState, useCallback, useRef, useEffect} from 'react';
 
-type State = {|animating: boolean|};
-type Props = $ReadOnly<{||}>;
-type Timer = TimeoutID;
+function ToggleAnimatingActivityIndicator() {
+  const timer = useRef();
 
-class ToggleAnimatingActivityIndicator extends Component<Props, State> {
-  _timer: Timer;
+  const [animating, setAnimating] = useState(true);
 
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      animating: true,
-    };
-  }
-
-  componentDidMount() {
-    this.setToggleTimeout();
-  }
+  const setToggleTimeout = useCallback(() => {
+    timer.current = setTimeout(() => {
+      setAnimating(currentState => !currentState);
+      setToggleTimeout();
+    }, 2000);
+  }, []);
 
-  componentWillUnmount() {
-    clearTimeout(this._timer);
-  }
+  useEffect(() => {
+    setToggleTimeout();
 
-  setToggleTimeout() {
-    this._timer = setTimeout(() => {
-      this.setState({animating: !this.state.animating});
-      this.setToggleTimeout();
-    }, 2000);
-  }
+    return () => {
+      clearTimeout(timer.current);
+    };
+  }, [timer, setToggleTimeout]);
 
-  render(): Node {
-    return (
-      <ActivityIndicator
-        animating={this.state.animating}
-        style={[styles.centering, {height: 80}]}
-        size="large"
-      />
-    );
-  }
+  return (
+    <ActivityIndicator
+      animating={animating}
+      style={[styles.centering, {height: 80}]}
+      size="large"
+    />
+  );
 }
 
 const styles = StyleSheet.create({