Loading images

Let's get things started by figuring out how to actually load images. You can render the <Image> component and pass it properties just like any other React component. But this particular component needs image blob data to be of any use. Let's look at some code:

import React, { PropTypes } from 'react'; 
import { 
  AppRegistry, 
  View, 
  Image, 
} from 'react-native'; 
 
import styles from './styles'; 
 
// Renders two "<Image>" components, passing the 
// properties of this component to the "source" 
// property of each image. 
const LoadingImages = ({ 
  reactSource, 
  relaySource, 
}) => ( 
  <View style={styles.container}> 
    <Image 
      style={styles.image} 
      source={reactSource} 
    /> 
    <Image 
      style={styles.image} 
      source={relaySource} 
    /> 
  </View> 
); 
 
// The "source" property can be either 
// an object with a "uri...