AppNavigator Error Euy

.babelrc

@@ -0,0 +1,8 @@
+{
+ "presets": ["babel-preset-expo"],
+ "env": {
+ "development": {
+ "plugins": ["transform-react-jsx-source"]
+ }
+ }
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules/**/*
+.expo/**/*

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+ "git.ignoreLimitWarning": true
+}

.watchmanconfig

@@ -0,0 +1 @@
+{}

App.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Platform, StatusBar, StyleSheet, View } from 'react-native';
+import { AppLoading, Asset, Font, Icon } from 'expo';
+import AppNavigator from './navigation/AppNavigator';
+
+export default class App extends React.Component {
+ state = {
+ isLoadingComplete: false,
+ };
+
+ render() {
+ if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
+ return (
+ <AppLoading
+ startAsync={this._loadResourcesAsync}
+ onError={this._handleLoadingError}
+ onFinish={this._handleFinishLoading}
+ />
+ );
+ } else {
+ return (
+ <View style={styles.container}>
+ {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
+ <AppNavigator />
+ </View>
+ );
+ }
+ }
+
+ _loadResourcesAsync = async () => {
+ return Promise.all([
+ Asset.loadAsync([
+ require('./assets/images/robot-dev.png'),
+ require('./assets/images/robot-prod.png'),
+ ]),
+ Font.loadAsync({
+ // This is the font that we are using for our tab bar
+ ...Icon.Ionicons.font,
+ // We include SpaceMono because we use it in HomeScreen.js. Feel free
+ // to remove this if you are not using it in your app
+ 'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
+ }),
+ ]);
+ };
+
+ _handleLoadingError = error => {
+ // In this case, you might want to report the error to your error
+ // reporting service, for example Sentry
+ console.warn(error);
+ };
+
+ _handleFinishLoading = () => {
+ this.setState({ isLoadingComplete: true });
+ };
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: '#fff',
+ },
+});

__tests__/App-test.js

