12

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?

0

4 Answers 4

7

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.

3

Try adding this style:

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

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.

-2

Try using Dimensions.

 import { Dimensions } from 'react-native';

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

then you can use like

  <Form style={{width:width}}>
1
  • 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*.
    – ed'
    Commented Dec 19, 2017 at 14:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.