@olea-bps/base 1.0.2 → 1.0.4

package/context/context-public-transport-ticket/index.js

@@ -24,7 +24,7 @@ import CollektorVersion2ApiProvider from './CollektorVersion2ApiProvider';
 
 /**
  * @typedef Ticket
- * @property {string} barcode
+ * @property {string} barcode URL oder Data-URI für den Ticketbarcode als Bild
  * @property {string} owner
  * @property {date} valid_from
  * @property {date} valid_to
@@ -32,7 +32,7 @@ import CollektorVersion2ApiProvider from './CollektorVersion2ApiProvider';
 
 /**
  * @typedef PublicTransportTicketContext
- * @property {string} ticketBarcode
+ * @property {string} ticketBarcode Barcode Data-URI/URL
  * @property {string} ticketOwner
  * @property {string} ticketValidFrom
  * @property {string} ticketValidTo

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olea-bps/base",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "OLEA base library",
   "main": "index.js",
   "repository": {

package/views/PublicTransportTicket/index.js

@@ -12,13 +12,27 @@
  * limitations under the License.
  */
 
-import { useState, useEffect, useMemo, useCallback } from 'react';
-import { AppState, SafeAreaView, View, ScrollView, StyleSheet, Alert, useWindowDimensions, RefreshControl } from 'react-native';
+import {
+    useState,
+    useEffect,
+    useMemo,
+    useCallback,
+} from 'react';
+import {
+    AppState,
+    SafeAreaView,
+    View,
+    ScrollView,
+    StyleSheet,
+    Alert,
+    RefreshControl,
+    Image,
+    useWindowDimensions,
+} from 'react-native';
 
 import { useTheme, Text, Button } from 'react-native-paper';
 import { useFocusEffect } from '@react-navigation/native';
 import { useTranslation } from 'react-i18next';
-import QRCode from 'react-native-qrcode-svg';
 
 import AppbarComponent from '../../components/AppBar';
 import { useUser } from '../../context/context-user';
@@ -31,6 +45,7 @@ import componentStyles from './styles';
  */
 export default function PublicTransportTicketView() {
     const componentName = PublicTransportTicketView.name;
+    const { height: windowHeight } = useWindowDimensions();
     // Get theme from theme context
     const theme = useTheme();
     const { themeStyles } = theme;
@@ -39,7 +54,6 @@ export default function PublicTransportTicketView() {
 
     const [user, login] = useUser();
     const [ticketBarcode, ticketOwner, ticketValidFrom, ticketValidTo, refreshTicket] = usePublicTransportTicket();
-    const { width } = useWindowDimensions();
 
     const [refreshingTicketScrollView, setRefreshingTicketScrollView] = useState(false);
 
@@ -114,9 +128,16 @@ export default function PublicTransportTicketView() {
                                 ticketBarcode
                                     ? <>
                                         <View>
-                                            <QRCode
-                                                value={ticketBarcode}
-                                                size={width * 0.8}
+                                            <Image
+                                                style={{
+                                                    // Der Barcode soll die Hälfte der Bildschirmhöhe ausfüllen.
+                                                    height: windowHeight / 2,
+                                                    width: '100%',
+                                                }}
+                                                source={{ uri: ticketBarcode }}
+                                                // Barcode soll auf die passende Größe angepasst und zentriert werden.
+                                                // Beim anpassen, wird das Seitenverhältnis beibehalten.
+                                                resizeMode='center'
                                             />
                                         </View>
                                         <Text>