Dismissible & extendable scroll view in React Native - reactjs

Question

I am looking for a way to achieve the effect shown below in React Native. I have already achieved the navigation bar and tab bar setup using React Navigation.
Now comes the part when I integrate a scroll like the one shown below. Effectively there is a view with lots of rows in it. I tried setting this up in a view wrapped in a ScrollView but this is too simplistic as the view just remains fixed on the screen and I'm looking to move the map with the view.
I'm looking for pseudocode if anything. Can anyone with experience in React Native suggest a good layout to achieve this effect?

Answer 1

I had a bit of fun with this. We could achieve the same effect by just creating a simple overlay on your map to display your list of services. The state of the overlay would be rendered visible from a callback on a button and rendered invisible by the 'refresh' or pull-down from an encapsulating <ScrollView />.
Here's what this component renders:
Here's the component class:
import React, { Component } from 'react';
import {
Text,
View,
TouchableOpacity,
StyleSheet,
ScrollView,
FlatList,
Dimensions,
RefreshControl
} from 'react-native';
export default class SO_MapOverlay extends Component {
constructor(props) {
super(props)
this.state = {
// Simple state variable to hide and show service list
serviceListVisible: false,
refreshing: false,
data: [
{ key: 'item1' },
{ key: 'item2' },
{ key: 'item3' },
{ key: 'item4' },
{ key: 'item5' },
{ key: 'item6' },
{ key: 'item7' },
{ key: 'item8' }
],
}
}
// Simply hides the button and shows the list overlay
showRouteOverview() {
this.setState({ serviceListVisible: true });
}
// Reverses showRouteOverview() when the user pulls down
onRefresh() {
this.setState({ refreshing: true });
this.setState({ serviceListVisible: false });
this.setState({ refreshing: false });
}
// Indicate the offset you want from the BOTTOM of the page
renderSpacer(offset) {
const { height } = Dimensions.get('window');
const spacerOffset = height - parseInt(offset);
return (
<View style={{ height: spacerOffset, backgroundColor: 'transparent' }} />
)
}
// Just renders each item in your flat list
renderItem(itemData) {
return(
<View style={[styles.item]}>
<Text style={{ color: 'black'}}>{itemData.item.key}</Text>
</View>
)
}
renderRefreshControl() {
return (
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this.onRefresh.bind(this)}
// Note: I'm just hiding the activity monitor with these paramteres
color='transparent'
tintColor='transparent'
/>
)
}
render() {
const { serviceListVisible } = this.state;
const listHeight = 56 * this.state.data.length;
return (
<View style={styles.container}>
<View style={styles.mapContainer}>
<Text style={{color: 'white'}}>I am map.</Text>
<TouchableOpacity
style={[styles.showRouteOverviewButton, serviceListVisible ? styles.invisible : null]}
onPress={() => { this.showRouteOverview() }}>
<Text>Show Services</Text>
</TouchableOpacity>
</View>
<ScrollView
style={[styles.listContainer, serviceListVisible ? styles.visible : null ]}
refreshControl={ this.renderRefreshControl() }>
{ this.renderSpacer(100) }
<FlatList
style={[styles.list, { height: listHeight }]}
data={this.state.data}
renderItem={(itemData) => this.renderItem(itemData)}
keyExtractor={(item, index) => index}
scrollEnabled={false}
/>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
visible: {
display: 'flex'
},
invisible: {
display: 'none'
},
mapContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'gray',
position: 'absolute',
bottom: 0,
right: 0,
left: 0,
top: 0,
},
showRouteOverviewButton: {
position: 'absolute',
bottom: 40,
backgroundColor: 'white',
paddingHorizontal: 20,
paddingVertical: 10,
},
listContainer: {
display: 'none',
flex: 1,
},
list: {
backgroundColor: 'red'
},
item: {
alignItems: 'center',
justifyContent: 'center',
flex: 1,
padding: 20,
backgroundColor: 'white',
}
});