Here’s a quick tutorial to get you started playing an mp3 file in an Android app that was built using React Native. This tutorial was developed using Linux (Ubuntu 16.04), React Native 0.61.5, and the React Native Sound package 0.11.0.

First, make your project directory. Let’s call it AudioTmp. In a terminal window, do this:

npx react-native init AudioTmp
cd AudioTmp

All of the following commands assume you’ve got your terminal window open, and you’re standing in the root directory of your project (in AudioTmp, where App.js is located).

You’ll need some extra packages, so run these install commands:

npm install typescript@
npm install eslint@^5.0.0
npm install react-native-sound

Next, as described in the React Native Sound documentation, use the link command:

react-native link react-native-sound

This “links” the library where needed into the android and ios directories.

Now add an mp3 file to your Android project:

mkdir android/app/src/main/res/raw
cp john_bartmann_04_earning_happiness.mp3 android/app/src/main/res/raw

You can download a copy of John Bartmann’s “Earning Happiness” mp3 file here. It has a public domain license; let’s thank John Bartmann for making his cool “Earning Happiness” music open source (original source at Free Music Archive)!

Next, make the utils directory under your project root:

mkdir utils

Add a new file called SoundPlayer.js in the utils directory. Here’s the source for that:

/**
 * Really simple demo of https://www.npmjs.com/package/react-native-sound
 */
const Sound = require('react-native-sound');
/**
 * Audio credit:
 * https://freemusicarchive.org/music/John_Bartmann/Public_Domain_Soundtrack_Music_Album_One/earning-happiness
 * "Earning Happiness" by John Bartmann licensed under a CC0 1.0 Universal License
 * https://creativecommons.org/publicdomain/zero/1.0/
 */
const FILENAME = 'john_bartmann_04_earning_happiness.mp3';

class SoundPlayer {
    constructor(props) {
        console.log("SoundPlayer constructor");
    };
    stopSound() {
        console.log('SoundPlayer.stopSound');
        this.whoosh.stop();
        this.whoosh.release();
    }
    playSound() {
        console.log('SoundPlayer.playSound');
        let me = this;
        me.whoosh = new Sound(FILENAME, Sound.MAIN_BUNDLE, error => {
            if (error) {
                console.log('failed to load the sound', error);
                return;
            }
            // loaded successfully
            console.log(
                'duration in seconds: ' +
                me.whoosh.getDuration() +
                'number of channels: ' +
                me.whoosh.getNumberOfChannels()
            );
            me.whoosh.play(success => {
                if (success) {
                console.log('successfully finished playing');
                } else {
                console.log('playback failed due to audio decoding errors');
                }
            });
        });
    }
}
export default SoundPlayer;

Replace the code in App.js with this code:

/**
 * Simple demo of https://www.npmjs.com/package/react-native-sound
 * The app plays an included mp3 file when the user clicks on 'Play' button.
 * It stops the playback when the user clicks on the 'Stop' button.
 */
import React from 'react';
import {
  StyleSheet,
  View,
    Text,
  Button
} from 'react-native';

import {
  Colors
} from 'react-native/Libraries/NewAppScreen';

/** Keep all sound functionality in separate utils area */
import SoundPlayer from './utils/SoundPlayer';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.soundPlayer = new SoundPlayer();
    }

    onPlayPress() {
        console.log('onPlayPress method');
        this.soundPlayer.playSound();
    }

    onStopPress() {
        console.log('onPlayPress method');
        this.soundPlayer.stopSound();
    }

    render() {
        return (
        <View style={styles.body}>
            <Text style={styles.sectionTitle}>Click button to Play</Text>
            <View style={styles.buttonStyle}>
                <Button style={styles.buttonStyle}
                    onPress={this.onPlayPress.bind(this)}
                    title="Play"
                />
            </View>
            <Text style={styles.sectionTitle}>Click button to Stop</Text>
            <View style={styles.buttonStyle}>
                <Button buttonStyle={styles.buttonStyle}
                    onPress={this.onStopPress.bind(this)}
                    title="Stop"
                />
            </View>
        </View>
        );
    }
};

