Update victory native example to use hooks

This commit is contained in:
Evan Bacon
2020-05-12 17:33:19 -07:00
parent d6ecc4d3b2
commit 2c38c94ca2
4 changed files with 35 additions and 46 deletions

View File

@@ -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 (
<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>
);
if (!isLoaded) {
return <AppLoading />;
}
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',
alignItems: 'center',
backgroundColor: '#f5fcff',
justifyContent: "center",
alignItems: "center",
backgroundColor: "#f5fcff",
},
});

View File

@@ -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.

View File

@@ -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",
},
};

View File

@@ -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": {