Native UI Components - Refresh when Android views update

Question

We're trying to implement a Native UI Component that wraps an Android components that fetches data and displays it using our existing rendering framework (using an AdapterView). We don't know what the data will be in advance, so the height and contents of this component are completely arbitrary. This mostly works fine, except for the case where the rendered components request something else asynchronously (e.g. images). In that case, the image is retrieved, the ImageView is "displayed", but the UI ends up showing nothing (literally seems to be a transparent view of the appropriate size).

We know that these views work just fine in normal Android, but we seem to be missing something that tells RN/Yoga that it should re-render when images are loaded from the server so that they are properly displayed. Here's more or less what this looks like:

public class ReactServerListComponent extends SimpleViewManager<LinearLayoutExtension> {
  private static final String REACT_CLASS = "TAReactServerListComponent";

  @Override
  public String getName() {
    return REACT_CLASS;
  }

  ...
  @ReactProp(name = "link")
  public void setLink(final LinearLayoutExtension view, String theNewLink){
    //async loader logic invokes this on success
    view.loadRetrievedEntries(newEntries); 
  }
  ...
}

In this case LinearLayoutExtension contains all the views produced by the Adapter, which in turn will contain the asynchronously loading image views.

We've tried a few things, like returning a ShadowNode with a measure function, or keeping a reference of the ShadowNode and calling dirty(), etc on it.

What is the correct way to do this? Unfortunately, we have not found documentation or examples that deal with really complex components outside of "check the repo"...

Answer 1

You could try view.invalidate() on the group. You could also remove the placeholder imageview and add a newer view with the correct image.

However if it is only refreshing the image view, you could also use something like volley, Picasso, Glide etc... to take care of the imageview itself.