React native maps with conditional markers

user_11366810 0
Viewed 325

i’m developing app using firebase and react native maps, i have

this.props.currentUser[
    name, 
    bloodType
]

and

this.state.users[
    name,
    bloodType
]

i want to show for example if currentUser have bloodType: A, i want to show markers in the maps users with bloodType: A, and AB. Currently i only can show if currentUser: A then users: A i'm not able to show the AB. Here is what i've done so far.

<MapView

{this.state.users.filter(element => {
              let bloodCheck = this.props.currentUser.bloodType === element.bloodType  && element.geo_point.latitude 
            !== this.props.currentUser.geo_point.latitude && element.geo_point.longitude 
            !== this.props.currentUser.geo_point.longitude && element.locationOn === true ;
            let distance = this.calculateDistance(this.props.currentUser.geo_point.latitude, this.props.currentUser.geo_point.longitude,
            element.geo_point.latitude , element.geo_point.longitude); console.log(element.bloodType, bloodCheck)
            if(bloodCheck === true){
              return distance < 15000;
            }
            else{
              return false;
            }.map((user, idx) => <Marker
            key={idx}
            coordinate={{latitude: user.geo_point.latitude, longitude: user.geo_point.longitude}}
            >
</Marker>)}

</MapView>

react-native-maps firebase react-native javascript
1 Answers

You can create function to check bloodType value according to your condition

check = (bloodType1, bloodType2) => {
        var AType = ["A", "AB"];
        var BType = ["B", "AB"];
        var ABType = ["A", "B", "AB"];
        var OType = ["A", "B", "AB", "O"];
        if (bloodType1 == 'A' && AType.includes(bloodType2, 0)) {
            return true;
        } else if (bloodType1 == 'B' && BType.includes(bloodType2, 0)) {
            return true;
        } else if (bloodType1 == 'AB' && ABType.includes(bloodType2, 0)) {
            return true;
        } else if (bloodType1 == 'O' && OType.includes(bloodType2, 0)) {
            return true;
        } else {
            return false
        }
    }

and simple pass your value to function

let bloodCheck = this.check(this.props.currentUser.bloodType, element.bloodType)  && element.geo_point.latitude 
            !== this.props.currentUser.geo_point.latitude && element.geo_point.longitude 
            !== this.props.currentUser.geo_point.longitude && element.locationOn === true ;
user_120854550
Related