horizontalfriendlist.js

<FlatList
        horizontal
        data={this.state.friendslist}
        style={{height: '15%', width: '100%'}}
        renderItem={({ item: rowData }) => {
          return (
            <TouchableHighlight
            style={{width: 80, height: 85, padding: 10, borderTopLeftRadius:40, borderTopRightRadius:40, borderBottomLeftRadius:10, borderBottomRightRadius:10, flex: 1, alignItems: 'center', marginHorizontal: 2, borderWidth: this.state.friend.name === rowData.name ? 0 : 2, borderColor: '#000000', backgroundColor: this.state.friend.name === rowData.name ? '#bac4bc' : '#8c8f8a'}}
            onPress={() => this.loadChattingUser(rowData)}>
            <View style={{flex: 1, alignItems: 'center', marginHorizontal: 2,}}>
              <Image
                style={{width: 50, height: 50, borderRadius: 30,  borderWidth: 1, borderColor: '#000000',}}
                source={{uri: rowData.imageurl === ""?'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRACqHZnYq7HfFp_OshaZ-Hgc_1mjYqJrWJpc71xNWcxdts2O0j6g':rowData.imageurl}}
              />
              <Text style={{color: '#000000', fontWeight: 'bold',}}>
                {rowData.name.split(" ")[0]}
              </Text>
            </View>
            </TouchableHighlight>
          );
        }}
        keyExtractor={(item, index) => index}
      />