getstream / react-native-example

React Native Activity Feed example application

React Native Activity Feed Example

A mobile application built using React Native, Stream.io and react-native-activity-feed

Features

• Flat feed
• Notification feed
• Activity detail screen
• Profile screen
• Profile update screen
• Likes & Comments
• Status update with hashtags, mentions, URL enrichment and image upload

Requirements

• NodeJS
• Expo

Setup instructions

1. Install dependencies

# Clone the example app repo
git clone https://github.com/GetStream/react-native-example
cd react-native-example

# Install npm dependencies
yarn;

2. Setup up your app

Get your Stream API credentials from the user dashboard and make sure your application has these feed groups:

• user (type Flat)
• timeline (type Flat)
• notification (type Notification)

If you followed the React Native tutorial, you already have a pre-configured app on your account that you can use for this project.

mv .env.example .env

Open the .env file in your favorite editor. And fill in the credentials.

3. Get your userToken and setup demo data

yarn run init-data

Copy the line this script outputs and put it in your .env file.

4. Start your app

expo start

Follow the instructions from the terminal to preview the app on your phone or using an emulator.

react-native-example's Issues

init-data is broken

I think init-data is written in either Flow or TypeScript, and babel-node is not configured to compile.

Error log

$ babel-node scripts/initData.js
/Users/darris/.nvm/versions/node/v10.13.0/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/index.js:558
      throw err;
      ^

SyntaxError: /Users/darris/Work/react-native-example/scripts/initData.js: Unexpected token (3:12)
  1 | // @flow
  2 | 
> 3 | import type { CloudClient, UserSession } from '../types';
    |             ^
  4 | 
  5 | import dotenv from 'dotenv';
  6 | import faker from 'faker';
    at Parser.pp$5.raise (/Users/darris/.nvm/versions/node/v10.13.0/lib/node_modules/babel-cli/node_modules/babylon/lib/index.js:4454:13)
    at Parser.pp.unexpected (/Users/darris/.nvm/versions/node/v10.13.0/lib/node_modules/babel-cli/node_modules/babylon/lib/index.js:1761:8)
    at Parser.pp.expectContextual (/Users/darris/.nvm/versions/node/v10.13.0/lib/node_modules/babel-cli/node_modules/babylon/lib/index.js:1723:39)
    at Parser.pp$1.parseImport (/Users/darris/.nvm/versions/node/v10.13.0/lib/node_modules/babel-cli/node_modules/babylon/lib/index.js:2869:10)
    at Parser.pp$1.parseStatement (/Users/darris/.nvm/versions/node/v10.13.0/lib/node_modules/babel-cli/node_modules/babylon/lib/index.js:1884:49)
    at Parser.pp$1.parseBlockBody (/Users/darris/.nvm/versions/node/v10.13.0/lib/node_modules/babel-cli/node_modules/babylon/lib/index.js:2268:21)
    at Parser.pp$1.parseTopLevel (/Users/darris/.nvm/versions/node/v10.13.0/lib/node_modules/babel-cli/node_modules/babylon/lib/index.js:1778:8)
    at Parser.parse (/Users/darris/.nvm/versions/node/v10.13.0/lib/node_modules/babel-cli/node_modules/babylon/lib/index.js:1673:17)
    at parse (/Users/darris/.nvm/versions/node/v10.13.0/lib/node_modules/babel-cli/node_modules/babylon/lib/index.js:7305:37)
    at File.parse (/Users/darris/.nvm/versions/node/v10.13.0/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/index.js:485:15)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Render error: Couldn't find a navigation context

I get this error:
"Render Error: Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'?"

I noticed that this issue appears whenever a Stream Flatfeed is inside a navigation container. When the feed is on its own (not part of any stack/tab navigation), it renders correctly. I am testing on Android using Node v16.13.1 and Expo v44.

Any tips on this?

I was able to reproduce this issue on a smaller app:

import React, { Fragment } from 'react';
import { Text, View } from 'react-native';
import SafeAreaView from 'react-native-safe-area-view';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { StreamApp, FlatFeed, Activity, LikeButton, StatusUpdateForm, ReactionIconBar} from 'expo-activity-feed';

const Tab = createMaterialTopTabNavigator();

