react-native#Linking JavaScript Examples

onTurnOnPermissionBLE() {
    this.setState({isVisiblePermissionBLE: false});
    Linking.canOpenURL('app-settings:')
      .then(supported => {
        if (!supported) {
          console.log("Can't handle settings url");
        } else {
          return Linking.openURL('app-settings:');
        }
      })
      .catch(err => console.error('An error occurred', err));
  }

render() {
        return (
            <ScrollView>
                <View style={styles.container}>
                    <View style={styles.header}></View>
                    <Image style={styles.avatar} source={{ uri: 'http://getplaced.pythonanywhere.com/media/images/profile/Get_placed_logo_RcjthfI.jpeg' }} />
                    <View style={styles.body}>
                        <View style={styles.bodyContent}>
                            <Text style={styles.name}>Get Placed</Text>
                            <Text style={styles.info}>Let us give the best</Text>
                            <Text style={styles.description}>Hello and welcome to Get Placed! We want to connect with people and connect those people with information. At Get Placed, we help you to find the best courses, certifications and tutorials online.
                                Get Placed provides information of upcoming off-campus hiring drives, Internships <Text style={{ color: "#00BFFF" }} onPress={() => Linking.openURL('http://getplaced.pythonanywhere.com/Terms-and-condition/')}>read more</Text> </Text>

                        </View>
                    </View>
                </View>
            </ScrollView>
        );
    }

Home = () => (
  <View style={styles.center}>
    <ScrollView style={styles.scroll}>
      <Image
        style={styles.image}
        source={require('../images/2020-cfc-512.png')}
      />
      <Text style={styles.subtitle}>Starter Kit</Text>
      <Text style={styles.title}>Community Collaboration</Text>
      <Text style={styles.content}>
        There is a growing interest in enabling communities to cooperate among
        themselves to solve problems in times of crisis, whether it be to
        advertise where supplies are held, offer assistance for collections, or
        other local services like volunteer deliveries.
      </Text>
      <Text style={styles.content}>
        What is needed is a solution that empowers communities to easily connect
        and provide this information to each other.
      </Text>
      <Text style={styles.content}>
        This solution starter kit provides a mobile application, along with
        server-side components, that serves as the basis for developers to build
        out a community cooperation application that addresses local needs for
        food, equipment, and resources.
      </Text>
      <View style={styles.buttonGroup}>
        <TouchableOpacity onPress={() => Linking.openURL('https://developer.ibm.com/callforcode')}>
          <Text style={styles.button}>Learn more</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => Linking.openURL('https://github.com/Call-for-Code/Solution-Starter-Kit-Cooperation-2020')}>
          <Text style={styles.button}>Get the code</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  </View>
)

Home = () => (
  <View style={styles.center}>
    <ScrollView style={styles.scroll}>
      <Image
        style={styles.image}
        source={require('../images/2020-cfc-512.png')}
      />
      <Text style={styles.subtitle}>Starter Kit</Text>
      <Text style={styles.title}>Disaster Resiliency</Text>
      <Text style={styles.content}>
        Due to climate change, floods are becoming more frequent and more severe,
        leading to specific issues for affected communities. This solution
        starter kit looks to aid potential victims better prepare for, act
        during, and recover from a flood. 
      </Text>
      <View style={styles.buttonGroup}>
        <TouchableOpacity onPress={() => Linking.openURL('https://developer.ibm.com/callforcode')}>
          <Text style={styles.button}>Learn more</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => Linking.openURL('https://github.com/Call-for-Code/Solution-Starter-Kit-Disasters-2020')}>
          <Text style={styles.button}>Get the code</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  </View>
)

export default function () { // Setup Providers
  React.useEffect(() => {
    const subscription = Notifications.addNotificationResponseReceivedListener(response => {
      const link = response.notification.request.content.data?.body?.link;
      if(link) Linking.openURL(link);
    });
    return () => subscription.remove();
  }, []);
  return <SafeAreaProvider>
    <ReduxProvider store={store}>
      <ThemeWrapper />
    </ReduxProvider>
  </SafeAreaProvider>
}

