Ошибка React Native Android: java.lang.String невозможно преобразовать в java.lang.Boolean ⇐ JAVA

[Anonymous]

Я создаю приложение React Native (Expo), и мое приложение вылетает на Android со следующей ошибкой:

Код: Выделить всё

java.lang.String cannot be cast to java.lang.Boolean

На главном экране появляется ошибка (

Код: Выделить всё

HomeScreen

) при рендеринге моих компонентов. Приложение запускается, но сразу показывает красный экран ошибки.
Я использую:

• React Native
• Expo
• @react-native-picker/picker
• Эмулятор Android

Вот мой домашний экран:

Код: Выделить всё

import React, { useEffect, useState } from "react";
import {
StyleSheet,
Text,
View,
ScrollView,
TextInput,
Switch,
Pressable,
} from "react-native";
import ProductCard from "../components/ProductCard";
import BlogCard from "../components/BlogCard";
import { Picker } from "@react-native-picker/picker";

const categoryNames = {
"": "Alle categorieën",
"699efb7ad137545e576a811e": "Shirts",
"699f217d13a4e4ca82f4ec48": "Jassen",
"69b01c41fdd5994b3ae0a7f9": "Truien",
"69b01c62d57fec0046a3c0fb": "Sport",
"69b01c99d0fbb0f345da563a": "Classic",
};

const HomeScreen = ({ navigation }) => {
const [isEnabled, setIsEnabled] = useState(false);
const [searchQuery, setSearchQuery] = useState("");
const [selectedCategory, setSelectedCategory] = useState("");
const [products, setProducts] = useState([]);
const [blogs, setBlogs] = useState([]);
const [sortOption, setSortOption] = useState("price-asc");

const toggleSwitch = () => setIsEnabled((previousState) => !previousState);

useEffect(() => {
fetch(
"https://api.webflow.com/v2/sites/698c7fd1ddf949491802590b/products",
{
headers: {
Authorization:
"Bearer 3eee4cb5ec1e5a5a12ac22f965e7dbca444bf5cbcd9495408a119506e9545b7e",
},
},
)
.then((res) => res.json())
.then((data) => {
const formattedProducts = (data.items || []).map((item) => ({
id: item.product?.id,
title: item.product?.fieldData?.name,
description: item.product?.fieldData?.description,
price: (item.skus[0]?.fieldData?.price?.value || 0) / 100,
image: {
uri: item.skus[0]?.fieldData?.["main-image"]?.url,
},
category: item.product?.fieldData?.category
? categoryNames[item.product.fieldData.category[0]] ||
"Onbekende categorie"
: "Onbekende categorie",
}));

setProducts(formattedProducts);
})
.catch((error) => console.error("Error fetching products:", error));
}, []);

useEffect(() => {
fetch(
"https://api.webflow.com/v2/collections/699ef94b72b40bd629e2bd8b/items",
{
headers: {
Authorization:
"Bearer 3eee4cb5ec1e5a5a12ac22f965e7dbca444bf5cbcd9495408a119506e9545b7e",
},
},
)
.then((res) => res.json())
.then((data) => {
const formattedBlogs = (data.items || []).map((item) => ({
id: item.id,
title: item.fieldData?.name,
description: item.fieldData?.["post-summary"],
image: {
uri: item.fieldData?.["main-image"]?.url,
},
content: item.fieldData?.["post-body"],
}));

setBlogs(formattedBlogs);
})
.catch((error) => console.error("Error fetching blogs:", error));
}, []);

const filteredProducts = products.filter(
(product) =>
(selectedCategory === "" || product.category === selectedCategory) &&
product.title?.toLowerCase().includes(searchQuery.toLowerCase()),
);

const sortedProducts = [...filteredProducts].sort((a, b) =>  {
if (sortOption === "price-asc") return a.price - b.price;
if (sortOption === "price-desc") return b.price - a.price;
if (sortOption === "name-asc") return a.title.localeCompare(b.title);
if (sortOption === "name-desc") return b.title.localeCompare(a.title);
return 0;
});

return (


Zoek een product of blog:




Kies een categorie:

selectedValue={selectedCategory}
onValueChange={(itemValue) => setSelectedCategory(itemValue)}
>











Sorteer producten:

 setSortOption(itemValue)}
>









Meldingen ontvangen?



 console.log("Zoek knop gedrukt")}
