I am currently working on a screen design that resembles the following:
return (
<SafeAreaView>
<View style={styles.container}>
<View style={styles.topContainer}>
<View style={styles.searchFieldContainer}>
<FavoritePointInput
textChangeHandler={textChangeHandler}
/>
</View>
<View style={styles.dropdown}>
<LocationsFound
addressesFound={locations.favAddressesFoundList}
/>
</View>
<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>
</SafeAreaView>
);
The styling for this layout is as follows:
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',
},
dropdown:{
position: 'absolute',
top: 200,
}
});
Currently, I am facing an issue where the search results from the LocationsFound component are hiding behind the second input field once they appear. I would like these results to overlap and be displayed on top of the second field until a selection is made. Is there a way to achieve this?