I'm struggling to position the Avatar element over my TextInput to create a traditional search bar appearance. However, the icon isn't overlapping the TextInput. Could you please explain why it's not working or suggest a more effective way to place the search icon above the TextInput? Thank you.
import { Avatar } from 'react-native-elements';
import FontAwesome from './node_modules/@expo/vector-icons/fonts/FontAwesome.ttf';
import MaterialIcons from './node_modules/@expo/vector-icons/fonts/MaterialIcons.ttf';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {timePassed: false};
}
state = {
fontLoaded: false
};
async componentWillMount() {
try {
await Font.loadAsync({
FontAwesome,
MaterialIcons
});
this.setState({ fontLoaded: true });
} catch (error) {
console.log('Error loading icon fonts', error);
}
}
render() {
setTimeout(() => {
this.setState({timePassed: true})
}, 4000);
if (!this.state.timePassed) {
return <Splash/>;
} else {
return (
<View style={BackStyles.container}>
<Avatar style={BackStyles.searchIcon} icon={{ name: 'search', size: 25 }}/>
<TextInput placeholder="Search for your herbs.." underlineColorAndroid={'transparent'} style={BackStyles.textBox}/>
</View>
);
}
}
}
const BackStyles = StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'flex-start',
alignSelf: 'stretch',
flex: 1,
backgroundColor: '#E2E2E2',
marginTop: 20,
},
textBox: {
flex: 1,
height: 45,
padding: 4,
paddingLeft: 20,
flexGrow: 1,
color: '#000',
backgroundColor: '#fff',
},
searchIcon:{
position: 'absolute',
alignSelf: 'stretch',
height: 45,
flex: 1,
top: 50,
flexGrow: 1,
padding: 4
}
});