Search code examples
androidiosreact-nativescrollview

Fixing an element size and adding ScrollView on that

I want to add some more information on the bottom of the page and fix this bottom card portion on this page.But on scrolling i want to view the other informations i want to add at the bottom which will only be shown after scrolling.How can i do that?

enter image description here

I am having this code for now: 

 render(){
    return(
      <View style={styles.container}>
        <MapView style={styles.mapcontainer}
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }} />
        <JobInfo/>
      </View>
    )
  }
}

const styles = StyleSheet.create ({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
  mapcontainer: {
    flex: 1,
    width: width,
    height: height
  }
})

class JobInfo extends Component {
  render() {
    return (
      <View style={{width: '100%'}}>
        <Card>
          <CardItem >
            <Text>General Info:</Text>
          </CardItem>
          <CardItem >
            <Body>
              <Text>
                Click on any carditem
              </Text>
            </Body>
          </CardItem>
          <CardItem >
            <Text>Packaging Info:</Text>
          </CardItem>
            <CardItem >
                <Body>
                  <Text>
                    Click on any carditem
                  </Text>
                </Body>
          </CardItem>
          <CardItem >
              <Text>Manpower Info:</Text>
            </CardItem>
              <CardItem >
                  <Body>
                    <Text>
                      Click on any carditem
                    </Text>
                  </Body>
          </CardItem>
        </Card>
      </View>
    )
  }
}

ScrollView is somehow not working.Any help would be appreciated.Thanks.

Solution

  • try below method

    add JobInfo into a Scrollview . and remove height prop from mapContainer

     <ScrollView style={[{flex:1} ,{ width: '100%'},  {justifyContent: 'flex-start'}]}>
    <JobInfo/>
    </ScrollView>

    And mapContainer is 

        mapcontainer: {
    flex: 3,
    width: '100%',
  }

    Use flex values to adjust height of the map

    Edit 1

    If you want scroll all container (both Map & JobInfo ) you need to set specific height for Map. Wrap all elements to a single ScrollView like below

    <ScrollView style={[{flex:1} ,  {justifyContent: 'flex-start'}]}>
     <View style={styles.container}>
        <MapView style={styles.mapcontainer}
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }} />
        <JobInfo/>
      </View>
  </ScrollView>

    And styles are follows

        const styles = StyleSheet.create ({
  container: {
     flex: 1,
  },
  mapcontainer: {
    width: '100%',
    height:600,
  }
})