function Feed() {
  return (
    <View style={{ flex: 1 }}>
      <StreamApp
        apiKey={apiKey}
        appId={appId}
        token={token}>
        <FlatFeed
          Activity={props => (
            <Fragment>
              <Activity
                {...props}
                Footer={
                    <ReactionIconBar>
                      <LikeButton {...props} />
                    </ReactionIconBar>
                }
              />
            </Fragment>)} notify/>
        <StatusUpdateForm feedGroup='timeline' />
      </StreamApp>
    </View>
  )
}

function Screen2() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Screen 2</Text>
    </View>
  );
}

export default App = () => {
  return (
    <SafeAreaProvider>
      <SafeAreaView style={{ flex: 1 }}>
          <NavigationContainer>
            <Tab.Navigator
              screenOptions={{
                tabBarLabelStyle: { fontSize: 12 },
                tabBarItemStyle: { width: 100 },
              }}>
              <Tab.Screen name="Feed" component={ Feed } />
              <Tab.Screen name="Screen2" component={ Screen2 } />
            </Tab.Navigator>
          </NavigationContainer>
      </SafeAreaView>
    </SafeAreaProvider>
  );
};

how to refresh comment list when update reaction

i use CommentList to show comments
If I use props.onAddReaction then the commentList will automatically refresh
but when I update the comment I use client.reactions.update (reactionId, data);
then the commentList is not automatic refresh
...
can you for me example use flatList props to refresh currentPage I use flatListProps to update comment

Is watchman version checking required?

I got error like

Warning: Problem checking watchman version. Invalid Version: 2020xxx...

There are a lot of errors in this code..please kindly review them

Running "npm run init-data" causes error

`react-native-example-master/scripts/initData.js: Unexpected token (6:12)

6 | import type { UserSession, CloudClient } from '../types';
| ^`

Real world adoption challenges

Before I begin, I was pleased with this example. It's one of the better examples I think that has been done.

First of all I know this example probably was not intended or conceived to be a real world example (it loads dummy data) but please humor me as I struggle to adopt it as such.

1. This example uses a functional component as the App. If I'm wrong please let me know. Thereby from my understanding this means that it cannot have state. To set the stage for why I find adoption challenging, the STREAM_API_TOKEN is a user token generated by the backend and handed to the mobile app per: https://getstream.io/react-native-activity-feed/tutorial/. Naturally this value must either be held already in mobile async storage or better be passed back by an API call asynchronously. Yet we just said this example has a stateless nature. I also referred to: https://getstream.github.io/react-native-activity-feed/#introduction in terms of how the StreamApp component must have the feeds nested. Most of my issues have circled around this as I kept trying to figure out how to pass and construct the components together. Surely we shouldn't pass the STREAM_API_TOKEN by props? Right now my stream client in python is returning the user token by my API.

2. It appears if #1 does work in the real world this example suggests that because the feeds are elements of this "parent" component, the navigation must also derive from the parent component. Currently, I'm using react-native-navigation via method call (not expo or anything else) and so this would require that I probably rewrite how my navigation is built. Any suggestions on what my options are within how the react native activity feed must be designed?

3. I certainly faced the issue in this SO question: https://stackoverflow.com/questions/52110253/you-are-publicly-sharing-your-app-secret-do-not-expose-the-app-secret-in-browse. I sort of understand the answer provided, but also do not because at least in a mobile app (not a server client) I would think you would get the user generated token passed back by API. Am I thinking about the generation of the user token entirely wrong? Should generation be done in a function inside the functional component described in question 1? Could that solve my woes about obtaining the token to some extent? I'm not sure because I still feel I would need some level of stateful / asynchronous interaction for authentication via my API.

Thank you for sharing any advice you may have for easier adoption. Cheers!

How to customize stream app ?

I am trying to customize the stream app in my react native project. I want to render a set of json objects other than the default one stream is providing.Following is my JSON

{ "source": { "id": "techcrunch", "name": "TechCrunch" }, "author": "Connie Loizos", "title": "Andreessen Horowitz just closed its second crypto fund", "urlToImage": "https://techcrunch.com/wp-content/uploads/2018/08/GettyImages-906037182.jpg?w=714", "publishedAt": "2020-04-30T19:19:02Z", }, { "source": { "id": null, "name": "Gizmodo.com" }, "author": "Catie Keck", "title": "Travelex Reportedly Paid Ransomware Hackers 285 Bitcoin Worth Over $2 Million", "urlToImage": "https://i.kinja-img.com/gawker-media/image/upload/c_fill,f_auto,fl_progressive,g_center,h_675,pg_1,q_80,w_1200/y7yn0ztcocikqjpfsy9g.jpg", "publishedAt": "2020-04-09T21:40:00Z", }, }

