So I am trying to use this as part of my hybrid react app. However when I copy and paste the code into my project it gives me an error

import React, {Component } from 'react';
import { FacebookProvider, Page } from 'react-facebook';
//import {createBottomTabNavigator, createAppContainer} from 'react- 
navigation';
export default class Home extends Component {
    render(){
       //const { navigate } = this.props.navigation
    return (
       <FacebookProvider appId="2319566588264121">
           <Page href="/" tabs="timeline" 
            />
       </FacebookProvider> 
    );
   }
 }

The idea is to have a facebooks pages feed show up on my app screen. However I get this error:

Invariant Violation: View config not found for name div. Make sure to start ponent names with a capital letter.

This error is located at:
  in div (created by Page)
  in Page (created by Parser)
  in Initialize (created by Context.Consumer)
  in ForwardRef (created by Parser)
  in div (created by Parser)
  in Parser (created by ForwardRef)
  in ForwardRef (at Home.js:18)
  in Facebook (at Home.js:17)
  in Home (at SceneView.js:0)
  in SceneView (at createTabNavigator.js139)
  in RCTView (at View.js:45)
  in View (at ResourceSavingScene.js:37)
  in RCTView (at View.js:45)
  in View (at ResourceSavingScene.js:26)
  in ResourceSavingScene (at createllottomTabNavigatorls:121)
  in RCTView (at View.js:45)
  in View (at screens.native.js:83)
  in ScreenContainer (at create00ttomTabNavigator.js:111)
  in RCTView (at View.js:46)
  in View (at createBottomTabNavigator.js: 110)
  in TabNavigationView (at createTabNavigator.js:197)
  in NavigationView (at createNavigator.js:61)
  in Navigator (at createAppContainer.js:429)
  in NavigationContainer (at . . 

So I am trying to use this https://github./seeden/react-facebook as part of my hybrid react app. However when I copy and paste the code into my project it gives me an error

import React, {Component } from 'react';
import { FacebookProvider, Page } from 'react-facebook';
//import {createBottomTabNavigator, createAppContainer} from 'react- 
navigation';
export default class Home extends Component {
    render(){
       //const { navigate } = this.props.navigation
    return (
       <FacebookProvider appId="2319566588264121">
           <Page href="https://www.facebook./somepage/" tabs="timeline" 
            />
       </FacebookProvider> 
    );
   }
 }

The idea is to have a facebooks pages feed show up on my app screen. However I get this error:

Invariant Violation: View config not found for name div. Make sure to start ponent names with a capital letter.

This error is located at:
  in div (created by Page)
  in Page (created by Parser)
  in Initialize (created by Context.Consumer)
  in ForwardRef (created by Parser)
  in div (created by Parser)
  in Parser (created by ForwardRef)
  in ForwardRef (at Home.js:18)
  in Facebook (at Home.js:17)
  in Home (at SceneView.js:0)
  in SceneView (at createTabNavigator.js139)
  in RCTView (at View.js:45)
  in View (at ResourceSavingScene.js:37)
  in RCTView (at View.js:45)
  in View (at ResourceSavingScene.js:26)
  in ResourceSavingScene (at createllottomTabNavigatorls:121)
  in RCTView (at View.js:45)
  in View (at screens.native.js:83)
  in ScreenContainer (at create00ttomTabNavigator.js:111)
  in RCTView (at View.js:46)
  in View (at createBottomTabNavigator.js: 110)
  in TabNavigationView (at createTabNavigator.js:197)
  in NavigationView (at createNavigator.js:61)
  in Navigator (at createAppContainer.js:429)
  in NavigationContainer (at . . 

• javascript
• node.js
• reactjs
• react-native

Share Improve this question Follow edited Jul 29, 2019 at 13:45 adiga 35.3k99 gold badges6565 silver badges8787 bronze badges asked Jul 29, 2019 at 13:34 Adam AngelAdam Angel 3111 silver badge22 bronze badges 2

• 2 Include the text of the error, not a screenshot. Search engines won't index based on the error in the image. – random_user_name Commented Jul 29, 2019 at 13:35
• Maybe there is something wrong with your configuration. Have you tried github./facebook/create-react-app. It creates you a new project with an example page. It's just one mand and everything should be generated and configured correctly. – Frank Roth Commented Jul 29, 2019 at 13:51

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

It looks like seeden/react-facebook is built for browsers and the DOM. You cannot use <div> and the likes in React Native -- This means you have to implement this library yourself, or find something else that is React Native patible

Yes,ponents' names must start with capital letter , because , when you write ponent name with small letter , piler runs it like as html tag, but when you write with capital letter , piler runs it from your javascript file location.