Currently trying to build a react native screen that displays a chessboard. I am using the react-chessboard component from https://github.com/Clariity/react-chessboard. My code is very basic and I just want to display the screen on an IOS phone using expo. Running this app in a web browser works and the chessboard displays. However, if I want to use a mobile device, I keep getting the error:
Invariant Violation: View config getter callback for component
divmust be a function (receivedundefined). Make sure to start component names with a capital letter.
Why is this happening?
import { useRef, useState } from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {Chessboard} from 'react-chessboard';
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
export default function App() {
return (
<view>
<Chessboard/>
</view>
);
}
React Native doesn't have divs, it has Views instead. React libraries will usually not translate into React Native libraries because the building blocks are not the same. You will most likely have to find a React Native library for your chessboard or build your own.