Android Native UI Component doesn't respect the native view height

[BenGroot]

Description

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

React Native version

System:
    OS: macOS Mojave 10.14.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 3.31 GB / 32.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
    Yarn: 1.19.1 - ~/.nvm/versions/node/v10.16.3/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.8.4 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 26, 28, 29
      Build Tools: 28.0.2, 28.0.3, 29.0.2
      System Images: android-21 | Google APIs Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom_64, android-24 | Intel x86 Atom, android-25 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-28 | Android TV Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6392135
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_212 - /usr/bin/javac
    Python: 2.7.10 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0
    react-native: 0.62.2 => 0.62.2
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

1. Create a React Native ViewManager in the Android Project:

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);
    }
}

2. Add the ViewManager via a ReactPackage to the Packages list.

3. Bind the native view in JavaScript:

import {requireNativeComponent} from 'react-native';

const CustomTextView = requireNativeComponent('CustomTextView')

export default CustomTextView;

4. Create a simple app:

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

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

export default App;

Expected Results

When running this code nothing is shown. I actually expected that the height of the Android View would be reflected in React Native. Apparently this is not the case. I have tried this with different native view types, with no luck.

After adding a fixed height with style={{height: 100}} the view is shown at the provided height.

Height "auto" doesn't work either.

I have found similar issues but they are all more complex. My example should work out of the box I suppose.

I hope that someone can tell me what I'm missing.

Snack, code example, screenshot, or link to a repository

Check-out this repo which demonstrates the issue: https://github.com/BenGroot/react-native-native-ui-component-issue

[github-actions[bot]]

:warning:	Missing Environment Information
:information_source:	Your issue may be missing information about your development environment. You can obtain the missing information by running react-native info in a console.

[BenGroot]

This information is already attached.

[BenGroot]

Label "Needs: Environment Info" can be removed right?

[hannzern]

any solutions for this? running into this issue now

[nazarrrk0]

@BenGroot @hannzern guys, did you find a solution for this?

[Panzenbaby]

Check this answer on StackOverflow

[fabOnReact]

the solution from Maik Peschutter https://stackoverflow.com/a/65024470/11452286 and related blog https://nicholasmarais1158.github.io/2017/07/React-Native-Custom-Measuring may solve this issue

this discussion is more appropriate on Stackoverflow rather then Github

Github is used to report bugs/issues in facebook/react-native

If you head over to the docs you can read the info about Different component for ex. TextInput and their props for example selectionColor https://reactnative.dev/docs/textinput#selectioncolor

if the prop selectionColor does not behave as specified in https://reactnative.dev/docs/textinput#selectioncolor

then you can open an issue on Github to keep track of this problem and/or publish a pull request to fix the issue

currently we have some guides on how to implement your Native UI Component ..

BUT

this classes are not part of the public api for example like done with rails https://api.rubyonrails.org/

currently the are some generic guildelines but not clear specification for me to read

It is the responsability of the developer implementing the Native UI Component to read the reactnative java sourcecode, understand the reactnative framework built on top of Android Open Source Project and apply the required solutions

I think it makes no sense having a documented public api (like https://api.rubyonrails.org/) of our Java Classes to be then used by third party devs to implements their Native UI Components as we are making lots of changes in ReactNative so it would become outdated relatively quickly

In my opinion makes more sense that react-native developers contribute to react-native and understand the sourcecode, follow the changes in the framework...

We can not open issues on github like.. I inherited from ReactRootView and the functionality does not work... otherwise we would risk having 10.000 issues in our repositories (hundreds of issues for each Public Java API/class)

The opensource contributors would invest time to read 1000s of issues that are not relevant for react-native, just generic discussions that belongs to StackOverflow

I believe this type of assistance is provided in StackOverflow with the bounty system or Upwork/Codementor hiring a freelancer that assist you in your work.

I believe react-native developer needs to be a specialist and needs to have good knowledge of the OpenSource project. In the end we can not document every API and every method of the framework, it is easier that you contribute and learn the sourcecode rather then investing time to write step by step guide

This is my experience, I contribute for 6 months to rn and I can say my understanding of react-native really improved. I believe I will reach full understanding of ReactNative and basic understanding of Android OpenSourceProject sourcecode in August 2021.

Thanks :peace_symbol: :pray:

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.

[Wilightmoment]

any solution?

[fabOnReact]

you need to look into the react shadow node measure logic we over-ride onMeasure with the react shadow node

an example of implementation you can find it here https://github.com/fabriziobertoglio1987/react-native-improved