This commit is contained in:
Marc Rousavy 2021-02-19 18:53:08 +01:00
parent c13c46f388
commit cf157cb299
8 changed files with 289 additions and 3 deletions

View File

@ -234,6 +234,8 @@ PODS:
- React-cxxreact (= 0.63.4)
- React-jsi (= 0.63.4)
- React-jsinspector (0.63.4)
- react-native-blur (0.8.0):
- React
- react-native-video (5.1.1):
- React-Core
- react-native-video/Video (= 5.1.1)
@ -384,6 +386,7 @@ DEPENDENCIES:
- React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
- React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
- React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
- "react-native-blur (from `../node_modules/@react-native-community/blur`)"
- react-native-video (from `../node_modules/react-native-video`)
- react-native-vision-camera (from `../..`)
- React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
@ -448,6 +451,8 @@ EXTERNAL SOURCES:
:path: "../node_modules/react-native/ReactCommon/jsiexecutor"
React-jsinspector:
:path: "../node_modules/react-native/ReactCommon/jsinspector"
react-native-blur:
:path: "../node_modules/@react-native-community/blur"
react-native-video:
:path: "../node_modules/react-native-video"
react-native-vision-camera:
@ -510,6 +515,7 @@ SPEC CHECKSUMS:
React-jsi: a0418934cf48f25b485631deb27c64dc40fb4c31
React-jsiexecutor: 93bd528844ad21dc07aab1c67cb10abae6df6949
React-jsinspector: 58aef7155bc9a9683f5b60b35eccea8722a4f53a
react-native-blur: cad4d93b364f91e7b7931b3fa935455487e5c33c
react-native-video: 1574074179ecaf6a9dd067116c8f31bf9fec15c8
react-native-vision-camera: bf9c62e2795080a21e9ea134050c01b5d9494b6d
React-RCTActionSheet: 89a0ca9f4a06c1f93c26067af074ccdce0f40336

View File

@ -1007,6 +1007,14 @@
"fastq": "^1.6.0"
}
},
"@react-native-community/blur": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/@react-native-community/blur/-/blur-3.6.0.tgz",
"integrity": "sha512-GtDBhpX2pQcjl4VopOC8FktrVufrEfYRwVeMQ2WWckqKIv2BdwvlvWvj88L1WmEdBr9UNcm3rtgz+d+YXkmirA==",
"requires": {
"prop-types": "^15.5.10"
}
},
"@react-native-community/cli-debugger-ui": {
"version": "4.13.1",
"resolved": "https://registry.npmjs.org/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-4.13.1.tgz",
@ -2855,6 +2863,11 @@
"is-symbol": "^1.0.2"
}
},
"escalade": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
"integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
},
"escape-html": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@ -4661,6 +4674,53 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
},
"lodash._reinterpolate": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
"integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
},
"lodash.frompairs": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/lodash.frompairs/-/lodash.frompairs-4.0.1.tgz",
"integrity": "sha1-vE5SB/onV8E25XNhTpZkUGsrG9I="
},
"lodash.isequal": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
"integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
},
"lodash.isstring": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
"integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
},
"lodash.omit": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz",
"integrity": "sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA="
},
"lodash.pick": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz",
"integrity": "sha1-UvBWEP/53tQiYRRB7R/BI6AwAbM="
},
"lodash.template": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
"integrity": "sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==",
"requires": {
"lodash._reinterpolate": "^3.0.0",
"lodash.templatesettings": "^4.0.0"
}
},
"lodash.templatesettings": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz",
"integrity": "sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==",
"requires": {
"lodash._reinterpolate": "^3.0.0"
}
},
"lodash.throttle": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
@ -6247,6 +6307,101 @@
"resolved": "https://registry.npmjs.org/react-native-static-safe-area-insets/-/react-native-static-safe-area-insets-2.1.1.tgz",
"integrity": "sha512-NUSRNZp+0IJOuLeoHoU4kw/cY9g7ozUo2ApCbJAiPyYbkbv49S8gdAcZRkeR0nqwzFDA07sCZCbPI03iEV0RTQ=="
},
"react-native-vector-icons": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-8.0.0.tgz",
"integrity": "sha512-u3NWvO+b7nTCxx7IU4EzukFyiApHdpjbsjKgMFEI2Ma+r1Mq48s0ajvBCIPI7LCgKBGYclOxWmMV9DHV2cJFlw==",
"requires": {
"lodash.frompairs": "^4.0.1",
"lodash.isequal": "^4.5.0",
"lodash.isstring": "^4.0.1",
"lodash.omit": "^4.5.0",
"lodash.pick": "^4.4.0",
"lodash.template": "^4.5.0",
"prop-types": "^15.7.2",
"yargs": "^16.1.1"
},
"dependencies": {
"ansi-regex": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
"integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
},
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"requires": {
"color-convert": "^2.0.1"
}
},
"cliui": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
"integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
"requires": {
"string-width": "^4.2.0",
"strip-ansi": "^6.0.0",
"wrap-ansi": "^7.0.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
},
"strip-ansi": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
"integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
"requires": {
"ansi-regex": "^5.0.0"
}
},
"wrap-ansi": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
"requires": {
"ansi-styles": "^4.0.0",
"string-width": "^4.1.0",
"strip-ansi": "^6.0.0"
}
},
"y18n": {
"version": "5.0.5",
"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.5.tgz",
"integrity": "sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg=="
},
"yargs": {
"version": "16.2.0",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
"integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
"requires": {
"cliui": "^7.0.2",
"escalade": "^3.1.1",
"get-caller-file": "^2.0.5",
"require-directory": "^2.1.1",
"string-width": "^4.2.0",
"y18n": "^5.0.5",
"yargs-parser": "^20.2.2"
}
},
"yargs-parser": {
"version": "20.2.5",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.5.tgz",
"integrity": "sha512-jYRGS3zWy20NtDtK2kBgo/TlAoy5YUuhD9/LZ7z7W4j1Fdw2cqD0xEEclf8fxc8xjD6X5Qr+qQQwCEsP8iRiYg=="
}
}
},
"react-native-video": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/react-native-video/-/react-native-video-5.1.1.tgz",

