-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #18 from trajano/pdf-view
Pdf and Nfc
- Loading branch information
Showing
47 changed files
with
2,398 additions
and
265 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -35,6 +35,6 @@ | |
| "dist/" | ||
| ], | ||
| "dependencies": { | ||
| "webdriverio": "^9.2.14" | ||
| "webdriverio": "^9.3.0" | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| export const start = jest.fn(() => Promise.resolve()); | ||
| export const isSupported = jest.fn(() => Promise.resolve(true)); | ||
| export default { | ||
| start, | ||
| isSupported, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,38 +1,38 @@ | ||
| // @ts-check | ||
| // @ts-nocheck | ||
| /* eslint-env node */ | ||
| const { getDefaultConfig } = require('expo/metro-config'); | ||
| const { mergeConfig } = require('metro-config'); | ||
| const withStorybook = require('@storybook/react-native/metro/withStorybook'); | ||
| const path = require('path'); | ||
|
|
||
| const monorepoRoot = path.resolve(__dirname, '../..'); | ||
|
|
||
| const config = getDefaultConfig(__dirname); | ||
| let config = getDefaultConfig(__dirname); | ||
|
|
||
| config.watchFolders = [monorepoRoot]; | ||
| config.resolver.nodeModulesPaths = [ | ||
| ...config.resolver.nodeModulesPaths, | ||
| path.resolve(__dirname, 'node_modules'), | ||
| path.resolve(monorepoRoot, 'node_modules'), | ||
| ]; | ||
| const additionalAssetExts = ['lottie', 'fbx']; | ||
| config.resolver.assetExts = [ | ||
| ...config.resolver.assetExts, | ||
| ...additionalAssetExts, | ||
| ]; | ||
| const testRegexs = [/^.*\/[^/]+\.test\.[^/]+$/, /(\\__mocks__\\.*)$/]; | ||
| if (Array.isArray(config.resolver.blockList)) { | ||
| config.resolver.blockList = [...config.resolver.blockList, ...testRegexs]; | ||
| } else if (typeof config.resolver.blockList === 'object') { | ||
| config.resolver.blockList = [config.resolver.blockList, ...testRegexs]; | ||
| } | ||
|
|
||
| config.transformer.unstable_allowRequireContext = true; | ||
|
|
||
| // due to the nature of this project where it's playing around with packages in and out it's best to reset the cache. | ||
| config.resetCache = true; | ||
|
|
||
| // @ts-ignore | ||
| module.exports = withStorybook(config, { | ||
| config = withStorybook(config, { | ||
| enabled: true, | ||
| configPath: path.resolve(__dirname, './.storybook'), | ||
| }); | ||
|
|
||
| const testRegExps = [/^.*\/[^/]+\.test\.[^/]+$/, /(\\__mocks__\\.*)$/]; | ||
| /** @type {RegExp[]} */ | ||
| const blockList = Array.isArray(config.resolver.blockList) | ||
| ? [...config.resolver.blockList, ...testRegExps] | ||
| : [config.resolver.blockList, ...testRegExps]; | ||
|
|
||
| module.exports = mergeConfig(config, { | ||
| watchFolders: [monorepoRoot], | ||
| resolver: { | ||
| nodeModulesPaths: [ | ||
| path.resolve(__dirname, 'node_modules'), | ||
| path.resolve(monorepoRoot, 'node_modules'), | ||
| ], | ||
| assetExts: [...(config.resolver.assetExts ?? []), 'lottie', 'fbx'], | ||
| blockList, | ||
| }, | ||
| transformer: { | ||
| unstable_allowRequireContext: true, | ||
| }, | ||
| // due to the nature of this project where it's playing around with packages in and out it's best to reset the cache. | ||
| resetCache: true, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import { PdfView, PdfViewPortEventData } from 'react-native-pdf-view'; | ||
| import { FC, useCallback, useMemo, useState } from 'react'; | ||
| import { Button, useWindowDimensions, View } from 'react-native'; | ||
| import samples from '@/data/samplePdfUrls.json'; | ||
| import { ImageStyle } from 'expo-image'; | ||
|
|
||
| const ResumeScreen: FC = () => { | ||
| const [uri, setUri] = useState(samples[0]); | ||
| const windowDimensions = useWindowDimensions(); | ||
| const [pdfWidth, setPdfWidth] = useState(0); | ||
| const [pdfHeight, setPdfHeight] = useState(0); | ||
| const viewDimensions = useMemo<ImageStyle>(() => { | ||
| if (pdfWidth === 0 || pdfHeight === 0) { | ||
| return { | ||
| width: windowDimensions.width, | ||
| height: 1, | ||
| }; | ||
| } else { | ||
| return { | ||
| width: windowDimensions.width, | ||
| height: (windowDimensions.width / pdfWidth) * pdfHeight, | ||
| }; | ||
| } | ||
| }, [windowDimensions.width, pdfWidth, pdfHeight]); | ||
| const handleViewPortKnown = useCallback( | ||
| ({ height, width }: PdfViewPortEventData) => { | ||
| setPdfWidth(width); | ||
| setPdfHeight(height); | ||
| }, | ||
| [], | ||
| ); | ||
| const flip = useCallback(() => { | ||
| const randomUri = samples[Math.floor(Math.random() * samples.length)]; | ||
| setUri(randomUri); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <View> | ||
| <PdfView | ||
| uri={uri} | ||
| onViewPortKnown={handleViewPortKnown} | ||
| onError={(error) => { | ||
| console.error(error); | ||
| }} | ||
| style={viewDimensions} | ||
| /> | ||
| <Button title={uri} onPress={flip} /> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| export default ResumeScreen; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import Pdf from 'react-native-pdf'; | ||
| import { FC, useCallback, useMemo, useState } from 'react'; | ||
| import { Button, useWindowDimensions, View, ViewStyle } from 'react-native'; | ||
| import samples from '@/data/samplePdfUrls.json'; | ||
|
|
||
| const ResumeScreen: FC = () => { | ||
| const [uri, setUri] = useState(samples[0]); | ||
| const windowDimensions = useWindowDimensions(); | ||
| const [pdfWidth, setPdfWidth] = useState(0); | ||
| const [pdfHeight, setPdfHeight] = useState(0); | ||
| const viewDimensions = useMemo<ViewStyle>(() => { | ||
| if (pdfWidth === 0 || pdfHeight === 0) { | ||
| return { | ||
| width: windowDimensions.width, | ||
| height: 1, | ||
| }; | ||
| } else { | ||
| return { | ||
| width: windowDimensions.width, | ||
| height: (windowDimensions.width / pdfWidth) * pdfHeight, | ||
| }; | ||
| } | ||
| }, [windowDimensions.width, pdfWidth, pdfHeight]); | ||
| const handleViewPortKnown = useCallback( | ||
| ( | ||
| _numberOfPages: number, | ||
| _path: string, | ||
| size: { height: number; width: number }, | ||
| ) => { | ||
| setPdfWidth(size.width); | ||
| setPdfHeight(size.height); | ||
| }, | ||
| [], | ||
| ); | ||
| const flip = useCallback(() => { | ||
| const randomUri = samples[Math.floor(Math.random() * samples.length)]; | ||
| setUri(randomUri); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <View> | ||
| source={{ uri }} | ||
| onLoadComplete={handleViewPortKnown} | ||
| onError={(error) => { | ||
| console.error(error); | ||
| }} | ||
| style={viewDimensions} | ||
| fitPolicy={0} | ||
| progressContainerStyle={viewDimensions} | ||
| /> | ||
| <Button title={uri} onPress={flip} /> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| export default ResumeScreen; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| import { Button, ScrollView, StyleSheet, Text } from 'react-native'; | ||
| import { NfcEvents, NfcTech, TagEvent } from 'react-native-nfc-manager'; | ||
| import { FC, useCallback, useEffect, useReducer, useState } from 'react'; | ||
| import { useNfc, WithNfc } from '@/nfc'; | ||
|
|
||
| export const NfcScreen: FC = () => { | ||
| const [scanning, setScanning] = useState(false); | ||
| const [tag, setTag] = useState(''); | ||
| const [discoverBackgroundEvents, pushDiscoverBackgroundEvent] = useReducer( | ||
| (prev: TagEvent[], tagEvent: TagEvent) => [...prev, tagEvent], | ||
| [], | ||
| ); | ||
| const [discoverEvents, pushDiscoverEvent] = useReducer( | ||
| (prev: TagEvent[], tagEvent: TagEvent) => [...prev, tagEvent], | ||
| [], | ||
| ); | ||
| const nfc = useNfc(); | ||
|
|
||
| const scan = useCallback(() => { | ||
| setScanning(true); | ||
| (async () => { | ||
| try { | ||
| const nextTag = await nfc.getTagAsync('', NfcTech.Ndef); | ||
| setTag(JSON.stringify(nextTag, null, 2)); | ||
| } catch (e: unknown) { | ||
| console.debug('no result', e); | ||
| } finally { | ||
| setScanning(false); | ||
| } | ||
| })(); | ||
| }, [nfc]); | ||
|
|
||
| useEffect(() => { | ||
| if (nfc.nfcManager) { | ||
| nfc.nfcManager.setEventListener( | ||
| NfcEvents.DiscoverTag, | ||
| (event: TagEvent) => { | ||
| pushDiscoverEvent(event); | ||
| }, | ||
| ); | ||
| nfc.nfcManager.setEventListener( | ||
| NfcEvents.DiscoverBackgroundTag, | ||
| (event: TagEvent) => { | ||
| pushDiscoverBackgroundEvent(event); | ||
| }, | ||
| ); | ||
| } | ||
| return () => { | ||
| if (nfc.nfcManager) { | ||
| nfc.nfcManager.setEventListener(NfcEvents.DiscoverBackgroundTag, null); | ||
| nfc.nfcManager.setEventListener(NfcEvents.DiscoverTag, null); | ||
| } | ||
| }; | ||
| }, [nfc]); | ||
|
|
||
| return ( | ||
| <ScrollView contentContainerStyle={styles.wrapper}> | ||
| <Button onPress={scan} disabled={scanning} title="Scan a tag" /> | ||
| <Text>{tag}</Text> | ||
| <Text>{JSON.stringify(discoverEvents)}</Text> | ||
| <Text>{JSON.stringify(discoverBackgroundEvents)}</Text> | ||
| </ScrollView> | ||
| ); | ||
| }; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| wrapper: { | ||
| flex: 1, | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| backgroundColor: 'white', | ||
| }, | ||
| }); | ||
|
|
||
| export default WithNfc(NfcScreen); |
Oops, something went wrong.