@@ -0,0 +1,22 @@
+import 'react-native';
+import React from 'react';
+import App from '../App';
+import renderer from 'react-test-renderer';
+import NavigationTestUtils from 'react-navigation/NavigationTestUtils';
+
+describe('App snapshot', () => {
+ jest.useFakeTimers();
+ beforeEach(() => {
+ NavigationTestUtils.resetInternalState();
+ });
+
+ it('renders the loading screen', async () => {
+ const tree = renderer.create(<App />).toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+
+ it('renders the root without loading screen', async () => {
+ const tree = renderer.create(<App skipLoadingScreen />).toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+});

app.json

@@ -0,0 +1,27 @@
+{
+ "expo": {
+ "name": "my-new-project",
+ "description": "A very interesting project.",
+ "slug": "my-new-project",
+ "privacy": "public",
+ "sdkVersion": "30.0.0",
+ "platforms": ["ios", "android"],
+ "version": "1.0.0",
+ "orientation": "portrait",
+ "icon": "./assets/images/icon.png",
+ "splash": {
+ "image": "./assets/images/splash.png",
+ "resizeMode": "contain",
+ "backgroundColor": "#ffffff"
+ },
+ "updates": {
+ "fallbackToCacheTimeout": 0
+ },
+ "assetBundlePatterns": [
+ "**/*"
+ ],
+ "ios": {
+ "supportsTablet": true
+ }
+ }
+}

bash.exe.stackdump

@@ -0,0 +1,19 @@
+Stack trace:
+Frame Function Args
+000FFFF4D00 0018005D5CC (000FFFFE3F4, 00000000002, 000FFFF4E30, 000FFFFDE50)
+000FFFF4DA0 0018005EBDB (00000000064, 00000000000, 00000000364, 00000000000)
+000FFFF4FF0 001801242BD (00180271780, 00600039A59, 000000025B8, 000001A0000)
+000FFFF59C0 0018005D901 (00180040000, F8B8005C0000, 000FFFF57D0, 000FFFF5840)
+000FFFF57D0 7FF9F6E035AF (00000000000, 00180273564, 00180040000, 00000000000)
+000FFFF57D0 7FF9F6D64AAF (001802FF780, 001802FF780, 00000003898, 00000000000)
+0000000001F 7FF9F6E0231E (000FFFF61B0, 000FFFF61D0, 001005F6E10, 001005EB044)
+0000000001F 0018009D8CE (00600199FA0, 00000000000, 00100428721, 00000000002)
+0000000001F 001801422BA (00600199FA0, 00100425AD0, 00000000002, 000003A0000)
+001005F6E10 0018011C90B (00600199FA0, 00100425AD0, 00000000002, 000003A0000)
+001005F6E10 00100428EAB (001802FFAB8, 00000000003, 00180135CEA, 0010000008B)
+001005F6E10 00100429AC8 (000000019F0, 00000000000, 001005F1F98, 00000000000)
+00000000001 00100432950 (00600000001, 0060019A470, 001800BB4AC, 00000000000)
+0060019AFB0 00100437B8A (0060019A470, 0060019A697, 00000000076, 000FFFF6548)
+0060019A470 00100438BE4 (00000000001, 00600000000, 000FFFF6688, 00000000000)
+0060019A6B0 00100439A7C (00000000000, 00000000000, 00000000000, 00000000000)
+End of stack trace (more stack frames may be present)

components/StyledText.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+export class MonoText extends React.Component {
+ render() {
+ return <Text {...this.props} style={[this.props.style, { fontFamily: 'space-mono' }]} />;
+ }
+}

components/TabBarIcon.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Icon } from 'expo';
+
+import Colors from '../constants/Colors';
+
+export default class TabBarIcon extends React.Component {
+ render() {
+ return (
+ <Icon.Ionicons
+ name={this.props.name}
+ size={26}
+ style={{ marginBottom: -3 }}
+ color={this.props.focused ? Colors.tabIconSelected : Colors.tabIconDefault}
+ />
+ );
+ }
+}

components/__tests__/StyledText-test.js

@@ -0,0 +1,10 @@
+import 'react-native';
+import React from 'react';
+import { MonoText } from '../StyledText';
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+ const tree = renderer.create(<MonoText>Snapshot test!</MonoText>).toJSON();
+
+ expect(tree).toMatchSnapshot();
+});

constants/Colors.js

@@ -0,0 +1,14 @@
+const tintColor = '#2f95dc';
+
+export default {
+ tintColor,
+ tabIconDefault: '#ccc',
+ tabIconSelected: tintColor,
+ tabBar: '#fefefe',
+ errorBackground: 'red',
+ errorText: '#fff',
+ warningBackground: '#EAEB5E',
+ warningText: '#666804',
+ noticeBackground: tintColor,
+ noticeText: '#fff',
+};

constants/Layout.js

@@ -0,0 +1,12 @@
+import { Dimensions } from 'react-native';
+
+const width = Dimensions.get('window').width;
+const height = Dimensions.get('window').height;
+
+export default {
+ window: {
+ width,
+ height,
+ },
+ isSmallDevice: width < 375,
+};

navigation/AppNavigator.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createSwitchNavigator } from 'react-navigation';
+
+import MainTabNavigator from './MainTabNavigator';
+
+export default createSwitchNavigator({
+ // You could add another route here for authentication.
+ // Read more at https://reactnavigation.org/docs/en/auth-flow.html
+ Main: MainTabNavigator,
+});

navigation/MainTabNavigator.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
+
+import TabBarIcon from '../components/TabBarIcon';
+import HomeScreen from '../screens/HomeScreen';
+import LinksScreen from '../screens/LinksScreen';
+import SettingsScreen from '../screens/SettingsScreen';
+
+const HomeStack = createStackNavigator({
+ Home: HomeScreen,
+});
+
+HomeStack.navigationOptions = {
+ tabBarLabel: 'Home',
+ tabBarIcon: ({ focused }) => (
+ <TabBarIcon
+ focused={focused}
+ name={
+ Platform.OS === 'ios'
+ ? `ios-information-circle${focused ? '' : '-outline'}`
+ : 'md-information-circle'
+ }
+ />
+ ),
+};
+
+const LinksStack = createStackNavigator({
+ Links: LinksScreen,
+});
+
+LinksStack.navigationOptions = {
+ tabBarLabel: 'Links',
+ tabBarIcon: ({ focused }) => (
+ <TabBarIcon
+ focused={focused}
+ name={Platform.OS === 'ios' ? `ios-link${focused ? '' : '-outline'}` : 'md-link'}
+ />
+ ),
+};
+
+const SettingsStack = createStackNavigator({
+ Settings: SettingsScreen,
+});
+
+SettingsStack.navigationOptions = {
+ tabBarLabel: 'Settings',
+ tabBarIcon: ({ focused }) => (
+ <TabBarIcon
+ focused={focused}
+ name={Platform.OS === 'ios' ? `ios-options${focused ? '' : '-outline'}` : 'md-options'}
+ />
+ ),
+};
+
+export default createBottomTabNavigator({
+ HomeStack,
+ LinksStack,
+ SettingsStack,
+});