react-native-select-dropdown
react-native-select-dropdown copied to clipboard
Maximum call stack size exceeded and TypeError: Cannot read property 'findIndexInArr' of undefined
When using the react-native-select-dropdown
package in a React Native app, I'm encountering two issues:
- Maximum call stack size exceeded (native stack depth), js engine: hermes
- TypeError: Cannot read property 'findIndexInArr' of undefined
These errors occur when clicking on the dropdown to open the options list.
Steps to Reproduce:
- Create a new React Native project
- Install the
react-native-select-dropdown
package:npm install react-native-select-dropdown
- Import the
SelectDropdown
component and use it in your code:
import { Text, SafeAreaView, StyleSheet, View } from 'react-native';
import SelectDropdown from 'react-native-select-dropdown';
export default function Timer() {
const arr = [
{ id: 1, title: 'Personal' },
{ id: 2, title: 'Sick' },
{ id: 3, title: 'Maternity' },
{ id: 4, title: 'Paternity' },
{ id: 5, title: 'Unpaid' },
{ id: 6, title: 'Compensate' },
{ id: 7, title: 'Study' },
{ id: 8, title: 'Casual' },
{ id: 9, title: 'Special' },
];
return (
<SafeAreaView style={styles.container}>
<SelectDropdown
data={arr}
onSelect={(selectedItem, index) => {
console.log(selectedItem, index);
}}
renderButton={(selectedItem, isOpened) => {
return (
<View style={styles.dropdownButtonStyle}>
<Text style={styles.dropdownButtonTxtStyle}>
{(selectedItem && selectedItem.title) || 'Select your mood'}
</Text>
</View>
);
}}
renderItem={(item, index, isSelected) => {
return (
<View
style={{
...styles.dropdownItemStyle,
...(isSelected && { backgroundColor: '#D2D9DF' }),
}}
>
<Text style={styles.dropdownItemTxtStyle}>{item.title}</Text>
</View>
);
}}
showsVerticalScrollIndicator={false}
dropdownStyle={styles.dropdownMenuStyle}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
// ... (styles omitted for brevity)
});