ohanhi / elm-native-ui

[CLOSED] Experiment: mobile apps in Elm using React Native.
BSD 3-Clause "New" or "Revised" License
1.54k stars 76 forks source link

Add initial ListView implementation #61

Closed jsteiner closed 7 years ago

jsteiner commented 7 years ago

Due to the imperative nature of ListView, this implementation doesn't really work well with the Elm architecture, forcing you to manually keep a DataSource up to date.

An experimental alternative called FlatList was recently added to ReactNative which is likely a better long term fit, but this works in the meantime.

There are still a handful of commonly used functions that @jferris and I didn't get around to implementing, but this at least provides the bare minimum.

Example use:

type alias Model =
  { wombats : List Wombat
  , wombatDataSource : DataSource Wombat
  }

view model =
  listView
    model.wombatDataSource
    wombatView
    [ Ui.style
        [ Style.backgroundColor Color.white
        ]
    ]

update msg model =
  LoadWombats wombats ->
    let
        wombatDataSource = updateDataSource model.wombatDataSource wombats
    in
      ( { model | wombats = wombats, wombatDataSource = wombatDataSource }, Cmd.none )
ohanhi commented 7 years ago

Thanks again, @jsteiner!