Eu tenho um projeto em reactNative que tem um Input no topo e a direita desse input tenho um ícone de lupa mas ao escrever quando chego a esse icone, o texto fica atras do icone, como eu faço para quando o texto chegar a uns 10px de distancia do icone ele começar a empurrar o texto para trás?
Codigo
import React from 'react';
import { View, TextInput, StyleSheet, Image, Text, FlatList } from 'react-native';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { faSearch } from '@fortawesome/free-solid-svg-icons';
export default function Region(){
return(
<View style={style.mainBox}>
<View style={style.searchBox}>
<TextInput style={style.searchInput} placeholder="Pesquise um estabelecimento" />
<FontAwesomeIcon size={22} style={style.searchImg} icon={ faSearch } />
</View>
</View>
);
}
const style = StyleSheet.create({
mainBox:{
flex: 1,
},
searchImg: {
marginTop: 18,
position: 'absolute',
right: 16,
color: '#ccc',
},
searchBox: {
alignContent: 'center',
alignItems: 'center',
},
searchInput: {
backgroundColor: '#FFF',
width: '97%',
borderColor: '#CCC',
borderWidth: 1,
marginTop: 5,
borderRadius: 5,
padding: 10
}
});