So we're gonna start off by creating a new piece of state here at the top. So I'm gonna copy this and I'm just gonna create this piece of state that's called "isLoading" and then "setIsLoading" and I'm gonna set this to "true".

FeedScreen

const [isLoading, setIsLoading] = useState(true)

So what that means is that whenever this component is called, so whenever a user accesses the "FeedScreen", then we are going to make sure that it starts in a loading state. What that's gonna prevent is what we saw at the very end of the last guide where we had those empty brackets there. Well, we're gonna be able to prevent that by adding this loading state and so we're gonna turn off "setIsLoading" after we've received the "posts". So after we've set "posts", we can say "setIsLoading" and set that equal to "false".

FeedScreen

Then we can also place that inside of that "catch" bock here in case there are any errors.

FeedScreen

We most likely would wanna do something like show an error and say hey, we weren't able to get the post. Something like that and so we can turn the spinner off there. Now, what we have to do to show that spinner, there's a few different ways we could do it. There're plenty of different components that people have built for React Native that you could use. React Native also has its own little spinner directly inside of the library. Right now we're not using "TouchableOpacity". So we can get rid of that import and we're gonna bring one in called "ActivityIndicator".

FeedScreen

That, for lack of a better term, it's just a little spinning icon but it is a component. So I'm gonna copy this and let's come down all the way down to the bottom where our JSX code is. I'm gonna get rid of where it says "Feed screen "because we're not gonna keep that heading there anymore.

FeedScreen - removal

Instead, we're gonna place a conditional here. So the conditional I'm gonna put in is I'm gonna use curly brackets and I'm gonna say if "isLoading", then I want you to call the "ActivityIndicator". So that's a component so if "isLoading's" true, I want you to call that. If not, then I want you to show the post. So I'm simply going to take all of this Text tag right here and place it inside of this ternary operator.

FeedScreen - Ternary

 <View style={{ marginTop: 20 }}>
        {isLoading ? (
          <ActivityIndicator />
        ) : (
          <Text>{JSON.stringify(posts)}</Text>
        )}
</View>

Now, if ternary operators are still a little bit fuzzy to you, let's walk through exactly what's happening here. We have a condition. Because "isLoading" is always gonna be either "true or false" , then what we're asking here is if "isLoading" is set to "true", that's what the question mark here means, then I want you to show the "ActivityIndicator". If not, so if else, then I want you to show the "post data". So if I hit Save here, Prettier is going to format this a little bit differently, and now, if I hit "Refresh", watch what happens. It only happened for a split second 'cause this is a pretty quick API call but as you could see, there was a little indicator there.

Indicator

That is our loading icon. That is our "ActivityIndicator" and what that means is that while that loading state is taking place, while we're going out and we're calling the API, we're saying show this instead of this other text and all of that is working really nicely. So great job if you went through that. You now know how to implement an "ActivityIndicator" in React Native.

Resources

• Source code