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.

Sign up for GitHub

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

Jump to bottom

Question/Bug: List’s listItemHeight not working? (iOS) #1398

Closed
oferRounds opened this issue Nov 28, 2017 · 14 comments
Closed

Question/Bug: List’s listItemHeight not working? (iOS) #1398

oferRounds opened this issue Nov 28, 2017 · 14 comments
Labels
bug

Comments

@oferRounds
Copy link

react-native, react and native-base version: 2.3.3

Expected behaviour: item’s height should change according to List’s listItemHeight property

Actual behaviour: item’s height always stays the same

Steps to reproduce: regular static list

Tested on iOS
@akhil-ga akhil-ga added the bug label Nov 28, 2017
akhil-ga added a commit that referenced this issue Nov 30, 2017
@akhil-ga
Fixed issue #1398.
3302008 
Removed unused variable listItemHeight
@akhil-ga akhil-ga mentioned this issue Nov 30, 2017
Merged
SupriyaKalghatgi added a commit that referenced this issue Dec 7, 2017
@SupriyaKalghatgi
Merge pull request #1412 from GeekyAnts/fix/variables/removeListItemH…
2bb36c3 
…eight

Fix for #1398 Removed unused variable listItemHeight
Question/Bug: List’s `listItemHeight` not working? (iOS)
@SupriyaKalghatgi
Copy link
Contributor

Fixed with NativeBase 2.3.5

@oferRounds
Copy link
Author

YAY!!! Thanks!

@oferRounds
Copy link
Author

Wait, you just removed it? So it means it can’t be controlled?

@SupriyaKalghatgi
Copy link
Contributor

Yes, usage of this was discontinued, though it was not removed from theme

@oferRounds
Copy link
Author

Ok. Then how can I increase the height of the list item?

@akhil-ga
Copy link
Contributor

@oferRounds you can just override the style of ListItem and set the height to your desired height.
Like <ListItem style={{ height: 60 }}>

@oferRounds
Copy link
Author

Ok, tried it, but now there is an issue with the separator. Any idea how to solve it?

screen shot 2017-12-11 at 8 50 27

@oferRounds
Copy link
Author

oferRounds commented Dec 11, 2017 •
edited
Loading 

render() {
    return (
      <Container>
        <Content>
          <List>
            <Separator bordered>
              <Text>HELP</Text>
            </Separator>
            <ListItem style = {{ height: kCellHeight }} icon onPress = { () => Linking.openURL(Consts.HELP_CENTRE_URL) }>
              <Body>
                <Text>Help Centre</Text>
              </Body>
              <Right>
                <Icon name = 'arrow-forward' />
              </Right>
            </ListItem>
            <ListItem
              icon
              style = {{ height: kCellHeight }}
              onPress = { () => Linking.openURL('mailto:[email protected]?subject=Please tell us how we can help!')}>
              <Body>
                <Text>Contact Bob Team</Text>
              </Body>
              <Right>
                <Icon name = 'arrow-forward' />
              </Right>
            </ListItem>
            <Separator bordered>
              <Text>LEGAL</Text>
            </Separator>
            <ListItem icon style = {{ height: kCellHeight }} onPress = { () => Linking.openURL(Consts.PRIVACY_POLICY_URL) }>
              <Body>
                <Text>Privacy Policy</Text>
              </Body>
              <Right>
                <Icon name = 'arrow-forward' />
              </Right>
            </ListItem>
            <ListItem icon style = {{ height: kCellHeight }} onPress = { () => Linking.openURL(Consts.TERMS_OF_SERVICE_URL)}>
              <Body>
                <Text>Terms of Service</Text>
              </Body>
              <Right>
                <Icon name = 'arrow-forward' />
              </Right>
            </ListItem>
          </List>
        </Content>
        <Footer>
          <FooterTab>
            <Button onPress = { this._handleLogOutButtonTap.bind(this) }><Text style = {{ color: '#E33054' }}>Log Out</Text></Button>
          </FooterTab>
        </Footer>
      </Container>
    )
  }

@akhil-ga
Copy link
Contributor

@oferRounds same way as we did for . Just override the style of and set the desired height.
Like <Separator bordered style={{ height: 50 }}>

@oferRounds
Copy link
Author

Thanks, but I get a tslint error, saying that style does not exist on this item. Also, it doesn’t seem to affect even I insist on adding it

@oferRounds
Copy link
Author

Oh, sorry, I see that it does affect, but it just increases the seperator; my problem is with the right side of the list item

@oferRounds
Copy link
Author

Ok, solved! Adding it to both Body and Right items solved it. I think it’s much much better to add a support as intended before, have one place where you control the item’s height (as with the native iOS)

@oferRounds
Copy link
Author

Also, as mentioned before, if want to change the Separator’s height, I get a tslint error. How can this be solved?

@akhil-ga akhil-ga mentioned this issue Dec 11, 2017
Merged
@SupriyaKalghatgi
Copy link
Contributor

Fixed with 2.3.6

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@oferRounds @SupriyaKalghatgi @akhil-ga