index2.js

import React from 'react';
import {
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';

import Icon from 'react-native-vector-icons/Ionicons';

const CustomTextInput = () => {
  return (
    <View style={styles.searchTopContainer}>
      <View style={styles.searchContainer}>
        <View style={styles.search}>
          <Icon name="search-outline" size={18} style={styles.searchIcon} />
          {/* TextInput */}
          <TextInput
            placeholder={'Search'}
            style={{fontSize: 16, paddingRight: 20}}
          />
        </View>
      </View>
      {/* Cancel button */}
      <View style={styles.cancelBtnContainer}>
        <TouchableOpacity onPress={() => {}}>
          <Text>Cancel</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default CustomTextInput;

const styles = StyleSheet.create({
  searchTopContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#ecf0f1',
  },
  searchContainer: {
    paddingVertical: 6,
    paddingHorizontal: 10,
    marginTop: 14,
    borderRadius: 12,
  },
  search: {
    flexDirection: 'row',
  },
  searchIcon: {
    marginRight: 4,
  },
  cancelBtnContainer: {
    marginLeft: 5,
    marginTop: 10,
  },
});