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

user_4005708 0
Viewed 2368

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

react-native-elements react-native
2 Answers

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>
user_40057080

Mubeen hussain answer is correct, but to be more precise it's like this

<TouchableOpacity onPress={() => console.log('we hit here')}>
  <View pointerEvents="none">
    <Input disabled>{children}</Input>
  </View>
</TouchableOpacity>
user_63639520
Related