React NativeImage #
A React component for displaying different types of images, including network images, static resources, temporary local images, and -images from local disk, such as the camera roll.
This example shows both fetching and displaying an image from local -storage as well as one from network.
import React, { Component } from 'react';
+images from local disk, such as the camera roll.
This example shows fetching and displaying an image from local storage
+as well as one from network and even from data provided in the 'data:' uri scheme.
Note that for network and data images, you will need to manually specify the dimensions of your image!
import React, { Component } from 'react';
import { AppRegistry, View, Image } from 'react-native';
export default class DisplayAnImage extends Component {
@@ -15,13 +15,17 @@ storage as well as one from network.
={{width: 50, height: 50}}
source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
/>
+ <Image
+ style={{width: 66, height: 58}}
+ source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
+ />
</View>
);
}
}
// skip this line if using Create React Native App
-AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage);
You can also add style to an image:
import React, { Component } from 'react';
+AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage);
You can also add style to an image:
import React, { Component } from 'react';
import { AppRegistry, View, Image, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
diff --git a/versions.html b/versions.html
index 9339c50dbed..fd656fd702a 100644
--- a/versions.html
+++ b/versions.html
@@ -1,4 +1,4 @@
-React Native Versions