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.
![](https://gblobscdn.gitbook.com/assets%2F-LhGHkPsv15svPIU5I7C%2F-LiTtF5R5oDEQHFjQ8Q4%2F-LiTzXXAxrXqg-Jyg-_u%2FGIf%201%20Empty%20State.gif?alt=media&token=464cc063-f819-4c31-a635-6214bd5b9b04)
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
![](https://gblobscdn.gitbook.com/assets%2F-LhGHkPsv15svPIU5I7C%2F-LiioiHjmINFZSIFSFeD%2F-Liiom3j6NNcQuXFstR-%2FScreenshot%202019-07-01%2013.36.17.png?alt=media&token=6dc58529-596e-4b0e-a2b0-d55fb3860810)