React Native - NativeBase components not taking up full width on iOS

react-native react-native-android react-native-ios native-base

12,855

Solution 1

width: '100%' is supported in react native, it will take 100% of its parent width.

I think your problem is the the justifyContent:'center' and alignItems:'center' in the styles.container, they are causing all elements to be in the center of the component. You can try adding a distinctive background color to your Content component to see where it is and how much width it has.

Solution 2

Try adding this style:

container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: $mainColor,
   flexDirection: 'row' // <--- Add this line
}

12,855

user2602079

Updated on June 04, 2022

Comments

user2602079 almost 2 years

In the iOS version of my react native app built with NativeBase, everything is too skinny, unless a specific width is given. See images below. I have given the header and footer a width of 100% so it is fine, but I haven't done that for the inputs and they are too skinny. The header and footer are that skinny when not given a width too.

code:

import React from 'react'
import {
  Container,
  Header,
  Form,
  Item,
  Input,
  Label,
  Content,
  Footer,
  FooterTab,
  Button,
  Left,
  Right,
  Body
} from 'native-base'

import { Text, Image } from 'react-native'

export const Volcalc = () => {
  return (
    <Container style={styles.container}>
      <Header style={styles.header}>
        <Left>
          <Image resizeMode={Image.resizeMode.contain} style={styles.thumbnail} source={require('./img/logo_red_nowords.png')} />

        </Left>
        <Body>
        </Body>
        <Right />
      </Header>

      <Content>

        <Form>
          <Item stackedLabel bordered >
            <Label>height</Label>
            <Input />
          </Item>
          <Item stackedLabel >
            <Label>width</Label>
            <Input />
          </Item>
        </Form>

      </Content>

      <Footer >
        <FooterTab style={styles.footer}>
          <Button full>
            <Text>Footer 1</Text>
          </Button>
        </FooterTab>
      </Footer>
    </Container>
  )
}

const $mainColor = '#00d1b2'
const styles = {
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: $mainColor
  },

  header: {
    width: '100%',
    backgroundColor: $mainColor
  },
  footer: {
    width: '100%',
    backgroundColor: $mainColor
  },

  thumbnail: {
    width: 35,
    height: 35
  }
}

I'm pretty sure I'm supposed to be able to add inputs and header, without specifying width, and it should take up the full width like Android does when not specifying. What could be wrong with my project that is causing this?

ed' over 6 years

As already mentioned, width: '100%' is supported, link to doc. It works similarly to width in CSS, but in React Native you must use points or *percentages*.