View File

@ -9,12 +9,14 @@
"start": "react-native start"
},
"dependencies": {
"@react-native-community/blur": "^3.6.0",
"react": "16.13.1",
"react-native": "0.63.4",
"react-native-gesture-handler": "^1.10.1",
"react-native-navigation": "^7.10.0",
"react-native-reanimated": "^2.0.0-rc.3",
"react-native-static-safe-area-insets": "^2.1.1",
"react-native-vector-icons": "^8.0.0",
"react-native-video": "^5.1.1"
},
"devDependencies": {

View File

@ -48,11 +48,21 @@ export const Splash: NavigationFunctionComponent = ({ componentId }) => {
useEffect(() => {
if (cameraPermissionStatus === 'authorized' && microphonePermissionStatus === 'authorized') {
Navigation.push(componentId, {
component: { name: 'Home' }
Navigation.setRoot({
root: {
stack: {
children: [
{
component: {
name: 'Home'
}
}
]
}
}
})
}
}, []);
}, [cameraPermissionStatus, microphonePermissionStatus, componentId]);
return (
<View style={styles.container}>

View File

@ -0,0 +1,17 @@
import { useEffect } from "react"
import { AppState, AppStateStatus } from "react-native";
import { useCachedState } from "./useCachedState";
export const useIsForeground = (): boolean => {
const [isForeground, setIsForeground] = useCachedState(true);
useEffect(() => {
const onChange = (state: AppStateStatus) => {
setIsForeground(state === "active");
};
AppState.addEventListener("change", onChange);
return () => AppState.removeEventListener("change", onChange);
}, [setIsForeground]);
return isForeground;
}

View File

View File

@ -0,0 +1,61 @@
import React, { useCallback } from "react";
import {
PressableProps,
Pressable,
PressableStateCallbackType,
StyleProp,
ViewStyle,
} from "react-native";
export interface PressableOpacityProps extends PressableProps {
/**
* The opacity to use when `disabled={true}`
*
* @default 1
*/
disabledOpacity?: number;
/**
* The opacity to animate to when the user presses the button
*
* @default 0.2
*/
activeOpacity?: number;
}
export type StyleType = (
state: PressableStateCallbackType
) => StyleProp<ViewStyle>;
/**
* A Pressable component that lowers opacity when in pressed state. Uses the JS Pressability API.
*/
export const PressableOpacity = ({
style,
disabled = false,
disabledOpacity = 1,
activeOpacity = 0.2,
...passThroughProps
}: PressableOpacityProps): React.ReactElement => {
const getOpacity = useCallback(
(pressed: boolean) => {
if (disabled) {
return disabledOpacity;
} else {
if (pressed) return activeOpacity;
else return 1;
}
},
[activeOpacity, disabled, disabledOpacity]
);
const _style = useCallback<StyleType>(
({ pressed }) => [style as ViewStyle, { opacity: getOpacity(pressed) }],
[getOpacity, style]
);
return <Pressable style={_style} disabled={disabled} {...passThroughProps} />;
};
// Fallback implementation using TouchableOpacity:
// export default function PressableOpacity(props: TouchableOpacityProps & { children?: React.ReactNode }): React.ReactElement {
// return <TouchableOpacity delayPressIn={0} {...props} />;
// }

View File

@ -0,0 +1,35 @@
import { BlurView, BlurViewProperties } from "@react-native-community/blur";
import React from "react";
import { Platform, StyleSheet } from "react-native";
import StaticSafeAreaInsets from "react-native-static-safe-area-insets";
const FALLBACK_COLOR = "rgba(140, 140, 140, 0.3)";
const StatusBarBlurBackgroundImpl = ({
style,
...props
}: BlurViewProperties) => {
if (Platform.OS !== 'ios') return null;
return (
<BlurView
style={[styles.statusBarBackground, style]}
blurAmount={25}
blurType="light"
reducedTransparencyFallbackColor={FALLBACK_COLOR}
{...props}
/>
);
};
export const StatusBarBlurBackground = React.memo(StatusBarBlurBackgroundImpl);
const styles = StyleSheet.create({
statusBarBackground: {
position: "absolute",
top: 0,
left: 0,
right: 0,
height: StaticSafeAreaInsets.safeAreaInsetsTop,
},
});