CODEWITHSUNDEEP
androidiosreact-nativesvgexpo
hong developer
hong developer

Reputation: 13926

how to use SVG Image in Splash Screen on Expo eject

I separated 'Expo' using 'Expo object'. And I want to use SVG for resolution of splash screen. But I don't know how to do that.

I just know how to use the image in only Android.

I don't know Ios Splash Screen

Android(splash_backgroud.xml):

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@color/splashBackground"/>

    <item><bitmap android:gravity="center" android:src="@drawable/splash" /></item>

</layer-list>

androidimage

I created the file ic_splash.xml using the SVG image as drawable => NEW => Vector Asset.

But I don't know how to apply it.

I don't know what to do with the iPhone.

Tell me how to apply the iPhone and Android.

Please help us a lot. Thank you in advance.

Upvotes: 2

Views: 5542

Answers (1)

hong developer
hong developer

Reputation: 13926

I hid the basic splash screen and used the screen I made.

Basically, only the png, jpeg extension picture files are available on Androidand ios.

example.js

import React from 'react';
import { Image, Text, View } from 'react-native';
import { Asset, SplashScreen } from 'expo';
import SvgUri from "expo-svg-uri";

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

  componentDidMount() {
    SplashScreen.preventAutoHide();
  }

  render() {
    if (!this.state.isReady) {
      return (
        <View style={{ flex: 1 }}>
          <SvgUri
            width="200"
            height="200"
            source={require('./assets/images/splash.svg')}
            onLoad={this._cacheResourcesAsync}
          />
        </View>
      );
    }

    return (
      <View style={{ flex: 1 }}>
        <Image source={require('./assets/images/expo-icon.png')} />
        <Image source={require('./assets/images/slack-icon.png')} />
      </View>
    );    
  }


  _cacheResourcesAsync = async () => {
    SplashScreen.hide();
    const images = [
      require('./assets/images/expo-icon.png'),
      require('./assets/images/slack-icon.png'),
    ];

    const cacheImages = images.map((image) => {
      return Asset.fromModule(image).downloadAsync();
    });

    await Promise.all(cacheImages);
    this.setState({ isReady: true });
  }
}

Upvotes: 1

Related Questions