Skip to main content

Manage Songs in the TikTok-Style React Native App

The composer can display a song catalog so users can attach audio to videos or posts. The catalog is usually stored in Firestore and points to media hosted in Firebase Storage or another CDN.

Quick Answer​

Create a composer_songs collection in Firestore, add one document per song, include title, artist, cover URL, duration, and stream URL fields, then open the song picker in the app and confirm songs load and play.

Collection​

Common collection name:

composer_songs

Confirm the collection name in your package:

rg "composer_songs|SongPicker|songs" src

Document Fields​

Use one document per song:

{
  artist: 'Artist Name',
  title: 'Song Title',
  coverURL: 'https://example.com/cover.jpg',
  duration: '00:28',
  streamURL: 'https://example.com/song.mp3'
}

Recommended field rules:

FieldTypeNotes
artiststringArtist or creator name.
titlestringSong title shown in the picker.
coverURLstringHTTPS image URL for the cover artwork.
durationstringDisplay duration, such as 00:28.
streamURLstringHTTPS audio URL.

Use valid HTTPS URLs. If you upload audio or cover files to Firebase Storage, make sure Storage rules allow the app to read those files.

Add Songs​

  1. Open Firebase Console.
  2. Go to Firestore Database.
  3. Create or open the composer_songs collection.
  4. Add a document for each song.
  5. Add the required fields as strings.
  6. Save and reload the song picker in the app.

Where the App Reads Songs​

File names vary by package version. Search instead of relying on a fixed line number:

rg "SongPicker|composer_songs|streamURL|coverURL" src

The song picker screen usually fetches the Firestore collection and passes the selected song into the composer flow.

Verification Checklist​

  • composer_songs exists in Firestore.
  • Each song has all required fields.
  • Cover URL opens in a browser.
  • Stream URL opens in a browser or supported audio player.
  • Song picker displays songs.
  • Selecting a song returns to the composer.
  • Composer stores the selected song metadata on the post.

Troubleshooting​

ProblemFix
Song picker is emptyCheck collection name, Firestore rules, and required fields.
Cover image does not loadCheck coverURL, Storage rules, and HTTPS access.
Song does not playCheck streamURL, file format, CORS/CDN access, and device audio mode.
Selected song is not savedCheck composer post payload and Firestore write rules.

Next Steps​