Stacking Different View in React-Native Failed

Question

I am attempting to implement a page in react-native with a Map component on the botton, and I am also trying to put a overlapping scroll view on top of the Map view without influencing the functionality of it. However, I am having trouble making this work. Currently I made it so that if the List is commented out the map could be displayed without any error, but once the list is added it got pushed all the way up and no longer display properly.

This is my Bottom Map component

<View style={styles.container}>
        <TouchableOpacity style={styles.button} onPress={openModal}>
          <Text style={styles.buttonText}>Find Place</Text>
        </TouchableOpacity>

        <Modal
          visible={modalVisible}
          animationType="slide"
          transparent={false}
          style={styles.modal}
        >
          <View>
            <TextInput
              style={styles.input}
              placeholder="Search the Type of Restaurant here"
              value={search}
              onChangeText={setSearch}
              onSubmitEditing={handleSearch}
            />
            <Button title="Close Modal" onPress={closeModal} />
          </View>
        </Modal>
        
        <MapView
          style = {styles.map}
          region = {curRegion}
        >
          {markers}
          <Marker
            coordinate={{ latitude: 36.143, longitude: -86.8 }}
            title="Marker 2"
          />
        </MapView>
       
        
    </View>

This is my scrollView

<Animated.ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{
          paddingBottom: 200,
          backgroundColor: 'transparent',
          marginTop: -100,
        }}
        onScroll={Animated.event(
      [{ nativeEvent: { contentOffset: { y: scrollY } } }],
      { useNativeDriver: true },
      () => { },          // Optional async listener
    )}
    style={[{ paddingTop: imageHeight }]}> 
    <Animated.View style={[
      styles.block,
      {
        borderTopLeftRadius: animateBorderRadius,
        borderTopRightRadius: animateBorderRadius
      }
    ]}>
      <Text>Hello</Text>
      <Text>World</Text>
    </Animated.View>
    <View style={{ height: 0.4 * deviceHeight }}></View>
  </Animated.ScrollView>

How I use them together

<View style={styles.container}> 
  <SafeAreaView style = {{flex : 1}}>
    <Map style={styles.theMap}/>
    <List
      scrollY={scrollY}
      style = {styles.scrollView}
    />
  </SafeAreaView>
 </View>

I attempted to use zAxis, and making the map absolute position and assign a height but they all failed.

score 0 · Answer 1 · answered Jul 10 '23 at 05:02

Define position of both children to absolute and control position with top, right, bottom, and left and size with width and height.

Something like this for full screen children on top of each other:

<View style={{flex: 1}}>
  <View style={{position: 'absolute', width: '100%', height: '100%'}}>
    <Text>Map</Text>
  </View>
  <View style={{position: 'absolute', width: '100%', height: '100%'}}>
    <Text>List</Text>
  </View>
</View>

Stacking Different View in React-Native Failed

1 Answers1