React native - objects are not valid as a React child in firebase version 5.9.0

Question

I have read this solution on SO, but this didn't work.

I am displaying a list of photos fetching from firebase database as in React-Native App in Expo, in photoList.js file

Edit 3: screenshot mentions error at line 267 in photoList.js.

item.authorId is an object, not a single value, the error is in the database.

contents of package.json are

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^32.0.0",
    "firebase": "^5.9.0",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-navigation": "^3.4.0"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0"
  },
  "private": true
}

according to its one solution, without downgrading firebase to 5.0.3, by changing to @firebase/app, didn't work.

import firebase from "@firebase/app";
import "@firebase/database";
import "@firebase/storage";
import "@firebase/auth";

my project-repo on GitHub.

How can I render a list of photos, without downgrading to older versions? because I think downgrading to older versions is not a future-proof and long term solution.

also, I didn't try this solution, ,

because I am exporting firebase, auth, database, storage to other components as,

export const f = firebase;
export const database = firebase.database();
export const auth = firebase.auth();
export const storage = firebase.storage();

How can I solve it?

Edit 1:

I tried downgrading versions to 5.0.3, 4.9.1, but the error still occurs

Edit 4: added JSON of firebase db

{
  "comments" : {
    "eea-183-614-4d4-cc1" : {
      "022-e3d-018-4c5-149" : {
        "author" : "uhrn0DnB22X4f8BKvTMMi8Qii3I3",
        "comment" : "first comment on second photo",
        "posted" : 1553857722
      }
    },
    "photo-eg-id" : {
      "comment-id-1" : {
        "author" : "exampleUserId",
        "comment" : "Steven Paul Jobs was an American business magnate and investor. He was the chairman, chief executive officer, and co-founder of Apple Inc",
        "posted" : 1234567,
        "username" : "ganeshdeshmukh"
      }
    }
  },
  "photos" : {
    "25a-821-276-6fe-268" : {
      "author" : "uhrn0DnB22X4f8BKvTMMi8Qii3I3",
      "caption" : "cat",
      "posted" : 1553682794,
      "url" : "https://firebasestorage.googleapis.com/v0/b/exchange-o-gram-app.appspot.com/o/user%2Fuhrn0DnB22X4f8BKvTMMi8Qii3I3%2Fimg%2F25a-821-276-6fe-268.jpg?alt=media&token=8251d9fb-303c-419d-b1ec-d9e2ac2a1128"
    },
    "981-206-efe-582-dd3" : {
      "author" : "uhrn0DnB22X4f8BKvTMMi8Qii3I3",
      "caption" : "KTM",
      "posted" : 1553668177,
      "url" : "https://firebasestorage.googleapis.com/v0/b/exchange-o-gram-app.appspot.com/o/user%2Fuhrn0DnB22X4f8BKvTMMi8Qii3I3%2Fimg%2F981-206-efe-582-dd3.jpg?alt=media&token=35ac8cb6-7e1f-4e55-824b-518a2716f151"
    },
    "f12-cce-8fd-231-897" : {
      "author" : "uhrn0DnB22X4f8BKvTMMi8Qii3I3",
      "caption" : "GD",
      "posted" : 1553769294,
      "url" : "https://firebasestorage.googleapis.com/v0/b/exchange-o-gram-app.appspot.com/o/user%2Fuhrn0DnB22X4f8BKvTMMi8Qii3I3%2Fimg%2Ff12-cce-8fd-231-897.png?alt=media&token=463c7a53-9fa8-42af-bbfc-518dbda81bd0"
    },
    "photo-eg-id" : {
      "author" : "exampleUserId",
      "caption" : "I love Apple & Steve",
      "posted" : 1523002327,
      "url" : "https://source.unsplash.com/random/540x800/"
    }
  },
  "users" : {
    "exampleUserId" : {
      "avatar" : "http://i.pravatar.cc/300",
      "email" : "example.user@gmail.com",
      "photo-eg-id" : {
        "author" : "exampleUserId",
        "caption" : "I love Apple & Steve",
        "posted" : 1523002327,
        "url" : "https://source.unsplash.com/random/540x800/"
      },
      "posted" : 153723723,
      "url" : "https://source.unsplash.com/random/500x800/",
      "username" : "ganeshIsUsername"
    }
  }
}

Edit 2: adding terminal output.

