React Native : What is the right way to open waze or google-maps?

Question

I use the "react-native-map-link" library and when I try to activate the NavigationDialog function then nothing happens and I don't see waze or google maps. What is the right way to open waze or google-maps ?

import { Popup } from 'react-native-map-link';

const Preferences = () => {
  const [isVisible, setIsVisible] = useState(false);

function NavigationDialog() {
    const options = {
      latitude: 38.8976763,
      longitude: -77.0387185,
      title: 'The White House',
      dialogTitle: 'Navigation to -',
      dialogMessage: ' :Select the app to navigate to the sampling point',
      cancelText: 'Cancel',
    };
    return (
      <Popup
        isVisible={isVisible}
        onCancelPressed={() => setIsVisible(false)}
        onAppPressed={() => setIsVisible(false)}
        onBackButtonPressed={() => setIsVisible(false)}
        modalProps={{
          animationIn: 'slideInUp',
        }}
        appsWhiteList={['waze', 'google-maps']}
        options={options}
        style={{}}
      />
    );
  }

return (
<TouchableOpacity onPress={() => NavigationDialog()}>
              <Text>waze</Text>
          </TouchableOpacity>
  );
};

Answer 1

it looks like you are not using the Popup component the good way, the Popup component from this lib use the Modal React native componenent, have a look at the doc: RN Modal doc

import { Popup } from 'react-native-map-link';

const Preferences = () => {
  const [isVisible, setIsVisible] = useState(false);
  const options = {
      latitude: 38.8976763,
      longitude: -77.0387185,
      title: 'The White House',
      dialogTitle: 'Navigation to -',
      dialogMessage: ' :Select the app to navigate to the sampling point',
      cancelText: 'Cancel',
    }; 

return (
    <>
        <Popup
            isVisible={isVisible}
            onCancelPressed={() => setIsVisible(false)}
            onAppPressed={() => setIsVisible(false)}
            onBackButtonPressed={() => setIsVisible(false)}
            modalProps={{
               animationIn: 'slideInUp',
            }}
            appsWhiteList={['waze', 'google-maps']}
            options={options}
            style={{}}
        />
        <TouchableOpacity onPress={() => setIsVisible(true)}>
              <Text>waze</Text>
        </TouchableOpacity>
    </>
  );
};