react-native-game-loader

Usage

import Loader from "react-native-game-loader";

function App() {
    return (
        <Loader
            barProgress={0.52}
            barStyle={{
                activeColor: "#ff9327",
                backgroundColor: "#654321",
            }}
            backgroundSource={require('./assets/background.png')}
            logoSource={require('./assets/logo.png')}
        />
    );
}

Properties

| Prop | Type | Default | | Description | |----------------------------|-----------------------|--------------------------------|----------|------------------------------------------------------------------------------------------------| | backgroundSource | ImageSourcePropType | | required | Asset used as background | | logoSource | ImageSourcePropType | | required | Asset used as logo | | logoTopOffset | number | 0.05 (5% of screen height) | | Top margin for the logoIf value is between 0 and 1 - works as percentage of screen height | | logoWidth | number | 80% of screen width | | Width of the logo | | barProgress | number | | required | Number from 0 to 1 representing loading progress | | barTextStyle | TextStyle | | | Styles for the progress bar's text | | barStyle | ViewStyle | | required | Styles for the progress bar | | barStyle.activeColor | string | | required | Color of active part of progress bar | | barStyle.backgroundColor | string | | required | Color of progress bar's background | | barStyle.width | number | 80% of device screen width | | Width of progress bar | | barStyle.height | number | 20 | | Height of progress bar | | barStyle.padding | number | 3 | | Padding between background and active part | | barStyle.borderRadius | number | bar height / 2 (fully rounded) | | Border radius of progress bar |