Setup

To use the code from this tutorial, you need a working Node development environment with React Native and Expo. We highly suggest creating a fresh project using the awesome create-react-native-app script from Facebook.

Make sure that you have a recent version of Node (>6) and Yarn installed.

yarn global add create-react-native-app

Run the following commands to create a new React Native project called "ActivityFeedExample":

Add Stream to your application

Now that we have a project ready, let's add the initial configuration to use Stream's APIs

Open App.js in your text editor of choice and make the following changes:

Timeline Feed

The example newsfeed is loaded with some demo data, this way you can see how different kind of activities are rendered out of the box.

Adding a timeline feed is very simple, the library comes with a built-in FlatFeed component which loads the current user's timeline using the APIs and renders its content.

Your application will now reload and show the newsfeed. Pagination included as well as Open-Graph, hashtags, mentions and image rendering.

All it took here was adding the FlatFeed component which renders the timeline feed for the user configured in StreamApp parent element.

Like Button

Let's make our first customization to the timeline feed and show a like button under each activity. The library has a LikeButton component that integrates with the feed and we are going to add it by changing the layout of feeds' activities.

The Activity component rendering is divided in three parts: Header, Content and Footer. Each of these sections can be changed via a prop. In this case we are replacing the footer (which is empty by default) with LikeButton:

Status Updates

Now that we have managed to read your timeline and add a likes to it, let's add a status update screen so that we can add new activities ourselves.

For this we can use the StatusUpdateForm which comes with image upload and open-graph support. We can add this at the bottom of the render method and it will automatically fit with the rest of the UI.

The built-in StatusUpdateForm component does several things out-of-the-box for you:

Realtime updates

As a final touch, we are connecting the timeline to Stream's realtime APIs so that we can show a message each time a new activity is added to the feed. In this case we don't have to add a new component but only enable FlatFeed's built-in pager using the notify prop.

Server-Side Integration

So far we looked at how you can read and post activities using React Native. In most cases you will also need to perform server-side interactions such as creating follow relationships, adding activities or change user-data. All the functionality we looked at in this tutorial is exposed via Stream's REST API and can be used server-side.

This is how we can add an activity from server-side:

# gem install "stream-ruby"

require 'stream'

client = Stream::Client.new('YOUR_API_KEY', 'API_KEY_SECRET')

feed = client.feed('user', 'user-one')

feed.add_activity({
  actor: client.collections.create_user_reference('user-one'),
  verb: 'post',
  object: 'I love this picture',
  attachments: {
    og: {
      title: 'Crozzon di Brenta photo by Lorenzo Spoleti',
      description: 'Download this photo in Italy by Lorenzo Spoleti',
      url: 'https://unsplash.com/photos/yxKHOTkAins',
      images: [
        {
          image: 'https://goo.gl/7dePYs'
        }
      ]
    }
  }
})

// npm install getstream --save
// let stream = require('getstream');

let client = stream.connect('YOUR_API_KEY', 'API_KEY_SECRET');

let feed = client.feed('timeline', 'user-one');
feed.addActivity({
    'actor': client.user('user-one').ref(),
    'verb': 'post',
    'object': 'I love this picture',
    'attachments': {
        'og': {
            'title': 'Crozzon di Brenta photo by Lorenzo Spoleti',
            'description': 'Download this photo in Italy by Lorenzo Spoleti',
            'url': 'https://unsplash.com/photos/yxKHOTkAins',
            'images': [
                {
                    'image': 'https://goo.gl/7dePYs'
                }
            ]
        }
    }
})

# pip install stream-python

import stream

client = stream.connect('YOUR_API_KEY', 'API_KEY_SECRET')

feed = client.feed('timeline', 'user-one')

feed.add_activity({
  "actor": client.users.create_reference('user-one'),
  "verb": "post",
  "object": "I love this picture",
  "attachments": {
      "og": {
          "title": "Crozzon di Brenta photo by Lorenzo Spoleti",
          "description": "Download this photo in Italy by Lorenzo Spoleti",
          "url": "https://unsplash.com/photos/yxKHOTkAins",
          "images": [
            {
              "image": "https://goo.gl/7dePYs"
            }
          ]
      }
  }
})

