Assets

Warning

This page is still being written.

Contents

• JavaScript Bundle
• Fonts
• Images
• Media

All assets that should be embedded in the final app bundle must be declared in app.json under the resources field. Unless stated otherwise, assets are copied as-is into the app bundle as raw assets.

Read on to learn how we handle certain resource types.

JavaScript Bundle

When the app is instructed to load the embedded JS bundle, it will look for and load the first file it finds from the list, starting from the top:

1. index.[platform].jsbundle
2. main.[platform].jsbundle
3. index.mobile.jsbundle
4. main.mobile.jsbundle
5. index.native.jsbundle
6. main.native.jsbundle
7. index.jsbundle
8. main.jsbundle

You can tell RNTA to use a different filename by configuring bundleRoot.

When loading from the dev server, the app will attempt to load http://localhost:8081/index.bundle by default.

Fonts

Warning

Not yet implemented!

This is just a draft of how we think it should work. If you have any feedback, leave them in the linked issue.

Android

Fonts are copied into a specific location designated for fonts. The filename (without its extension) is used as resource id.

• Documentation: ReactFontManager.java (additional info: Font resources)
• Location: assets/fonts
• Supported file types: .ttf, .otf

Tracking issue: #1813

iOS

Fonts are copied as-is into the app bundle, but must be registered in Info.plist before they can be used. Note that the font name may not match the filename. Check the documentation for how to find the font name.

• Documentation: Adding a Custom Font to Your App
• Location: /
• Supported file types: .ttf, .otf

Tracking issue: #1185

macOS

Fonts are copied as-is into the app bundle, but must be registered in Info.plist before they can be used.

• Documentation: ATSApplicationFontsPath
• Location: /
• Supported file types: ?

Tracking issue: #1185

Windows

???

Images

Warning

Not yet implemented!

This is just a draft of how we think it should work. If you have any feedback, leave them in the linked issue.

Note

This only applies to images in a hybrid app. In most cases, you should let React Native manage images: https://reactnative.dev/docs/next/images

Android

Images are copied into a specific location designated for bitmaps. The filename (without its extension) is used as resource id.

• Documentation: Drawable resources/Bitmap
• Location: res/drawable
• Supported file types: .png, .webp, .jpg, or .gif

Tracking issue: #1813

Media

Warning

Not yet implemented!

This is just a draft of how we think it should work. If you have any feedback, leave them in the linked issue.

Android

Supported media files are copied into a specific location designated for raw resources.

• Documentation: Supported media formats
• Location: res/raw
• Supported file types: .3gp, .aac, .amr, .flac, .imy, .m4a, .mid, .mkv, .mp3, .mp4, .mxmf, .ogg, .ota, .rtttl, .rtx, .ts, .wav, .webm, .xmf

Tracking issue: #1813