In this article, we will look at the specifics of adding Images in the App_Resources folder for both platforms.
Note: NativeScript supports images encoded as
Note: Loading an image from the resource folders requires using the
res://prefix. This is the suggested approach, as it uses the native methods for loading the best image for the current device screen density. The file extension is not included when referencing resource images.
To achieve this, we should generate the icons via NativeScript Image Builder or some other tool, which can be used for image edit. After we created the images for the required device screen densities, we should add them in the required folders, described below.
Android resources should be added to the corresponding
drawable-XXX folders inside the
App_Resources\Android\src\main\res folder in your app:
The content of this directory will be copied inside the
platforms\android\res when the app is prepared by the NativeScript CLI. More information about how to use drawable resources in Android can be found here.
IOS resources should be added inside the
App_Resources\ios folder in your app. You can use
@3x suffixes to target devices with a specific screen scale. Here is a list of devices for each scale factor:
- @1x - iPad 2 and iPad mini (1st Generation)
- @2x - iPhone 6, iPhone Xr, iPad (retina)
- @3x - iPhone 6 Plus, iPhone X, iPhone Xs
For more information, see Icon and Image Sizes in the iOS Developer Library.
Once the NativeScript project is prepared (
tns prepare ios) all the images will be copied to the
<Image src="res://logo" stretch="none" />
You can manually create an ImageSource instance from resource.
<TabView id="tabViewContainer" iosIconRenderingMode="alwaysOriginal"> <TabView.items> <TabViewItem title="Tab 1" iconSource="res://icon"> <TabViewItem.view> <Label text="This is Label in Tab 1" /> </TabViewItem.view> </TabViewItem> <TabViewItem title="Tab 2" iconSource="res://icon"> <TabViewItem.view> <Label text="This is Label in Tab 2" /> </TabViewItem.view> </TabViewItem> </TabView.items> </TabView>
In the latest NativeScript versions we can use the CLI for generating the application icon for Android and iOS based on the specified image and adding them automatically in the appropriate resource folders (
App_Resources\Android\src\main\res\drawable-XXX for Android and
App_Resources\iOS for iOS). For achieving this, we use the
tns resources generate icons <path to image> command.