1

I am new to React-Native & created a QR Scanner App. After scanning want to open url onClick/onPress.

Here is the image of my code

-- Here is the code

onSuccess = (e) => { setResult(e.data) setScan(false) }

// Start scanner startScan = () => { setScan(true) setResult() }

            <QRCodeScanner
              reactivate={true}
              showMarker={true}
              ref={(node) => { this.scanner = node }}
              onRead={this.onSuccess}
              topContent={
                <Text style={styles.centerText}>
                  Scan your QRCode!
                </Text>
              }
              bottomContent={
                <TouchableOpacity style={styles.buttonTouchable} onPress={() => setScan(false)}>
                  <Text style={styles.buttonText}>Cancel Scan</Text>
                </TouchableOpacity>
              }
            />
Shruti Gupta
  • 77
  • 6
  • Hi, can you give more detail about the URL that you want to open? Or the `onClick` function that you want to be executed? – Michael Harley Apr 05 '22 at 06:15
  • Hello @Michael Harley.... Yaaaa there is a QR Code scanner app.... When we scan any QR Code... then related to that QR Code a URL has been generated. Now i want that when i click on that generated URL, that page'll be open in the browser – Shruti Gupta Apr 05 '22 at 06:23
  • I think you can use `Linking` from `react-native` to open the new browser, on your `onSuccess` method. Source: https://stackoverflow.com/questions/43804032/open-url-in-default-web-browser – Michael Harley Apr 05 '22 at 06:38
  • yes @MichaelHarley but Linking directly open that page but i want after click on generated url then open that page – Shruti Gupta Apr 05 '22 at 06:47
  • Then you can try to render the URL first with `Text` component (after a success scan), and trigger the `Linking` with `onPress` props from the `Text`. https://stackoverflow.com/questions/30540252/how-does-one-display-a-hyperlink-in-react-native-app – Michael Harley Apr 05 '22 at 06:49
  • 1
    ohk thanks @MichaelHarley i'll try this one – Shruti Gupta Apr 05 '22 at 06:55
  • Does this answer your question? [How does one Display a Hyperlink in React Native App?](https://stackoverflow.com/questions/30540252/how-does-one-display-a-hyperlink-in-react-native-app) – Michael Harley Apr 05 '22 at 07:01
  • i try it but don't know how to render my data into text block – Shruti Gupta Apr 05 '22 at 07:03

1 Answers1

0

Let me help you

Your code might look like this:

import { useState } from 'react';
import { Text } from 'react-native';

const App = () => {
  const [scan, setScan] = useState(false);
  const [result, setResult] = useState();

  function onSuccess(e){
    setResult(e.data);
    setScan(false);
  }

  function onURLPress(){
    Linking.openURL(result);
  }

  return (
    <QRCodeScanner
      reactivate={true}
      showMarker={true}
      ref={(node) => { this.scanner = node }}
      onRead={this.onSuccess}
      topContent={
        <Text style={styles.centerText}>
          Scan your QRCode!
        </Text>
      }
      bottomContent={
        <Text style={[styles.buttonText, styles.buttonTouchable]} onPress={() => setScan(false)}>Cancel Scan</Text>
      }
    />

    {/* This is where you show the generated url */}
    {result && <Text onPress={onURLPress}>{result}</Text>}
  )
}

Note that you can change your bottomContent Text to use onPress as well, instead of using TouchableOpacity.

Michael Harley
  • 831
  • 1
  • 9
  • 20
  • thanku @Michael Harley but it's not working... output remain same... didn't redirect when click on url – Shruti Gupta Apr 05 '22 at 07:26
  • @ShrutiGupta Any error message that you can find? does the URL value available? you need to debug it and see the next problem/error, then fix the new problem. – Michael Harley Apr 05 '22 at 09:04
  • no there is no error occur.... output remain same... – Shruti Gupta Apr 05 '22 at 09:14
  • I will need more detail about the URL that you are using, it is possible that the URL is invalid. – Michael Harley Apr 05 '22 at 09:16
  • no URL is perfectly fine because URL is not static... it is dynamic... like when we are scan any QR code then URL is generated... and when we are using linking direct on e.data then scanned URL is open – Shruti Gupta Apr 05 '22 at 09:27