const styles = StyleSheet.create({
    body: {
        backgroundColor: Colors.white,
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        backgroundColor: 'gainsboro'
    },
    sectionTitle: {
        fontSize: 24,
        fontWeight: '600',
        color: Colors.black,
        padding: 20,
        backgroundColor: 'gainsboro' /* See https://reactnative.dev/docs/colors */,
    },
    buttonStyle: {
        padding: 20,
        backgroundColor: 'gainsboro' /* See https://reactnative.dev/docs/colors */,
    }
});

export default App;

Run the Android Emulator:

emulator -no-snapshot -avd Galaxy_Nexus_API_28

Start your Metro server:

npx react-native start

Install the app in your Android Emulator:

npx react-native run-android

I see these warnings at my command line, but everything seems to work okay:

error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually: 
  - react-native-sound (to unlink run: "react-native unlink react-native-sound")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 875 file(s) to forward-jetify. Using 8 workers...

Then it just works! You can hit the Play and Stop buttons to play the audio.

The source code for this project is available at github.

One remark: when I initially created this project, I didn’t use the link command, because the React Native documentation indicated it was not needed for version 0.60. However, that turned out to be untrue! You can save yourself time by doing it the way I’ve done it in this tutorial. When using link, the demo worked immediately, and I didn’t have to make any changes to gradle files.

Here’s a view of the demo app:

This is part of a series on building a movie locator app in React Native. The first post is available here.

In my last post, I’d given the user the ability to navigate to a new page in the app. In this post, I’ll add a map on that new page. It will display the location of the theater that the user picked.

This is the first part of my app build which requires that you do something different depending on whether you’re working with Android or iOS. The installation instructions are here (as of 2020/03/23). I will be following the build configuration on Android, because I’m using an Android emulator (and a Linux OS, not a Mac, for my builds).

There are 6 steps given in the “build config for Android” section. I went through each of them one by one. I created a separate page which describes exactly what I did to prepare to add a map to my React Native app. Take a look there if you want to know about it in more detail.

In my previous post, I listed the code in MapsScreen.js, which is the page where my map should be displayed:

import React, { Component } from 'react';
import { Text, View } from 'react-native';

export default class MapsScreen extends Component {
    render() {
        return (<View style={[{ flex: 1, justifyContent: 'center' },
        { flexDirection: 'row', justifyContent: 'space-around', padding: 10 }]}>
            <Text>A map goes here</Text>
        </View>);
    }
}

But there’s no map there, yet! I need to add the code that will display a map.

Fortunately, the React Native maps project has an example app on GitHub. I took the time to download this example project, and create an entirely separate React Native project which uses its code. This helped me get my feet wet, and I knew where to look for the code that I needed to add a map: StaticMap.js is a page which displays a simple map. I’m going to take some of that code and add it to my own, as follows:

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import MapView from 'react-native-maps';

export default class MapsScreen extends Component {
    render() {
        return (<View style={[{ flex: 1, justifyContent: 'center' },
        { flexDirection: 'row', justifyContent: 'space-around', padding: 10 }]}>
            <MapView
                initialRegion={{
                    latitude: 37.78825,
                    longitude: -122.4324,
                    latitudeDelta: 0.0922,
                    longitudeDelta: 0.0421,
                }}
            />
        </View>);
    }
}

This is almost the same as my previous render method. The only difference is that I’ve added a MapView component. It includes a mocked initialRegion property (latitude and longitude are static). I just want to get maps working, before adding a real initialRegion.

Unfortunately, when I tested this, I just saw an empty display, aside from the Maps title bar. Ugh! No error messages – just nothing! It was frustrating! Since there were no error messages, I wondered if there was something wrong with the display. The StaticMap example uses a MapView that is styled. So I copied that style, which just specified a width and height, and pasted it into my MapView, like this:

