React Native: ListView item does not scale full width -

i create simple listview component simple text item.

import react "react"; import { stylesheet, text, view, listview } "react-native";  export default class notelist extends react.component {   constructor(props) {     super(props);     this.ds = new listview.datasource({       rowhaschanged: (r1, r2) => {         r1 !== r2;       }     });   }    render() {     return (       <listview         datasource={this.ds.clonewithrows([           { title: "note 1", body: "body 1", id: 1 },           { title: "note 2", body: "body 2", id: 2 }         ])}         renderrow={rowdata => {           return (             <view style={styles.itemcontainer}>               <text style={styles.itemtext}>                 {rowdata.title}               </text>             </view>           );         }}       />     );   } }  const styles = stylesheet.create({   itemcontainer: {     flex: 1,     flexdirection: "row",     justifycontent: "flex-start",     bordercolor: "red",     borderwidth: 1   },    itemtext: {     padding: 16,     bordercolor: "blue",     borderwidth: 1   } }); 

i use wrapper view text. use flexbox scale text full width , align content left. result not expected when text aligned center , wrap content (the wrapper view wrap content). how fix this?

just add flex on style itemtext :

itemtext: {      flex: 1,     padding: 16,     bordercolor: "blue",     borderwidth: 1  } 

in emulator show :

i hope answer can you..