>
Zoeken


Producten

{sortedProducts.map((product) => (
 navigation.navigate("ProductDetail", product)}
/>
))}

Blogs

{blogs.map((blog) => (
  navigation.navigate("BlogDetail", blog)}
/>
))}

);
};

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#F3EEE7",
padding: 20,
},
inputSection: {
marginBottom: 20,
},
label: {
fontSize: 16,
color: "#222",
marginBottom: 10,
},
input: {
backgroundColor: "#fff",
borderWidth: 1,
borderColor: "#D9D9D9",
borderRadius: 8,
paddingHorizontal: 12,
height: 45,
},
picker: {
backgroundColor: "#fff",
marginBottom: 10,
},
row: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
marginBottom: 20,
},
button: {
backgroundColor: "#A8B1AE",
padding: 16,
borderRadius: 4,
marginBottom: 25,
},
buttonText: {
color: "#fff",
fontSize: 18,
fontWeight: "bold",
},
sectionTitle: {
fontSize: 32,
fontStyle: "italic",
color: "#A8B1AE",
marginBottom: 20,
},
blogTitle: {
fontSize: 32,
fontStyle: "italic",
color: "#A8B1AE",
marginTop: 10,
marginBottom: 20,
},
pickerContainer: {
backgroundColor: "#fff",
borderWidth: 1,
borderColor: "#D9D9D9",
borderRadius: 8,
overflow: "hidden",
},
});

export default HomeScreen;

Я также визуализирую два пользовательских компонента (

Код: Выделить всё

ProductCard

и BlogCard):

Код: Выделить всё

import React from "react";
import { View, Text, Image, StyleSheet, Button } from "react-native";

const ProductCard = ({ title, description, price, image, onPress }) => {
return (



{title}

€ {price},00

{description}





);
};

const styles = StyleSheet.create({
card: {
backgroundColor: "#F3EEE7",
marginBottom: 25,
},
image: {
width: "100%",
height: 260,
borderRadius: 6,
marginBottom: 15,
resizeMode: "cover",
},
title: {
fontSize: 28,
fontWeight: "bold",
color: "#1F1F1F",
marginBottom: 8,
},
price: {
fontSize: 18,
color: "#1F1F1F",
marginBottom: 10,
},
description: {
fontSize: 16,
lineHeight: 24,
color: "#333",
marginBottom: 15,
},
buttonContainer: {
marginBottom: 10,
},
});

export default ProductCard;

Код: Выделить всё

import React from "react";
import { View, Text, Image, StyleSheet, TouchableOpacity } from "react-native";

const BlogCard = ({ title, description, image, onPress }) =>  {
return (



{title}

{description}


Bekijk blog →


);
};

const styles = StyleSheet.create({
card: {
backgroundColor: "#F3EEE7",
marginBottom: 25,
},
image: {
width: "100%",
height: 240,
borderRadius: 6,
marginBottom: 15,
resizeMode: "cover",
},
title: {
fontSize: 28,
fontWeight: "bold",
color: "#1F1F1F",
marginBottom: 10,
},
description: {
fontSize: 16,
lineHeight: 24,
color: "#333",
marginBottom: 15,
},
button: {
paddingVertical: 10,
},
buttonText: {
fontSize: 22,
fontWeight: "bold",
color: "#1F1F1F",
},
});

export default BlogCard;

Я уже пробовал:

• переустановить @react-native-picker/picker
• очистить кеш (

  Код: Выделить всё

  npx expo start -c

  )
• проверка реквизита на «истину» и {true

но ошибка все равно происходит.
Кто-нибудь знает, что обычно вызывает:

Код: Выделить всё

java.lang.String cannot be cast to java.lang.Boolean

в React Native Android и как я могу отладить, какой компонент за это отвечает?
Буду признателен за любую помощь!