// composer require get-stream/stream

$client = new GetStream\Stream\Client('YOUR_API_KEY', 'API_KEY_SECRET');

$feed = $client->feed('user', 'user-one');
$feed->addActivity([
	'actor' => $client->collections()->createUserReference('user-one'),
	'verb' => 'post',
	'object' => 'I love this picture',
	'attachments' => [
		'og' => [
			'title' => 'Crozzon di Brenta photo by Lorenzo Spoleti',
			'description' => 'Download this photo in Italy by Lorenzo Spoleti',
			'url' => 'https://unsplash.com/photos/yxKHOTkAins',
			'images' => (
				[
					'image' => 'https://goo.gl/7dePYs'
				]
			)
		]
	]
]);

// See installation details at https://github.com/GetStream/stream-java

Client client = Client.builder("YOUR_API_KEY", "API_KEY_SECRET").build();

FlatFeed feed = client.flatFeed("timeline", "user-one");
feed.addActivity(Activity.builder()
	.actor(Enrichment.createUserReference("user-one"))
	.verb("post")
	.object("I love this picture")
       	.extraField("attachments", ImmutableMap.of("og", new ImmutableMap.Builder<String, Object>()
		.put("title", "Crozzon di Brenta photo by Lorenzo Spoleti")
		.put("description", "Download this photo in Italy by Lorenzo Spoleti")
		.put("url", "https://unsplash.com/photos/yxKHOTkAins")
		.put("images", Lists.newArrayList(ImmutableMap.of("image","https://goo.gl/7dePYs")))
		.build()))
	.build()).join();

import (
    stream "gopkg.in/GetStream/stream-go2.v1"
)

client, err := stream.NewClient("YOUR_API_KEY", "API_KEY_SECRET")
if err != nil {
	// ...
}

feed := client.FlatFeed("user", "user-one")

_, err = feed.AddActivity(stream.Activity{
	Actor:  client.Collections().CreateUserReference("user-one"),
	Verb:   "post",
	Object: "I love this picture",
	Extra: map[string]interface{}{
		"attachments": map[string]interface{}{
			"og": map[string]interface{}{
				"title":       "Crozzon di Brenta photo by Lorenzo Spoleti",
				"description": "Download this photo in Italy by Lorenzo Spoleti",
				"url":         "https://unsplash.com/photos/yxKHOTkAins",
				"images": []interface{}{
					map[string]string{}{
						"image": "https://goo.gl/7dePYs",
					},
				},
			},
		},
	},
})
if err != nil {
	// ...
}

//dotnet add package stream-net
var client = new Stream.StreamClient("YOUR_API_KEY", "API_KEY_SECRET");

var feed = client.Feed("timeline", "user-one");
var user = Stream.Users.Ref("user-one");
var activity = new Stream.Activity(Stream.Users.Ref("user-one"), "post", "i love this picture");
var ogData = new Dictionary<string, object>()
{
    {"title", "Crozzon di Brenta photo by Lorenzo Spoleti"},
    {"description", "Download this photo in Italy by Lorenzo Spoleti"},
    {"url", "https://unsplash.com/photos/yxKHOTkAins"},
    {"images", new Dictionary<string,string>[]
        {
                new Dictionary<string, string>()
                {
                    {"image", "https://goo.gl/7dePYs"}
                }
        }
    }
};
var attachment = new Dictionary<string, object>()
{
    {"og", ogData}
};
activity.SetData("attachments", attachment);
await feed.AddActivity(activity);

Conclusion and Next Steps

In this tutorial we saw how easy it is to use Stream API and the React Native library to add a fully featured timeline to a mobile application.

Adding feeds to a mobile app can take weeks or months, even if you're a react native developer. Stream makes it easy and gives you the tools and the resources to improve user engagement within your app. Time to add a feed!