infoWindow.js

import { TouchableOpacity, Button, View, Text } from "react-native";


import useComponentVisible from '../../components/ComponentVisible'

export const goTo = (navigation, place) => navigation.navigate("vuDetails",{name : place});

export const InfoWindow = (props) => {
    const { place, navigation } = props;


    const { ref, isComponentVisible } = useComponentVisible(true);

  //
    // console.log(route.param.name)
    const infoWindowStyle = {
      position: 'relative',
      bottom: 150,
      width: 220,
      backgroundColor: 'white',
      boxShadow: '0 2px 7px 1px rgba(0, 0, 0, 0.3)',
      padding: 10,
      fontSize: 14,
      zIndex: 100,
    };

    return (
      isComponentVisible &&(
      <View ref={ref}>

        <TouchableOpacity>
          <View style={{width: 200, height: 100, backgroundColor: "white"}}>
            <Text style = {{fontSize: 16}}>
              {place.name}
            </Text>
            <View style = {{fontSize: 14}}>
              <Text style = {{ color: 'grey' }}>
                {place.rating}
              </Text>
              <View style={{ flexDirection: "row"}}>
                <Text style = {{ color: 'orange' }}>
                  {String.fromCharCode(9733).repeat(Math.floor(place.rating))}
                </Text>
                <Text style = {{ color: 'lightgrey' }}>
                  {String.fromCharCode(9733).repeat(5 - Math.floor(place.rating))}
                </Text>
                <Text style={{ fontSize: 14, color: 'green' }}>
                  {"\n"}
                  {place.loue.loue ? 'disponible' : 'occupé'}
                </Text>

              </View>
              <Button onPress={() => goTo(navigation, place)} title={`voir`} />
            </View>
          </View>
        </TouchableOpacity>

      </View>
      )

    )

    return (
      <div ref={ref}>
        {isComponentVisible &&(
      <TouchableOpacity>
              <div  style={infoWindowStyle}>

                <div style={{ fontSize: 16 }}>
                  {place.name}
                </div>
                <div style={{ fontSize: 14 }}>
          <span style={{ color: 'grey' }}>
            {place.rating}
            {' '}
          </span>
                  <span style={{ color: 'orange' }}>
            {String.fromCharCode(9733).repeat(Math.floor(place.rating))}
          </span>
                  <span style={{ color: 'lightgrey' }}>
            {String.fromCharCode(9733).repeat(5 - Math.floor(place.rating))}
          </span>
                </div>
                <div style={{ fontSize: 14, color: 'grey' }}>
                  {place.types[0]}
                </div>
                <div style={{ fontSize: 14, color: 'grey' }}>
                  {'$'.repeat(place.price_level)}
                </div>
                <div style={{ fontSize: 14, color: 'green' }}>
                  {place.loue.loue ? 'disponible' : 'occupé'}
                </div>
                <Button onPress={goTo} title={`voir`} />
              </div>
      </TouchableOpacity>
        )}
      </div>
    );

  };