Elm Native UI wrapper example for: https://github.com/skv-headless/react-native-scrollable-tab-view

elm-package.json

// Be sure this is set
"native-modules": true, 

ScrollableTabView.elm

module ScrollableTabView
    exposing
        ( view
        , initialPage
        , tabBarActiveTextColor
        , tabBarInactiveTextColor
        , tabBarUnderlineStyle
        , tabBarTextStyle
        , tabBarStyle
        )

import NativeUi as NativeUi exposing (Property, Node)
import NativeUi.Style as Style
import Native.ScrollableTabView
import Json.Encode


view : List (Property msg) -> List (Node msg) -> Node msg
view =
    NativeUi.customNode "ScrollableTabView" Native.ScrollableTabView.view


initialPage : Int -> Property msg
initialPage =
    NativeUi.property "initialPage" << Json.Encode.int


tabBarActiveTextColor : String -> Property msg
tabBarActiveTextColor =
    NativeUi.property "tabBarActiveTextColor" << Json.Encode.string


tabBarInactiveTextColor : String -> Property msg
tabBarInactiveTextColor =
    NativeUi.property "tabBarInactiveTextColor" << Json.Encode.string


tabBarUnderlineStyle : List Style.Style -> Property msg
tabBarUnderlineStyle =
    NativeUi.property "tabBarUnderlineStyle" << Style.encode


tabBarTextStyle : List Style.Style -> Property msg
tabBarTextStyle =
    NativeUi.property "tabBarTextStyle" << Style.encode


tabBarStyle : List Style.Style -> Property msg
tabBarStyle =
    NativeUi.property "tabBarStyle" << Style.encode

ScrollableTabView.js

// Gists don't allow subdirectories, but this is actually Native/ScrollableTabView.js

const _user$project$Native_ScrollableTabView = function () {
  var ScrollableTabView = require('react-native-scrollable-tab-view');

  return {
    view: ScrollableTabView,
  };
}();

@jsteiner Do you have a project you used it with? I'm probably too new to Elm to get this. Nevertheless, I got it to compile, now struggling to import and actually use it. How would you use the ScrollableTabView? I can import the module but not use it, maybe a syntax issue / not getting some basics.

Structure

- src
⎸  ᴸ-- Native/
⎸  ⎸   ᴸ-- Animation.js
⎸  ᴸ-- Tab/
⎸  ⎸    ᴸ-- Scene.elm
⎸  ⎸    ᴸ-- ...
⎸  ᴸ-- Animation.elm
⎸  ᴸ-- Main.elm
⎸  ᴸ-- ...
.
.

error message goes: can't find variable 'Animation'.

↘️  ⬇️  ↙️
➡️ Gist  ⬅️
↗️  ⬆️  ↖️

--

EDIT

I have it working, now it just doesn't seem to do anything really. Doesn't display content or animate, styling..

EDIT

Lottie is now broken on React Native.