react-native-zero-components

Simplistic approach to displaying image within the touchable. This component is just a simple combination of the Zero Component’s Touchable and React Native’s Image within

Usage

import React from 'react';
import { View } from 'react-native';
import { ImageButton } from 'react-native-zero-components';
import styles from './styles';
import icons from '../assets/icons';

const ImageButtonShowcase = () => (
  <View style={styles.root}>
    <ImageButton
      source={icons.bigIcon}
      onPress={() => null}
    />
    <ImageButton
      mode="highlight"
      source={icons.bigIcon}
      onPress={() => console.log('I have cool highlight')}
    />
    <ImageButton
      mode="opacity"
      source={icons.bigIcon}
      onPress={() => console.log('You can see right through me')}
    />
  </View>
);

Props

• Touchable props
• onPress
• source
• imageStyle
• resizeMode
• raised

Reference

onPress

The same functionality as the one in Touchable component, but here it’s not an optional property.

source

Image that is displayed within the button.

imageStyle

Styling prop for the Image component within the button that displays the source

resizeMode

Determines the way image will be resized within the component.

• stretch: Scale width and height independently, This may change the aspect ratio of the src.
• cover: Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
• contain: Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).
• repeat: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio, unless it is larger than the view, in which case it will be scaled down uniformly so that it is contained in the view.
• center: Center the image in the view along both dimensions. If the image is larger than the view, scale it down uniformly so that it is contained in the view.

raised

Determines if the button will have default shadow or not. If true, shadow will be displayed. Otherwise shadow will not be displayed unless you put it manually in style prop