5

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

Raziel
  • 1,448
  • 2
  • 17
  • 35

2 Answers2

19

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>
Raziel
  • 1,448
  • 2
  • 17
  • 35
9

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>
Charitha Goonewardena
  • 4,418
  • 2
  • 36
  • 38