Thursday, October 29, 2026
HomeiOS DevelopmentScrollview not engaged on android, however works on iOS in react native

Scrollview not engaged on android, however works on iOS in react native

[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]

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments