diff --git a/with-victory-native/App.js b/with-victory-native/App.js index 89701e3..e6ac876 100644 --- a/with-victory-native/App.js +++ b/with-victory-native/App.js @@ -1,8 +1,8 @@ -import React from 'react'; -import { StyleSheet, View } from 'react-native'; -import { VictoryBar, VictoryChart, VictoryTheme } from 'victory-native'; -import { AppLoading } from 'expo'; -import * as Font from 'expo-font'; +import { useFonts } from "@use-expo/font"; +import { AppLoading } from "expo"; +import * as React from "react"; +import { StyleSheet, View } from "react-native"; +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 { - state = { isReady: false }; +export default function App() { + const [isLoaded] = useFonts({ + Roboto: require("./Roboto.ttf"), + }); - _loadFontAsync = () => { - return Font.loadAsync({ Roboto: require('./Roboto.ttf') }); - }; - - render() { - if (!this.state.isReady) { - return ( - this.setState({ isReady: true })} - onError={e => console.log(e)} - /> - ); - } - - return ( - - - - - - ); + if (!isLoaded) { + return ; } + + return ( + + + + + + ); } const styles = StyleSheet.create({ container: { flex: 1, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#f5fcff', + justifyContent: "center", + alignItems: "center", + backgroundColor: "#f5fcff", }, }); diff --git a/with-victory-native/README.md b/with-victory-native/README.md index cecf0b5..8e8db8f 100644 --- a/with-victory-native/README.md +++ b/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. diff --git a/with-victory-native/app.config.js b/with-victory-native/app.config.js index e180915..1b36338 100644 --- a/with-victory-native/app.config.js +++ b/with-victory-native/app.config.js @@ -1,8 +1,6 @@ export default { - icon: - "https://github.com/expo/expo/blob/master/templates/expo-template-blank/assets/icon.png?raw=true", - loading: { - icon: + splash: { + image: "https://github.com/expo/expo/blob/master/templates/expo-template-blank/assets/splash.png?raw=true", }, }; diff --git a/with-victory-native/package.json b/with-victory-native/package.json index 6c42f09..dc1d45a 100644 --- a/with-victory-native/package.json +++ b/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": {