react-native: absolute Button over TextInput-CodePudding

I try to add a Button to my TextInput and added it using position: absolute like this:

  <View style={{width: '100%'}}>
    <View
      style={{
        position: 'absolute',
        alignItems: 'center',
        justifyContent: 'space-between',
        height: '100%',
        width: '100%',
        flexDirection: 'row',
      }}>
      <Icon
        name="search-outline"
        type="ionicon"
        size={30}
        style={{marginLeft: 8}}
      />
      {value != '' && (
        <Icon
          name="close-outline"
          type="ionicon"
          size={30}
          style={{marginRight: 8}}
          onPress={() => this.setState({value: ''})}
        />
      )}
    </View>
    <MyTextInput
      placeholder="search"
      value={value}
      onChange={val => this.setState({value: val.nativeEvent.text})}
      inputStyle={{paddingLeft: 46}}
    />
  </View>

But whenever I click a Button, the TextInput focusses and I onPress is not getting executed

CodePudding user response：

Render the View after MyTextInput

 <View style={{width: '100%'}}>
    <MyTextInput
      placeholder="search"
      value={value}
      onChange={val => this.setState({value: val.nativeEvent.text})}
      inputStyle={{paddingLeft: 46}}
    />
    <View
      style={{
        position: 'absolute',
        alignItems: 'center',
        justifyContent: 'space-between',
        height: '100%',
        width: '100%',
        flexDirection: 'row',
      }}>
      <Icon
        name="search-outline"
        type="ionicon"
        size={30}
        style={{marginLeft: 8}}
      />
      {value != '' && (
        <Icon
          name="close-outline"
          type="ionicon"
          size={30}
          style={{marginRight: 8}}
          onPress={() => this.setState({value: ''})}
        />
      )}
    </View>
  </View>