ERROR Invariant Violation: View config getter callback for component `div` must be a function (received `undefined`). Make sure to start component names with a capital letter.
I don't know why it works fine in my web app but when i use my android app it keeps popping out this error :(
I think my problem is inside this code:
function Product1() {
return (
<PayPalScriptProvider options={{ "client-id": "test" }}>
<PayPalButtons style={{ layout: "horizontal" }} />
</PayPalScriptProvider>
);
}
To prevent if there is any more error, this is my whole code:
import React, { useEffect } from 'react';
import { Button, View, Text, Image, StyleSheet, ImageBackground, TouchableOpacity, ScrollView, Alert} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";
function Profile() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<ImageBackground source={require('./4.png')} style={styles.image}>
</ImageBackground>
</View>
);
}
function EmptyScreen() {
return (
<View style={styles.container}>
<Image source={require('./3.png')} style={styles.topLeftImage} />
<View style={styles.box}>
<Image source={require('./1.png')} style={styles.image} resizeMode="contain"/>
<Text style={styles.description}>Box 1</Text>
</View>
<View style={styles.box}>
<Image source={require('./2.png')} style={styles.image} resizeMode="contain" />
<Text style={styles.description}>Box 2</Text>
</View>
</View>
)
}
function Product1() {
return (
<PayPalScriptProvider options={{ "client-id": "test" }}>
<PayPalButtons style={{ layout: "horizontal" }} />
</PayPalScriptProvider>
);
}
function Product({ navigation }){
return(
<ScrollView style={{ flex: 1 }}>
<View style={styles.con}>
<View style={styles.box1}>
<Image source={require('./2.png')} style={styles.image} resizeMode="contain" />
<View style={styles.box3}>
<Text style={styles.description2}>RM 100</Text>
</View>
<Text style={styles.description1}>Product Name</Text>
<TouchableOpacity style={styles.button} onPress={() => navigation.push('Product1')}>
<Text style={styles.buttonText}>Check Now</Text>
</TouchableOpacity>
</View>
<View style={styles.box1}>
<Image source={require('./1.png')} style={styles.image} resizeMode="contain" />
<View style={styles.box3}>
<Text style={styles.description2}>RM 500</Text>
</View>
<Text style={styles.description1}>Product Name</Text>
<TouchableOpacity style={styles.button} onPress={() => navigation.push('Product1')}>
<Text style={styles.buttonText}>Check Now</Text>
</TouchableOpacity>
</View>
<View style={styles.box1}>
<Image source={require('./2.png')} style={styles.image} resizeMode="contain" />
<View style={styles.box3}>
<Text style={styles.description2}>RM 100</Text>
</View>
<Text style={styles.description1}>Product Name</Text>
<TouchableOpacity style={styles.button} onPress={() => navigation.push('Product1')}>
<Text style={styles.buttonText}>Check Now</Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>
)
}
const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();
function Home() {
return (
<Tab.Navigator>
<Tab.Screen name="Main Page" component={Profile} />
<Tab.Screen name="Hari Raya" component={EmptyScreen} />
<Tab.Screen name="Products" component={Product} />
</Tab.Navigator>
);
}
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Nagamotorspot"
component={Home}
options={{
headerRight: () => (
<Button
onPress={() => alert('This is a button!')}
title="Info"
color="#00cc00"
/>
), }}
/>
<Stack.Screen name="EditPost" component={EmptyScreen} />
<Stack.Screen name="Products" component={Product} />
<Stack.Screen name="Product1" component={Product1} />
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
lol: {
flex: 1,
resizeMode: 'cover',
justifyContent: 'center',
},
container: {
flex: 1,
backgroundColor: '#000000',
alignItems: 'center',
justifyContent: 'center',
},
con: {
flex: 1,
backgroundColor: '#808080',
alignItems: 'center',
justifyContent: 'center',
},
box: {
width: '80%',
height: 200,
overflow: 'hidden',
marginVertical: 10,
alignItems: 'center',
justifyContent: 'center',
},
box1: {
width: '80%',
height: 280,
borderRadius: 20,
overflow: 'hidden',
marginVertical: 10,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#000000',
},
image: {
flex: 1,
width: '100%',
height: '100%',
resizeMode: 'cover',
},
description: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
color: '#fff',
paddingVertical: 10,
paddingHorizontal: 20,
textAlign: 'center',
fontWeight: 'bold',
},
topLeftImage: {
position: 'absolute',
top: 0,
alignItems: 'center',
justifyContent: 'center',
width: 100,
height: 100,
resizeMode: 'contain',
},
button: {
marginTop: 10,
paddingVertical: 8,
paddingHorizontal: 16,
backgroundColor: '#00cc00',
borderRadius: 8,
width: '100%',
alignItems: 'center',
marginTop: 10,
},
buttonText: {
color: '#fff',
fontWeight: 'bold',
textAlign: 'center',
},
buttonBox: {
backgroundColor: '#00cc00',
borderRadius: 20,
paddingHorizontal: 40,
paddingVertical: 10,
},
description1: {
position: 'absolute',
bottom: 40,
left: 0,
right: 0,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
color: '#fff',
paddingVertical: 10,
paddingHorizontal: 20,
textAlign: 'center',
fontWeight: 'bold',
},
description2: {
position: 'absolute',
bottom: -10,
left: 19,
color: '#fff',
paddingVertical: 10,
paddingHorizontal: 20,
fontWeight: 'bold',
},
box3: {
backgroundColor: "#FF6961",
width: '30%',
height: 40,
borderRadius: 20,
bottom: 200,
left: -120,
}
});
export default App;
Is this a react native application? I ran into the same problem and the issue was that I was trying to use the react PayPalScriptProvider which does not work as expected with react native. I would suggest using https://www.npmjs.com/package/react-native-paypal instead.