title: Styles in FlatList
body: <p>I am trying to display an image of the building along with the address, phone number and few links in my FlatList. If I put the line in my flatList:</p>
  
  <pre><code>   &lt;View style={{flex:1, flexDirection: 'row'}}&gt;
  </code></pre>
  
  <p>then it displays the image along with all the address rows in one line and I cannot see the Phone Number and other data on the flatList. If I put them in separate rows then I get the image and all the data including address, phone number underneath the image. I want to put the image on the left like it is displaying right now and then the address, phone number and Online and direction link on the right side of it</p>
  
  <p>Below is my code with stylesheet and the image:</p>
  
  <pre><code>_renderItem = ({item, index}) =&gt; {
  
   return(
  
     &lt;View style={{ backgroundColor: index %2 ===0? '#FFD5C2':'#CC8B8C'}} &gt;
                     &lt;View style={{flex:1, flexDirection: 'row'}}&gt;
                  &lt;Image source={require('../images/test.png')} style = {styles.imageView}/&gt;
                  &lt;Text  style={styles.Address1}&gt;{item.addr} &lt;/Text&gt;
  
                  &lt;View style={styles.phoneImg}&gt;
                  &lt;TouchableOpacity
                  onPress={() =&gt; { this.handleClick(`tel:${item.phone}`)}}
              &gt;
                  &lt;Image source={require('../images/call.png')} style={styles.actionImage}/&gt;
                  &lt;/TouchableOpacity&gt;
                  &lt;Text style={styles.Address1}&gt;{item.phone}&lt;/Text&gt;
                &lt;/View&gt;
  
                  &lt;View style={styles.AddressRow}&gt;
                  {
                          item.Online != ''? &lt;TouchableOpacity  onPress={() =&gt; Linking.openURL(  item.Online )}&gt;
                           &lt;Image source={require('../images/www-icon.png')} style={styles.actionImage1}/&gt;
                           &lt;/TouchableOpacity&gt;: null 
  
                            }
  
  
                &lt;TouchableOpacity  onPress={() =&gt; Linking.openURL(item.Online)}&gt;
                      &lt;Text style={styles.underLineText}&gt;Online&lt;/Text&gt;
                  &lt;/TouchableOpacity&gt;
  
  
  
                  &lt;TouchableOpacity  onPress={() =&gt; Linking.openURL(destUrl)}&gt;
                      &lt;Text style={styles.underLineText}&gt;Directions&lt;/Text&gt;
                  &lt;/TouchableOpacity&gt;
  
  
                  &lt;Text style={styles.AddressSpace} &gt;Miles:{dist}&lt;/Text&gt;
  
  
  
                 &lt;/View&gt;
  
  
              &lt;/View&gt;
              &lt;/View&gt;
  
  
          );
  
    }
  </code></pre>
  
  <p>Below is the image of the phone with the building</p>
  
  <p><a href="https://i.stack.imgur.com/eLLEg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eLLEg.png" alt="enter image description here"></a></p>
  
  <p>below is the image on the phone without the building</p>
  
  <p><a href="https://i.stack.imgur.com/JWAlM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JWAlM.png" alt="enter image description here"></a></p>
  
  <p>I just want to display the Building and address phone number on the right side of it on separate lines. I don't want it to be displayed beneath the building photo. Below is my stylesheet:</p>
  
  <pre><code>const styles = StyleSheet.create({
  
  MainContainer :{
  
  // Setting up View inside content in Vertically center.
  justifyContent: 'center',
  flex:1,
  margin: 10
  
  },
  
  item: {
      padding: 10,
      fontSize: 18,
      height: 44,
    },
    container2:
      {
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          paddingHorizontal: 15
      },
      underLineText: {
        fontSize: 17,
        textDecorationLine: 'underline',
        color: 'black',
  
        alignSelf: 'center',
        marginLeft: 20,
        paddingTop:10
  
      },
  
      underLineTextOnline: {
        fontSize: 17,
        textDecorationLine: 'underline',
        color: 'black',
  
        alignSelf: 'center',
        marginLeft: 20,
        paddingTop:5
  
      },
  
      title:{
        justifyContent: 'center',
        paddingTop: 10,
        alignItems: 'center',
        alignSelf: 'center',
        fontWeight: 'bold',
        fontSize: 22,
        color: 'black',
  
        },
  
        Address1:{
          alignSelf: 'center',
          marginRight: 20,
          fontSize: 17,
  
          color: 'black'
      },
      SerContent:{
        fontWeight: 'bold',
        fontSize: 16,
        paddingTop: 10,
        alignSelf: 'center',
        color: 'black',
        paddingBottom: 10
    },
    Address1:{
      alignSelf: 'center',
      marginRight: 20,
      fontSize: 15,
      flexDirection:'column',
      color: 'black',
      marginLeft:10,
      textAlignVertical:'center'
  },
  
  AddressRow:{
    alignSelf: 'center',
    marginRight: 20,
    fontSize: 15,
    flexDirection: 'row',
    color: 'black'
  },
  
  phoneImg:{
  
    flexDirection: 'row',
    alignSelf: 'center',
    textAlignVertical:'center'
  },
  AddressSpace:{
    alignSelf: 'center',
    marginLeft: 20,
    fontSize: 15,
    marginLeft: 20,
    paddingTop:5,
    color: 'black'
  
  },
  
  actionImage:{
    flex:0,
    height:40,
    width:40,
    backgroundColor:'transparent',
    justifyContent:'center',
    alignItems:'center',
    marginTop:10,
    alignSelf:'center',
    flexDirection:'column',
    textAlignVertical:'center'
  },
  
  sepBoxes:{
    flex: 1,
    flexDirection: 'column'
  
  },
  box: {
    height: 55,
    width:400,
  
  
  },
  box1: {
    backgroundColor: 'white'
  },
  
  actionImage1:{
    flex:0,
    height:40,
    width:50,
    backgroundColor:'transparent',
    justifyContent:'center',
    alignItems:'center',
  
    alignSelf:'center',
    flexDirection:'column'
  },
  
  imageView:{
  width:'30%',
  height:100,
  margin:7,
  borderRadius: 7
  
  }
  
  
  });
  </code></pre>
  
  <p>any help will be highly appreciated.</p>