React-Native Native UI component doen't resize (Android)

Question

I have issues with React Native respecting the height of an Android Native UI Component. I have created a very simple use-case to demonstrate the issue.

React Native version = 0.61.5.

Android, React Native ViewManager:

public class CustomTextViewManager extends SimpleViewManager<TextView> {

    @NonNull
    @Override
    protected TextView createViewInstance(@NonNull ThemedReactContext reactContext) {
        return new TextView(reactContext);
    }

    @NonNull
    @Override
    public String getName() {
        return "CustomTextView";
    }

    @ReactProp(name = "text")
    public void setText(TextView view, String text) {
        view.setText(text);
    }
}

JavaScript, native view reference:

import {requireNativeComponent} from 'react-native';

const CustomTextView = requireNativeComponent('CustomTextView')

export default CustomTextView;

JavaScript, simple app:

import React from 'react';
import CustomTextView from './CustomTextView';

const App: () => React$Node = () => {
  return (
    <CustomTextView
      text={'Some test text'}
    />
  );
};

export default App;

When you run this code nothing is shown. After adding style={{height: 100}} the view is shown at the provided fixed height.

I actually expected that the height of the Android View would be reflected in React Native. Apparently this is not the case.

Note: height: "auto" doesn't work. I hope that someone can tell me what I'm missing.

Hi! I think you can find some useful information here: https://github.com/facebook/react-native/issues/17968 — Николай Гольцев, May 02 '20 at 19:35
Thank you. I haven't found that info yet. I'll look into it. — Ben Groot, May 03 '20 at 12:12
No luck sadly. I've shared the issue on GitHub as well. https://github.com/facebook/react-native/issues/28828 — Ben Groot, May 12 '20 at 12:10

score 2 · Answer 1 · answered Nov 26 '20 at 14:59

I faced the same problem recently. Your need to use a shadow node to measure the final size which the TextView will have after the text was rendered. I found a good article about this. click me

If your TextView will render simple text only, you can just use the ReactTextShadowNode which is part of the native library of react native.

To do so just override the method createShadowNodeInstance of your ViewManager and return an instance of the ReactTextShadowNode.

    override fun createShadowNodeInstance(): ReactTextShadowNode {
        return ReactTextShadowNode(null)
    }

If your TextView has to render some special Spanns, you need to write your own implementation of ShadowNode. I did so by coping the ReactTextShadowNode and changed the way how the field mPreparedSpannableText was bild. This field holds the span which will be used to measure the desired height.

eg. you could use something like that

    @ReactProp(name = "text")
    fun setText(text: String?) {
        this.text = text ?: ""
        mPreparedSpannableText = useYourMethodToCreateYourSpannable()
        dirty()
    }

This post was quiet old but I hope my answer will help someone facing the same problem.

React-Native Native UI component doen't resize (Android)

1 Answers1