Invariant Violation: Invariant Violation: Objects are not valid as a React child (found: object with keys {4aa-02d-7a3-2ee-2dc, f12-cce-8fd-231-897}). If you meant to render a collection of children, use an array instead.
    in RCTText (at Text.js:145)
    in TouchableText (at Text.js:268)
    in RCTView (at View.js:44)
    in AnimatedComponent (at TouchableOpacity.js:256)
    in TouchableOpacity (at photoList.js:267)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in CellRenderer (at VirtualizedList.js:687)
    in RCTView (at View.js:44)
    in RCTScrollView (at ScrollView.js:967)
    in AndroidSwipeRefreshLayout (at RefreshControl.js:167)
    in RefreshControl (at VirtualizedList.js:1049)
    in ScrollView (at VirtualizedList.js:1045)
    in VirtualizedList (at FlatList.js:662)
    in FlatList (at photoList.js:253)
    in RCTView (at View.js:44)
    in PhotoList (at feed.js:36)
    in RCTView (at View.js:44)
    in feed (created by SceneView)
    in SceneView (at createTabNavigator.js:39)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in ResourceSavingScene (at createBottomTabNavigator.js:113)
    in RCTView (at View.js:44)
    in ScreenContainer (at createBottomTabNavigator.js:103)
    in RCTView (at View.js:44)
    in TabNavigationView (at createTabNavigator.js:197)
    in NavigationView (created by Navigator)
    in Navigator (created by SceneView)
    in SceneView (at StackViewLayout.js:795)
    in RCTView (at View.js:44)
    in AnimatedComponent (at StackViewCard.js:69)
    in RCTView (at View.js:44)
    in AnimatedComponent (at screens.native.js:59)
    in Screen (at StackViewCard.js:57)
    in Card (at createPointerEventsContainer.js:27)
    in Container (at StackViewLayout.js:860)
    in RCTView (at View.js:44)
    in ScreenContainer (at StackViewLayout.js:311)
    in RCTView (at View.js:44)
    in AnimatedComponent (at StackViewLayout.js:307)
    in Handler (at StackViewLayout.js:300)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.js:79)
    in RCTView (at View.js:44)
    in Transitioner (at StackView.js:22)
    in StackView (created by Navigator)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at createAppContainer.js:388)
    in NavigationContainer (at App.js:61)
    in App (at withExpoRoot.js:22)
    in RootErrorBoundary (at withExpoRoot.js:21)
    in ExpoRootComponent (at renderApplication.js:34)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in AppContainer (at renderApplication.js:33)

This error is located at:
    in RCTText (at Text.js:145)
    in TouchableText (at Text.js:268)
    in RCTView (at View.js:44)
    in AnimatedComponent (at TouchableOpacity.js:256)
    in TouchableOpacity (at photoList.js:267)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in CellRenderer (at VirtualizedList.js:687)
    in RCTView (at View.js:44)
    in RCTScrollView (at ScrollView.js:967)
    in AndroidSwipeRefreshLayout (at RefreshControl.js:167)
    in RefreshControl (at VirtualizedList.js:1049)
    in ScrollView (at VirtualizedList.js:1045)
    in VirtualizedList (at FlatList.js:662)
    in FlatList (at photoList.js:253)
    in RCTView (at View.js:44)
    in PhotoList (at feed.js:36)
    in RCTView (at View.js:44)
    in feed (created by SceneView)
    in SceneView (at createTabNavigator.js:39)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in ResourceSavingScene (at createBottomTabNavigator.js:113)
    in RCTView (at View.js:44)
    in ScreenContainer (at createBottomTabNavigator.js:103)
    in RCTView (at View.js:44)
    in TabNavigationView (at createTabNavigator.js:197)
    in NavigationView (created by Navigator)
    in Navigator (created by SceneView)
    in SceneView (at StackViewLayout.js:795)
    in RCTView (at View.js:44)
    in AnimatedComponent (at StackViewCard.js:69)
    in RCTView (at View.js:44)
    in AnimatedComponent (at screens.native.js:59)
    in Screen (at StackViewCard.js:57)
    in Card (at createPointerEventsContainer.js:27)
    in Container (at StackViewLayout.js:860)
    in RCTView (at View.js:44)
    in ScreenContainer (at StackViewLayout.js:311)
    in RCTView (at View.js:44)
    in AnimatedComponent (at StackViewLayout.js:307)
    in Handler (at StackViewLayout.js:300)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.js:79)
    in RCTView (at View.js:44)
    in Transitioner (at StackView.js:22)
    in StackView (created by Navigator)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at createAppContainer.js:388)
    in NavigationContainer (at App.js:61)
    in App (at withExpoRoot.js:22)
    in RootErrorBoundary (at withExpoRoot.js:21)
    in ExpoRootComponent (at renderApplication.js:34)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in AppContainer (at renderApplication.js:33)

