Building a News Feed application with React Native

Create a News Feed React Native application with the stream api
Photo by amutiomi

Yesterday I was speaking with Frank von Hoven about tooling for React Native. These days there are plenty of tools available like Amplify, Firebase, and Hasura to speed up the development of your mobile application.

Imagine you need to ship a social mobile application with a news feed like Twitter, Instagram, or Dribble. Under the hood you need to use WebSockets to have real-time updates, having a strong backend team of engineers, and spend months building the API.

Or you can use the stream API to ship your app with React Native in hours.

Introducing expo-activity-feed

When you are building a newsfeed, you need to use the prop refreshControl, the Linking component, and implement the logic yourself.

With expo-activity-feed, you can have an activity feed with pull to refresh and Linking in 5 minutes. It's super effective.

You need to wrap your application with StreamApp, add your API credentials, and add the FlatFeed.

import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import SafeAreaView from 'react-native-safe-area-view';

import { StreamApp, FlatFeed } from 'expo-activity-feed';

function App() {
return (
<SafeAreaProvider>
<SafeAreaView style={{ flex: 1 }} forceInset={{ top: 'always' }}>
<StreamApp
apiKey={GETSTREAM_API_KEY}
appId={APP_ID}
token={GETSTREAM_API_TOKEN}
>
<FlatFeed feedGroup="timeline" userId="user-one" />
</StreamApp>
</SafeAreaView>
</SafeAreaProvider>
);
}

export default App;

And 💥 your feed is ready.

Timeline feed with Stream API

The like button feature

You are happy but the marketing team needs a like button.

You can add a Footer render prop with LikeButton to your activity component.

import { LikeButton } from 'expo-activity-feed';

function CustomActivity(props) {
return <Activity {...props} Footer={
<LikeButton {...props} />
}
/>;
}

...

<FlatFeed
feedGroup="timeline"
userId="user-one"
Activity={CustomActivity}
/>

Hey boss, you need a like button? no problem let me reload the app.

Add a status

If you want to add a publish a status feature, guess what? it's available on the stream API.
You need to use StatusUpdateForm with the same feedGroup name.

import { StatusUpdateForm } from 'expo-activity-feed';  

<StatusUpdateForm feedGroup="timeline" />

Publish a status with StatusUpdateForm api

Did you notice the problem here? Despite using SafeAreaView we have an issue with the keyboard.

It's normal. In the React Native world, you spend a ridiculous amount of time fixing bugs with the Keyboard on iOS AND Android.
I tested on the iPhone 12 Pro Max first, I didn't encounter the issue with the iPhone SE.

ProTip: Always toggle the software keyboard when you are using a simulator to test behaviors.

Toggle software keyboard for iOS simulator

Updating the feed

At this point, some backend work is involved. On the React Native code, you can just add the notify props to your FlatFeed

<FlatFeed
feedGroup="timeline"
userId="user-one"
Activity={CustomActivity}
notify
/>

A new content is published on the news feed

Conclusion

If you want to quickly spawn a News Feed mobile application, stream API is definitely a good choice. When I am writing this article there are no typescript definitions which drives me crazy because I can't use the auto-import feature with the keyboard shortcut .
But at the end of the day, this is a really tiny detail compared to the time spend to create this little application with Expo and React React Native.

References

Meet the author

David is a freelance developer and trainer specializing in cross-platform application development. He helped dozens of companies to ship their MVP and automate their process.

Gravatar for dleuliette@gmail.com

David Leuliette

Freelance React Developer

twitter
github
Subscribe?

Be the first to receive insightful articles and actionable resources that help you to elevate your skills across every touch point.