@applicaster/zapp-react-native-ui-components 11.1.1 → 12.0.0-alpha.4534459584

package/Components/MasterCell/DefaultComponents/Toggle.tsx

@@ -9,10 +9,11 @@ type Props = {
     type?: string;
   };
   style: Styles;
+  cellState: CellState;
 };
 
 export const Toggle = (props: Props) => {
-  const { style, item, action } = props;
+  const { style, item, action, cellState } = props;
 
   const {
     trackColor,
@@ -22,6 +23,7 @@ export const Toggle = (props: Props) => {
     iosBackgroundColor,
   } = style;
 
+  const isSelected = React.useMemo(() => (cellState === "selected"), [item?.id, cellState]);
   const actionContext = useActions(action?.identifier);
 
   const [actionState, setActionState] = useState(
@@ -37,10 +39,10 @@ export const Toggle = (props: Props) => {
   return (
     <Switch
       trackColor={{ false: trackColor, true: trackColorActive }}
-      thumbColor={actionState?.state ? thumbColorActive : thumbColor}
+      thumbColor={isSelected ? thumbColorActive : thumbColor}
       ios_backgroundColor={iosBackgroundColor}
       onValueChange={onPress}
-      value={!!actionState?.state}
+      value={isSelected}
     />
   );
 };

package/Components/PlayerContainer/ErrorDisplay/ErrorDisplay.tsx

@@ -4,6 +4,7 @@ import { Text, TextStyle, View, ViewStyle } from "react-native";
 
 import { getLocalizations } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import { getAppStylesColor } from "@applicaster/zapp-react-native-utils/stylesUtils";
+import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { styleKeys } from "@applicaster/zapp-react-native-utils/styleKeysUtils";
 
@@ -25,10 +26,10 @@ const textStyles = (appStyles = defaultAppStyles): TextStyle => ({
   textAlign: "center",
 });
 
-const errorStyles = ({ backgroundColor }): ViewStyle => ({
+const errorStyles = ({ width, height, backgroundColor }): ViewStyle => ({
   flex: 1,
-  width: "100%",
-  height: "100%",
+  width,
+  height,
   justifyContent: "center",
   alignItems: "center",
   position: "absolute",
@@ -40,6 +41,8 @@ export function ErrorDisplayComponent({
   styles,
   remoteConfigurations: { localizations },
 }: Props) {
+  const { width, height } = useDimensions("window");
+
   const theme = useTheme();
   const backgroundColor = theme?.app_background_color;
 
@@ -50,7 +53,7 @@ export function ErrorDisplayComponent({
   const appStyles = R.prop(styleKeys.style_namespace, styles);
 
   return (
-    <View style={errorStyles({ backgroundColor })}>
+    <View style={errorStyles({ width, height, backgroundColor })}>
       <Text style={textStyles(appStyles)}>{stream_error_message}</Text>
     </View>
   );

package/package.json

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