Components

Last Edit: Feb 02 2020

Many of our users build native iOS and Android apps, web apps, or mobile apps with React Native. Stream can be used directly inside a browser or mobile application. The only difference is how you initialize the API client. Because browsers and mobile apps are not trusted environments, you must create a user token server-side and pass it to your app. This way, each user gets a unique token that allows performing actions only to their feeds and activities.


const userId = 'test-user-1';
const userToken = client.createUserToken(userId);
                    

user_id = 'test-user-1'
client.create_user_session_token(user_id)
                    

$user_id = 'test-user-1';
$client->createUserSessionToken($user_id);
                    

String userID = "test-user-1";
Token token = client. frontendToken(userID);
                    

React Components

If you are using React for your application, you can take advantage of Stream's react-activity-feed component library.


import React, { Component } from 'react';
import { StreamApp, StatusUpdateForm, FlatFeed } from 'react-activity-feed';
import 'react-activity-feed/dist/index.es.css';

export default class App extends Component {
  render() {
    return (
      <div style={{ width: '600px', margin: '0 auto' }}>
        <StreamApp
          apiKey="pw5nu994f85j"
          appId="YOUR_65217"
          token={userToken}
        >
          <StatusUpdateForm />
          <FlatFeed feedGroup="user" notify />
        </StreamApp>
      </div>
    );
  }
}
                    

React Native Components

If you are using React Native for your application, you can take advantage of Stream's react-native-activity-feed component library.


import React from 'react';
import SafeAreaView from 'react-native-safe-area-view';
import {
    StreamApp,
    FlatFeed,
    Activity,
    LikeButton,
    StatusUpdateForm,
} from 'expo-activity-feed';

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

const App = () => {
  return (
    <SafeAreaView style={{flex: 1}} forceInset={{ top: 'always' }}>
      <StreamApp
        apiKey={'YOUR_API_KEY'}
        appId={'APP_ID'}
        token={'FEED_USER_TOKEN'}
      >
        <FlatFeed Activity={CustomActivity} />
        <StatusUpdateForm feedGroup="timeline" />
      </StreamApp>
    </SafeAreaView>
  );
};

export default App;
                    

iOS Components

If you are building an app with Stream on iOS, you can take advantage of Stream's iOS/Swift components library.

You can find more information about the iOS Activity Feed library here.