Merge pull request #265 from iteratehq/sam/appearance-options

Add support for new appearance options (light, dark, or auto)

example/ios/Podfile.lock

@@ -682,4 +682,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 329483eb6daf495a1eab8db2c188f13aaa25dcf9
 
-COCOAPODS: 1.12.1
+COCOAPODS: 1.15.2

example/ios/example/Info.plist

@@ -70,8 +70,6 @@
       <string>UIInterfaceOrientationLandscapeLeft</string>
       <string>UIInterfaceOrientationLandscapeRight</string>
     </array>
-    <key>UIUserInterfaceStyle</key>
-    <string>Light</string>
     <key>UIViewControllerBasedStatusBarAppearance</key>
     <false/>
   </dict>

src/components/Prompt/Button.tsx

@@ -8,25 +8,40 @@ import {
 } from 'react-native';
 import { Colors, Themes } from '../../constants';
 import Iterate from '../../iterate';
+import type { Survey } from '../../types';
 
 interface Props {
   color: string;
   colorDark?: string;
   onPress: () => void;
   text: string;
+  survey?: Survey;
 }
 
 const PromptButton: (Props: Props) => JSX.Element = ({
   color,
   colorDark,
   onPress,
   text,
+  survey,
 }) => {
-  const theme = Appearance.getColorScheme();
+  let backgroundColor;
+  let textColor;
 
-  const backgroundColor =
-    theme === Themes.Dark && colorDark != null ? colorDark : color;
-  const textColor = theme === Themes.Dark ? Colors.Black : Colors.White;
+  switch (survey?.appearance) {
+    case Themes.Dark:
+      backgroundColor = colorDark || color;
+      textColor = Colors.Black;
+      break;
+    case Themes.Light:
+      backgroundColor = color;
+      textColor = Colors.White;
+      break;
+    default:
+      Appearance.getColorScheme() === Themes.Dark
+        ? ((backgroundColor = colorDark || color), (textColor = Colors.Black))
+        : ((backgroundColor = color), (textColor = Colors.White));
+  }
 
   return (
     <View>

src/components/Prompt/index.tsx

@@ -107,11 +107,30 @@ const Prompt: (Props: Props) => JSX.Element = ({
     }, ANIMATION_DURATION);
   }, [dispatchShowSurvey, promptAnimation, survey]);
 
-  const theme = Appearance.getColorScheme();
-  const promptBackgroundColor =
-    theme === Themes.Dark ? Colors.LightBlack : Colors.White;
-  const promptTextColor = theme === Themes.Dark ? Colors.White : Colors.Black;
-  const shadowOpacity = theme === Themes.Dark ? 0.8 : 0.4;
+  let promptBackgroundColor;
+  let promptTextColor;
+  let shadowOpacity;
+
+  switch (survey?.appearance) {
+    case Themes.Dark:
+      promptBackgroundColor = Colors.LightBlack;
+      promptTextColor = Colors.White;
+      shadowOpacity = 0.8;
+      break;
+    case Themes.Light:
+      promptBackgroundColor = Colors.White;
+      promptTextColor = Colors.Black;
+      shadowOpacity = 0.4;
+      break;
+    default:
+      Appearance.getColorScheme() === Themes.Dark
+        ? ((promptBackgroundColor = Colors.LightBlack),
+          (promptTextColor = Colors.White),
+          (shadowOpacity = 0.8))
+        : ((promptBackgroundColor = Colors.White),
+          (promptTextColor = Colors.Black),
+          (shadowOpacity = 0.4));
+  }
 
   const paddingBottom = safeAreaInsets.bottom > 0 ? safeAreaInsets.bottom : 20;
 
@@ -150,7 +169,7 @@ const Prompt: (Props: Props) => JSX.Element = ({
         ]}
       >
         <View style={{ paddingBottom }}>
-          <CloseButton onPress={onDismissAnimated} />
+          <CloseButton onPress={onDismissAnimated} survey={survey} />
           {markdown.Render(survey?.prompt?.message ?? '', {
             body: [
               promptTextStyle,
@@ -175,6 +194,7 @@ const Prompt: (Props: Props) => JSX.Element = ({
             color={`${survey?.color || '#7457be'}`}
             colorDark={survey?.color_dark}
             onPress={showSurveyButtonClicked}
+            survey={survey}
           />
         </View>
       </View>
@@ -215,10 +235,27 @@ const styles = StyleSheet.create({
   },
 });
 
-const CloseButton = ({ onPress }: { onPress: () => void }) => {
-  const theme = Appearance.getColorScheme();
-  const backgroundColor =
-    theme === Themes.Dark ? Colors.LightBlack : Colors.Grey;
+const CloseButton = ({
+  onPress,
+  survey,
+}: {
+  onPress: () => void;
+  survey?: Survey;
+}) => {
+  let backgroundColor;
+
+  switch (survey?.appearance) {
+    case Themes.Dark:
+      backgroundColor = Colors.LightBlack;
+      break;
+    case Themes.Light:
+      backgroundColor = Colors.Grey;
+      break;
+    default:
+      Appearance.getColorScheme() === Themes.Dark
+        ? (backgroundColor = Colors.LightBlack)
+        : (backgroundColor = Colors.Grey);
+  }
 
   return (
     <TouchableHighlight

src/components/Survey.tsx

@@ -105,7 +105,11 @@ const SurveyView: (Props: Props) => JSX.Element = ({
 
   // Add theme
   params.push(
-    `theme=${useColorScheme() === Themes.Dark ? Themes.Dark : Themes.Light}`
+    `theme=${
+      useColorScheme() === Themes.Dark || survey?.appearance === Themes.Dark
+        ? Themes.Dark
+        : Themes.Light
+    }`
   );
 
   params.push('absoluteURLs=true');
@@ -181,9 +185,20 @@ const SurveyView: (Props: Props) => JSX.Element = ({
     [dismiss, survey]
   );
 
-  const theme = Appearance.getColorScheme();
-  const backgroundColor =
-    theme === Themes.Dark ? Colors.LightBlack : Colors.White;
+  let backgroundColor;
+
+  switch (survey?.appearance) {
+    case Themes.Dark:
+      backgroundColor = Colors.LightBlack;
+      break;
+    case Themes.Light:
+      backgroundColor = Colors.Grey;
+      break;
+    default:
+      Appearance.getColorScheme() === Themes.Dark
+        ? (backgroundColor = Colors.LightBlack)
+        : (backgroundColor = Colors.Grey);
+  }
 
   // Only do this if we haven't already
   const addQueryParamScript = `if (!window.location.search) {

src/constants.tsx

@@ -10,6 +10,7 @@ export const Colors = {
 };
 
 export const Themes = {
+  Auto: 'auto',
   Light: 'light',
   Dark: 'dark',
 };

src/types.tsx

@@ -84,6 +84,7 @@ export type PresentationStyle =
   | 'overFullScreen';
 
 export type Survey = {
+  appearance?: string;
   color?: string;
   color_dark?: string;
   company_id: string;