React Native is a framework for creating apps, while Felgo is a complete Software Development Kit. With React Native, support for tooling is limited. Commands are run from a terminal and it does not ship with a dedicated IDE for development. Spotify Download Spotify. Mac OS X (Current 10.5) Windows; iOS; Android (Google Play Amazon) Spotify for other platforms. Linux; Windows Mobile; Chromebook; Spotify Company About Jobs For the Record Communities For Artists Developers Advertising Investors Vendors Useful links Support Web Player Free Mobile App.
- Download Spotify App For Android
- Spotify Android React Native App Store
- React Native For Android
- React Native In Android Studio
Smashing Newsletter
- Let’s use this library: react-native-app-auth. Navigate to our new project and install the library: cd AwesomeProject npm install react-native-app-auth -save Create the Authentication Handler.
- React Native Spotify app built in 2 hours 1st Steps Quick Start. Follow the official quick start guide like this: npm install -g create-react-native-app. Create-react-native-app MyCoolSpotify. If you have trouble creating the app or installing dependencies, check out the deps branch from here: https://github.com/benestudio/react-native-ws-2018-feb/tree/deps.
Every week, we send out useful front-end & UX techniques. Subscribe and get the Smart Interface Design Checklists PDF delivered to your inbox.
Maybe you’ve heard of or worked with React, the JavaScript framework developed by Facebook. The social media company took it even further by releasing React Native, which quickly became the most popular framework for building mobile apps with JavaScript. Many companies embraced the idea and started building their apps with it.
In this article, we’ll get an idea of how to develop an application for Android and iOS using Expo and Firebase, based on my own experience of creating an application with these technologies. If you haven’t worked with Firebase before, please look at its guide to JavaScript projects before we dive in.
If you are new to JavaScript, make sure you’re clear on the basics of ECMAScript 6’s features, such as class importing and arrow functions. You can learn React Native from the official documentation, which has a section on React fundamentals, in case you haven’t worked with React. Don’t worry about how to build an app with Android Studio or Xcode, because we will be using the Expo framework.
Recommended reading on SmashingMag:
Brief Description of Project
We can describe our project as an on-demand transporter — you could say Uber for merchandise transportation. The user will choose transportation information, such as the type of vehicle and loading and unloading locations, and then nearby transportation vehicles will appear on the map. The user confirms their request, and the drivers receive notifications one by one. Each driver’s notification is active for 25 seconds. If they ignore or decline the request, the system selects another driver, and so on. When a driver accepts the request, the user can monitor the entire transportation process on the map, including via the web application.
Expo Installation And Configuration
First, we need to install the command line interface (CLI) for Expo, which will help us test to the app in a simulator or on real devices and to build our app in the cloud.
Let’s create our Expo project.
The cool part is that all of your app’s configurations can be done in a single JSON file,
app.json
. Below are some tips I learned that could increase your chances of being accepted in the App Store and Google Play and to help you avoid some common problems.- If you are using Google Maps in your app, be sure to provide the API in the
app.json
configuration file, in order to make it work properly. Google won’t charge you for native map rendering unless you’re rendering directions or using other paid API services. - To make location updates, or any other background tasks, work in the background in iOS, add the following keys under
ios.infoPlist
: - If you don’t define which permissions your app will use, then Expo’s generated app will use all available authorizations by default. As a result, Google Play will reject your app. So, specify your required permissions.
- Apple requires you to provide a message that tells the user why the app is requesting this access, or else you will be rejected.
- Make sure to increment the
android.versionCode
key before you publish a new version to Google Play. - All updates can be done with Expo over the air, without passing by Google Play or the App Store, unless you make the following changes:
- upgrade the Expo SDK version;
- change anything under the
ios
,android
, ornotification
keys; - change the app’s
splash
; - change the app’s
icon
; - change the app’s
name
; - change the app’s
owner
; - change the app’s
scheme
; - change the
facebookScheme
; - change your bundled assets under
assetBundlePatterns
.
- I prefer not to interpret the user experience by setting
fallbackToCacheTimeout
to0
under theupdates
key. This will allow your app to start immediately with a cached bundle, while downloading a newer one in the background for future use.
And here is a complete example of the configuration in
app.json
:Let’s move on to installing Firebase, using the following command:
I prefer to create a
firebase.js
file in the app’s root folder that contains all Firebase configurations. In this case, I’m using only the Firestore and Storage services.Now, whenever we want to use Firebase, we just import this file, as follows:
The documentation has a more detailed explanation of using Firebase with Expo.
The Application’s Database
You can store your data directly in the cloud using Firebase, which offers two types of databases. One is the real-time database, and the other is Firestore, which is considered to be the improved version of the real-time database, with more advanced functionality. Both are NoSQL databases with data sync and instant changes listeners. They have different mechanisms: The real-time database stores data as a JSON object, whereas Firestore stores data as documents in collections. They also calculate usage and cost differently: The former is based on the quantity of data exchanged, and the latter is based on the number of operations in the documents (reads, writes, and deletes).
In my case, I used the Firestore database to store users, requests, vehicles, and other application data. (I was trying to be smart by putting all of my data in one document to decrease operation usage, but then I discovered that each document can store only 1 MB.)
In addition to storing strings, numbers, objects, and so on in Firebase, you can also store a geoPoint, which is an object that contains the coordinates of geographic points (latitude and longitude). Despite this, unfortunately, you cannot make geographic queries, such as retrieving nearby users.
To do that, we can use GeoFirestore. But we have to take into account that this package restricts the document structure of the user to this:
So, if you’re going to implement it directly in your user collection, like I did, then you’ll need to put all of the user’s data in the
d
key.Last but not least, don’t forget to optimize your code to avoid unexpected operations:
- Use offline persistence. On the web, offline persistence is disabled; be sure to enable it.
- Use cursor pagination in Firestore queries. Don’t get all data at once.
- Always unsubscribe listeners, when done, or unmounted components.
The Application’s Back End
You can manage the Firestore database, send notifications with Expo, and perform certain operations directly from the front end or the mobile application, but there are other operations that we cannot do without a back end and a server. This is why Firebase offers functions — a cloud back end that allows you to execute Node.js code on a scalable server. I’ve used the Firebase functions for the following:
- Send notifications (see example below)
To send notifications, we will use push notifications, a tool that helps an app’s owner send messages to their users. It appear in the notifications section of the device, even if the application is not active. We don’t want this process to be stopped by a sudden interruption in connectivity, so we’ll have to use a server. - Run cron jobs
Using cron jobs helps me to manage scheduled requests and notifications. - Sanitize the database
This includes removing useless and ignored requests. - Run sensitive, expensive, or continuous tasks
This includes registering, retrieving users, and scheduling orders. All of these are sensitive operations. If you make them directly from your app or front end, there is a risk of security vulnerability and broken tasks.
Joaquin Cid’s article “How to Build a Role-based API With Firebase Authentication” will give you details on how to get started with Firebase functions and how to create a back-end API using Express. It uses TypeScript, but converting TypeScript to JavaScript is not hard.
Push Notifications
Expo sends a notification to the user’s device from its servers. It identifies the user’s device with a token. When someone uses the application, the app would execute code to obtain the device’s token, and then store this token on the server. I’ve used Firestore as usual to store the token and compare incoming tokens to check whether the user has logged in from another device.
We get our token using the following function:
Don’t forget to request permission to push notifications. The documentation has example usage.
Whenever you want to send a notification to this user, you would make a request to Expo’s server, which contains the user’s device token already stored on your server.
The following is a simple example that sends notifications to all users using Firebase functions. This example is not secure. If you want to implement authorization and authentication, please follow Cid’s article mentioned above.
After initializing our project using the Firebase CLI, let’s install the Express framework to handle our API.
We need to support CORS and add JSON body-parser middleware. This way, we can make requests from any URL and parse JSON-formatted requests.
This is the main
index.js
file of our functions
directory:And this is the
pushNotifications.js
controller, located in the controllers
folder.In the controller above, we got all of the app’s users from Firestore. Each user has a push token. We divided this list into sets of 100 users, because a single request to Expo can hold only 100 notifications. Then, we sent these notifications using Axios.
The following is the
chunkArray
function:This is an example of how to send notifications via our API using Axios.
Maps and Geolocation
Render Native Google Maps in React Native
To render Google Maps in the mobile application, I used
react-native-maps
, and to render directions, I used the react-native-maps-directions
package. For a web application, I would use pure JavaScript.Then, import these packages:
We’ll render the map with markers and directions:
Watch User’s Location in Foreground and Background
The Expo framework supports background location updates, I want to use this feature to get the user’s position. Even if the app is not in the foreground or the phone is locked, the application should always send the location to the server.
If you’ll notice, I’ve used different structures when updating the location to Firestore. That’s because I’m using the GeoFirestore package to query nearby users.
Using WebView in React Native
The application is not only for mobile users, but also for desktop users. So, let’s not spend time developing another application that shares much of the same functionality, such as login and registration, profiles and settings, and orders history.
On the app website, we check whether the user came from a desktop browser or the mobile application. We then redirect them to the corresponding application.
For a mobile application, we have to implement some sort of communication between the native app and WebView app, thanks to the JavaScript injection of
postMessage
and onMessage
in WebView. But be careful when and how you use it:Security Warning: Currently,onMessage
andpostMessage
do not allow specifying an origin. This can lead to cross-site scripting attacks if an unexpected document is loaded within aWebView
instance. Please refer to the MDN documentation forWindow.postMessage()
for more details on the security implications of this.
— React Native documentation
We’ll send data from web JavaScript to React Native. Here is an example of sending a user ID:
We’ll listen to data coming from the web in WebView.
Let’s send data from React Native to the web. The following example sends a location retrieved from React Native.
We’ll read the location on the web:
The Web Application and Website
All web-related parts, from the website to the web application, were made with Next.js and hosted on Netlify for three main raisons:
- cost-effectiveness
There is no server to maintain, and Netlify’s free plan is more than enough for my needs. Unlimited private repositories are now free on GitHub, so nothing to worry about there. - effortless development
Commit, push, and let Netlify do the rest. Is anything simpler than that? - speed
The websites are static and all hosted on a content delivery network (CDN). When a user requests these websites, the CDN directs them to the nearest copy in order to minimize latency. So, the websites are extremely fast.
Limitations of Expo
There are two approaches to building an app with Expo: the managed workflow, where you write only JavaScript, and Expo tools and services do the rest for you, and the bare workflow, where you have full control over all aspects of the native project, and where Expo tools can’t help as much. If you plan to follow the first approach, then consider Expo’s limitations, because some functionality that exists in major apps, such as Spotify (for example, music playing in the background) and Messenger (call notifications), cannot be done yet.
Conclusion
Expo is an excellent choice if you are not familiar with native development and you want to avoid all of the headaches associated with creating and regularly deploying an application. Firebase can save you a lot of time and work, because of its scalability and variety of services. However, both are third-party services, over which you have no control, and Firestore is not designed for complex queries and data relationships.
Thanks for your attention. I hope you’ve enjoyed this article and learned something new.
(ra, yk, il, al)
Generators that build seed applications for you from templates appear to be thenorm among front-end ecosystems. A recent foray into app develop prompted me tocheck out React Native. Right from the start, the documentation recommendscreating a project from a generator — and the project it creates is big. Itthen doesn’t go on to explain what each of the individual files are doing.
I’m not a fan of this approach. I decided to create a new project from scratchand try to get it working in an Android emulator. This post follows thatjourney.
This app will not be ready for production. It is intended to be the startingpoint from which you can add what you need, when you need it. The goal here isto get something running.
Creating a React Native application
A minimal React Native application is simple. The hard part was getting itrunning on Android, but we will get to that later. The React Native applicationitself is just four files:
App.json
app.js
index.js
package.json
Starting with
package.json
, since that manages the packages, include React andReact Native, and with appropriate versions:The two files above it are necessary just to get things working.
index.js
must register the application:app.json
need only include the name of the application:The final file is the interesting one. This is where the layout logic lives.
If you’re curious about the odd HTML-like syntax, that’s JSX. JSX simplyprovides syntactic sugar to covert those tags into Javascript functions. Ifyou’re curious about the meanings of the tags themselves, check out the APIdocs.
Creating the Android component
In order to run this on Android, a valid Android project must be created in asub-directory called
android
in the root of the project. A valid Androidproject is composed of numerous files.Download Spotify App For Android
First we have the core Java files that comprise of the application itself.
app/src/main/java/com/myminimalapp/MainActivity.java
app/src/main/java/com/myminimalapp/MainApplication.java
We also have the Android manifest file used by the build tools and the Androidoperating system, as well as the styles file used to declare the app theme inthe manifest.
app/src/main/AndroidManifest.xml
app/src/main/res/values/styles.xml
And finally, we have the Gradle files used to build the project. I’ve onlyincluded the Unix-specific
gradlew
file here, but on Windows you would have agradlew.bat
file. These files serve as wrappers for Gradle so that it can beexecuted without installation on the local machine.build.gradle
gradlew
settings.gradle
app/build.gradle
The first Java class,
MainActivity
, has little boilerplate needed.The name of the main component of the application must be stated so that ReactNative knows which component it must render.
Spotify Android React Native App Store
The second Java file,
MainApplication
, must implement the one method ofReactApplication
.ReactNativeHost
has two abstract methods that must be implemented. The finalmethod, getJSMainModuleName()
, must be overridden so that the correctJavascript file is executed on startup.React Native For Android
AndroidManifest.xml
points to our MainActivity
and MainApplication
classes, sets the app theme, declares necessary permissions, and specifies thecore behaviour on startup. android:usesCleartextTraffic
is necessarystarting from Android API level 28.React Native In Android Studio
The app theme is declared in
styles.xml
.With that, the final step is to flesh our the build system.
gradlew
is afile generated by invoking Gradle inside the project.This will also generate a
gradlew.bat
executable for use on Windows.settings.gradle
declares the nested app
project inside the Android project.The two
build.gradle
files are all that’s left.This is the root
build.gradle
file. It declares the Android API versions touse and necessary dependencies.The one inside
app
is more complex.Where we can, we import the values used in the root
build.gradle
file.Otherwise, this file is again about declaring dependencies.Running the app
Before you can see this app running on an emulator, you’ll need to set up yourlocal environment:
From the root project directory (not the Android project directory), start theMetro bundler.
Then, start the Android component.
You should then see the app load up in your emulator.
Where to go from here
Most of this was learnt by taking apart a sample React Native project and seeingwhat I could get away with removing. Now it’s time to add things back in.
Even if a snappy UI was added and the app did something useful, it wouldn’t beready to go onto the Play Store. There are steps that must be taken to get anapp production-ready, but there are numerous tutorials covering that process.Until we get to that point, we have a codebase where we know the purpose ofevery file in it. If we run into a problem down the road, we’re more likely toknow how to fix it because we built the application from the ground up. Withthe foundation in place, the rest of the journey is about incremental iteration.