Skip to content

Automatically calculate width or height based on input Image component for React Native.

License

Notifications You must be signed in to change notification settings

hoaphantn7604/react-native-element-image

Repository files navigation

react-native-element-image

Automatically calculate width or height based on input Image component for React Native.

Source code demo

Getting started

    npm install react-native-element-image --save

or

    yarn add npm install react-native-element-image

Demo

Image Props

Props Params isRequire Description
source ImageSourcePropType Yes
width Number Fixed width, automatic height
height Number Fixed height, automatic width
background Boolean No if true is Image Background
onSize (size) => void No get Image size

Avatar Props

Props Params isRequire Description
containerStyle ViewStyle No
size Number No Default is 100px
source ImageSourcePropType Yes
borderColor String No Default is white
name String No
nameStyle TextStyle No
iconEnable Boolean No Default is true
renderIcon Element No Customize icon camera
onPressIcon ()=> void No Event click icon camera

Usage

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { Image, Avatar } from 'react-native-element-image';
const img = require('./assets/default.png');

const ImageScreen = (_props) => {
  return (
    <View style={styles.container}>
      <Avatar
        size={80}
        containerStyle={styles.avatar}
        source={img}
        iconEnable={false}
        onPressIcon={() => alert('Click')}
        nameStyle={{ fontSize: 20 }}
      />
      <Avatar
        size={80}
        containerStyle={styles.avatar}
        source={img}
        iconEnable
        onPressIcon={() => alert('Click')}
        nameStyle={{ fontSize: 20 }}
      />

      <Avatar
        size={100}
        containerStyle={styles.avatar}
        source={img}
        iconEnable
        onPressIcon={() => alert('Click')}
        name="User name"
        nameStyle={{ fontSize: 20, marginBottom: 20 }}
      />
      <Text>Width: 200, Height: Automatic</Text>
      <Image style={styles.image} source={img} width={200} />
      <Text style={styles.text}>Width: Automatic, Height: 200</Text>
      <Image style={styles.image} source={img} height={200} />
    </View>
  );
};

export default ImageScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    margin: 20,
  },
  text: { marginTop: 50 },
  avatar: { marginTop: 10 },
});