Is it possible to render this JSON to form a UI like the below one using stream's feed?

If possible please reply

app is not working

I got errors when app launch.
Please check screenshot and let me know

Invalid Signature

When I launch the app I get an error that says invalid signature.. how do I fix that ?

ERROR: Icons cannot be found

When I try to run the app, it has this error message:

2:36:40 PM: Error: 'assets/images/icon.png' could not be found, because 'assets/images' is not a subdirectory of any of the roots  ('C:\Users\xiaoyzhu\react-native-example')
2:36:40 PM:     at C:\Users\xiaoyzhu\react-native-example\node_modules\metro\src\Assets\index.js:190:11
2:36:40 PM:     at Generator.next (<anonymous>)
2:36:40 PM:     at step (C:\Users\xiaoyzhu\react-native-example\node_modules\metro\src\Assets\index.js:327:347)
2:36:40 PM:     at C:\Users\xiaoyzhu\react-native-example\node_modules\metro\src\Assets\index.js:327:507
2:36:55 PM: Stopping packager...
2:36:55 PM: Packager stopped.

Maybe the folder structure is incorrect?

Error when trying to run expo example

Hi,

Unable to run the demo app from react native repo
https://github.com/GetStream/react-native-example

I followed instructions, but I am facing index.js not found in package expo-activity-feed node modules.

Failed building JavaScript bundle.
While trying to resolve module expo-activity-feed from file /Users/test/dev/react-native-example/App.js, the package /Users/test/dev/react-native-example/node_modules/expo-activity-feed/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/Users/test/dev/react-native-example/node_modules/expo-activity-feed/src/index.js

What's the difference between this example and the one in the main package?

https://github.com/GetStream/react-native-activity-feed/tree/master/native-example

Cannot read property 'id' of undefined

Hi , i am cloned the repo and configured with latest dependencies. Also ran
npm run init-data command to init app . App looks fine but clicking the post on HomeScreen , i got this error .
While debugging the app feedGroup, userId return undefined in SinglePostScreen.js
The link is my package.json with latest dependencies.

https://gist.github.com/bunyaminmrcn/e58bc19154fea4e3affd450528bcd30f

Cannot read property 'id' of undefined

• node_modules\react-native-activity-feed-core\lib\Context\Feed.js:118:13 in getActivityPath

And it is warning but red in the console , didn't understand why is red like error

`Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s, undefined, You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at SinglePostScreen.js:77.,
in Activity (at utils.js:37)
in ImmutableItemWrapper (at FlatFeed.js:132)
in RCTView (at VirtualizedList.js:1925)
in CellRenderer (at VirtualizedList.js:767)
in RCTView (at ScrollView.js:1038)
in RCTScrollView (at ScrollView.js:1166)
in AndroidSwipeRefreshLayout (at RefreshControl.js:186)
in RefreshControl (at VirtualizedList.js:1170)
in ScrollView (at VirtualizedList.js:1166)
in VirtualizedList (at FlatList.js:676)
in FlatList (at FlatFeed.js:175)
in FlatFeedInner (at FlatFeed.js:105)
in FeedInner (at Feed.js:1451)
in StreamAppConsumer (at Feed.js:1455)
in Feed (at FlatFeed.js:92)
in FlatFeed (at SinglePost.js:55)
in SinglePost (at SinglePostScreen.js:49)
in RCTView (at SafeAreaView.js:40)
in SafeAreaView (at SinglePostScreen.js:48)
in SinglePostScreen (at SceneView.js:9)
in SceneView (at StackView.tsx:271)
in RCTView (at CardContainer.tsx:162)
in RCTView (at CardContainer.tsx:161)
in RCTView (at PointerEventsView.tsx:35)
in PointerEventsView (at Card.tsx:445)
in RCTView (at createAnimatedComponent.js:151)
in AnimatedComponent (at Card.tsx:432)
in PanGestureHandler (at Card.tsx:425)
in RCTView (at createAnimatedComponent.js:151)
in AnimatedComponent (at Card.tsx:421)
in RCTView (at Card.tsx:414)
in Card (at CardContainer.tsx:128)
in CardContainer (at CardStack.tsx:496)
in RCTView (at CardStack.tsx:110)
in MaybeScreen (at CardStack.tsx:489)
in RCTView (at CardStack.tsx:93)
in MaybeScreenContainer (at CardStack.tsx:399)
in CardStack (at StackView.tsx:386)
in KeyboardManager (at StackView.tsx:384)
in RNCSafeAreaView (at src/index.tsx:26)
in SafeAreaProvider (at SafeAreaProviderCompat.tsx:22)
in SafeAreaProviderCompat (at StackView.tsx:381)
in StackView (at StackView.tsx:41)
in StackView (at createStackNavigator.tsx:33)
in Unknown (at createNavigator.js:80)
in Navigator (at createAppContainer.js:430)
in NavigationContainer (at Main.js:137)
in StreamApp (at Main.js:123)
in App (at App.js:11)
in App
in RootErrorBoundary (at withExpoRoot.js:25)
in ExpoRoot (at renderApplication.js:40)
in RCTView (at AppContainer.js:101)
in RCTView (at AppContainer.js:119)
in AppContainer (at renderApplication.js:39)`

