Update victory native example to use hooks

with-victory-native/App.js

@@ -1,8 +1,8 @@
-import React from 'react';
+import { useFonts } from "@use-expo/font";
-import { StyleSheet, View } from 'react-native';
+import { AppLoading } from "expo";
-import { VictoryBar, VictoryChart, VictoryTheme } from 'victory-native';
+import * as React from "react";
-import { AppLoading } from 'expo';
+import { StyleSheet, View } from "react-native";
-import * as Font from 'expo-font';
+import { VictoryBar, VictoryChart } from "victory-native";
 
 const data = [
   { quarter: 1, earnings: 13000 },
@@ -11,46 +11,36 @@ const data = [
   { quarter: 4, earnings: 19000 },
 ];
 
-export default class App extends React.Component {
+export default function App() {
-  state = { isReady: false };
+  const [isLoaded] = useFonts({
+    Roboto: require("./Roboto.ttf"),
+  });
 
-  _loadFontAsync = () => {
+  if (!isLoaded) {
-    return Font.loadAsync({ Roboto: require('./Roboto.ttf') });
+    return <AppLoading />;
-  };
-
-  render() {
-    if (!this.state.isReady) {
-      return (
-        <AppLoading
-          startAsync={this._loadFontAsync}
-          onFinish={() => this.setState({ isReady: true })}
-          onError={e => console.log(e)}
-        />
-      );
-    }
-
-    return (
-      <View style={styles.container}>
-        <VictoryChart
-          width={350}
-          /**
-           * the material theme uses the Roboto font, and react-native-svg isn't
-           * compatible with expo-font, so we can't use this theme:
-           * theme={VictoryTheme.material}
-           **/
-        >
-          <VictoryBar data={data} x="quarter" y="earnings" />
-        </VictoryChart>
-      </View>
-    );
   }
+
+  return (
+    <View style={styles.container}>
+      <VictoryChart
+        width={350}
+        /**
+         * the material theme uses the Roboto font, and react-native-svg isn't
+         * compatible with expo-font, so we can't use this theme:
+         * theme={VictoryTheme.material}
+         **/
+      >
+        <VictoryBar data={data} x="quarter" y="earnings" />
+      </VictoryChart>
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
+    justifyContent: "center",
-    alignItems: 'center',
+    alignItems: "center",
-    backgroundColor: '#f5fcff',
+    backgroundColor: "#f5fcff",
   },
 });

with-victory-native/README.md

@@ -5,8 +5,8 @@
 ## Running the app
 
 - Run `yarn` or `npm install`
-- Run [`expo start`](https://docs.expo.io/versions/latest/workflow/expo-cli/), try it out.
+- Run [`expo start`](https://docs.expo.io/versions/latest/workflow/expo-cli/), to try it out!
 
 ## The idea behind the example
 
-Expo includes react-native-svg, which is the only native dependency for victory-native. This demo shows that it's as simple as adding a supported version of victory-native and then using it as suggested in the docs. The code in main.js is copied directly out of the victory-native example app.
+Expo includes `react-native-svg`, which is the only native dependency for `victory-native`. This demo shows that it's as simple as adding a supported version of `victory-native` and then using it as suggested in the docs. The code in `App.js` is copied directly out of the `victory-native` example app.

with-victory-native/app.config.js

@@ -1,8 +1,6 @@
 export default {
-  icon:
+  splash: {
-    "https://github.com/expo/expo/blob/master/templates/expo-template-blank/assets/icon.png?raw=true",
+    image:
-  loading: {
-    icon:
       "https://github.com/expo/expo/blob/master/templates/expo-template-blank/assets/splash.png?raw=true",
   },
 };

with-victory-native/package.json

@@ -1,13 +1,14 @@
 {
   "dependencies": {
+    "@use-expo/font": "^2.0.0",
     "expo": "^37.0.7",
     "expo-font": "~8.0.0",
     "lodash": "^4.17.10",
     "react": "16.9.0",
     "react-dom": "16.9.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
-    "react-native-web": "0.11.7",
     "react-native-svg": "9.13.3",
+    "react-native-web": "0.11.7",
     "victory-native": "^34.1.0"
   },
   "devDependencies": {