Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
rsreejithkrishnan opened this issue Sep 14, 2017 · 2 comments
Labels
Ran Commands One of our bots successfully processed a command. Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@rsreejithkrishnan
Copy link
Contributor

rsreejithkrishnan commented Sep 14, 2017

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

@rsreejithkrishnan rsreejithkrishnan changed the title Create custom iewgroup [Android] Create custom ViewGroup Sep 14, 2017
@rsreejithkrishnan rsreejithkrishnan changed the title [Android] Create custom ViewGroup [Android] React native views not arranged properly inside custom ViewGroup Sep 14, 2017
@radko93
Copy link
Contributor

radko93 commented Sep 14, 2017

@facebook-github-bot label Android

@facebook-github-bot facebook-github-bot added Android Ran Commands One of our bots successfully processed a command. labels Sep 14, 2017
@stale
Copy link

stale bot commented Nov 13, 2017

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Nov 13, 2017
@stale stale bot closed this as completed Nov 20, 2017
@facebook facebook locked and limited conversation to collaborators May 15, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Ran Commands One of our bots successfully processed a command. Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests

3 participants