CODEWITHSUNDEEP
androidreact-nativeexpo
red
red

Reputation: 1619

React native - expo 45 - missing images android production

I'm not able to see some images in android production build, the image are correctly displayed instead in expo dev-client, here my code:

<TouchableOpacity style={{ position: "absolute", right: 30, top: 20 }} onPress={() => this.setState({ displayInfo: !this.state.displayInfo })}>
  <Image source={require('./../../../../assets/icona_info.png')} resizeMode="contain" style={{ width: 36, height: 36 }} />
</TouchableOpacity>

It happen in expo sdk 45, with previous sdk all worked fine. Please help me to figure out how to solve this issue. Tnx

Upvotes: 0

Views: 1121

Answers (2)

Suyash Vashishtha
Suyash Vashishtha

Reputation: 755

Try importing them like this

import myImage from '../../path'

and then

<Image source={myImage} />

Upvotes: 0

Ushan Fernando
Ushan Fernando

Reputation: 782

You can try caching the assets before you use them inside the components. You can use Asset and AppLoading modules to handle this. following is an example on how you can load assets before the components are loaded.

import React from 'react';
import { StatusBar } from 'react-native';
import { TouchableOpacity, Image } from 'react-native';
import { Asset, AppLoading } from 'expo';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoaded: true,
    };
  }

  async loadAssetsAsync() {
    return Asset.loadAsync([require('./src/assets/icon.png')]);
  }

  render() {
    if (!this.state.isLoaded) {
      return (
        <AppLoading
          startAsync={() => this.loadAssetsAsync()}
          onFinish={() => this.setState({ isLoaded: true })}
          onError={console.warn}
        />
      );
    }
    return (
      <React.Fragment>
        <TouchableOpacity
          style={{ position: 'absolute', right: 30, top: 20 }}
          onPress={() =>
            this.setState({ displayInfo: !this.state.displayInfo })
          }>
          <Image
            source={require('./src/assets/icon.png')}
            resizeMode="contain"
            style={{ width: 36, height: 36 }}
          />
        </TouchableOpacity>
      </React.Fragment>
    );
  }
}

Please refer following documentation for more information.

expo assets caching

AppLoading

Asset

Upvotes: 2

Related Questions