react-nativereact-native-elements

React Native Elements - Wrapping a touchable opacity around an input does not work in IOS

I am having a very peculiar issue with React Native Elements Text Input along with using touchable opacity.

import React, { useState } from 'react';
import { TouchableOpacity, View, Dimensions } from 'react-native';
import { Input } from 'react-native-elements';

const test = () => (
  <TouchableOpacity onPress={() => console.log('we hit here')}>
    <Input disabled>
      {children}
    </Input>
  </TouchableOpacity>
)

export default test;

So the outer rim of the input field is completely clickable, however, the center of the component, it cannot be clicked.

This works perfectly for android however.

Any ideas

Solution

  • if anyone has this issue, then the you need to supply a pointerEvents to 'none' for the entire component to be clickable:

    <View pointerEvents='none'>
<Input disabled>
      {children}
    </Input>
</View>