react-native-flex-image
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.0 • Public • Published

    react-native-flex-image

    A flexible-width component for React Native using aspectRatio

    Installation

    Note: Only for React Native version >= 0.40.0

    $ yarn add react-native-flex-image
    

    -- or --

    $ npm install react-native-flex-image --save
    

    Usage

    Use <FlexImage> to display an image sized to the full-width of its parent while maintaining the correct ratio, without explicitly defining the width and height. FlexImage supports local images (asset) and remote images (uri).

    Also supports loading indicator for remote images.

    Demo

    Expo demo: https://exp.host/@kfox/react-native-flex-image

    Simple Example

    import FlexImage from 'react-native-flex-image';
     
    function App() {
      return (
        <View style={{flex: 1}}>
          <FlexImage
            source={{
              uri: 'image source uri',
            }}
          />
        </View>
      );
    }

    Local Image

    import FlexImage from 'react-native-flex-image';
     
    function App() {
      return (
        <View style={{flex: 1}}>
          <FlexImage source={require('./assets/react-logo.png')} />
        </View>
      );
    }

    With onPress Event

    import FlexImage from 'react-native-flex-image';
     
    function App() {
      return (
        <View style={{flex: 1}}>
          <FlexImage
            source={{
              uri: 'https://example.com/path/to/my/image',
            }}
            onPress={() => {
              let {imageClickCount} = this.state;
              this.setState({
                imageClickCount: imageClickCount + 1,
              });
            }}
          />
        </View>
      );
    }

    Custom Loading Component

    import FlexImage from 'react-native-flex-image';
     
    function App() {
      return (
        <View style={{flex: 1}}>
          <FlexImage
            source={{
              uri: 'image source uri',
            }}
            loadingComponent={<ActivityIndicator size="large" color="red" />}
          />
        </View>
      );
    }

    Progressive Loading Component

    import FlexImage from 'react-native-flex-image';
     
    function App() {
      return (
        <View style={{flex: 1}}>
          <FlexImage
            source={{
              uri: 'image source uri',
            }}
            thumbnail={{uri: 'thumbnail image source uri'}}
            loadingMethod="progressive"
          />
        </View>
      );
    }

    Properties

    Note: Other properties will be passed down to underlying image component.

    Prop Type Description Default
    source required source of the image None
    onPress optional onPress event when user clicking the image null
    style optional custom style for the image container null
    loadingComponent optional custom loading indicator when render the image <ActivityIndicator animating={true} size="large" />
    thumbnail optional source of the thumbnail None
    loadingMethod optional enum for select loading method, using indicator or progressive indicator
    errorComponent optional custom error component when fail displaying the image null

    License

    MIT License. ©2017 - current, KodeFox, Inc.

    Keywords

    none

    Install

    npm i react-native-flex-image

    DownloadsWeekly Downloads

    386

    Version

    1.3.0

    License

    none

    Unpacked Size

    10.5 kB

    Total Files

    4

    Last publish

    Collaborators

    • darcien
    • kfoxdev
    • sstur
    • heygema
    • oshimayoan
    • audyodi