Skip to content

Instantly share code, notes, and snippets.

@ferologics
Last active April 2, 2021 17:20
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save ferologics/ad8ca266960b7f0b217d580f07f54527 to your computer and use it in GitHub Desktop.
Elm Native UI <-> Lottie
module Animation
exposing
( view
, style
, source
, progress
)
import NativeUi as NativeUi exposing (Property, Node)
import NativeUi.Style as Style
import Native.Animation
import Json.Encode
view : List (Property msg) -> List (Node msg) -> Node msg
view =
NativeUi.customNode "Animation" Native.Animation.view
style : List Style.Style -> Property msg
style =
NativeUi.property "style" << Style.encode
source : String -> Property msg
source =
NativeUi.property "source" << Json.Encode.string
progress : Int -> Property msg
progress =
NativeUi.property "progress" << Json.Encode.int
const _user$project$Native_Animation = (() => {
const Animation = require('lottie-react-native')
return {
view : Animation,
}
})
// Scene is from https://github.com/ohanhi/elm-native-ui/blob/master/examples/NavigationDemo/src/Tab/Scene.elm
// I'm playing with the NavigationDemo
module Tab.Scene exposing (view)
import ExampleRow as Row
import NativeUi exposing (Node)
import NativeUi.Elements as Elements
import NativeUi.NavigationExperimental exposing (NavigationSceneRenderer)
import Tab.NavigationMsg exposing (NavigationMsg(Exit, Pop, Push))
import Animation exposing (view, style, source, progress)
view : NavigationSceneRenderer -> Node NavigationMsg
view props =
Elements.scrollView
[]
[ Row.button "Push Route" Push
, Row.button "Pop Route" Pop
, Row.button "Exit Header + Scenes + Tabs Example" Exit
, anim
[ source "../assets/yarn.json"
, style styleAnim
, progress 1
] []
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment