How to Create an Empty State
Last updated
Was this helpful?
Last updated
Was this helpful?
Empty states are how your app should appear if there is no data to show. For example if your home screen is a list of the user's Trips, but they haven't created any trips yet, instead of showing a blank screen, you can show them a message message explaining that they need to create a trip.
There are two main cases when you likely want to create an empty state: for a search bar if the input doesn't fit any of the data, or when a user encounters a screen with no data yet.
Create an empty state if a search term doesn't have any results
Insert an image underneath the list (you might have to extend the size of the screen to do this)
Apply the same filter to the image that has been applied to the list-- in this case List Item (equals, contains, does not contain) Input
Preview to test empty state
Create an empty state page for a screen if there's nothing to display (see example below)
Insert an image underneath a list, or another component, (you might have to extend the size of the screen to do this)
Set the visibility so that if the count of the list items is 0, the image will display
If necessary, add the same custom filter for the empty state as the component
Preview to test the empty state
Alter the image's so that it's sometimes visible
Apply another so the image will be visible when Item Count (is equal to) 0
For help creating a search bar, click
Alter the image's so that it is sometimes visible
