How to Create an Empty State
Last updated
Last updated
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)
Alter the image's visibility so that it's sometimes visible
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
Apply another custom filter so the image will be visible when Item Count (is equal to) 0
Preview to test empty state
For help creating a search bar, click here
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)
Alter the image's visibility so that it is sometimes visible
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
