Listing locations

Prerequisites

This guide goes a step deeper from the React Native Getting Started -guide, which helps you set up a new React Native project from scratch and install Mappedin React Native SDK as a dependency.

Setup

Let's start by setting up our imports, the <App /> component and an empty React Native stylesheet. We will render a list of locations and their descriptions so to keep everything readable, we need to apply some basic styling at the end.

import React from 'react';
import {
FlatList,
ListRenderItem,
Text,
StyleSheet,
View,
SafeAreaView,
} from 'react-native';
import {Mappedin, getVenue, MappedinLocation} from '@mappedin/react-native-sdk';
const App = () => {};
const styles = StyleSheet.create({
loading: {},
container: {},
venueName: {},
item: {},
title: {},
description: {}
});
export default App;

Loading Venue data without displaying a map

It is possible to fetch venue data (locations, maps, etc), outside of the <MiMapView /> component. This can be helpful for cases where a map isn't always needed or there is a need to fetch the data first, and render the map later.

To do that, we need to set up a hook to asynchronously download the data when our <App /> component is rendered. A loading screen is displayed while venueData is not defined. Once the data is received, the component is re-rendered and should display Mappedin Demo - Mall, the name of our demo venue in the top left corner of the screen.

Remember to replace the clientId and clientSecret with the Trial API keys.

const App = () => {
const [venueData, setVenueData] = React.useState<Mappedin>();
React.useEffect(() => {
async function init() {
const venueData = await getVenue({
clientId: '<MAPPEDIN_CLIENT_ID>',
clientSecret: '<MAPPEDIN_CLIENT_SECRET>',
venue: 'mappedin-demo-mall',
perspective: 'Website',
});
setVenueData(venueData);
}
init();
}, []);
if (!venueData) {
return (
<View style={styles.loading}>
<Text>Loading</Text>
</View>
);
}
return (
<SafeAreaView style={styles.container}>
<Text style={styles.venueName}>{venueData.venue.name}</Text>
</SafeAreaView>
);
};

Adding a list view

To display a list of locations, we use FlatList from React Native. <FlatList /> takes the location data and, in this case, we roughly sort it in alphabetical order based on the location name. Because React requires a key for each element, we define a keyExtractor. renderItem function defines how each item is displayed. We are rendering the location name and the description if it has any.

const LocationList = ({locations}: {locations: MappedinLocation[]}) => {
const renderItem: ListRenderItem<MappedinLocation> = ({item}) => (
<View style={styles.item}>
<Text style={styles.title}>{item.name}</Text>
{item.description && <Text style={styles.description}>{item.description}</Text>}
</View>
);
return (
<FlatList
data={locations.sort((a, b) => (a.name > b.name ? 1 : -1))}
renderItem={renderItem}
keyExtractor={(item: any) => item.id}
/>
);
};

To render the list in our application under the venue name, we can now add <LocationList locations={venueData.locations} /> to our <App /> component's return.

return (
<SafeAreaView style={styles.container}>
<Text style={styles.venueName}>{venueData.venue.name}</Text>
<LocationList locations={venueData.locations} />
</SafeAreaView>
);

Styling

To add some basic styles, we can now fill our stylesheet with the following:

const styles = StyleSheet.create({
item: {
color: '#2E2E2E',
backgroundColor: '#FAFAFA',
padding: 8,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 18,
},
description: {
fontSize: 12,
color: '#777',
},
container: {
backgroundColor: '#2E2E2E',
},
loading: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
venueName: {
margin: 16,
fontSize: 24,
fontWeight: 'bold',
color: 'white',
textAlign: 'center',
},
});

Complete code example

import React from 'react';
import {
FlatList,
ListRenderItem,
Text,
StyleSheet,
View,
SafeAreaView,
} from 'react-native';
import {Mappedin, getVenue, MappedinLocation} from '@mappedin/react-native-sdk';
const LocationList = ({locations}: {locations: MappedinLocation[]}) => {
const renderItem: ListRenderItem<MappedinLocation> = ({item}) => (
<View style={styles.item}>
<Text style={styles.title}>{item.name}</Text>
{item.description && <Text style={styles.description}>{item.description}</Text>}
</View>
);
return (
<FlatList
data={locations.sort((a, b) => (a.name > b.name ? 1 : -1))}
renderItem={renderItem}
keyExtractor={(item: any) => item.id}
/>
);
};
const App = () => {
const [venueData, setVenueData] = React.useState<Mappedin>();
React.useEffect(() => {
async function init() {
const venueData = await getVenue({
clientId: '<MAPPEDIN_CLIENT_ID>',
clientSecret: '<MAPPEDIN_CLIENT_SECRET>',
venue: 'mappedin-demo-mall',
perspective: 'Website',
});
setVenueData(venueData);
}
init();
}, []);
if (!venueData) {
return (
<View style={styles.loading}>
<Text>Loading</Text>
</View>
);
}
return (
<SafeAreaView style={styles.container}>
<Text style={styles.venueName}>{venueData.venue.name}</Text>
<LocationList locations={venueData.locations} />
</SafeAreaView>
);
};
const styles = StyleSheet.create({
item: {
color: '#2E2E2E',
backgroundColor: '#FAFAFA',
padding: 8,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 18,
},
description: {
fontSize: 12,
color: '#777',
},
container: {
backgroundColor: '#2E2E2E',
},
loading: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
venueName: {
margin: 16,
fontSize: 24,
fontWeight: 'bold',
color: 'white',
textAlign: 'center',
},
});
export default App;

React Native - List locations

For more examples in topics such as directions and BlueDot positioning in React Native, have a look at our example repository.

Was this page helpful?