⚠️ This lesson is retired and might contain outdated information.

Conditionally require a NativeScript plugin when only a single platform is supported

Nathan Walker
InstructorNathan Walker
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated a month ago

Sometimes a NativeScript plugin may only support 1 platform (iOS or Android). In these cases, we will want to conditionally require the plugin to ensure we don’t crash the other unsupported platform. Let’s consider view and service level implications for how best to handle these scenarios.

[00:00] If try to implement this EZAudio plugin into our project, with this plugin installed if we go to our app component, and make sure we've registered the element for this plugin using the register element API to register AudioPlot coming from the EZAudio plugin.

[00:15] We add that component to our view, and then run this against Android. You will receive a nasty crash. It says could not load view for AudioPlot with a failed defined module of the EZAudio plugin.

[00:28] If we look through the build of our app, we'll see that, in fact, it does output that NativeScript EZAudio is not supported for Android.

[00:35] In these cases, you will want to make sure that any time you require or import a module or plugin that is only supported on one platform, that you wrap this with a conditional for that platform only. Let's use the isIOS Boolean from NativeScript's platform module, and wrap the registration of this element in isIOS.

[00:57] In our view template, we want to make sure that this component is wrapped with the iOS node, to flag that this is only supposed to be shown on iOS.

[01:07] For Android, we could use the Android node and place a different component implementation. This could either be another plugin, or even a custom implementation using one of the layout containers like the grid-layout. For example, we'll just say label, and we'll put a todo here, and now when we run this on Android it runs without error.

[01:28] Just to elaborate, if you had an Angular service that needed to tap into platform specific classes, you would want to take the same thing into consideration. Take, for example, the EZAudio plugin, and the Audio plugin which is cross-platform compatible.

[01:43] If we wanted to use the EZRecorder and EZAudio player from this iOS-specific plugin, we could define these variables up top, and then assign them to the appropriate class that we require in.

[01:56] The downside is we do not get our types imported from the module, but this will allow you to get around a platform specific implementation.

egghead
egghead
~ just now

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today