I have a screen that looks like this:
return (<SafeAreaView><View style={styles.container}><View style={styles.topContainer}><View style={styles.searchFieldContainer}><FavoritePointInput textChangeHandler={textChangeHandler} /></View><LocationsFound addressesFound={locations.favAddressesFoundList} /> {/* <View style={styles.fixed}> */}<View style={styles.fieldDescription}><Text>Set Location's Name:</Text></View><View style={styles.searchFieldContainer}><Item style={styles.searchField}><Input placeholder="Library" onChangeText={(text) => setLocationName(text)} style={styles.searchText} /></Item></View><View style={styles.buttonContainer}><Button style={styles.button}><Text>Save Location</Text></Button></View></View></View> {/* </View> */}</SafeAreaView> );Its Stlyes are as like this:
export const styles = StyleSheet.create({ container: { height: '100%', width: '100%', }, topContainer: { height: moderateScale(750), }, topTextContainer: { flexDirection: 'row', justifyContent: 'space-between', marginVertical: moderateScale(15), height: moderateScale(30), paddingLeft: moderateScale(30), paddingRight: moderateScale(30), }, topMiddleContainer: { alignItems: 'center', }, topMiddleText: { justifyContent: 'center', paddingBottom: 40, }, searchFieldContainer: { alignItems: 'center', height: moderateScale(120), }, button: { width: moderateScale(120), borderRadius: moderateScale(20), alignItems: 'center', alignContent: 'center', }, buttonContainer: { flexDirection: 'row', justifyContent: 'center', }, searchField: { width: moderateScale(300, 0.3), height: verticalScale(40), marginVertical: moderateScale(3), borderRadius: verticalScale(10), }, fieldDescription: { alignItems: 'center', }, fixed: { position: 'absolute', }});When I write something in the first input field, I get search results through the LocationsFound component. That disturbs the whole style and pushes the second input field downwards. I want it to simply overlap and come on top of the second field until one of them is selected. Is that possible?
