Input text is behind icon

Asked

Viewed 51 times

-1

I have a project in reactNative that has an Input at the top and right of that input I have a magnifying glass icon but when I write to that icon, the text is behind the icon, as I do for when the text reaches a 10px distance from the icon it starts to push the text backwards?

Problema

Code

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
}
});
react-native

1 answer

0


Just add a paddingRight:

searchInput: {
    backgroundColor: '#FFF',
    width: '97%',
    borderColor: '#CCC',
    borderWidth: 1,
    marginTop: 5,
    borderRadius: 5,
    padding: 10,
    paddingRight: 50,
}

If "50" still doesn’t work, add more as needed.

Browser other questions tagged react-native

You are not signed in. Login or sign up in order to post.