You can modify your styles to depend on React Native’s flex attributes to develop a layout where the AutoComplete component covers the remaining space and the icon has a fixed width. Here’s how to go about it:
import React from 'react';
import { StyleSheet, View } from 'react-native';
const App = () => {
return (
<View style={styles.container}>
<View style={styles.row}>
<View style={styles.subContainer}>
{/* AutoComplete component goes here */}
</View>
<View style={styles.icon}>
{/* Icon goes here */}
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 100,
},
row: {
flexDirection: 'row',
height: 50,
},
subContainer: {
flex: 1,
backgroundColor: 'dodgerblue',
},
icon: {
width: 50,
backgroundColor: 'greenyellow',
},
});
export default App;
Support On Demand!
