@uiw/react-native/lib/Tile/index.js

UIW for React Native

import React from 'react';
import { View, Text, StyleSheet, Dimensions, TouchableOpacity } from 'react-native';
import Icon from '../Icon';
import TransitionImage from '../TransitionImage';

const Tile = ({
  imageSrc,
  icon,
  title,
  onPress,
  caption,
  activeOpacity,
  captionStyle,
  containerStyle,
  titleStyle,
  iconContainerStyle,
  contentContainerStyle,
  imageContainerStyle,
  titleNumberOfLines,
  imageProps = {},
  width = Dimensions.get('window').width,
  height = width * 0.8,
  ImageComponent = TransitionImage,
  ...attributes
}) => {
  return <TouchableOpacity {...attributes} onPress={onPress} activeOpacity={activeOpacity} style={StyleSheet.flatten([{
    width: width,
    height: height
  }, containerStyle && containerStyle])}>
      <ImageComponent source={imageSrc} containerStyle={StyleSheet.flatten([styles.imageContainer, imageContainerStyle && imageContainerStyle])} style={{
      // ...StyleSheet.absoluteFillObject,
      alignItems: 'center',
      justifyContent: 'center',
      width,
      height: 200
    }} {...imageProps}>
        <View style={StyleSheet.flatten([iconContainerStyle && iconContainerStyle])}>{icon && <Icon {...icon} />}</View>
      </ImageComponent>

      <View style={[StyleSheet.flatten([styles.contentContainer, contentContainerStyle && contentContainerStyle]), { ...StyleSheet.absoluteFillObject
    }]}>
        <Text testID="tileTitle" style={StyleSheet.flatten([styles.text, titleStyle && titleStyle])} numberOfLines={titleNumberOfLines}>
          {title}
        </Text>
        <Text testID="tileText" style={StyleSheet.flatten([styles.text, captionStyle && captionStyle])} numberOfLines={titleNumberOfLines}>
          {caption}
        </Text>
      </View>
    </TouchableOpacity>;
};

const styles = StyleSheet.create({
  imageContainer: {},
  text: {
    backgroundColor: 'rgba(0,0,0,0)',
    marginBottom: 5
  },
  contentContainer: {
    paddingTop: 15,
    paddingBottom: 5,
    paddingLeft: 15,
    paddingRight: 15
  },
  iconContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'center'
  }
});
export default Tile;