6 Easy Steps to a React Native Proximity App

Posted by in Locly Native Tutorials

Locly Native is a simple, easy to use platform for creating location aware, content-based apps for Android and iOS smart phones and tables.  All app creation and editing is done via our simple web screens – which is sort of like WordPress – along with real-time previewing on any mobile device using the free Locly Native app.  The platform is packed full of great interactive features, such as maps, POI images, photo galleries, tappable 360 panoramas and notifications to name but a few, and we’ve tried to make this process as easy as possible. Let’s also not forget that your app will be built in React Native, possibly the best app technology platform, ever! It’s slick, lightening-fast, works across multiple platforms….and we’re a BIG fan!

Our aim with Locly Native is to appeal to everyone from app novices to professional developers.  App first-timers can use the simple web screens to create a professional app in just a few hours. Seasoned app creatives can enjoy getting stuck into our json code and customize-away to their hearts content!  But whatever category you fit into, you can get started by following this step-by-step guide to our app build process.

QR code for Locly Native app demoNote: If you can, download the Locly Native app from Google Play or the App Store and scan the QR code. You can then see live examples of all the app features described below.  (View a PDF on how to do this).

Examples of Locly Native mobile app themes for React Native

1. Create a Great-Looking Theme

When you’re ready to start building your app we will place a blank template in your Locly account to work on.  The blank app will include a generic theme stylesheet to start you off – very similar to a theme in WordPress. You can then either request further customisation from us (which is included in the app setup cost), or do it yourself directly using the JSON (JavaScript Object Notation) code – which is a bit like CSS. Styles you can customize include background/foreground/border colours, Google web fonts, text-box margins/padding, headings, body text, buttons, captions, image layouts etc. and these will be applied across the entire app for both Android and iOS devices (although there may be some slight differences in appearance on the different platforms).

Demo app: This app uses a light theme, where the background colours are lighter than the text. All colours, font sizes, margins etc can be customized to suit your brand. The font is Source Sans Pro Google web font, but the app can support any Google Web Font.

Card types available on the Locly Native pltform for your React Native app

2. Create Some Great Content

Card Types
Content in Locly Native is displayed as ‘Cards’, which will automatically adopt your theme styles. Clicking on ‘Add Card’ will bring up 16 options to choose from, these are: audio, before/after, content, discovery grid, HTML, image, link, loyalty, pdf, panorama, points of interest, selfie, video, website, widget and YouTube. In most of these instances, card creation is as simple as copy/pasting some text, uploading an image and/or pasting a link. Some are slightly more involved (but still straightforward) such as the points of interest card, discovery grid (treasure hunt) and loyalty card. Or you can go 100% custom by pasting in your own code!  The ‘Content’ card is the simplest but most flexible card for images and text, to which you can also add audio, maps, video, buttons, tappable images and areas, links to other content in the app and external links.

Demo app: Tap on ‘Card Types’ in the main menu so see examples of all the different types available. Next tap on ‘Contact Card Styles’ to see how titles, headers, paragraph text, buttons and bulleted lists can look.

Content Structure
You can give your content structure by organizing your ‘Cards’ into ‘Collections’. The same card can appear in any number of different collections. Similarly, collections and also be included in other collections. For example, the main menu of the demo app is a collection, which contains both cards and collections e.g. ‘Card Types’ is a collection.  This gives you maximum flexibility for your content, especially when linking individual bits of content to individual GPS locations or beacon devices. Links to cards and collections can also added to the Points of Interest card and 360 Panorama card – tappable tags on the image will take you to a card/collection.

Using Templates
Once you’re happy with a card or collection, and want to make more of the same, you can either use the ‘Duplicate’ option – which makes an exact copy of the card/collection for you to rename – or create a ‘Template’.  Once a template has been created, the next time you click on the ‘Add Card’ or ‘Add Collection’ button, you can select ‘From Template’ to see any available templates.

Demo app: In the main app menu, the top 3 sections – ‘Card Types’, ‘Collection Layouts’ and ‘Map Features’ – are all collections, whereas ‘Partners’ and ‘Contact us’ are both cards.

Cover types available on the Locly Native pltform for your React Native Mobile appContent Covers
One important feature of every card and collection is the ‘Cover’. This is how you can change the layout/look of your content, for both design and usability reasons. There are currently 4 options for card covers: Full Bleed, Info Card, Avatar and List, and you can customize how these look in the app theme (font, header style, background colour, border etc.) Additional layouts include grid layout, and horizontal-scrolling layout, which can be applied by following instructions in the documentation. (Quick note: a card or collection can only ever have one cover style – which is applied across the app.  However, card cover styles can be standardised for a particular collection, by overwriting the cover styles that collection e.g. you can apply an ‘Avatar’ cover style to all cards/collections listed in the ‘Bookmarks’ collection, instead of having a mishmash of cover styles).

Demo app: The main app menu shows a mix of ‘Full Bleed’ and ‘Avatar Cover’ types to create a more interesting layout.  To see examples of all the different cover types tap on the ‘Collection & Cover Layouts’ collection.

How to add iBeacon, Geolocation and Physical Web to your Locly Native mobile app

3. Pin Content to Places & Spaces

