TouchableOpacity is not working inside ScrollView

Question

I am trying to implement A suggestion box for a text field. While entering input the suggestion box should appear just below to current text field and over the next input filed, This suggestion should scroll after a maxHeight. I am have implemented everything just the Touchable is not working inside ScrollView, if I replace ScrollView with simple View Touchable Works but the container will not scroll of course.

How to deal with this?

import React from 'react';
import {
  View,
  StatusBar,
  ScrollView,
  TextInput,
  Text,
  SafeAreaView,
  TouchableOpacity,
} from 'react-native';
const TestScreen = () => {
  const [val, setVal] = React.useState('');
  const [show, setShow] = React.useState(false);
  return (
    <>
      <SafeAreaView style={{flex: 1}}>
        <TextInput
          placeholder="Text"
          value={val}
          style={{zIndex: 1}}
          onFocus={() => setShow(true)}
          onBlur={() => setShow(false)}
          onChangeText={t => {
            setShow(true);
            setVal(t);
          }}
        />
        <TextInput placeholder="Text" value={val} style={{zIndex: 1}} />
        {show && (
          <View style={{position: 'absolute', top: 50}}>
            <ScrollView
              style={{
                elevation: 5,
                zIndex: 5,
                backgroundColor: 'white',
                width: 100,
                maxHeight: 50,
              }}>
              <TouchableOpacity onPress={() => setVal('Item1')}>
                <Text>Item1</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => setVal('Item2')}>
                <Text>Item2</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => setVal('Item3')}>
                <Text>Item3</Text>
              </TouchableOpacity>
            </ScrollView>
          </View>
        )}
      </SafeAreaView>
    </>
  );
};

export default TestScreen;

Please let me know where I am wrong.

Answer 1

So If you are looking for the answer to this problem. Just remove the onBlur function props from TextField component. Here you go, you got your own custom textfield suggestion box.

Here the solution code that helped to get this done. I still don't know it is the best idea but It worked for me atleast.

import React from 'react';
import {
  View,
  StatusBar,
  ScrollView,
  TextInput,
  Text,
  SafeAreaView,
  TouchableOpacity,
} from 'react-native';
import {Button} from 'native-base';
const TestScreen = () => {
  const [val, setVal] = React.useState('');
  const [show, setShow] = React.useState(false);
  return (
    <>
      <SafeAreaView style={{flex: 1}}>
        <TouchableOpacity
          style={{flex: 1}}
          activeOpacity={1}
          onPress={() => {
            if (show) {
              setShow(false);
            }
          }}>
          <TextInput
            placeholder="Text"
            value={val}
            style={{zIndex: 1}}
            onFocus={() => setShow(true)}
            onChangeText={t => {
              setShow(true);
              setVal(t);
            }}
          />
          <TextInput placeholder="Text" value={val} style={{zIndex: 1}} />
          {show && (
            <View
              style={{
                position: 'absolute',
                top: 50,
              }}>
              <ScrollView
                style={{
                  elevation: 5,
                  zIndex: 5,
                  backgroundColor: 'white',
                  width: 100,
                  maxHeight: 50,
                }}>
                <TouchableOpacity
                  onPress={() => {
                    setShow(false);
                    setVal('Item1');
                  }}>
                  <Text>Item1</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => setVal('Item2')}>
                  <Text>Item2</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => setVal('Item3')}>
                  <Text>Item3</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => setVal('Item4')}>
                  <Text>Item4</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => setVal('Item5')}>
                  <Text>Item5</Text>
                </TouchableOpacity>
              </ScrollView>
            </View>
          )}
        </TouchableOpacity>
      </SafeAreaView>
    </>
  );
};

export default TestScreen;