handleUrlPress = onDeeplinkPress => (url) => {
  if (url.startsWith(UNIVERSAL_LINK_PREFIX)) {
    onDeeplinkPress(url);
  } else {
    const processedUrl = WWW_URL_PATTERN.test(url) ? `http://${url}` : url;
    Linking.canOpenURL(processedUrl).then((supported) => {
      if (supported) {
        Linking.openURL(processedUrl);
      }
    });
  }
}

FooterComponent = () => {
  const { t } = useTranslation()

  const openInBrowser = useCallback(url => {
    Linking.openURL(url).catch(err => console.error("Couldn't load page", err))
  }, [])

  return (
    <TouchableOpacity
      style={d(styles.footer)}
      onPress={() => openInBrowser('https://openmined.org')}>
      <Text style={styles.footerText}>{t('volunteers')}</Text>
      <Image
        style={styles.openMinedLogo}
        source={require('../../../../assets/images/openmined-logo.png')}
        resizeMode="contain"
      />
    </TouchableOpacity>
  )
}

NeedUpdateContextProvider = ({ children }) => {
  const [needUpdate, setNeedUpdate] = useState(false);

  useEffect(() => {
    (async () => {
      const response = await API.get({ path: "/version" });
      if (response.ok && BUILD_NUMBER !== response.data.MOBILE_BUILD_NUMBER) {
        setNeedUpdate(true);
        Alert.alert(
          `La nouvelle version ${response.data.MOBILE_VERSION}(${response.data.MOBILE_BUILD_NUMBER}) de Ma Tête et Moi est disponible !`,
          `Vous avez la version ${VERSION}(${BUILD_NUMBER}) actuellement sur votre téléphone`,
          [
            {
              text: "Télécharger",
              onPress: () =>
                Linking.openURL(
                  Platform.select({
                    ios: "https://apps.apple.com/fr/app/mon-suivi-psy/id1540061393",
                    android: "https://play.google.com/store/apps/details?id=com.monsuivipsy",
                  })
                ),
            },
            { text: "Plus tard", style: "cancel" },
          ],
          { cancelable: true }
        );
      }
    })();
  }, []);

  return <NeedUpdateContext.Provider value={needUpdate}>{children}</NeedUpdateContext.Provider>;
}

function ExternalLink({ href, children }) {
  return (
    <Text
      style={{ textDecorationLine: 'underline' }}
      onPress={() => Linking.openURL(href)}
    >
      {children}
    </Text>
  );
}

HelpWebView = ({ link }) => {
  function handleStateChange({ url }) {
    if (!url) {
      return;
    }

    const isEmail = url.startsWith('mailto:');
    const isDifferent = !url.startsWith(link);
    const isSecure = url.startsWith('https:');

    if (isEmail || (isDifferent && isSecure)) {
      Linking.openURL(url);
    }
  }

  return (
    <WebView
      source={{ uri: link }}
      onNavigationStateChange={handleStateChange}
    />
  );
}

function Home(props) {

    const { navigation } = props;

    function renderSection() {
        const sectionArr = [
            [
                { title: 'Github', subtitle: '求star', image: require('../../assets/img/mine/github.png'), onPress: () => Linking.openURL('https://github.com/baozouai') },
                { title: '博客', image: require('../../assets/img/mine/icon_mine_comment.png'), onPress: () => Linking.openURL('https://baozouai.com') },
            ],
            [
                { title: '关于暴走', subtitle: '我要合作', image: require('../../assets/img/mine/icon_mine_aboutmeituan.png'), onPress: () => navigation.navigate('AboutMe') }
            ]
        ];
        return (
            sectionArr.map((section, index) => <Section section={section} key={index} />)
        )
    }
    return (
        <SafeAreaView style={styles.wrapper}>
            <ScrollView>
                <Header navigation={navigation} />
                {renderSection()}
            </ScrollView>
        </SafeAreaView>
    )
}

onRequestViewTransaction = (e, transaction) => (dispatch, getState) => Promise
  .resolve()
  .then(
    () => {
      if (typeCheck("{transactionHash:String,...}", transaction)) {
        const { transactionHash } = transaction;
        return Linking.openURL(`https://ropsten.etherscan.io/tx/${transactionHash}`);
      }
      return Promise.reject(new Error(`Expected transaction object, encountered ${transaction}.`));
    },
  )