Cards and collections can easily be pinned to specific locations using either Geolocation by placing a pin on a map in the editor) and/or iBeacon devices (by adding the beacon UUID, major and minor numbers).  In addition, every card is automatically given a Physical Web URL which can then be assigned to any Eddystone beacon, and therefore picked up by nearby Android devices (and iOS devices if they have the Chrome app installed). This link, together with other settings can be found under the ‘Location’ tab.

If cards of collections are given location information they are automatically placed at the top of any list. They will also automatically be ordered by proximity, with the nearest at the top. However this can by easily overwritten on a collection basis, if needed. Cards/collections with ‘Info Card’ cover styles will automatically display the distance on the cover too, indicating distance to that location to the end-user.

Demo app: All cards in the ‘Collection Map Icon’ collection, found under ‘Map Features’, have Geolocations.  Also, because they have Info Card covers, they show distance in the top left hand corner of the cover.

iBeacon treasure hunt example for a Locly Native mobile app4. Add Some Clever Dynamic Content

With Locly Native you can also easily add visibility rules to cards/collections and therefore control how the app shows content. This can be as simple as turning a card/collection ‘on’ or ‘off’ at a certain time of day, or on a particular date.  Other options are to show specific content according to user location and behaviors e.g. when entering/leaving a beacon zone or geofenced area, distance form a location, repeat visits etc. This function is popularly used alongside our ‘Discovery Grid’ and ‘Loyalty’ card types to encourage end-users to repeatedly visit one GPS/beacon location, or visit a number of different locations to receive a reward e.g. a free drink on the 6th visit to a coffee shop, a prize for finding the 8 objects in a museum, a certificate for collecting 6 badges. Most of this functionality is included in our Standard App Package, however you may need some additional work if your rules are complex or need customisation, and integration into other systems. Details on how to setup these features are in our documentation, but help is on hand from if needed.

Demo app: Tap on the ‘Card Types’ in the main menu and then scroll down to ‘Discovery Grid’. Try tapping on the flower pictures to simulate finding/unlocking cards when nearby (which can be done by beacon device or geolocation). You can have as many items in the grid as you like, and use your own images and text.

Sending a geolocation / ibeaon notification to a Locly Native app

5. Setup Some Notifications

Notifications allow your app to send the user a snippet of information either when the app is active, or in the background e.g. in a bag/pocket. Locly Native notifications can be split into three types: Blanket Push, Beacon and Geo. Blanket ‘push’ notifications can be sent out to all app users at anytime via the online editor. iBeacon notifications can be triggered when a device interacts with a beacon, and a Geo notification will trigger when the device enters/exits geofenced zones. It is generally advised that you use app notifications sparingly, and only when/where relevant to avoid annoying your users! Locly Native users are successfully using notifications to inform users that they’re nearby a point of interest, to deliver specific special offers, to request feedback, to promote an important event and to advise on any app updates.  Blanket ‘push’ notifications are sent out by clicking on the ‘Speech Bubble’ icon in the left-hand menu bar.  Beacon and Geo notifications are set up by clicking on the ‘Notification’ tab in the top blue bar (as in the screenshot above).

How to update and preview content in your Locly Native mobile app

6. Preview & Publish to the Stores

Preview using the Locly Native App
As soon as the blank app is in your account – even before you’ve started playing with the theme or creating content – you can preview it on any Android or iOS device.  All you need to do is install the free Locly Native app on your device and scan the unique QR code for your app. Anyone with the Locly Native app and your unique QR code can see the app whilst in development – very handy for giving demos and sharing projects with clients and colleagues. Agencies with multiple apps in development can view them all using this one preview app. If you don’t have a device to preview on, there is also a handy web-view in the editor for you to view (cards only). Any changes you make in the online editor will appear in the preview app when the ‘Reload’ button is pressed.

Showing the publishing options for your Locly Native mobile appDraft, Preview and Publish modes
What content you see in the app will depend on its status: ‘Draft’, ‘Preview’ and ‘Publish’. When you create a new card/collection it will be set to ‘Draft’ mode by default, so you can see it in the editor, but not in the preview app.  To see it in the preview app you need change the setting to ‘Preview’ which will make it visible to anyone with the Locly Native app and your unique QR code. When you’re happy with your new content, simply change the status to ‘Publish’ and it will be included in any new version of the live app.

Publish updates to your live mobile app using Locly Native
Store Publishing
Publishing your app to the stores for the first time can be a bit of a faff, and there are some extra bits and pieces you will need to prepare for this, such as an app icon, startup messages (optional), startup video (optional), app description and screenshots.  You can upload much of this information to the online editor which will help speed up the process.  Look for the grey Apple and Android icons in the left-hand menu bar. We can help out if needed and can also submit an app on your behalf. The approval process for Android Apps on Google play is a few hours, whereby it can take up to a week or two to publish to the App Store (worth bearing in mind if you’re on a deadline). Once the app is in the stores you can easily push updates to it at anytime by clicking the ‘Publish’ button in the editor (see screenshot above), without having to go through the approval process again.


Ready to try it for yourself?

We hope you’ve found this overview helpful. If you’d like to have a go at creating your own app and explore what other features are available, then why not request a demo account.  We also have a network of creative partners who can develop apps on your behalf, so please get in touch with us and we’ll connect you with someone in your area.

Related Links:

Locly Native Platform Overview 2017 PDF
Locly Native Features PDF
Locly Native Theme Examples PDF