CODEWITHSUNDEEP
react-native
Nabin Dhakal
Nabin Dhakal

Reputation: 2202

Breakline after a item of an array reactnative

I have item that are in array. I want to change the line after setting the first item and so on. I am getting the values in a row. But I want it in column. I am getting value as:

015245088    9823178404  9851108404

But I want value as:

015245088    
9823178404  
9823178404

I have implemented as follows:

 this.state = {
        contact: [
            {
                id: 0,
                name: '015245088'
            },
            {
                id: 1,
                name: '9823178404'
            },
            {
                id: 2,
                name: '9851108404'
            }
        ]
      }

<CardSection>
   <FontAwesomeIcon style={styles.contentStyle} icon={faPhone} />
      {
         this.state.contact.map((item, index) => (
           <TouchableOpacity
              key={item.id}
              style={styles.opacityStyle}
              onPress={()=>Linking.openURL(`tel:${item.name}`)}>                               

              <Text style={styles.contactStyle}>{item.name} </Text>

          </TouchableOpacity>
         ))
        }
     </CardSection>

Upvotes: 0

Views: 44

Answers (2)

Shing Ho Tan
Shing Ho Tan

Reputation: 951

 this.state = {
        contact: [
            {
                id: 0,
                name: '015245088'
            },
            {
                id: 1,
                name: '9823178404'
            },
            {
                id: 2,
                name: '9851108404'
            }
        ]
      }

<CardSection>
   <FontAwesomeIcon style={styles.contentStyle} icon={faPhone} />
   <View style={{flexDirection:'column'}}>
   {

      this.state.contact.map((item, index) => (
        <TouchableOpacity
           key={item.id}
           style={styles.opacityStyle}
           onPress={()=>Linking.openURL(`tel:${item.name}`)}>                               
           <Text style={styles.contactStyle}>{item.name} </Text>
        </TouchableOpacity>
   }
   </View>
</CardSection>

Upvotes: 1

Hamza Waleed
Hamza Waleed

Reputation: 1462

You need to change the flexDirection to column. So, Just add the following styles to styles.contentStyle. Or wrap your map function with a View and add the following styles to it.

flexDirection: 'column'
flex: 1

Upvotes: 1

Related Questions