function ShareButton({url}) {
  function onPressButton() {
    Linking.openURL(url);
  }
  return (
    <TouchableOpacity activeOpacity={0.7} onPress={() => onPressButton()}>
      <Icon name="external-link" color={'#FFF'} size={20} />
    </TouchableOpacity>
  );
}

componentDidMount() {
        this.unsubscribe = NetInfo.addEventListener(this.handleNetInfoChange);
        AppState.addEventListener('change', this.handleAppStateChange);
        Linking.addEventListener('url', this.handleURI);
        initBackgroundSync();
        let flipFlop = false;

        let keepAnimating = () => {

          Animated.timing(this.animatedValue, {
            toValue: flipFlop ? 0 : 224,
            duration: 30000
          }).start(() => {
            flipFlop = flipFlop ? false : true;
            keepAnimating();
          });

        }

          Animated.timing(this.animatedValue, {
            toValue: 224,
            duration: 30000
          }).start(() => {
            keepAnimating();

      });
    }

Disclaimer = ({
  theme,
  navigation,
  authSignout,
  authSignoutRequest,
  usersGetProfile,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  return (
    <View style={styling.root}>
      <Text style={styling.text}>
        {t('By using this app you agree to our')}
      </Text>

      <TouchableOpacity onPress={() => Linking.openURL('https://real.app/real-terms-service-html-english.html').catch(() => {})}>
        <Text style={styling.link}>{t('Terms and Service')}</Text>
      </TouchableOpacity>

      <TouchableOpacity onPress={() => Linking.openURL('https://real.app/real-privacy-policy-html-english.html').catch(() => {})}>
        <Text style={styling.link}>{t('Privacy Policy')}</Text>
      </TouchableOpacity>
    </View>
  )
}

DocExternalLink = ({ children, href }) =>
  Platform.OS === 'ios' || Platform.OS === 'android' ? (
    <Text style={styles.link} accessibilityRole="link" onPress={() => Linking.openURL(href)}>
      {children}
    </Text>
  ) : (
    <Text style={styles.link} accessibilityRole="link" href={href} target="_blank">
      {children}
    </Text>
  )

export default function LinkButton({onHeight, style, title, url}) {
  return (
    <Button
      style={style}
      onHeight={onHeight}
      onPress={() => {
        Linking.openURL(url);
      }}>
      {title}
    </Button>
  );
}

async openLink() {
      try {
          const url = this.walletService.getTxStatusUrl(this.state.transactionDetails.transactionHash);
          if (await InAppBrowser.isAvailable()) {
              await InAppBrowser.open(url, {
                  // iOS Properties
                  dismissButtonStyle: 'done',
                  preferredBarTintColor: Colors.white,
                  preferredControlTintColor: Colors.tintColor,
                  readerMode: false,
                  animated: true,
                  modalPresentationStyle: 'pageSheet',
                  modalTransitionStyle: 'coverVertical',
                  modalEnabled: true,
                  enableBarCollapsing: true,
                  // Android Properties
                  showTitle: true,
                  toolbarColor: Colors.primaryBg,
                  secondaryToolbarColor: 'white',
                  enableUrlBarHiding: true,
                  enableDefaultShare: true,
                  forceCloseOnRedirection: false,
                  // Animations
                  animations: {
                      startEnter: 'slide_in_right',
                      startExit: 'slide_out_left',
                      endEnter: 'slide_in_left',
                      endExit: 'slide_out_right',
                  },
                  headers: {
                      'my-custom-header': 'Track Status',
                  },
              });
          }
          else Linking.openURL(url);
      } catch (error) {
          //toast error
      }
  }

onLinkPress(evt, href) {
    Linking.openURL(href).catch(() => console.log('Link lỗi'));
  }

export default function Create() {
    const [title, setTitle] = useState("")
    const [body, setbody] = useState("")

    const createTwoButtonAlert = () =>
        Alert.alert(
            "Alert",
            "Add Blog through our website",
            [
                {
                    text: "Cancel",
                    onPress: () => console.log("Cancel Pressed"),
                    style: "cancel"
                },
                { text: "OK", onPress: () => Linking.openURL('http://getplaced.pythonanywhere.com/Add_Blog_Post/') }
            ]
        );

    return (
        <View>
            <TextInput style={styles.inputStyle}
                label="Title"
                value={title}
                mode="outlined"
                onChangeText={text => setTitle(text)}
                outlineColor="#002223"
            />
            <TextInput style={{ marginTop: 10, padding: 8, }}
                label="Body"
                value={body}
                mode="outlined"
                onChangeText={text => setbody(text)}
            />
            <Button style={{ marginTop: 30, width: 180, marginLeft: 100, }}
                icon="pencil"
                mode="contained"
                color="#002223"
                onPress={createTwoButtonAlert}
            >Post Blog</Button>
        </View>
    )
}

export default function Detail() {
  const navigation = useNavigation();
  const route = useRoute();

  const incident = route.params.incident;
  const message = `Olá ${
    incident.name
  }, estou entrando em contato pois gostaria de ajudar no caso "${
    incident.title
  }" com o valor de ${Intl.NumberFormat("pt-BR", {
    style: "currency",
    currency: "BRL"
  }).format(incident.value)}`;

  function navigateBack() {
    navigation.goBack();
  }

  function sendMail() {
    MailComposer.composeAsync({
      subject: `Herói do caso: ${incident.title}`,
      recipients: [incident.email],
      body: message
    });
  }

  function sendWhatsapp() {
    Linking.openURL(
      `whatsapp://send?phone=${incident.whatsapp}&text=${message}`
    );
  }

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Image source={logoImg} />

        <TouchableOpacity onPress={navigateBack}>
          <Feather name="arrow-left" size={28} color="#E82041" />
        </TouchableOpacity>
      </View>

      <View style={styles.incident}>
        <Text style={[styles.incidentProperty, { marginTop: 0 }]}>ONG:</Text>
        <Text style={styles.incidentValue}>
          {incident.name} de {incident.city}/{incident.uf}
        </Text>

        <Text style={styles.incidentProperty}>CASO:</Text>
        <Text style={styles.incidentValue}>{incident.title}</Text>

        <Text style={styles.incidentProperty}>VALOR:</Text>
        <Text style={styles.incidentValue}>
          {Intl.NumberFormat("pt-BR", {
            style: "currency",
            currency: "BRL"
          }).format(incident.value)}
        </Text>
      </View>

      <View style={styles.contactBox}>
        <Text style={styles.heroTitle}>Salve o dia!</Text>
        <Text style={styles.heroTitle}>Seja o herói desse caso.</Text>

        <Text style={styles.heroDescription}>Entre em contato:</Text>

        <View style={styles.actions}>
          <TouchableOpacity style={styles.action} onPress={sendWhatsapp}>
            <Text style={styles.actionText}>WhatsApp</Text>
          </TouchableOpacity>

          <TouchableOpacity style={styles.action} onPress={sendMail}>
            <Text style={styles.actionText}>E-mail</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
}

openVideoLink(url) {
        Linking.openURL(url)
    }

export default function Detail() {
  const navigation = useNavigation();
  const route = useRoute();
  const { incident } = route.params;
  const message = `Olá ${incident.ong.name}, estou entrando em contato pois gostaria de ajudar no caso "${incident.title}" com o valor de ${incident.valueFormated}.`;

  function sendMail() {
    MailComposer.composeAsync({
      subject: `Herói do caso: ${incident.title}`,
      recipients: [`${incident.ong.email}`],
      body: message,
    });
  }

  function sendWhatsapp() {
    Linking.openURL(`whatsapp://send?phone=+55${incident.ong.whatsapp}&text=${message}`);
  }

  return (
    <Container>
      <Header>
        <Image source={logoImg} />
        <TouchableOpacity onPress={() => navigation.goBack()}>
          <Feather name="arrow-left" size={28} color={colors.redHero} />
        </TouchableOpacity>
      </Header>

      <Incident>
        <GroupRow>
          <View style={{ marginRight: 16, width: '50%' }}>
            <IncidentProperty style={{ marginTop: 0 }}>
              CASO:
            </IncidentProperty>
            <IncidentValue>{incident.title}</IncidentValue>
          </View>

          <View style={{ flex: 1 }} >
            <IncidentProperty style={{ marginTop: 0 }}>
              ONG:
            </IncidentProperty>
            <IncidentValue ellipsizeMode="tail" >
              {incident.ong.name} de {incident.ong.city}/{incident.ong.uf}
            </IncidentValue>
          </View>
        </GroupRow>

        <IncidentProperty>DESCRIÇÃO:</IncidentProperty>
        <IncidentValue>{incident.description}</IncidentValue>

        <IncidentProperty>VALOR:</IncidentProperty>
        <IncidentValue>{incident.valueFormated}</IncidentValue>
      </Incident>

      <ContactBox>
        <HeroTitle>Salve o dia!</HeroTitle>
        <HeroTitle>Seja o herói desse caso.</HeroTitle>

        <HeroDescription>Entre em contato:</HeroDescription>

        <Actions>
          <Action onPress={sendWhatsapp}>
            <ActionText>WhatsApp</ActionText>
          </Action>

          <Action onPress={sendMail}>
            <ActionText>E-mail</ActionText>
          </Action>
        </Actions>
      </ContactBox>
    </Container>
  );
}

UpdateScreen = memo(({ navigation, route }) => {
    const [darkMode, setDarkMode] = useMMKVBoolean("darkMode", storage)
    const [lang, setLang] = useMMKVString("lang", storage)

    return (
        <View style={{
            width: "100%",
            height: "100%",
            alignItems: "center",
            justifyContent: "center",
            backgroundColor: darkMode ? "black" : "white"
        }}>
            <View style={{
                width: "70%",
                height: "auto",
                alignItems: "center",
                justifyContent: "center",
                marginTop: -50
            }}>
                <Ionicon name="information-circle-outline" size={60} color={darkMode ? "white" : "black"} />
                <Text style={{
                    color: darkMode ? "white" : "black",
                    fontSize: 20,
                    marginTop: 15
                }}>
                    {i18n(lang, "updateAvailable")}
                </Text>
                <Text style={{
                    color: darkMode ? "white" : "black",
                    textAlign: "center",
                    marginTop: 15
                }}>
                    {i18n(lang, "updateNeeded")}
                </Text>
                <TouchableOpacity style={{
                    marginTop: 25
                }} onPress={() => {
                    const link = Platform.OS == "android" ? PLAYSTORE_LINK : APPSTORE_LINK

                    Linking.canOpenURL(link).then((supported) => {
                        if(supported){
                            Linking.openURL(link)
                        }
                        else{
                            showToast({ message: i18n(lang, "couldNotOpenAppStoreLink") })
                        }
                    }).catch((err) => {
                        console.log(err)

                        showToast({ message: i18n(lang, "couldNotOpenAppStoreLink") })
                    })
                }}>
                    <Text style={{
                        color: "#0A84FF"
                    }}>
                        {i18n(lang, "updateNow")}
                    </Text>
                </TouchableOpacity>
            </View>
        </View>
    )
})

openInBrowser(url) {
    Linking.openURL(url).catch(err => console.error("Couldn't load page", err))
  }

redirectAlert = (title, message, url) => {
    Alert.alert(title, message, [
        { text: 'Cancelar', style: 'cancel' },
        { text: 'Ok', onPress: () => Linking.openURL(url) },
    ])
}

async install(path, progress) {
    if (Platform.OS == "ios") {
      Linking.openURL(path);
    } else {
      const publicPath = `/data/data/${this.bundleId}/files/public`;
      if (!(await RNFS.exists(publicPath))) {
        await RNFS.mkdir(publicPath);
      }
      const filePath = `${publicPath}/rrwallet.apk`;
      if (await RNFS.exists(filePath)) {
        await RNFS.unlink(filePath);
      }
      let percent = 0;
      const ret = RNFS.downloadFile({
        fromUrl: path,
        toFile: filePath,
        connectionTimeout: 1000 * 120,
        progressDivider: 1,
        progress: ({ contentLength, bytesWritten }) => {
          percent = parseFloat((bytesWritten / contentLength).toFixed(2));
          if (!isFinite(percent) || isNaN(percent)) {
            return;
          }
          progress && progress(percent);
        },
      });
      const res = await ret.promise;
      if (percent !== 1) {
        throw new Error(i18n.common("update-download-failed"));
      }
      await sleep(400);
      try {
        await RRRNDevice.installAPK(filePath);
      } catch (error) {
        const logger = require("../../util/logger").default;
        logger.error(new Error("安装失败"));
        alert(error);
      }
    }
  }

LegalMentions = ({ navigation }) => {
  const content = (
    <View>
      <Text style={styles.h1}>Editeur de l'application</Text>
      <Text style={styles.default}>
        L'application Ma Tête et Moi est éditée par la Direction Générale de la Santé au sein de la Fabrique
        numérique des Ministères sociaux située&nbsp;:
      </Text>
      <Text style={styles.default}>
        Tour Mirabeau{"\n"}
        39-43 Quai André Citroën{"\n"}
        75015 PARIS{"\n"}
        Tél. : 01 40 56 60 00
      </Text>
      <Text style={styles.h1}>Directeur de la publication</Text>
      <Text style={styles.default}>Monsieur Jérôme SALOMON, Directeur général de la Santé</Text>
      <Text style={styles.h1}>Hébergement de l'application</Text>
      <Text style={styles.default}>
        Ce site est hébergé par Microsoft Azure France (région France centre) :
      </Text>
      <Text style={styles.default}>
        Microsoft France{"\n"}
        37 Quai du Président Roosevelt{"\n"}
        92130 ISSY-LES-MOULINEAUX
      </Text>
      <Text style={styles.h1}>Accessibilité</Text>
      <Text style={styles.default}>
        La conformité aux normes d'accessibilité numérique est un objectif ultérieur mais nous tâchons de
        rendre cette application accessible à toutes et à tous.
      </Text>
      <Text style={styles.h1}>Signaler un dysfonctionnement</Text>
      <Text style={styles.default}>
        Si vous rencontrez un défaut d'accessibilité vous empêchant d'accéder à un contenu ou une
        fonctionnalité de l'application, merci de nous en faire part. Si vous n'obtenez pas de réponse rapide
        de notre part, vous êtes en droit de faire parvenir vos doléances ou une demande de saisine au
        Défenseur des droits.
      </Text>
      <Text style={styles.h1}>En savoir plus</Text>
      <Text style={styles.default}>
        Pour en savoir plus sur la politique d'accessibilité numérique de l'État
        <TouchableOpacity
          onPress={() => Linking.openURL("http://references.modernisation.gouv.fr/accessibilite-numerique")}
        >
          <Text style={styles.link}>http://references.modernisation.gouv.fr/accessibilite-numerique</Text>
        </TouchableOpacity>
      </Text>
      <Text style={styles.h1}>Sécurité</Text>
      <Text style={styles.default}>
        L'application est protégé par un certificat électronique, matérialisé pour la grande majorité des
        navigateurs par un cadenas. Cette protection participe à la confidentialité des échanges.
        {"\n\n"}En aucun cas les services associés à la plateforme ne seront à l'origine d'envoi de courriels
        pour demander la saisie d'informations personnelles.
      </Text>
    </View>
  );

  return <LegalScreen navigation={navigation} title="Mentions légales" content={content} />;
}

function compileMessage(message, actions, color, setLoading, onRemove) {
  return (
    <Stack spacing={2}>
      {message.split(/\n\n/).map(paragraph => {
        let parts = paragraph.split(/(\[[^\]]*\]\([^)]*\))/g);

        return (
          <Text style={{ lineHeight: 22, fontSize: 15, color }}>
            {parts.map(part => {
              let match = part.match(/\[([^\]]*)\]\(([^)]*)\)/);
              if (match) {
                let [_, text, href] = match;

                if (href[0] === '#') {
                  let actionName = href.slice(1);
                  return (
                    // eslint-disable-next-line
                    <Link
                      onOpen={async () => {
                        if (actions[actionName]) {
                          setLoading(true);
                          await actions[actionName]();
                          onRemove();
                        }
                      }}
                    >
                      {text}
                    </Link>
                  );
                }

                return (
                  <Link onOpen={href => Linking.openURL(href)} href={match[2]}>
                    {match[1]}
                  </Link>
                );
              }
              return <Text>{part}</Text>;
            })}
          </Text>
        );
      })}
    </Stack>
  );
}