'How to use <ImageBackground> in react-native as an atom?

In one of my React Native Projects, I'm following atomic design to implement the components but I'm quite new to the principle (react-native-paper as UI library).
There I have to make a card that consists of an image tile and a few texts.

Sample design:
enter image description here

For Texts, I can implement them at the atomic level, as react-native-paper has <Headline />, <Paragraph />, and <Text /> components there.

Ex:-

import React from 'react';

import { Headline } from 'react-native-paper';

type Props = {
  children: string;
  style?: object;
};

const Headline = (props: Props) => {
  const { children, style } = props;

  return <Headline style={style}>{children}</Headline>;
};

export default Headline;

In theory, I should implement the image at the atomic level also. So, if I use of react-native (I use it because I can wrap some content within it like if there's an icon on the image) to make the image tile component, then I have to wrap it around within a as follows:

import React from 'react';
import { View, ImageBackground } from 'react-native';

type Props = {
  containerStyle?: object;
  imageStyle?: object;
};

const ThumbnailImage = (props: Props) => {
  const { containerStyle, imageStyle } = props;

  return (
    <View style={containerStyle}>
      <ImageBackground style={imageStyle} source={image} />
    </View>
  );
};

export default ThumbnailImage;

So, my question is can I use the above ThumbnailImage component under atoms? But unlike the Headline atom, ThumbnailImage must be wrapped within a <View />.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source