From 0d960c58ba7dbd9ac72aa5e8229be6ad91a49b7c Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Thu, 28 Dec 2023 15:46:37 -0800
Subject: [PATCH] Disable BlurView on android (#2351)

* A couple of small tweaks

* Force the UI to re-render by setting a key

* Disable to blurview on android

* Remove hackfix
---
 .../com/modals/report/InputIssueDetails.tsx   |  3 +-
 src/view/com/modals/report/Modal.tsx          |  6 ++--
 src/view/com/util/BlurView.android.tsx        | 30 +++++++++++++++++++
 3 files changed, 35 insertions(+), 4 deletions(-)
 create mode 100644 src/view/com/util/BlurView.android.tsx

diff --git a/src/view/com/modals/report/InputIssueDetails.tsx b/src/view/com/modals/report/InputIssueDetails.tsx
index 2f701b79..2bc86f75 100644
--- a/src/view/com/modals/report/InputIssueDetails.tsx
+++ b/src/view/com/modals/report/InputIssueDetails.tsx
@@ -42,7 +42,8 @@ export function InputIssueDetails({
         accessibilityHint="Add more details to your report">
         <FontAwesomeIcon size={18} icon="angle-left" style={[pal.link]} />
         <Text style={[pal.text, s.f18, pal.link]}>
-          <Trans> Back</Trans>
+          {' '}
+          <Trans>Back</Trans>
         </Text>
       </TouchableOpacity>
       <View style={[pal.btn, styles.detailsInputContainer]}>
diff --git a/src/view/com/modals/report/Modal.tsx b/src/view/com/modals/report/Modal.tsx
index 60c3f06b..afd0d417 100644
--- a/src/view/com/modals/report/Modal.tsx
+++ b/src/view/com/modals/report/Modal.tsx
@@ -44,9 +44,9 @@ export function Component(content: ReportComponentProps) {
   const {isMobile} = useWebMediaQueries()
   const [isProcessing, setIsProcessing] = useState(false)
   const [showDetailsInput, setShowDetailsInput] = useState(false)
-  const [error, setError] = useState<string>()
-  const [issue, setIssue] = useState<string>()
-  const [details, setDetails] = useState<string>()
+  const [error, setError] = useState<string>('')
+  const [issue, setIssue] = useState<string>('')
+  const [details, setDetails] = useState<string>('')
   const isAccountReport = 'did' in content
   const subjectKey = isAccountReport ? content.did : content.uri
   const atUri = useMemo(
diff --git a/src/view/com/util/BlurView.android.tsx b/src/view/com/util/BlurView.android.tsx
new file mode 100644
index 00000000..eee1d9d8
--- /dev/null
+++ b/src/view/com/util/BlurView.android.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import {StyleSheet, View, ViewProps} from 'react-native'
+import {addStyle} from 'lib/styles'
+
+type BlurViewProps = ViewProps & {
+  blurType?: 'dark' | 'light'
+  blurAmount?: number
+}
+
+export const BlurView = ({
+  style,
+  blurType,
+  ...props
+}: React.PropsWithChildren<BlurViewProps>) => {
+  if (blurType === 'dark') {
+    style = addStyle(style, styles.dark)
+  } else {
+    style = addStyle(style, styles.light)
+  }
+  return <View style={style} {...props} />
+}
+
+const styles = StyleSheet.create({
+  dark: {
+    backgroundColor: '#0008',
+  },
+  light: {
+    backgroundColor: '#fff8',
+  },
+})