Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native - iOS - Local image invisible (works on android)

I'm mapping TouchableOpacity with an Image nested inside of it. It works great on Android but on iOS the image is invisible. There is still a 75x75 touchable opacity that I can tap but the image is invisible in the modal that pops up and just in general.

How does this work? I'm using Expo SDK FileSystem to get the path of each image.

For example: file://path/to/container/progress/myfilehash.jpg

I push this to my state and map it in the component. the require() function WILL NOT WORK for the way I am doing this. I think it is purely a problem with the rendering.

Map code:

{this.state.images.map((val, key) => (
  <TouchableOpacity
    key={key}
    onPress={() => this.setState({active: val, modal: true})}
  >
    <Image
      style={{width: 75, height: 75}}
      source={{isStatic: true, uri: val}}
    />
  </TouchableOpacity>
))}

Modal:

<Container style={Colors.Backdrop}>
  <Header style={Colors.Navbar}>
    <Left>
      <TouchableHighlight
        onPress={() => {
          this.setState({modal: false})
      }}>
        <Icon
          name="arrow-back"
          style={{color: 'white'}}
        />
      </TouchableHighlight>
    </Left>
    <Body></Body>
    <Right>
      <TouchableOpacity
        onPress={() => {
        this._deleteImage(this.state.active);
      }}>
        <Text
          style={[
            Colors.ErrorText, {
              fontSize: 24,
              marginRight: 10
            }
        ]}>&times;</Text>
      </TouchableOpacity>
    </Right>
  </Header>
  <Content>
    <View
      style={{flex: 1}}
    >
      <FitImage
        source={{uri: this.state.active}}
      />
    </View>
  </Content>
</Container>

Code for fetching image paths. (NOTE: I tried not truncating "file://" from ios with same exact result)

_getAllImagesInDirectory = async() => {
    let dir = await FileSystem.readDirectoryAsync(FileSystem.documentDirectory + 'progress');

    dir.forEach((val) => {
      this.state.images.push(Platform.OS === 'ios' ? FileSystem.documentDirectory.substring(7, FileSystem.documentDirectory.length) : FileSystem.documentDirectory + 'progress/' + val);
    });

    await this.setState({images: this.state.images, loading: false});
}
like image 691
thecoolestguyever123 Avatar asked Aug 24 '18 17:08

thecoolestguyever123


1 Answers

I also faced this problem once, I solved it by pasting the image in the root folder and then used that path in the source of Image tag.

like image 193
Madhav Gaba Avatar answered Oct 25 '22 04:10

Madhav Gaba