I have tried using a few libraries that can take html text and render the html like inside of WebView libraries but I have been trying something different.

I’m trying Android Native Bridging so that I can take Java Text View and return the Text View inside my component.

First I created a MyCustomViewManager:

        package com.pollit;
        import android.view.ViewGroup.LayoutParams;
        import android.text.Html;
        import android.widget.TextView;
        import com.facebook.react.uimanager.SimpleViewManager;
        import com.facebook.react.uimanager.ThemedReactContext;
        import com.facebook.react.uimanager.annotations.ReactProp;

        public class MyCustomViewManager extends SimpleViewManager<TextView> {

            public static final String REACT_CLASS = "MyCustomView";

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

            @Override
            protected TextView createViewInstance(ThemedReactContext reactContext) {
                TextView tv = new TextView(reactContext);
                tv.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
                return tv;
            }

            @ReactProp(name = "text")
            public void setText(TextView view, String text) {
                if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.N) {
                    view.setText(Html.fromHtml(text, Html.FROM_HTML_MODE_COMPACT));
                } else { 
                    view.setText(Html.fromHtml(text));
                }
            }
        }

Then created MyPackage:

        package com.pollit;
        import java.util.ArrayList;
        import android.widget.TextView;
        import com.facebook.react.ReactPackage;
        import com.facebook.react.uimanager.SimpleViewManager;
        import com.facebook.react.uimanager.ThemedReactContext;
        import com.facebook.react.uimanager.annotations.ReactProp;
        import com.facebook.react.uimanager.ViewManager;
        import java.util.List;
        import com.facebook.react.bridge.NativeModule;
        import com.facebook.react.bridge.JavaScriptModule;

        import java.util.Collections;
        import com.facebook.react.bridge.ReactApplicationContext;

        public class MyPackage implements ReactPackage {

            @Override
                public List<NativeModule>
                createNativeModules(ReactApplicationContext reactContext) {
                    return Collections.emptyList();
                }

                @Override
                public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
                List<ViewManager> viewManagers = new ArrayList<>();
                viewManagers.add(new MyCustomViewManager());
                return viewManagers;
            }
        }

Then added MyPackage() inside packages in the MainApplication.java:

@Override
  protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // Packages that cannot be autolinked yet can be added manually here, for example:
    //packages.add(new TwitterSigninPackage());
    packages.add(new MyPackage());
      
    return packages;
  }

But whats happening is when i import the TextView from Native UI:

const txtView = requireNativeComponent('MyCustomView');

<txtView text={e["message"]["mess"].message}/>

The text is blank, its because the text is not wrapping and resizing the Text View, but when I set a height:

<txtView style={{height:200,}} text={e["message"]["mess"].message}/>

The text is visible, but I don’t want to set the height, I want the height of to set the height containing the text inside automatically, how can I achieve this?