React Native demo with scanning
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

We're looking for a demonstration of your skill with React Native for continuing projects. We want to see a working React Native app on IOS (via TestFlight) which demonstrates scanning a QR code and sending the contents ivia a JSON message to a remote server. We're looking for clean, modern javascript. ES6 and beyond.

This is purely for demonstration. If you are not interested in possibly doing work with our small team of superheros on an ongoing part- or full-time work with our team, please don't submit.

Crowdsource coding tasks.

1 Solution

Winning solution

Full code available here. For demo purposes I just did everything in the same file and dumped the networking code in the component (which is just a POST to google.com).

import { StatusBar } from 'expo-status-bar';
import React, { useState, useEffect } from 'react';
import {
  StyleSheet, Text, View, SafeAreaView, ScrollView, Alert, Button,
} from 'react-native';

import QRCodeScanner from 'react-native-qrcode-scanner';
import { RNCamera } from 'react-native-camera';

const QRWrapper = (props) => (
  <QRCodeScanner onRead={(e) => props.callback(e.data)} />
);

const AppBody = () => {
  const [response, setResponse] = useState(null); // fake API response
  const [code, setCode] = useState(null); // qr code

  useEffect(() => {
    const fetchData = async () => {
      if (!code) return;

      fetch('https://google.com/', { // using a random url as an example
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(code),
      })
        .then((response) => response.text()) // .then(response => response.json())
        .then(setResponse)
        .catch((error) => {
          Alert.alert('Error Loading Data', error.message);
        });
    };

    fetchData();
  }, [code]);

  // Show QR code scanner if no code data
  if (!code) {
    return (
      <View style={styles.container}>
        <Text style={styles.prompt}>Scan a QR code.</Text>
        <QRWrapper callback={setCode} />
      </View>
    );
  }

  // Show loading indicator if waiting for response
  if (!response) {
    return (
      <Text style={styles.prompt}>Loading...</Text>
    );
  }

  // Show response data
  return (
    <View>
      <Button onPress={(_) => setCode(null)} title="Scan Again" />
      <ScrollView>
        <Text style={styles.code}>{response}</Text>
      </ScrollView>
    </View>
  );
};

const App = () => (
  <SafeAreaView style={styles.container}>
      <AppBody />
    <StatusBar style="auto" />
  </SafeAreaView>
);

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  prompt: {
    fontSize: 14,
    marginTop: 14,
    marginBottom: 14,
  },
  code: {
    padding: 10,
    backgroundColor: '#ccc',
    fontFamily: 'Menlo', // NOTE: this font is ios specific
  },
});
Since I haven't received any bids on my $100 D3js post, if you post this solution there, I'll award it to you.
billsouthworth 3 months ago
I'm on linkedin as billsouthworth, at genomicexpression or rottendog I'm bill@, Reach out if you are interested in ongoing directed projects.
billsouthworth 3 months ago