'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.
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 |
|---|

