I tried my best to recreate the problem here:
on my index I have this:
<Section section="cat1" />
<Section section="cat2" />
<Section section="cat3" />
The section component essentially fetches the category I input, so in this instance cat1,2 and 3 will be fetched.
Section.tsx (this is shortened/pseudo)
const Section = (props) => {
useEffect(() => {
let cat = fetch(props.cat)
//cat logs perfectly, and I get the array of objects I want
})
}
then in my tsx, I just map over the cat
{cat?.map((item, index) => (
<CatCard cat={item}/>
); )}
The catCard is just a card that displays a specific object within the array, so imagine cat1 being an array of objects , and each Item gets a catCard.
The CatCard has a touchableOpacity, that when I click, I'm sent to the view page to view that specific product in more details
const CatCard = ({ cat}: This is an object) => {
// cat looks something like this:
{category:"holiday", price:2, sale:false,....}
return (
<TouchableOpacity
activeOpacity={0.5}
onPress={() => {
console.log("first");
router.navigate({
pathname: `/product/view`,
params: { product: JSON.stringify(cat) },
});
}}
className="rounded-lg h-[70%]"
/>
}
In my TouchableOpacity, on the onPress function, I can log the "cat" object every time, and it logs fine. However, for some very weird reason, when I send it through the params, some specific products go through while others don't. Mind you, they're all identical. For troubleshooting, I removed the router.navigate and just logged out the category every time the button is clicked. The category logs fine, but when I navigate, in some instances (i.e., some specific products), I'm able to send over the products in my params, while on other products, I just get an empty object.