Skip to main content

File Extensions

Overview

ReNative supports powerful file extension mechanism to enable developers to tailor the code and UX towards the needs of specific UI requirements

File Extension Map

How it works

Based on the map above, each platform -p [PLATFORM] triggers compile process and always picks first available extension going from top to bottom.

Each rnv supported platform creates unique path of priority extension allowing you to differentiate it based on various factors

Example of android platform file extensions:

ExtensionTypePriority
android.mobile.jsform factor1
mobile.jsform factor2
android.jsplatform3
mobile.native.jsfallback4
native.jsfallback5
jsfallback6
tsxfallback7
tsfallback8

Example of tizen platform file extensions:

ExtensionTypePriority
tizen.tv.jsform factor1
web.tv.jsform factor2
tv.jsform factor3
tizen.jsplatform4
tv.web.jsfallback5
web.jsfallback6
jsfallback7
tsxfallback8
tsfallback9

Form Factors

Building multi-platform UI sometimes needs "shared" UI to avoid code duplication. ie mobile for all mobile experience and tv for "leanback" or "big screen" experience

Form factor extension allow you to write only one file compiled for multiple platforms

Image creating Page which should have unique UI on multiple form factors

MyPageComponent/
index.js

In above example your code becomes convoluted and has to include variety of if switch statements to manage differences.

Instead you can write your component like this:

MyPageComponent/
index.desktop.js
index.mobile.js
index.tv.js
index.watch.js

Ensuring unique UX experience across different mediums.

Afterwards you can simply use it as standard single component

import MyComponent from './MyComponent'

...

<MyComponent />
...

Main advantage of this approach is that code is packaged/compiled per platform thus removing unused platform code from final bundle.js