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

Question

I'm beginner to react native and I was try to build very basic app and I got below error

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

This error is located at: in div (created by View) in View (created by ScrollView) in div (created by View) in View (created by ScrollViewBase) in ScrollViewBase (created by ScrollView) in ScrollView (at Horizontal.js:8) in Horizontal (at App.js:12) in RCTView (at View.js:45) in View (at App.js:11) in App (at withExpoRoot.js:20) in RootErrorBoundary (at withExpoRoot.js:19) in ExpoRootComponent (at renderApplication.js:35) in RCTView (at View.js:45) in View (at AppContainer.js:98) in RCTView (at View.js:45) in View (at AppContainer.js:115) in AppContainer (at renderApplication.js:34) get

below is my source code

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {ScrollView} from "react-native-web";

export default class Horizontal extends React.Component{
render() {
    return (
        <ScrollView>
            <View>
                <Text style={styles.innerText}>
                    Welcome to LCOs
                </Text>
            </View>
        </ScrollView>
    );
}
}

const styles = StyleSheet.create({
container: {
},
outer: {

},
innerText:{},
});

and this is my main class

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Red from './component/Red';
import Green from "./component/Green";
import Blue from "./component/Blue";
import Horizontal from "./component/Horizontal";

export default class App extends React.Component{
  render() {
    return (
        <View style={styles.container}>
          <Horizontal/>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent:'center',
flexDirection:'row'
  },
});

what is the reason for this error and how can I resolve this?

Why do you implement the ScrollView from react-native-web? Can you change it from "react-native" ? — FreakyCoder

Manoj Madushanka Manoj Madushanka · Accepted Answer · 2019-11-10T13:39:41

ok I found the solution change the input of scrollview to react native not react native web

change import {ScrollView} from "react-native-web"; this to import {ScrollView} from "react-native"; this.

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

1 Answers