Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

<Right> not working on some component configuration, requires justifyContent=space-between

See original GitHub issue

react-native, react and native-base version

Expo SDK 23

{
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "scripts": {
    "test": "node ./node_modules/jest/bin/jest.js --watch"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/samples": "2.1.1",
    "@expo/vector-icons": "^6.2.1",
    "expo": "^23.0.0",
    "firebase": "^4.6.2",
    "native-base": "^2.3.3",
    "react": "16.0.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-23.0.0.tar.gz",
    "react-navigation": "^1.0.0-beta.19",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "jest-expo": "^23.0.0"
  }
}

Expected behaviour

<Right> always aligns right

arrow icon:

“Pria” below

Actual behaviour

<Right> aligns somewhat left

“Wanita” below:

Steps to reproduce (code snippet or screenshot)

For the Card:

  render() {
    return (
      <Container style={styles.container}>
        <Content padder>

          <Card>
            <CardItem header bordered>
              <Text>{this.props.currentUserProfile.name}, selamat datang di KeluargaSamara</Text>
            </CardItem>
            <CardItem>
              <Body>
                <Text>Agar kami dapat memberikan layanan dan fitur yang sesuai dengan
                  kebutuhan Anda, silakan isi biodata Anda terlebih dahulu.</Text>
              </Body>
            </CardItem>
            <CardItem button={true} onPress={() => this.personalInfoWizard()} style={{}}>
              <Icon active name="contact"/>
              <Text>Isi Biodata Anda</Text>
              <Right>
                <Icon name="arrow-forward"/>
              </Right>
            </CardItem>
          </Card>

          <Button title="Logout" onPress={this.doLogout}/>

        </Content>
      </Container>
    );
  }

For the Form:

  render() {
    return (
      <Container style={styles.container}>
        <Content padder>
          <Form>
            <Item stackedLabel>
              <Label>Name</Label>
              <Input />
            </Item>
            <ListItem style={{justifyContent: 'space-between'}}>
              <Text>Pria</Text>
              <Right>
                <Radio selected={true}/>
              </Right>
            </ListItem>
            <ListItem>
              <Text>Wanita</Text>
              <Right>
                <Radio selected={false}/>
              </Right>
            </ListItem>
          </Form>
        </Content>
      </Container>
    );
  }

Is the bug present in both ios and android or in any one of them?

Only tested in Android 7.0.

Any other additional info which would help us debug the issue quicker.

Workaround is possible using justifyContent=space-between, but… why is this required? The sample codes don’t use this workaround, so I’m curious why is this happening to me.

Issue Analytics

State:
Created 6 years ago
Comments:8 (5 by maintainers)

Top GitHub Comments

2reactions

SupriyaKalghatgicommented, Jan 5, 2018

@ceefour For Form

1reaction

SupriyaKalghatgicommented, Jan 5, 2018

Docs will be updated on this

Top Results From Across the Web

Why justify-content: space-between; not working here

The problem is that the .nav_list -element does not have a proper width - when you apply position: fixed to an element, it...

[ordered-layout] Issue with justify-content: space-between #804

If the spacing attribute is set, setting justify-content: space-between doesn't work as expected since the :host([theme~="spacing"])::before pseudo-element ...

justify-content - CSS: Cascading Style Sheets - MDN Web Docs

The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex ...

A Complete Guide to Flexbox | CSS-Tricks

Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible ...

How to Set Space Between Flexbox Items - W3docs

In this tutorial, we'll show how you can easily set distance between flexbox items. For this, we'll use the CSS justify-content property with...