Filter issue while using Search/Filter logic - React Native

Question

I am struggling with my React Native App!!!!
I have a simple Flatlist.
I have a TextInput that has a filter option.
Click inside the TextInput. A dropdown of filter appears.

Click on that Filter it appears inside the TextInput.

Need some help in styling this!!! It should look somewhat like this. If not to this extent at least a box around it is fine.

I tried it with a Button - React Native elements. It's so so so frustrating. I cannot use any 3rd party libraries (company policy).

TextInput Code:

                      <Icon type='materialicons' name='search'  />    // search icon


                      <Button icon={<Icon name="check"/>}.  //my attempt to create a button around the filter 
                              type='clear' title ={val}
                              onPress={()=>{this.handleFilterIcon(false); this.setFilt(false)}}/>



                  <TextInput       // Text Input
                    value={value} 
                    placeholder='Search Here...'
                    onChangeText={(text)=>{this.handleSearch(text, true);this.renderDropDown(false)}}  
                    onTouchStart={()=>{this.setTempNotifications();this.renderDropDown(true)}}
                    style={{ height: 40, flex: 1}}
                    autoCapitalize='none'
                    selectTextOnFocus={true}
                    label='input'
                  />

                  <Icon type='materialicons' name='cancel' onPress={()=>{} /> // Clear Icon

                  <Button title='Cancel' 
                  buttonStyle={{backgroundColor:'#D3D3D3', borderColor: 'grey', borderRadius: 6 , borderWidth: 1, height: 40}}
                  onPress={()=>{} />   // Cancel button

Anyone please tell me the most efficient way to do this!!!

Answer 1

The only way I'm seeing is, since you don't have to use third party libraries is this:

1. Create a an empty label next to the input. Wrap these two with a div with position:relative
2. As soon as input is entered, put the same text in this label. Customise this label with styling: position:absolute;background:grey...

Just to give you some idea, here's an implementation in JQuery. You have to take this forward and ask specific question where you're struggling.

function inputChange(val){
  $('label').text(val);
  $('input').val("");
}

label{
  border:1px solid;
  border-radius: 5px;
  position: absolute;
  background: grey;
  left:2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
 <input type="text" onchange="inputChange(this.value)"/>
  <label></label>
</div>

In React the same implementation could look something like this. You can create a file with this implementation, import in your App.js and see. Take this idea fowrward and change the styling and behaviours as per the need.

import React, { Component } from 'react';
class CustomInputTextstyling extends Component {
    constructor(props) {
        super(props);
        this.state ={
            inputText: ""
        }

    }

    handleInputChange(e){
      this.setState({inputText: e.target.value});
    }

    render() {
        const wrapperDiv = {
            position: 'relative'
        }

        const label = {
            border:'1px solid',
            borderRadius: '5px',
            position: 'absolute',
            background: 'grey',
            left:'2px'
          }
        return (
            <div style={wrapperDiv}>
                <input type = "text" onBlur = {this.handleInputChange.bind(this)}></input>
                <label style={label}>{this.state.inputText}</label>
            </div>
        );
    }
}

export default CustomInputTextstyling;