Android Emulator white screen

I followed Setup instructions. Then, I started the app from console, it displayed following, seems no error to me. However, from android emulator, it showed white screen after loaded. I waited for long time, and I tried couple times, only white screen is displayed in emulator.

› Press a to open Android device or emulator.
› Press s to send the app URL to your phone number or email address
› Press q to display QR code.
› Press r to restart packager, or R to restart packager and clear cache.
› Press d to toggle development mode. (current mode: development)

6:50:41 PM: ::xxxx:192.168.0.18 - - [04/Sep/2020:22:50:41 +0000] "GET /onchange HTTP/1.1" - - "-" "okhttp/3.12.1"
6:50:51 PM: ::xxxx:192.168.0.18 - - [04/Sep/2020:22:50:51 +0000] "GET /onchange HTTP/1.1" - - "-" "okhttp/3.12.1"
6:51:01 PM: ::xxxx:192.168.0.18 - - [04/Sep/2020:22:51:01 +0000] "GET /onchange HTTP/1.1" - - "-" "okhttp/3.12.1"

Running "npm run init-data

This doesn't return anything for me and I have my keys in the .env file. The message I get is "STREAM_API_KEY" not defined in any .env files. Any suggestions?

STREAM_SECRET -> STREAM_API_SECRET

react-native-example/scripts/initData.js

Line 26 in 32bc4ac

console.error('STREAM_SECRET should be set');

getting web blank screen, SDK 45 expo installed

I am using Expo SDK 45.0 but it looks like SDK 40 is the latest supported. I am getting an error on the mobile and then when trying the web version on localhost I get a blank screen. All .env file parameters and token have been generated and I ran yarn run init_data just fine and it generated sample data on my dashboard.

Any ideas?

Need a ejected expo variant of example

Hi,

Is there a non-expo variant available for the example app? Basically ejected one.

Wrong command given to run the demo app

The instructions for the final step to run the app should be npm start, not npm run.

License?

What license is this under?

"Error: EMFILE:" despite watchman installed...

Hello,

A few seconds after expo start, I'm having "Error: EMFILE: too many open files, watch
at FSEvent.FSWatcher._handle.onchange"

I'm on MacOS, watchman is installed (brew install watchman, and brew update watchman).
node version is v14.4.0.

Any suggestions ?

thanks, Denis

OutgoingMessage.prototype._headers is deprecated

PS D:\React\react-native-example> expo start
Starting project at D:\React\react-native-example
Expo DevTools is running at http://localhost:19002
Opening DevTools in the browser... (press shift-d to disable)
(node:77844) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated
error Invalid regular expression: /(.\fixtures\.|node_modules[\]react[\]dist[\].|website\node_modules\.|heapCapture\bundle.js|.\tests\.)$/: Unterminated character class. Run CLI with --verbose flag for more details.

Metro Bundler process exited with code 1
Set EXPO_DEBUG=true in your env to view the stack trace.

Npm install is not working

I am getting below error
npm ERR! code ETARGET
npm ERR! notarget No matching version found for [email protected]
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'ReactNativeSampleApp'
npm ERR! notarget