Last active
April 2, 2021 17:20
Star
You must be signed in to star a gist
Elm Native UI <-> Lottie
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const _user$project$Native_Animation = (() => { | |
const Animation = require('lottie-react-native') | |
return { | |
view : Animation, | |
} | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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