styles width in native base to react native doesn't seem to be working

Question

I currently have a component in React-Native and I'm using NativeBase preset components.

import React, { Component } from 'react';
import { FlatList, ActivityIndicator, StyleSheet } from 'react-native';
import { Container, Header, Content, ListItem, Text, Input, Item, Button, Left, Right } from 'native-base';

export default class OrderDetail extends Component {
  constructor(props){
    super(props);
    this.state= { isLoading: true }
  }

  componentDidMount() {
    return fetch('https://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        isLoading: false,
        dataSource: responseJson.movies,
      }, function() {

      });
    })
    .catch((error) => {
      console.error(error);
    });
  }

  render() {
    return (
      <Container>
        <Header />
        <Content>
        <ListItem itemDivider>
          <Text>Inspection Details</Text>
        </ListItem>
          <FlatList
          data={this.state.dataSource}
          renderItem={({item}) =>
          <ListItem>
            <Left>
              <Text>Address</Text>
            </Left>
            <Right>
              <Text  style={styles.textContent}>{item.title}</Text>
            </Right>
          </ListItem>}
          keyExtractor={({id}, index) => id}
          />
          <ListItem itemDivider>
            <Text>Agent Details</Text>
          </ListItem>
          <ListItem itemDivider>
            <Text>Payment Details</Text>
          </ListItem>
          <Item regular>
            <Input placeholder='Regular Textbox' />
          </Item>
          <Button block success>
            <Text>Start Report</Text>
          </Button>
        </Content>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  areaBox: {
    width: '30%',
  },
  textContent: {
    fontSize: 20,
    color: 'red',
  },
});

I am attempting to have each ListItem to have a left and right area. So on the left it would be the name of the field and on the right it would be the actual data. The current example above repeats "address" which isn't important right now. In the styles I'm adding: areaBox width: 30% since I'd like the left to not take up the majority of the area.

I've tried doing this: <Left style={styles.areaBox}> I would expect Left to take up only 30% of the entire width. However that's not the case. Here are my results:

As you can see address is still taking up the majority of the space. What am I doing wrong?

Siraj Ahmad Siraj Ahmad · Accepted Answer · 2019-04-05T04:22:06

Try flex instead of width, React-native does not work with percentage,

flex : 0.1 = 10%

flex : 0.2 = 20% and so on.

<Left style={{flex:0.3}}>
     <Text>Address</Text>
 </Left>
 <Right style={{flex:0.7}}>
      <Text  style={styles.textContent}>{item.title}</Text>
 </Right>

I have divided 1 flex into 0.3 and 0.7, It means 30% and 70%

sum of the values always should be equal to 1, e.g. (0.3 + 0.7 = 1)

styles width in native base to react native doesn't seem to be working

1 Answers