Skip to content

Conversation

@mfazekas
Copy link
Collaborator

@mfazekas mfazekas commented Dec 9, 2025

Summary

Adds ViewModelListProperty for dynamic list management at runtime, for now no hook just low level methods

API

  • length - get list size
  • instanceAt(index) - get ViewModelInstance at index
  • append(instance) - add to end of list
  • insert(instance, index) - insert at position
  • remove(instance) - remove by reference
  • removeAt(index) - remove at index
  • swap(index1, index2) - swap items
  • addListener(callback) - observe changes

Example

const listProperty = instance.listProperty('items');

// Add new item
const newItem = viewModel.createInstance();
listProperty.append(newItem);

// Remove item
listProperty.removeAt(0);

// Swap items
listProperty.swap(0, 1);

Test plan

  • Added example page with list.riv test file
  • iOS implementation
  • Android implementation

Closes #11

@mfazekas mfazekas force-pushed the mfazekas/data-binding-lists branch 4 times, most recently from 8e5e7b2 to 6712d5b Compare December 9, 2025 07:27
Adds ViewModelListProperty for dynamic list management at runtime.

Closes #11
@mfazekas mfazekas force-pushed the mfazekas/data-binding-lists branch from 6712d5b to 1eb2f26 Compare December 9, 2025 11:48
@mfazekas mfazekas marked this pull request as ready for review December 9, 2025 12:06
* A list property that contains a dynamic collection of {@link ViewModelInstance} objects.
* @see {@link https://rive.app/docs/runtimes/data-binding#lists Rive Data Binding Lists}
*/
export interface ViewModelListProperty
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Two things to consider:

  • We don't HAVE to name these similar to android/ios. We can use the naming convention that matches what is expected when working with lists in RN.
  • We could add additional methods/overloads if those are commonly used in RN. For example in Dart I added firstOrNull instead of throwing, and overloads for operator [] and operator[]=. Maybe something like this possible here to
  @override
  ViewModelInstance operator [](int index) => instanceAt(index);

  @override
  void operator []=(
    int index,
    covariant FFIRiveViewModelInstanceRuntime value,
  ) =>
      insert(index, value);

try {
val numberProper = viewModelInstance.getNumberProperty(path)
return HybridViewModelNumberProperty(numberProper)
// Returns null if ViewModelException is thrown for iOS parity
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh! This is what we did from the start. Nice abstration then!

Copy link
Contributor

@HayesGordon HayesGordon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Just need to decide if these methods names will be most familiar for RN

@HayesGordon
Copy link
Contributor

Oh and all of the abstraction and Nitro is really paying off here 🙌 . This is really minimal code for a large feature.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add data binding lists support

3 participants