Cannot set splash screen

The app bundle works well, but when I try to implement splash screen code, following this instruction, emulators throw a syntax error:

Here’s the app.js code:

import React from 'react';
import { AppLoading, Font } from 'expo';
import { StackNavigator } from 'react-navigation';
import { StatusBar, View, Platform } from 'react-native';
import * as Screens from './screens';
import { bootstrap } from './style/themeBootstrapper';

bootstrap();

const ExplorerApp = StackNavigator({
  Home: { screen: Screens.ComponentsScreen },
  Picker: { screen: Screens.PickerScreen },
  Button: { screen: Screens.ButtonScreen },
  Switch: { screen: Screens.SwitchScreen },
  Choice: { screen: Screens.ChoiceScreen },
  Tab: { screen: Screens.TabScreen },
  Card: { screen: Screens.CardScreen },
  Avatar: { screen: Screens.AvatarScreen },
  Input: { screen: Screens.InputScreen },
  Image: { screen: Screens.ImageScreen },
  Gallery: { screen: Screens.GalleryScreen },
  Settings: { screen: Screens.SettingsScreen },
  ChoiceCustomization: { screen: Screens.ChoiceCustomizationScreen },
  Profile: { screen: Screens.InputScreen },
}, {
  navigationOptions: {
    headerStyle: {
      backgroundColor: '#faf9f9',
      marginTop: (Platform.OS === 'ios') ? 0 : Expo.Constants.statusBarHeight,
    },
  },
});

export default class App extends React.Component {
  state = {
    loaded: false,
  };

  componentWillMount() {
    this._loadAssetsAsync();
  }

  _loadAssetsAsync = async () => {
    await Font.loadAsync({
      'Roboto-Light': require('./fonts/Roboto-Light.ttf'),
      'Roboto-Medium': require('./fonts/Roboto-Medium.ttf'),
      Borg: require('./fonts/Borg.ttf'),
      Curely: require('./fonts/Curely.ttf'),
      FontAwesome: require('./fonts/FontAwesome.ttf'),
    });

    this.setState({ loaded: true });
  };

  render() {
    if (!this.state.loaded) {
      return <AppLoading />;
    }

    return (
      <View style={{ flex: 1 }}>
        <ExplorerApp />
        <StatusBar barStyle="default" />
      </View>
    );
  }
}

"splash": {
  "image": "./img/splash.png"
}

The question is, where this snippet described in an instruction should be placed in order splash screen work? splash.png is looking good and image viewers don’t throw any errors while reading it.

You are getting this error bacause of “splash” at the end of the file!

That key should be placed in app.json not your app.js.

{
	"expo": {
		"name": "YourAppName",
		"icon": "./app/assets/icon.png",
		"splash": {
			"image": "./app/assets/splash-screen.png"
		},
		"version": "1.1.4",
		"slug": "your_app_slug",
		"sdkVersion": "28.0.0",
	}
}
2 Likes

Wow, it worked! Thanks a lot!

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.