<MapView
    style={{width: 250, height: 250}}
    initialRegion={{
        ...

It worked!! I saw a map, but it looked cramped. I changed the style to {{flex:1}}, and the map filled the page! Excellent! Here’s the current behavior:

The source code for this example – App.js, MoviesScreen.js, and MapsScreen.js – is available online.

In previous posts (start here), I’ve written about building a movie app that a person can use to pick a movie from a list, and then click a button to display theaters where the movie is being shown.

Let’s add some code which allows our user to select a specific theater. Upon doing that, a button will appear which will take them to a new page in the app.

I only want the new button to appear when the list of theaters is populated. Here’s how I ensure that:

render() {
    if (this.state && !this.state.isLoading) {
        ...
        var theatersPicker = null;
        var goButton = null;
        if (this.state.nearbyTheaters) {
            ...
            theatersPicker = <Picker>{theaters}</Picker>
            goButton = <Button onPress={this.handleShowTheaterClick.bind(this)} title="Go"></Button>;
        }
        return <View>
        ...
            <Button onPress={this.handleClick.bind(this)} title="Find Movie Near Me"></Button>
            {theatersPicker}
            {goButton}
        </View>;

The goButton has been initialized to null. It will only be set to a Button if the theatersPicker has a list of theaters. I also added a new, empty method called handleShowTheaterClick (not shown here). The new button will call handleShowTheaterClick when clicked, but since it’s empty, it won’t do anything yet. We’ll get to that later.

You’ll find that the {goButton}line doesn’t show anything if goButton is null. That’s the UX that we want.

At this point, I want handleShowTheaterClick to cause the app to display a new page. This behavior is new! So far, everything has been happening in a single page. We’re getting into navigation, also known as “routing”. It’s how users get around the app from one page to another.

Navigation is not built into the default React Native install. You have to install it as a separate package. I followed the instructions for doing this as given in the documentation, but I got a lot of warnings. It took me about 30 minutes to resolve them, ugh! I kept trying and retrying… One of the errors that I saw in the Metro server terminal window looked like this:

error: bundling failed: Error: Unable to resolve module `react-navigation-stack` from `App.js`: react-navigation-stack could not be found within the project.

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules: rm -rf node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*

This turned out to be misleading. I thought that I need to use yarn, so I installed it, and started using it according the instructions. It could be that this works for some setups, but I’m running Ubuntu 16.04, and I’ve been using npm throughout this exercise. I should have stuck with npm. I learned that if a message mentioned yarn, I should just use npm instead. I suggest you do the same, unless you’re already using yarn to run other commands.

When I finally switched back to using npm, I found there were some warnings about “peer dependencies”. Here is one example:

...
npm WARN @typescript-eslint/eslint-plugin@1.13.0 requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.

I wound up installing each peer dependency when I saw that one was missing. Then I had to go back and install the package which required the dependency again (so it seemed). In the end, I did all these installs in my project root (where App.js lives), in the order given:

npm install eslint@^5.0.0
npm install typescript@>=3.7.0-dev
npm install react-native-gesture-handler@*
npm install @react-native-community/masked-view@^0.1.1
npm install react-native-safe-area-context@^0.6.0
npm install react-navigation-stack
npm install react-navigation

Installing all that stuff was kind of a headache, and I was happy when it was finally done.

A quick read of the navigation documentation told me that I should only have navigation code in my App.js file. My existing application logic should go into a separate “screen” page. I’ll call this new page MoviesScreen.

To do this, I copied all the source of App.js into a new file, which I named MoviesScreen.js. Then I replaced HelloWorldApp in that source with MoviesScreen. Really, just replace

export default class HelloWorldApp extends Component {

with

export default class MoviesScreen extends Component {

Next, I replaced all the code in App.js with this simple navigation code:

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import MoviesScreen from './MoviesScreen';

const MainNavigator = createStackNavigator({
    Movies: { screen: MoviesScreen }
});

const App = createAppContainer(MainNavigator);

export default App;

After doing this, I ran npx react-native run-android in my project root. I’ve learned that running npx react-native run-android sometimes clears up errors, although I’m not exactly sure when or if it’s required (might be a superstition type thing!).

The net result was that my app looked almost exactly the same as it did before! That’s expected, and good, because I only made infrastructure changes, and no functional ones. The only difference now is that there’s a title bar at the top of the display. It reads “Movies”. It’s not beautiful, but I’ll figure out how to deal with that later.

In testing the latest version of my app, I notice there’s one problem: when I select a theater from my “theaters” Picker, the value doesn’t stay selected. I know how to fix that – the same way that I did it for the “movies” Picker. I add similar code for that in MoviesScreen‘s render method:

...
theatersPicker = <Picker selectedValue={this.state.theater}
    onValueChange={(itemValue, itemIndex) => this.setState({ theater: itemValue })
    }>{theaters}</Picker>

Now, my app just works, except for one little problem. The GO button does nothing! Clicking on it should take the user to a new page. I’ll work that out in my next post.

The source code for this new version of App.js and for MoviesScreen are available online.