xref: /expo/apps/native-component-list/App.tsx (revision cb0e1ce3) 
1import * as React from 'react';
2import { AppLoading } from 'expo';
3import * as Font from 'expo-font';
4import { Asset } from 'expo-asset';
5import { Entypo, Ionicons, MaterialIcons } from '@expo/vector-icons';
6import { Platform, StatusBar, StyleSheet, View } from 'react-native';
7import { SafeAreaView } from 'react-navigation';
8import { Assets as StackAssets } from 'react-navigation-stack';
9import { useScreens } from 'react-native-screens';
10
11import Icons from './src/constants/Icons';
12import RootNavigation from './src/navigation/RootNavigation';
13
14// workaround for large android status bar in react-nav beta.27
15if (Platform.OS === 'android') {
16  useScreens();
17  // @ts-ignore
18  SafeAreaView.setStatusBarHeight(0);
19}
20
21const initialState = {
22  appIsReady: false,
23};
24
25type State = typeof initialState;
26
27export default class App extends React.Component<{}, State> {
28  readonly state: State = initialState;
29
30  componentWillMount() {
31    this._loadAssetsAsync();
32  }
33
34  async _loadAssetsAsync() {
35    try {
36      const iconRequires = Object.keys(Icons).map(key => Icons[key]);
37      await Promise.all([
38        Asset.loadAsync(iconRequires),
39        Asset.loadAsync(StackAssets),
40        // @ts-ignore
41        Font.loadAsync(Ionicons.font),
42        // @ts-ignore
43        Font.loadAsync(Entypo.font),
44        // @ts-ignore
45        Font.loadAsync(MaterialIcons.font),
46        Font.loadAsync({
47          'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
48        }),
49        Font.loadAsync({
50          Roboto: 'https://github.com/google/fonts/raw/master/apache/roboto/Roboto-Regular.ttf',
51        }),
52      ]);
53    } catch (e) {
54      console.log({ e });
55    } finally {
56      this.setState({ appIsReady: true });
57    }
58  }
59
60  render() {
61    if (this.state.appIsReady) {
62      return (
63        <View style={styles.container} testID="native_component_list">
64          {Platform.OS === 'android' && (
65            <View style={styles.statusBarUnderlay} />
66          )}
67          <RootNavigation />
68          {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
69        </View>
70      );
71    } else {
72      return <AppLoading />;
73    }
74  }
75}
76
77const styles = StyleSheet.create({
78  container: {
79    flex: 1,
80    backgroundColor: '#fff',
81  },
82  statusBarUnderlay: {
83    height: 24,
84    backgroundColor: 'rgba(0,0,0,0.2)',
85  },
86});
87