CODEWITHSUNDEEP
react-nativereact-native-iosnative-base
user2602079
user2602079

Reputation: 1393

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

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.

enter image description here

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?

Upvotes: 12

Views: 18745

Answers (4)

Jos&#233; Salina
Jos&#233; Salina

Reputation: 148

Try adding this style: 

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

Upvotes: 3

Arun kumar
Arun kumar

Reputation: 1081

Apart from above suggestion, you can use "Toggle Inspector" to get the style attributes. But I also found react native apps during development sometimes gets stuck in previous states. Try to uninstall and reinstall it.

Upvotes: 0

Saurabh Joshi
Saurabh Joshi

Reputation: 267

Try using Dimensions.

 import { Dimensions } from 'react-native';

 var {width} = Dimension.get('window');

then you can use like

  <Form style={{width:width}}>

Upvotes: -2

lsfischer
lsfischer

Reputation: 354

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.

Upvotes: 7

Related Questions