Images showing up in Expo web browser but not on iOS

user_5894269 0
Viewed 649

Title mostly says it. I have this code in the middle of a ScrollView:

    {
      this.state.images.map((image, index) => (
        <Image 
        key={index}
        source={{uri:image}}
        style={style.image}/>

      ))
    }

And then have images like this in state:

this.state = {
  images: [
    require('../assets/images/photo1.jpg'),
    require('../assets/images/photo2.jpg'),
    require('../assets/images/photo3.jpg'),
    require('../assets/images/photo4.jpg'),
    require('../assets/images/photo5.jpg'),
    require('../assets/images/photo6.jpg'),
    require('../assets/images/photo7.jpg'),
    require('../assets/images/photo8.jpg'),
    require('../assets/images/photo9.jpg'),
    require('../assets/images/photo10.jpg'),
    require('../assets/images/photo11.jpg'),
    require('../assets/images/photo12.jpg')
  ],
  active: 0
}

The images show up perfectly on Expo when I run it in web browser, but totally choke on my device; the ScrollView shows up but no images are visible. A few things I've done to troubleshoot:

  • moved images from a constant into state
  • added "assetBundlePatterns": [ "assets/images/*" ], to app.json which theoretically bundles

Some issues I'm getting:

  • JSON value '1' of type NSNumber cannot be converted to a valid URL some of the time

Any ideas for what this is? Have been trolling the internet for solutions and haven't found anything that has worked

expo react-native reactjs javascript ios
1 Answers

Your Image component supposed to look like below:

        {this.state.images.map((image, index) => (
          <Image key={index} source={image} style={styles.image} />
        ))}

Here is the working example using FlatList: Expo Snack

enter image description here

import * as React from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      images: [
        require('./assets/snack-icon.png'),
        require('./assets/snack-icon.png'),
        require('./assets/snack-icon.png'),
        require('./assets/snack-icon.png'),
        require('./assets/snack-icon.png'),
      ],
      active: 0,
    };
  }
  render() {
    return (
      <View style={styles.container}>
        {this.state.images.map((image, index) => (
          <Image key={index} source={image} style={styles.image} />
        ))}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  image: {
    width: 100,
    backgroundColor: 'red',
    margin: 10,
    height: 100,
  },
});
user_56691200
Related