Skip to main content

How to customize your app's splashscreen

Overview​

This tutorial shows you how to customize the SplashScreen component.

Usage​

  1. Add the following filters outside the activate function of your theme. This is very important. Otherwise, the filters won't be applied before the SplashScreen is shown. You can change the timeout and the component as you wish. ​
    import { appmaker } from "@appmaker-xyz/core";
    import SplashScreen from "./SplashScreen";
    ​
    // to change the timeout. Currently the default is 500 ms.
    appmaker.addFilter(
    "appmaker-splash-screen-timeout",
    "my-theme-name",
    () => 10000 // timeout in ms
    );
    ​
    // to change the component
    appmaker.addFilter(
    "appmaker-splash-screen-component",
    "my-theme-name",
    () => SplashScreen
    );
    function activate(theme) {
    // your theme activate function codes
    }

​ 2. Change the SplashScreen component as you wish. Here I am using a video as a splash screen. You can use any component you want. But make sure it loads fast. ​ ​

import React from "react";
import { View, Text } from "react-native";
import { appmaker, appSettings } from "@appmaker-xyz/core";
import Video from "react-native-video";
const appmakerImages = appSettings.getOption("appmakerImages");
​
const SplashScreen = () => {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Video
        source={require("./splash.mp4")} // should be a local file, because otherwise it will take a long time to load
        shouldPlay={true}
        resizeMode="cover"
        style={{ width: 300, height: 600 }}
        isMuted={false}
      />
    </View>
  );
};
export default SplashScreen;