bpk-component-image

bpk-component-image

Backpack React Native image component.

Default

Day	Night

No border radius

Day	Night

Installation

Check the main Readme for a complete installation guide.

Usage

Default

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { spacingBase, spacingLg } from '@skyscanner/bpk-foundations-react-native/tokens/base.react.native';
import BpkImage from 'backpack-react-native/bpk-component-image';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: spacingBase,
  },
  image: {
    width: '100%',
    height: spacingLg * 10,
  },
});

export default () => (
  <View style={styles.container}>
    <BpkImage style={styles.image} alt="image title" source={{uri: "imageUri"}} />
  </View>
);

With Loading Behaviour

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { spacingBase, spacingLg } from '@skyscanner/bpk-foundations-react-native/tokens/base.react.native';
import BpkImage, { withLoadingBehaviour } from 'backpack-react-native/bpk-component-image';

const BpkImageWithLoading = withLoadingBehaviour(BpkImage);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: spacingBase,
  },
  image: {
    width: '100%',
    height: spacingLg * 10,
  },
});

export default () => (
  <View style={styles.container}>
    <BpkImageWithLoading style={styles.image} alt="image title" source={{uri: "imageUri"}} />
  </View>
);

Props

BpkImage

Property	PropType	Required	Default Value
source	oneOf(number, object, arrayOf(object))	true	-
imageComponent	function	false	Animated.Image
inView	boolean	false	true
loaded	boolean	false	true
onLoad	function	false	null
rounded	boolean	false	true
style	style	false	null