This error is located at:
    in NavigationContainer (at App.js:61)
    in App (at withExpoRoot.js:22)
    in RootErrorBoundary (at withExpoRoot.js:21)
    in ExpoRootComponent (at renderApplication.js:34)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in AppContainer (at renderApplication.js:33)
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:8779:6 in throwOnInvalidObjectType
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:9842:31 in reconcileChildFibers
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:10306:6 in reconcileChildren
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:10734:4 in updateHostComponent
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14091:21 in performUnitOfWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14129:41 in workLoop
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14226:15 in renderRoot
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15193:17 in performWorkOnRoot
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15090:24 in performWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15047:14 in performSyncWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14925:19 in requestWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14711:16 in scheduleWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:7700:17 in enqueueSetState
- node_modules/react/cjs/react.development.js:364:31 in setState
* app/components/photoList.js:134:22 in <unknown>
- node_modules/promise/setimmediate/core.js:37:14 in tryCallOne
- node_modules/promise/setimmediate/core.js:123:25 in <unknown>
- ... 8 more stack frames from framework internals

Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.%s, 
    in PhotoList (at feed.js:36)
    in RCTView (at View.js:44)
    in feed (created by SceneView)
    in SceneView (at createTabNavigator.js:39)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in ResourceSavingScene (at createBottomTabNavigator.js:113)
    in RCTView (at View.js:44)
    in ScreenContainer (at createBottomTabNavigator.js:103)
    in RCTView (at View.js:44)
    in TabNavigationView (at createTabNavigator.js:197)
    in NavigationView (created by Navigator)
    in Navigator (created by SceneView)
    in SceneView (at StackViewLayout.js:795)
    in RCTView (at View.js:44)
    in AnimatedComponent (at StackViewCard.js:69)
    in RCTView (at View.js:44)
    in AnimatedComponent (at screens.native.js:59)
    in Screen (at StackViewCard.js:57)
    in Card (at createPointerEventsContainer.js:27)
    in Container (at StackViewLayout.js:860)
    in RCTView (at View.js:44)
    in ScreenContainer (at StackViewLayout.js:311)
    in RCTView (at View.js:44)
    in AnimatedComponent (at StackViewLayout.js:307)
    in Handler (at StackViewLayout.js:300)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.js:79)
    in RCTView (at View.js:44)
    in Transitioner (at StackView.js:22)
    in StackView (created by Navigator)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at createAppContainer.js:388)
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:619:8 in warningWithoutStack
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:13205:6 in warnAboutUpdateOnUnmounted
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14683:33 in scheduleWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:7700:17 in enqueueSetState
- node_modules/react/cjs/react.development.js:364:31 in setState
* app/components/photoList.js:134:22 in <unknown>
- node_modules/promise/setimmediate/core.js:37:14 in tryCallOne
- node_modules/promise/setimmediate/core.js:123:25 in <unknown>
- ... 8 more stack frames from framework internals

any particular reason not to use Firestore over RealtimeDB? Also, could you change your renderItem prop to display a static string of text [for context](https://github.com/ganesh-deshmukh/exchange-o-gram/blob/master/app/components/photoList.js#L274) — Jose Munoz, Mar 31 '19 at 16:26
@David, 1)I am using firebase RealTimeDB and storage for storing images. firestore is not used. 2) actually, I got error pt, item.author is not any value, but it's an object. I made that mistake due to the call to a wrong path to the database. soon I will update about exact-mistake. currently, I am restructuring db. — GD- Ganesh Deshmukh, Mar 31 '19 at 17:10

score 0 · Answer 1 · answered Apr 01 '19 at 15:10

Error screen clearly says error at <TouchableOpacity> line 256, at photoList.js, in photoList.js file,

while making call to database as,

database
      .ref("users")
      .child(photoObj.author)
      .child("username") // now taking data's username
      .once("value")
      .then(snapshot => {
        console.log("db.ref('users/photoObj.author/username')\n", snapshot);

it was returning null, when seen on console that, username, is null.

because that field was empty in database, and that user didn't exits.

I created user with Id, in photoId, then it fetched it correctly.

also, at line <Text>item.author</Text>, it was returning object as item.author, which can't be displayed in <Text>, and It threw error as above.

actual problem was in database, I deleted user when I didn't rememberd it's password for testing, then I thought to create another account for testing it.

but it gave null username, in feed.js when that user-data was deleted.

current structure of database is as follows.

TIL: Everytime there is no error at front-end, else sometimes we make changes in database structure and thus we get errors and we try to fix using changing database versions as firebase 5.0.3, 5.9.2, 4.9.1.

React native - objects are not valid as a React child in firebase version 5.9.0

1 Answers1