Issue setting up getstream.io react native demo on Mac

Question

I'm trying to set up the react native tutorial at https://getstream.io/react-native-activity-feed/tutorial/, and it's not working.

I have the latest version of node, yarn, expo and create-react-native-app. All packages are updated.

When I run create-react-native-app and I use Yarn to install dependencies, I get the following warnings:

warning expo > fbemitter > fbjs > core-js@1.2.7: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
warning react-native > fbjs > core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
warning react-native > fbjs-scripts > core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
warning react-native > metro-babel-register > core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
warning react-native-web > deep-assign@3.0.0: Check out `lodash.merge` or `merge-options` instead.

The iphone app works at this point.

Then I add expo-activity-feed and replace the code in App.js with the code in the tutorial. When I run this in the iPhone simulator the javascript builds but the iPhone screen is blank. The following message appears in my terminal:

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: SafeView
- node_modules/expo/build/environment/muteWarnings.fx.js:18:23 in warn
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5864:19 in printWarning
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5892:25 in lowPriorityWarning
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:6135:8 in ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:20377:6 in flushRenderPhaseStrictModeWarningsInDEV
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19606:41 in commitRootImpl
* [native code]:null in commitRootImpl
- node_modules/scheduler/cjs/scheduler.development.js:643:23 in unstable_runWithPriority
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19590:4 in commitRoot
* [native code]:null in commitRoot
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18709:28 in runRootCallback
* [native code]:null in runRootCallback
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5642:32 in runWithPriority$argument_1
- node_modules/scheduler/cjs/scheduler.development.js:643:23 in unstable_runWithPriority
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5638:22 in flushSyncCallbackQueueImpl
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5627:28 in flushSyncCallbackQueue
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18556:30 in scheduleUpdateOnFiber
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:21822:15 in scheduleRootUpdate
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:23042:20 in ReactNativeRenderer.render
- node_modules/react-native/Libraries/ReactNative/renderApplication.js:52:52 in renderApplication
- node_modules/react-native/Libraries/ReactNative/AppRegistry.js:116:10 in runnables.appKey.run
- node_modules/react-native/Libraries/ReactNative/AppRegistry.js:197:26 in runApplication
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:436:47 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:26 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueue

Can someone help me get past this and see the demo work?

Answer 1

Do the following in your sample app folder

expo install react-native-safe-area-view react-native-safe-area-context

And replace your code in App.js to following (reference):

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';

const App = () => {
  return (
    <SafeAreaProvider>
      <SafeAreaView style={{flex: 1}} >
        <StreamApp
          apiKey="5rqsbgqvqphs"
          appId="40273"
          token="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoiNzgxZWNjYTQtYzFlNC00YTM1LWEzMTgtY2NhY2QzOGU4NWUyIn0.7I9pDAK18OzpiYF6l1dAwQTp91b4_tVHGehDcH36Ns4"
        >
          <FlatFeed />
        </StreamApp>
      </SafeAreaView>
    </SafeAreaProvider>

  );
};

export default App;

This should get it working for now.