Skip to content

[Android] React native views not arranged properly inside custom ViewGroup #15939

@rsreejithkrishnan

Description

@rsreejithkrishnan

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

  1. react-native -v: 0.48.3
  2. node -v: v8.4.0
  3. npm -v: 5.4.1
  4. yarn --version: 0.21.3

Then, specify:

  • Target Platform: Android
  • Development Operating System: macOS
  • Build tools: Android studio

Steps to Reproduce

Example: Create a LinearLayout native UI component.

public class RNLinearLayoutManager extends ViewGroupManager<LinearLayout> {

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

    @Override
    protected LinearLayout createViewInstance(ThemedReactContext reactContext) {
        LinearLayout layout = new LinearLayout(reactContext);
        layout.setOrientation(LinearLayout.VERTICAL);
        return layout;
    }

}
const LinearLayout = requireNativeComponent('RNLinearLayout', {
  name: 'LinearLayout',
  propTypes: {
    ...View.propTypes
  }
}, {
  nativeOnly: {
    nativeBackgroundAndroid: true,
    nativeForegroundAndroid: true
  }
})

export default class RNTest extends Component {
  render() {
    return (
      <LinearLayout style={{flex: 1}}>
        <Text>Linear Layout demo</Text>
        <Text>The below view should be arranged in a row</Text>
        <View style={{flexDirection: 'row', flex: 1}}>
          <Text>Column 1</Text>
          <Text>Column 2</Text>
        </View>
        <Text>But it is arranged in two different rows</Text>
      </LinearLayout>
    );
  }
}

Expected Behavior

image

Text Column 1 and Column 2 should be arranged in same line as shown above

Actual Behavior

image

Text Column 1 and Column 2 were arranged in 2 lines

Reproducible Demo

https://github.com/rsreejithkrishnan/RNLinearLayoutTest

Metadata

Metadata

Assignees

No one assigned

    Labels

    Ran CommandsOne of our bots successfully processed a command.StaleThere has been a lack of activity on this issue and it may be closed soon.

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions