EmptyState
The EmptyState
component is to be used when there is no data to display, usually after attempting to load some content from an external API. It is a container that can hold a heading and content. It can also display an image and provide a button to interact with.
Props
<EmptyState
preset="generic"
style={{ padding: 10 }}
imageSource={require("../../assets/images/sad-face.png")}
imageStyle={{ height: 400, width: 400 }}
ImageProps={{ resizeMode: "contain" }}
heading="EmptyState Heading"
headingStyle={{ color: "#a511dc" }}
HeadingTextProps={{ weight: "bold" }}
content="EmptyState Content"
contentStyle={{ color: "#a511dc" }}
ContentTextProps={{ weight: "light" }}
button="Press here"
buttonOnPress={handleButtonPress}
/>
preset
The preset
prop is used to set the preset container style of the EmptyState. This affects the default image, heading, content and button. Currently, only one preconfigured preset exists: generic
.
<EmptyState preset="generic" heading="EmptyState Heading" content="EmptyState Content" />
style
The style
prop is used to set the style override for the container.
<EmptyState
style={{ padding: 10, marginTop: 20 }}
heading="EmptyState Heading"
content="EmptyState Content"
/>
imageSource
The imageSource
prop is used to set the Image source to be displayed above the heading.
<EmptyState
imageSource={require("../../assets/images/empty-state.png")}
heading="EmptyState Heading"
content="EmptyState Content"
/>