[ad_1]
I wish to have a scroll within the listing.
In ios its working wonderful however in android scroll will not be working. Within the under code, if I give peak to the inexperienced view its working, however I wish to obtain it with out giving peak to the inexperienced view, due to my usecase, it ought to at all times overlap the white textual content.
Please see the under code –
App.tsx
import {View, Textual content, Alert, StyleSheet} from 'react-native';
import React, {useState} from 'react';
import SearchableDropdown from './searchableDropdown';
var objects = [
{
id: 1,
name: 'JavaScript',
},
{
id: 2,
name: 'Java',
},
{
id: 3,
name: 'Ruby',
},
{
id: 4,
name: 'React Native',
},
{
id: 5,
name: 'PHP',
},
{
id: 6,
name: 'Python',
},
{
id: 7,
name: 'Go',
},
{
id: 8,
name: 'Swift',
},
];
const App = () => {
const [selectedItem, setSelectedItem] = useState<any>(null);
return (
<View fashion={{backgroundColor: 'blue', flex: 1}}>
<SearchableDropdown
onItemSelect={(merchandise: any) => {
console.log('on merchandise chosen :', merchandise);
setSelectedItem(merchandise.identify);
}}
containerStyle={{
zIndex: 200,
backgroundColor: 'inexperienced',
padding: 5,
width: 200,
marginTop: 100,
}}
onRemoveItem={(merchandise: any, index: quantity) => {
setSelectedItem(null);
}}
itemStyle={kinds.itemStyle}
itemTextStyle={{shade: '#222'}}
itemsContainerStyle={{maxHeight: 140}}
objects={objects}
resetValue={false}
textInputProps={{
worth: selectedItem,
placeholder: 'Choose Location',
underlineColorAndroid: 'clear',
onTextChange: (textual content: string) => console.log('on textual content change :', textual content),
}}
listProps={{
nestedScrollEnabled: true,
}}
/>
<Textual content>fjsdkfjka</Textual content>
<Textual content>fjsdkfjka</Textual content>
<Textual content>fjsdkfjka</Textual content>
<Textual content>fjsdkfjka</Textual content>
<Textual content>fjsdkfjka</Textual content>
<Textual content>fjsdkfjka</Textual content>
</View>
);
};
export default App;
const kinds = StyleSheet.create({
itemStyle: {
padding: 10,
backgroundColor: '#ddd',
borderColor: '#bbb',
borderWidth: 1,
borderRadius: 5,
},
});
searchableDropdown.tsx
import React, {Part, useEffect, useState} from 'react';
import {
Textual content,
FlatList,
TextInput,
View,
TouchableOpacity,
Keyboard,
} from 'react-native';
import Entypo from 'react-native-vector-icons/Entypo';
const defaultItemValue = {
identify: '',
id: 0,
};
const SearchableDropdown = (props: any) => {
const [item, setItem] = useState<any>({});
const [listItems, setListItems] = useState<any>([]);
const [focus, setFocus] = useState<any>(false);
const [viewHeight, setViewHeight] = useState<any>(0);
let enter: any = null;
const renderFlatList = () => {
if (focus) {
const flatListPorps = {...props.listProps};
const oldSupport = [
{key: 'keyboardShouldPersistTaps', val: 'always'},
{key: 'nestedScrollEnabled', val: false},
{key: 'style', val: {...props.itemsContainerStyle}},
{key: 'data', val: listItems},
{
key: 'keyExtractor',
val: (item: any, index: number) => index.toString(),
},
{
key: 'renderItem',
val: ({item, index}: any) => renderItems(item, index),
},
{
key: 'contentContainerStyle',
val: {...props.contentContainerStyle},
},
];
oldSupport.forEach(kv => {
if (!Object.keys(flatListPorps).consists of(kv.key)) {
flatListPorps[kv.key] = kv.val;
} else {
if (kv.key === 'fashion') {
flatListPorps['style'] = kv.val;
}
}
});
return (
<View
fashion={{
place: 'absolute',
backgroundColor: 'pink',
width: '100%',
opacity: 1,
zIndex: 1,
marginTop: 60,
}}>
<FlatList {...flatListPorps} />
</View>
);
}
};
useEffect(() => {
const listItems = props.objects;
const defaultIndex = props.defaultIndex;
if (defaultIndex && listItems.size > defaultIndex) {
setItem(listItems[defaultIndex]);
setListItems(listItems);
} else {
setListItems(listItems);
}
}, []);
const searchedItems = (searchedText: string) => {
let setSort = props.setSort;
if (!setSort && typeof setSort !== 'operate') {
setSort = (merchandise: any, searchedText: string) => {
return merchandise.identify.toLowerCase().indexOf(searchedText.toLowerCase()) > -1;
};
}
var ac = props.objects.filter((merchandise: any) => {
return setSort(merchandise, searchedText);
});
let merchandise = {
id: -1,
identify: searchedText,
};
setItem(merchandise);
setListItems(ac);
const onTextChange =
props.onTextChange ||
props.textInputProps.onTextChange ||
props.onChangeText ||
props.textInputProps.onChangeText;
if (onTextChange && typeof onTextChange === 'operate') {
setTimeout(() => {
onTextChange(searchedText);
}, 0);
}
};
const renderItems = (merchandise: any, index: quantity) => {
if (props.multi && props.selectedItems && props.selectedItems.size > 0) {
return props.selectedItems.discover((sitem: any) => sitem.id === merchandise.id) ? (
<TouchableOpacity
fashion={{...props.itemStyle, flex: 1, flexDirection: 'row'}}>
<View
fashion={{
flex: 0.9,
flexDirection: 'row',
alignItems: 'flex-start',
}}>
<Textual content>{merchandise.identify}</Textual content>
</View>
<View
fashion={{flex: 0.1, flexDirection: 'row', alignItems: 'flex-end'}}>
<TouchableOpacity
onPress={() =>
setTimeout(() => {
props.onRemoveItem(merchandise, index);
}, 0)
}
fashion={{
backgroundColor: '#f16d6b',
alignItems: 'heart',
justifyContent: 'heart',
width: 25,
peak: 25,
borderRadius: 100,
marginLeft: 10,
}}>
<Textual content>X</Textual content>
</TouchableOpacity>
</View>
</TouchableOpacity>
) : (
<TouchableOpacity
onPress={() => {
setItem(merchandise);
setTimeout(() => {
props.onItemSelect(merchandise);
}, 0);
}}
fashion={{...props.itemStyle, flex: 1, flexDirection: 'row'}}>
<View
fashion={{flex: 1, flexDirection: 'row', alignItems: 'flex-start'}}>
<Textual content>{merchandise.identify}</Textual content>
</View>
</TouchableOpacity>
);
} else {
return (
<TouchableOpacity
fashion={{...props.itemStyle}}
onPress={() => {
setFocus(false);
setItem(merchandise);
Keyboard.dismiss();
setTimeout(() => {
props.onItemSelect(merchandise);
if (props.resetValue) {
setFocus(true);
setItem(defaultItemValue);
enter.focus();
}
}, 0);
}}>
{props.selectedItems &&
props.selectedItems.size > 0 &&
props.selectedItems.discover((x: any) => x.id === merchandise.id) ? (
<Textual content fashion={{...props.itemTextStyle}}>{merchandise.identify}</Textual content>
) : (
<Textual content fashion={{...props.itemTextStyle}}>{merchandise.identify}</Textual content>
)}
</TouchableOpacity>
);
}
};
const renderListType = () => {
return renderFlatList();
};
const renderTextInput = () => {
const textInputProps = {...props.textInputProps};
const oldSupport = [
{key: 'ref', val: (e: any) => (input = e)},
{
key: 'onTextChange',
val: (text: string) => {
searchedItems(text);
},
},
{key: 'underlineColorAndroid', val: props.underlineColorAndroid},
{
key: 'onFocus',
val: () => {
props.onFocus && props.onFocus();
setFocus(true);
setItem(defaultItemValue);
setListItems(props.items);
},
},
{
key: 'onBlur',
val: () => {
props.onBlur && props.onBlur(this);
setFocus(false);
setItem(props.selectedItems);
},
},
{
key: 'value',
val: item ? item.name : '',
},
{
key: 'style',
val: {...props.textInputStyle},
},
{
key: 'placeholderTextColor',
val: props.placeholderTextColor,
},
{
key: 'placeholder',
val: props.placeholder,
},
];
oldSupport.forEach(kv => {
if (!Object.keys(textInputProps).consists of(kv.key)) {
if (kv.key === 'onTextChange' || kv.key === 'onChangeText') {
textInputProps['onChangeText'] = kv.val;
} else {
textInputProps[kv.key] = kv.val;
}
} else {
if (kv.key === 'onTextChange' || kv.key === 'onChangeText') {
textInputProps['onChangeText'] = kv.val;
}
}
});
return (
<View
onLayout={occasion => {
let {x, y, width, peak} = occasion.nativeEvent.format;
setViewHeight(peak);
}}
fashion={{
flexDirection: 'row',
width: 200,
borderWidth: 1,
borderColor: '#ccc',
}}>
{textInputProps.worth === null ? (
<TextInput
{...textInputProps}
fashion={{
padding: 12,
borderRadius: 5,
justifyContent: 'heart',
alignItems: 'heart',
width: 150,
peak: 50,
}}
onBlur={e => {
if (props.onBlur) {
props.onBlur(e);
}
if (props.textInputProps && props.textInputProps.onBlur) {
props.textInputProps.onBlur(e);
}
setFocus(false);
setItem(props.selectedItems);
}}
/>
) : (
<View
fashion={{
peak: 40,
width: 130,
flexDirection: 'row',
alignItems: 'heart',
justifyContent: 'space-between',
margin: 5,
marginLeft: 10,
marginRight: 10,
backgroundColor: '#d9c979',
borderRadius: 20,
paddingLeft: 10,
}}>
<Textual content numberOfLines={1}>{textInputProps.worth}</Textual content>
<TouchableOpacity onPress={props.onRemoveItem}>
<Entypo identify={'cross'} fashion={{fontSize: 20}} />
</TouchableOpacity>
</View>
)}
<View
fashion={{
width: 48,
backgroundColor: '#454545',
justifyContent: 'heart',
alignItems: 'heart',
}}>
<Entypo identify={'chevron-down'} />
</View>
</View>
);
};
const renderSelectedItems = () => {
let objects = props.selectedItems || [];
if (objects !== undefined && objects.size > 0 && props.chip && props.multi) {
return (
<View
fashion={{
flexDirection: 'row',
flexWrap: 'wrap',
paddingBottom: 10,
marginTop: 5,
}}>
{objects.map((merchandise: any, index: quantity) => {
return (
<View
key={index}
fashion={{
width: merchandise.identify.size * 8 + 60,
justifyContent: 'heart',
flex: 0,
backgroundColor: '#eee',
flexDirection: 'row',
alignItems: 'heart',
margin: 5,
padding: 8,
borderRadius: 15,
}}>
<Textual content fashion={{shade: '#555'}}>{merchandise.identify}</Textual content>
<TouchableOpacity
onPress={() =>
setTimeout(() => {
props.onRemoveItem(merchandise, index);
}, 0)
}
fashion={{
backgroundColor: '#f16d6b',
alignItems: 'heart',
justifyContent: 'heart',
width: 25,
peak: 25,
borderRadius: 100,
marginLeft: 10,
}}>
<Textual content>X</Textual content>
</TouchableOpacity>
</View>
);
})}
</View>
);
}
};
return (
<View
//keyboardShouldPersist="at all times"
fashion={{...props.containerStyle}}>
{renderSelectedItems()}
{renderListType()}
{renderTextInput()}
</View>
);
};
export default SearchableDropdown;
[ad_2]
