React-native Image

Our React-native image component is the most “real” part of your app design - in other words, they’re the closest thing to the real, non-digital world your design will have.


While everything else is made out of abstract shapes and lines, photos of real things can add massive value to the product you’re designing. ​ We included couple of options and predefined style to easily use it for different usage like in user avatar or inside a Card component as a background image. ​ By default the Image component has a default border radius of 14px which can be customised or disabled from within the theme constants under the name imageRadius

Example:

Default usage:

<Image source={...} />

Properties

Property Type Default Description
id string ‘Image’ id for testID & accesibilityLabel
avatar boolean false Avatar sizing: borderRadius from Math.min(height, weight), sets the width & height to Math.min(height, weight)
shadow boolean false Generates a shadow style
background boolean false Renders an ImageBackground component
rounded boolean false Renders a predefined theme sizes.borderRadius & overflow: ‘hidden’
radius ImageStyle[‘borderRadius’] undefined Renders a custom borderRadius value
color ImageStyle[‘tintColor’] undefined Changes the color of all the non-transparent pixels to the tintColor.
transform ImageStyle[‘transform’] undefined Modify the appearance and position of your components using 2D or 3D transformations
style StyleProp undefined Custom Image style
children React.ReactNode undefined Renders the ImageBackground content