How to set responsive logo in android splash screen in react-native-splash-screen?

0
votes

I'm trying to make the logo in android splash screen scale correctly on different android devices.

I followed the instruction of npm react-native-splash-screen.

The splash screen logo scales well on iOS, but on Android it stretches out of screen like the following screenshot.

enter image description here

launch_screen.xml in layout folder:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/launch_screen"
        android:scaleType="centerCrop" />
</RelativeLayout>

Android filter:

enter image description here

Project filter:

enter image description here

1
androidreact-nativesplash-screen

1 Answers

1
votes

you are doing it natively

while i have done it with the react native way

import React, { PureComponent } from "react";
import { Image, View } from "react-native";
import { Images, Metrics } from "@common";
import { Navigator } from "@services";
import styles from "./styles";
import SplashScreenComponent from "react-native-splash-screen";

const minDisplayTime = 1000;

class SplashScreen extends PureComponent {
  componentDidMount() {
    SplashScreenComponent.hide();

    setTimeout(() => Navigator.navigate("AuthLoading"), 5000);
  }

  render() {
    return (
      <View style={styles.container}>
        <Image
          source={Images.splashGif}
          style={{ width: '90%', borderWidth: 1, borderColor: '#fff' }}
          resizeMode={"contain"}
        />
      </View>
    );
  }
}

export default SplashScreen;