@applicaster/zapp-react-native-ui-components 13.0.0-rc.110 → 13.0.0-rc.111

package/Components/AudioPlayer/AudioPlayer.tsx

@@ -22,7 +22,6 @@ type Props = {
       audio_player_title_color?: string;
       audio_player_summary_color?: string;
       audio_player_rtl?: boolean;
-      magic_background?: boolean;
       audio_player_background_image_query?: string;
       audio_player_background_image_default_color?: string;
       start_time?: string;
@@ -34,7 +33,6 @@ type Props = {
     audio_player_title_color?: string;
     audio_player_summary_color?: string;
     audio_player_rtl?: string;
-    magic_background?: string;
     audio_player_background_image_query?: string;
     audio_player_background_image_default_color?: string;
     audio_player_background_image?: string;
@@ -76,7 +74,6 @@ export function AudioPlayer(props: Props) {
     const artworkAspectRatio = getProp("audio_player_artwork_aspect_ratio");
     const channelIcon = getProp("audio_player_channel_icon");
     const rtlFlag = getProp("audio_player_rtl");
-    const magicBackground = getProp("magic_background");
 
     const audioPlayerBackgroundImageQuery = getProp(
       "audio_player_background_image_query"
@@ -162,7 +159,6 @@ export function AudioPlayer(props: Props) {
       runTimeFontSize,
       artworkAspectRatio,
       channelIcon,
-      magicBackground,
       audioPlayerBackgroundImageQuery,
       audioPlayerBackgroundImageDefaultColor,
     };

package/Components/AudioPlayer/helpers.tsx

@@ -4,7 +4,6 @@ const defaults = {
   audio_player_background_color: "black",
   audio_player_artwork_aspect_ratio: "1:1",
   audio_player_rtl: false,
-  magic_background: false,
   audio_player_background_image_query: "",
   audio_player_background_image_default_color: "",
 };

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -1,11 +1,5 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { View, LayoutChangeEvent, ScrollView } from "react-native";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import { View, ScrollView, StyleSheet, Platform } from "react-native";
 import { Button } from "./Button";
 import { ItemIconProps } from "./Button/ItemIcon";
 import { ItemProps } from "./Button/Item";
@@ -16,6 +10,7 @@ import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import type { PluginConfiguration } from "./";
 
 import { ModalHeader } from "./Header";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 type ModalComponentProps = {
   items: any[];
@@ -44,11 +39,16 @@ type ModalComponentProps = {
   iconPlacement?: "left" | "right";
 };
 
+const styles = StyleSheet.create({
+  container: {
+    maxHeight: "100%",
+  },
+});
+
 export function BottomSheetModalContent(props: ModalComponentProps) {
   const {
     items,
     currentRoute,
-    maxHeight,
     current_selection = null,
     onPress,
     dismiss,
@@ -61,20 +61,11 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     iconPlacement,
   } = props;
 
-  const [headerHeight, setHeaderHeight] = useState(0);
   const route = useRef(currentRoute);
   const theme = useTheme<BaseThemePropertiesMobile>();
   const paddingTop = Number(theme.modal_bottom_sheet_padding_top);
   const paddingBottom = Number(theme.modal_bottom_sheet_padding_bottom);
 
-  const maxContentHeight = maxHeight
-    ? maxHeight - headerHeight - paddingTop
-    : undefined;
-
-  const onHeaderLayout = useCallback((event: LayoutChangeEvent) => {
-    setHeaderHeight(event.nativeEvent.layout.height);
-  }, []);
-
   useEffect(() => {
     if (currentRoute !== route.current) {
       props.dismiss();
@@ -101,33 +92,32 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     [onPress, dismiss]
   );
 
+  const bottomInset = useSafeAreaInsets().bottom;
+
   return (
     <View
-      style={{
-        maxWidth: props.width,
-        paddingTop,
-      }}
+      style={[
+        styles.container,
+        {
+          paddingTop: paddingTop,
+        },
+      ]}
     >
       <ModalHeader
-        width={props.width}
         dismiss={dismiss}
         configuration={theme}
-        onLayout={onHeaderLayout}
         summary={summary}
         title={title}
       />
       <ScrollView
-        bounces={false}
-        style={{ maxHeight: maxContentHeight }}
         contentContainerStyle={{
-          paddingBottom,
-          paddingTop,
+          paddingBottom:
+            Platform.OS === "ios" ? paddingBottom + bottomInset : paddingBottom,
         }}
       >
         {items.map((item, index) => (
           <ButtonComponent
             key={index}
-            width={props.width}
             configuration={theme}
             selectedItem={current_selection}
             item={item}

package/Components/ModalComponent/Button/index.tsx

@@ -7,7 +7,6 @@ import { defaultSelectedAsset } from "./assets";
 
 type ButtonProps = {
   configuration: any;
-  width: number;
   selectedItem?: any;
   item: any; // Adjust type as needed
   onPress: (item: any) => void; // Adjust type as needed
@@ -33,7 +32,6 @@ export function Button({
   item,
   onPress,
   configuration,
-  width,
   iconBaseProps,
   itemBaseProps: itemProps,
   labelBaseProps,
@@ -65,34 +63,32 @@ export function Button({
   if (disabled) return null;
 
   return (
-    <View style={{ maxWidth: width }}>
-      <TouchableOpacity
-        activeOpacity={1}
-        onPress={() => onPress(item)}
-        onPressIn={() => setFocused(true)}
-        onPressOut={() => setFocused(false)}
-      >
-        <Item {...itemProps} focused={focused} selected={selected}>
-          <View style={styles.label_icon_container}>
-            {iconPlacement === "left" && renderItemIcon}
+    <TouchableOpacity
+      activeOpacity={1}
+      onPress={() => onPress(item)}
+      onPressIn={() => setFocused(true)}
+      onPressOut={() => setFocused(false)}
+    >
+      <Item {...itemProps} focused={focused} selected={selected}>
+        <View style={styles.label_icon_container}>
+          {iconPlacement === "left" && renderItemIcon}
 
-            {label ? (
-              <ItemLabel
-                {...labelBaseProps}
-                label={label ?? null}
-                focused={focused}
-                selected={selected}
-              />
-            ) : null}
-          </View>
+          {label ? (
+            <ItemLabel
+              {...labelBaseProps}
+              label={label ?? null}
+              focused={focused}
+              selected={selected}
+            />
+          ) : null}
+        </View>
 
-          {selected ? (
-            <ItemIcon {...iconBaseProps} asset={selectedItemIconPropsAssets} />
-          ) : (
-            iconPlacement === "right" && renderItemIcon
-          )}
-        </Item>
-      </TouchableOpacity>
-    </View>
+        {selected ? (
+          <ItemIcon {...iconBaseProps} asset={selectedItemIconPropsAssets} />
+        ) : (
+          iconPlacement === "right" && renderItemIcon
+        )}
+      </Item>
+    </TouchableOpacity>
   );
 }

package/Components/ModalComponent/Header/index.tsx

@@ -8,13 +8,18 @@ import { PluginConfiguration } from "../index";
 type Props = {
   dismiss: () => void;
   configuration: PluginConfiguration;
-  width: number;
   onLayout?: (event: LayoutChangeEvent) => void;
   summary?: string;
   title?: string;
 };
 
 const styles = StyleSheet.create({
+  noFlex: {
+    flex: 0,
+  },
+  flex: {
+    flex: 1,
+  },
   container: {
     flexDirection: "row",
     alignItems: "center",
@@ -22,7 +27,7 @@ const styles = StyleSheet.create({
 });
 
 export function ModalHeader(props: Props) {
-  const { configuration, dismiss, width, onLayout, summary, title } = props;
+  const { configuration, dismiss, onLayout, summary, title } = props;
 
   const closeButtonProps = useMemo<CloseButtonProps>(
     () => ({
@@ -55,15 +60,11 @@ export function ModalHeader(props: Props) {
 
   return (
     <View onLayout={onLayout} style={styles.container}>
-      <View
-        style={{
-          width: width - buttonsContainerWidth,
-        }}
-      >
+      <View style={styles.flex}>
         {title ? <Title {...titleProps} /> : null}
         {summary ? <Title {...summaryProps} /> : null}
       </View>
-      <View style={{ width: buttonsContainerWidth }}>
+      <View style={[styles.noFlex, { width: buttonsContainerWidth }]}>
         <CloseButton {...closeButtonProps} />
       </View>
     </View>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "13.0.0-rc.110",
+  "version": "13.0.0-rc.111",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -31,10 +31,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-rc.110",
-    "@applicaster/zapp-react-native-bridge": "13.0.0-rc.110",
-    "@applicaster/zapp-react-native-redux": "13.0.0-rc.110",
-    "@applicaster/zapp-react-native-utils": "13.0.0-rc.110",
+    "@applicaster/applicaster-types": "13.0.0-rc.111",
+    "@applicaster/zapp-react-native-bridge": "13.0.0-rc.111",
+    "@applicaster/zapp-react-native-redux": "13.0.0-rc.111",
+    "@applicaster/zapp-react-native-utils": "13.0.0-rc.111",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",