chore: update example to funcitonal components (#1389)

Author: okwasniewski

example/src/App.tsx

@@ -23,12 +23,6 @@ import CustomTabBarExample from './CustomTabBarExample';
 import CoverflowExample from './CoverflowExample';
 import TabBarGapExample from './TabBarGapExample';
 
-type State = {
-  title: string;
-  index: number;
-  restoring: boolean;
-};
-
 type ExampleComponentType = React.ComponentType<{}> & {
   title: string;
   tintColor?: string;
@@ -51,21 +45,14 @@ const EXAMPLE_COMPONENTS: ExampleComponentType[] = [
   TabBarGapExample,
 ];
 
-const KeepAwake = () => {
+const ExampleList = () => {
   useKeepAwake();
-  return null;
-};
+  const [index, setIndex] = React.useState(-1);
+  const [restoring, setRestoring] = React.useState(false);
 
-export default class ExampleList extends React.Component<any, State> {
-  state = {
-    title: 'Examples',
-    index: -1,
-    restoring: false,
-  };
-
-  componentDidMount() {
+  React.useEffect(() => {
     if (process.env.NODE_ENV !== 'production') {
-      this.restoreNavigationState();
+      restoreNavigationState();
     }
 
     [
@@ -78,18 +65,16 @@ export default class ExampleList extends React.Component<any, State> {
       require('../assets/album-art-7.jpg'),
       require('../assets/album-art-8.jpg'),
     ].map((image) => Asset.fromModule(image).downloadAsync());
-  }
+  }, []);
 
-  private persistNavigationState = async (currentIndex: number) => {
+  const persistNavigationState = async (currentIndex: number) => {
     if (process.env.NODE_ENV !== 'production') {
       await AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(currentIndex));
     }
   };
 
-  private restoreNavigationState = async () => {
-    this.setState({
-      restoring: true,
-    });
+  const restoreNavigationState = async () => {
+    setRestoring(true);
 
     const savedIndexString = await AsyncStorage.getItem(PERSISTENCE_KEY);
 
@@ -101,129 +86,114 @@ export default class ExampleList extends React.Component<any, State> {
         savedIndex >= 0 &&
         savedIndex < EXAMPLE_COMPONENTS.length
       ) {
-        this.setState({
-          index: savedIndex,
-        });
+        setIndex(savedIndex);
       }
     } catch (e) {
       // ignore
     }
 
-    this.setState({
-      restoring: false,
-    });
+    setRestoring(false);
   };
 
-  private handleNavigate = (index: number) => {
-    this.setState({
-      index,
-    });
-    this.persistNavigationState(index);
+  const handleNavigate = (index: number) => {
+    setIndex(index);
+    persistNavigationState(index);
   };
 
-  private handleNavigateBack = () => {
-    this.handleNavigate(-1);
+  const handleNavigateBack = () => {
+    handleNavigate(-1);
   };
 
-  private renderItem = (component: ExampleComponentType, i: number) => (
+  const renderItem = (component: ExampleComponentType, i: number) => (
     <TouchableOpacity
       key={i}
       style={styles.touchable}
-      onPress={() => this.handleNavigate(i)}
+      onPress={() => handleNavigate(i)}
     >
       <Text style={styles.item}>
         {i + 1}. {component.title}
       </Text>
     </TouchableOpacity>
   );
 
-  render() {
-    if (this.state.restoring) {
-      return null;
-    }
-
-    const { index } = this.state;
-
-    const ExampleComponent = EXAMPLE_COMPONENTS[index] || null;
-    const backgroundColor = ExampleComponent?.backgroundColor
-      ? ExampleComponent.backgroundColor
-      : '#111';
-    const tintColor =
-      ExampleComponent && typeof ExampleComponent.tintColor === 'string'
-        ? ExampleComponent.tintColor
-        : 'white';
-    const appbarElevation =
-      ExampleComponent && typeof ExampleComponent.appbarElevation === 'number'
-        ? ExampleComponent.appbarElevation
-        : 4;
-    const statusBarStyle =
-      ExampleComponent && typeof ExampleComponent.statusBarStyle === 'string'
-        ? ExampleComponent.statusBarStyle
-        : 'light-content';
-    const borderBottomWidth =
-      Platform.OS === 'ios' ? StyleSheet.hairlineWidth : 0;
+  if (restoring) {
+    return null;
+  }
 
-    return (
-      <SafeAreaProvider>
-        <StatusBar
-          translucent
-          barStyle={Platform.OS === 'ios' ? statusBarStyle : 'light-content'}
-        />
-        <KeepAwake />
-        <View style={styles.container}>
-          <SafeAreaView
-            edges={['top']}
-            style={[
-              styles.appbar,
-              backgroundColor ? { backgroundColor } : null,
-              appbarElevation
-                ? { elevation: appbarElevation, borderBottomWidth }
-                : null,
-            ]}
-          >
-            <View style={styles.appbarContent}>
-              {index > -1 ? (
-                <TouchableOpacity
-                  style={styles.button}
-                  onPress={this.handleNavigateBack}
-                >
-                  <Ionicons
-                    name={
-                      Platform.OS === 'android'
-                        ? 'md-arrow-back'
-                        : 'ios-arrow-back'
-                    }
-                    size={24}
-                    color={tintColor}
-                  />
-                </TouchableOpacity>
-              ) : null}
-              <Text
-                style={[styles.title, tintColor ? { color: tintColor } : null]}
+  const ExampleComponent = EXAMPLE_COMPONENTS[index] || null;
+  const backgroundColor = ExampleComponent?.backgroundColor
+    ? ExampleComponent.backgroundColor
+    : '#111';
+  const tintColor =
+    ExampleComponent && typeof ExampleComponent.tintColor === 'string'
+      ? ExampleComponent.tintColor
+      : 'white';
+  const appbarElevation =
+    ExampleComponent && typeof ExampleComponent.appbarElevation === 'number'
+      ? ExampleComponent.appbarElevation
+      : 4;
+  const statusBarStyle =
+    ExampleComponent && typeof ExampleComponent.statusBarStyle === 'string'
+      ? ExampleComponent.statusBarStyle
+      : 'light-content';
+  const borderBottomWidth =
+    Platform.OS === 'ios' ? StyleSheet.hairlineWidth : 0;
+
+  return (
+    <SafeAreaProvider>
+      <StatusBar
+        translucent
+        barStyle={Platform.OS === 'ios' ? statusBarStyle : 'light-content'}
+      />
+      <View style={styles.container}>
+        <SafeAreaView
+          edges={['top']}
+          style={[
+            styles.appbar,
+            backgroundColor ? { backgroundColor } : null,
+            appbarElevation
+              ? { elevation: appbarElevation, borderBottomWidth }
+              : null,
+          ]}
+        >
+          <View style={styles.appbarContent}>
+            {index > -1 ? (
+              <TouchableOpacity
+                style={styles.button}
+                onPress={handleNavigateBack}
               >
-                {index > -1
-                  ? EXAMPLE_COMPONENTS[index].title
-                  : this.state.title}
-              </Text>
-              {index > -1 ? <View style={styles.button} /> : null}
-            </View>
-          </SafeAreaView>
-          <SafeAreaView edges={['bottom']} style={styles.safearea}>
-            <View style={styles.content}>
-              {index === -1 ? (
-                <ScrollView>
-                  {EXAMPLE_COMPONENTS.map(this.renderItem)}
-                </ScrollView>
-              ) : ExampleComponent ? (
-                <ExampleComponent />
-              ) : null}
-            </View>
-          </SafeAreaView>
-        </View>
-      </SafeAreaProvider>
-    );
-  }
-}
+                <Ionicons
+                  name={
+                    Platform.OS === 'android'
+                      ? 'md-arrow-back'
+                      : 'ios-arrow-back'
+                  }
+                  size={24}
+                  color={tintColor}
+                />
+              </TouchableOpacity>
+            ) : null}
+            <Text
+              style={[styles.title, tintColor ? { color: tintColor } : null]}
+            >
+              {index > -1 ? EXAMPLE_COMPONENTS[index].title : 'Examples'}
+            </Text>
+            {index > -1 ? <View style={styles.button} /> : null}
+          </View>
+        </SafeAreaView>
+        <SafeAreaView edges={['bottom']} style={styles.safearea}>
+          <View style={styles.content}>
+            {index === -1 ? (
+              <ScrollView>{EXAMPLE_COMPONENTS.map(renderItem)}</ScrollView>
+            ) : ExampleComponent ? (
+              <ExampleComponent />
+            ) : null}
+          </View>
+        </SafeAreaView>
+      </View>
+    </SafeAreaProvider>
+  );
+};
 
 const styles = StyleSheet.create({
   container: {

example/src/AutoWidthTabBarExample.tsx

@@ -17,33 +17,18 @@ type State = NavigationState<{
   title: string;
 }>;
 
-export default class DynamicWidthTabBarExample extends React.Component<
-  {},
-  State
-> {
-  // eslint-disable-next-line react/sort-comp
-  static title = 'Scrollable tab bar (auto width)';
-  static backgroundColor = '#3f51b5';
-  static appbarElevation = 0;
+const AutoWidthTabBarExample = () => {
+  const [index, onIndexChange] = React.useState(1);
+  const [routes] = React.useState([
+    { key: 'article', title: 'Article' },
+    { key: 'contacts', title: 'Contacts' },
+    { key: 'albums', title: 'Albums' },
+    { key: 'chat', title: 'Chat' },
+    { key: 'long', title: 'long long long title' },
+    { key: 'medium', title: 'medium title' },
+  ]);
 
-  state = {
-    index: 1,
-    routes: [
-      { key: 'article', title: 'Article' },
-      { key: 'contacts', title: 'Contacts' },
-      { key: 'albums', title: 'Albums' },
-      { key: 'chat', title: 'Chat' },
-      { key: 'long', title: 'long long long title' },
-      { key: 'medium', title: 'medium title' },
-    ],
-  };
-
-  private handleIndexChange = (index: number) =>
-    this.setState({
-      index,
-    });
-
-  private renderTabBar = (
+  const renderTabBar = (
     props: SceneRendererProps & { navigationState: State }
   ) => (
     <TabBar
@@ -56,7 +41,7 @@ export default class DynamicWidthTabBarExample extends React.Component<
     />
   );
 
-  private renderScene = SceneMap({
+  const renderScene = SceneMap({
     albums: Albums,
     contacts: Contacts,
     article: Article,
@@ -65,17 +50,24 @@ export default class DynamicWidthTabBarExample extends React.Component<
     medium: Article,
   });
 
-  render() {
-    return (
-      <TabView
-        navigationState={this.state}
-        renderScene={this.renderScene}
-        renderTabBar={this.renderTabBar}
-        onIndexChange={this.handleIndexChange}
-      />
-    );
-  }
-}
+  return (
+    <TabView
+      navigationState={{
+        index,
+        routes,
+      }}
+      renderScene={renderScene}
+      renderTabBar={renderTabBar}
+      onIndexChange={onIndexChange}
+    />
+  );
+};
+
+AutoWidthTabBarExample.title = 'Scrollable tab bar (auto width)';
+AutoWidthTabBarExample.backgroundColor = '#3f51b5';
+AutoWidthTabBarExample.appbarElevation = 0;
+
+export default AutoWidthTabBarExample;
 
 const styles = StyleSheet.create({
   tabbar: {