I have two sections, the first allows you to select a product, and the second displays all the treatments using that products.
using: react-native-dropdown-select-list
Section 1:
has a SelectList with about 10 items in it
Section 2:
treatments.map()
When tapping the SelectList, it opens up to show the list, but dreadfully slow (about 10 frames a sec). If I remove the section 2, it works just fine. If I move section 2 to be above section 1, it works just fine.
Any idea how to fix this? It seems like an animation issue? Minimal Code below. This still causes the error
const testProducts = [
{
_id: "1",
name: "Product 1",
price: 100,
},
{
_id: "2",
name: "Product 2",
price: 200,
},
{
_id: "3",
name: "Product 3",
price: 300,
},
]
const testTreatments = [
{
_id: "1",
product: {
_id: "1",
name: "Product 1",
price: 100,
},
date: "2023-01-01",
dosage: 1,
},
{
_id: "2",
product: {
_id: "2",
name: "Product 2",
price: 200,
},
date: "2023-01-02",
dosage: 2,
},
{
_id: "3",
product: {
_id: "3",
name: "Product 3",
price: 300,
},
date: "2023-01-03",
dosage: 3,
},
]
<SelectList
save="key"
data={products.map((product) => {
return product.name;
})}
setSelected={()=>{}}
placeholder={"select product"}
/>
<View>
{testTreatments
.sort((a, b) => {
return a.date > b.date ? 1 : -1;
})
.map((treatment, index) => {
return (
<View key={index} style={styles.treatmentContainer}>
<Text style={styles.subheading}>
{treatment.product.name}
</Text>
<Text>{moment(treatment.date).format("MM/DD/YYYY")}</Text>
<Text>{treatment.product.price * treatment.dosage}</Text>
</View>
);
})}
</View>
