React Native Image

React Native Image

A Respond part for showing various kinds of pictures, including network pictures, static assets, impermanent neighborhood endlessly pictures from nearby plate, for example, the camera roll.

This model shows getting and showing a picture from nearby capacity as well as one from organization and even from information gave in the 'information:' uri plot.

Examples

import React, { Component } from 'react';
import { AppRegistry, View, Image, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
  },
  tinyLogo: {
    width: 50,
    height: 50,
  },
  logo: {
    width: 66,
    height: 58,
  },
});

class DisplayAnImage extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Image
          style={styles.tinyLogo}
          source={require('@expo/snack-static/react-native-logo.png')}
        />
        <Image
          style={styles.tinyLogo}
          source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}
        />
        
      </View>
    );
  }
}

export default DisplayAnImage;

GIF and WebP support on Android

When building your own native code, GIF and WebP are not supported by default on Android.

You will need to add some optional modules in android/app/build.gradle, depending on the needs of your app.

dependencies {
// If your app supports Android versions before Ice Cream Sandwich (API level 14)
implementation 'com.facebook.fresco:animated-base-support:1.3.0'

// For animated GIF support
implementation 'com.facebook.fresco:animated-gif:2.5.0'

// For WebP support, including animated WebP
implementation 'com.facebook.fresco:animated-webp:2.5.0'
implementation 'com.facebook.fresco:webpsupport:2.5.0'

// For WebP support, without animations
implementation 'com.facebook.fresco:webpsupport:2.5.0'

Props

accessible​

When true, indicates the image is an accessibility element.

accessibilityLabel​

The text that's read by the screen reader when the user interacts with the image.

blurRadius​

blurRadius: the blur radius of the blur filter added to the image.

loadingIndicatorSource​

Similarly to source, this property represents the resource used to render the loading indicator for the image. The loading indicator is displayed until image is ready to be displayed, typically after the image is downloaded.

onLayout​

Invoked on mount and on layout changes.

onLoad​

Invoked when load completes successfully.

Example: onLoad={({nativeEvent: {source: {width, height}}}) => setImageRealSize({width, height})}







onLoadStart​

Invoked on load start.

Example: onLoadStart={() => this.setState({loading: true})}