Background

I'm an Android Native Developer and I am trying to provide a View named CustomView to react native developer to show it at ReactActivity.

The View provided to react native by ViewManager is like this:

When the SeekBar's progress has been changed, the TextView below the SeekBar will be set a new text according to the new progress.

Question

In short, why the TextView never remeasure and relayout after setText when the CustomView is added in ReactActivity?

When the CustomView is added in NativeActivity, we can see that the TextView can auto remeasure and relayout as expect when we call setText function:

But when the CustomView is added in ReactActivity, the TextView can not auto remeasure and relayout:

The CustomView xml is:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <SeekBar
        android:id="@+id/seekbar"
        android:layout_width="0dp"
        android:layout_height="56dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/cl_level"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="40dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="40dp"
        android:layout_marginBottom="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/seekbar">

        <TextView
            android:id="@+id/tv_level_name"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxLines="1"
            android:textSize="24sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@id/tv_level_no"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintWidth_default="wrap"
            tools:text="Hello My Long Level Name" />

        <TextView
            android:id="@+id/tv_level_no"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="4dp"
            android:maxLines="1"
            android:textSize="24sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/tv_level_name"
            app:layout_constraintTop_toTopOf="parent"
            tools:text="(Lv1)" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

And the react native code:

const App = () => {
  return (
    <View style={styles.container}>
      <CustomView />
      <Button
        onPress={() => {
          ActivityStarter.navigateToSecondActivity();
        }}
        title="Click to see expected behaviours!"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
});

export default App;

I also have create an repo to let us reproduce this issue easily