huiseoul/react-native-fit-image

Failed to get size for images?

Closed this issue · 1 comments

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {AppRegistry, StyleSheet, Text, Image, View, ScrollView} from 'react-native';
import Dimensions from 'Dimensions';
var {height, width} = Dimensions.get('window');
import FitImage from 'react-native-fit-image';

export default class ReactNativeTest extends Component {
  render() {
    return (
      <ScrollView style={styles.container}>
        <View style={styles.container}>
          <FitImage source={{uri:'http://www.kobkrit.com/wp-content/uploads/2016/08/react-native-1.jpg'}}/>
          <Image style={styles.fitWidth} resizeMode='contain' source={require('./200x500.png')}/>
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
  },
  fitWidth:{
    width: width,

    borderWidth: 1
  }
});

AppRegistry.registerComponent('ReactNativeTest', () => ReactNativeTest);

Image loaded from the Internet is not shown up.

image

image

I got it working by allowing NSAppTransportSecurity to be arbitary loads in ios/{ProjectName}/Info.plist

<key>NSAppTransportSecurity</key>
    <dict>
  <!--Include to allow all connections (DANGER)-->
  <key>NSAllowsArbitraryLoads</key>
      <true/>
  </dict>