Menu
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?
881
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.
67
Try adding this style:
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: $mainColor,
flexDirection: 'row' // <--- Add this line
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
