Not scrolling when used inside View in RN 0.71.2 #155
Comments
|
i encounter the same issue. in my case it seems that the |
Yes i also noticed that. It's working without flexbox. I dont no whether this is an RN issue or lib issue. |
|
So, how did you guys solve that issue? Just remove flexDirection:'row' ? |
|
Anyone found a solution for this? I need to display the dropdown next to a TextInput, so I can't just remove flexDirection: 'row' |
|
hi @Bileeta123 , You try wrapping outside dropdown can fix this problem? |
It still can't scroll at right side of the screen . May be it is react native's issue ,but in ios it work. |
|
If you inspect the dropdown when it is expanded, it looks like the scrollable view is placed to the left of the screen. It is also a problem with other dropdown libaries, so maybe it is a React Native issue? |
|
Guysss,any solution for this? |
|
I end up making my own dropdown component |
|
Can you please share your own custom-built component? I have been stuck with this dropdown component issues |
|
it's just a basic implementation of the dropdown, but here you go. import { FlatList, Modal, StyleSheet, View } from 'react-native';
import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
import { RectButton } from 'react-native-gesture-handler';
import { Text } from './Themed';
import { Ionicons } from '@expo/vector-icons';
import { Colors } from '../constants';
import { Pressable } from 'react-native';
const ITEM_HEIGHT = 35;
const PickerItem = memo(
({
item,
labelStyle,
style,
activeStyle,
activeLabelStyle,
selected,
onChange
}) => (
<Pressable
android_ripple={{ color: Colors.ripple }}
style={[
styles.item,
style,
selected ? activeStyle || styles.itemActive : {}
]}
onPress={() => {
onChange(item);
}}
>
<Text
style={[
styles.itemLabel,
labelStyle,
selected ? activeLabelStyle || styles.itemLabelActive : {}
]}
numberOfLines={1}
>
{item.label}
</Text>
</Pressable>
),
({ item: p, selected: s1 }, { item: n, selected: s2 }) =>
p.label === n.label && s1 === s2
);
const Picker = ({
items,
value,
setValue,
setLabel,
style,
iconStyle,
itemStyle,
labelStyle,
itemLabelStyle,
activeItemStyle,
activeLabelStyle,
offset = 5
}) => {
const view = useRef(null);
const list = useRef(null);
const [layout, setLayout] = useState(null);
const [visible, setVisible] = useState(false);
const current = useMemo(() => {
const index = items.findIndex(({ value: v }) => v === value);
return {
index,
label: items[index].label
};
}, [value]);
const openModal = () => {
setVisible(true);
onLayout();
};
const closeModal = () => {
setVisible(false);
};
const onValueChange = useCallback(({ label, value }) => {
setLabel(label);
setValue(value);
closeModal();
}, []);
const renderItem = ({ item }) => (
<PickerItem
item={item}
style={itemStyle}
labelStyle={itemLabelStyle}
activeStyle={activeItemStyle}
activeLabelStyle={activeLabelStyle}
selected={value === item.value}
onChange={onValueChange}
/>
);
const keyExtractor = ({ label }) => label;
const onLayout = () => {
view.current?.measure((fx, fy, width, height, x, y) => {
if (!x || layout?.trusty) return;
setLayout({
trusty: !!layout,
height,
width,
x,
y: height + y + offset - 10
});
});
};
const getItemLayout = (_, index) => ({
length: ITEM_HEIGHT,
offset: ITEM_HEIGHT * index,
index
});
const layoutStyle = useMemo(
() => ({
position: 'absolute',
top: layout?.y ?? 0,
left: layout?.x ?? 0,
width: layout?.width,
maxHeight: 300
}),
[layout]
);
return (
<View ref={view} onLayout={onLayout}>
<RectButton
style={[styles.button, style]}
rippleColor={Colors.ripple}
onPress={openModal}
>
<Text style={[styles.label, labelStyle]} numberOfLines={1}>
{current?.label}
</Text>
<Ionicons name='caret-down' style={[styles.icon, iconStyle]} />
</RectButton>
<Modal
visible={visible}
onRequestClose={closeModal}
transparent
statusBarTranslucent
>
<Pressable style={styles.backdrop} onPress={closeModal} />
<View style={[styles.listContainer, layoutStyle]}>
<FlatList
ref={list}
data={items}
renderItem={renderItem}
keyExtractor={keyExtractor}
initialNumToRender={10}
contentContainerStyle={styles.contentContainer}
showsVerticalScrollIndicator={false}
getItemLayout={getItemLayout}
initialScrollIndex={current.index}
/>
</View>
</Modal>
</View>
);
};
export default Picker;
const styles = StyleSheet.create({
button: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 15,
paddingVertical: 10
},
label: {
flex: 1,
fontSize: 10,
color: Colors.secondary
},
icon: {
fontSize: 10,
color: Colors.secondary
},
backdrop: {
flex: 1
},
listContainer: {
borderRadius: 10,
overflow: 'hidden',
backgroundColor: Colors.card,
elevation: 2
},
contentContainer: { paddingVertical: 5 },
item: {
paddingHorizontal: 10,
justifyContent: 'center',
height: ITEM_HEIGHT
},
itemLabel: {
color: Colors.secondary,
fontSize: 10
},
itemActive: { backgroundColor: Colors.primary },
itemLabelActive: { color: Colors.text }
});it's kinda customizable, but lot of hard coded styling |
|
Facing same issue. any fixes available ? |
|
`import React, {FC, ReactElement, useRef, useState} from 'react'; interface Props { const AutoComplete: FC = ({ const toggleDropdown = (): void => { const openDropdown = (): void => { const onItemPress = (item): void => { const filteredOptions = data.filter((option: any) => const renderItem = ({item}): ReactElement<any, any> => ( const renderDropdown = (): ReactElement<any, any> => { return ( const styles = StyleSheet.create({ export default AutoComplete;` Here is my solution.End up with writing custom but this solution also has issue that is for the first time dropdown picker appear suddenly drop from top but after it appear excepted.if you found the solution for that issue, please point on that. |
It's a bug from the package it self. Please install the version <= 2.5.3. |
|
I was having a similar issue using the I've created a patch with the solution in this related issue. It might be helpful to solve the issue with the |
|
I encountered the same issue when I wrapped the Dropdown component with a view using 'flex-direction: row Here are two solutions that have worked for me: 1 -Modify the _measure function to include the pageX value: 2 - Modify the _renderModal function to replace the width property with flex: 1: |
Thanks pro! |
|
+1 |
Are you changing the package itself? |
How can you modified it inside node_modules |
Bạn bấm ctrl rồi click vào Dropdown thì sẽ đến component của Dropdown thì bạn tìm đến đoạn được note ở trên để sửa |
This is definitely not maintainable in the long-term, but an interesting solution nonetheless. |
This is my view hierarchy looks like,
Drop down opens but cannot scroll it. But if i move the dropdown top of the hierarchy, as the first ui component of the parent view, it's working. Anyone know a fix?
"react-native": "0.71.2"
"react-native-element-dropdown": "^2.8.0"
"react-native-gesture-handler": "^2.9.0"
The text was updated successfully, but these errors were encountered: