@applicaster/zapp-react-native-ui-components 15.0.0-alpha.2882475305 → 15.0.0-alpha.3514407021

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/Components/ScreenRevealManager/withScreenRevealManager.tsx +44 -26
  2. package/package.json +5 -5
package/Components/ScreenRevealManager/withScreenRevealManager.tsx CHANGED
@@ -1,8 +1,8 @@
1
1
  import * as React from "react";
2
- import { Animated } from "react-native";
2
+ import { Animated, StyleSheet } from "react-native";
3
3
  import { isFirstComponentScreenPicker } from "@applicaster/zapp-react-native-utils/componentsUtils";
4
- import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
5
4
  import { useRefWithInitialValue } from "@applicaster/zapp-react-native-utils/reactHooks/state/useRefWithInitialValue";
5
+ import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
6
6
 
7
7
  import { ScreenRevealManager } from "./ScreenRevealManager";
8
8
  import {
@@ -10,16 +10,14 @@ import {
10
10
  emitScreenRevealManagerIsNotReadyToShow,
11
11
  } from "./utils";
12
12
 
13
- const flex = platformSelect({
14
- tvos: 1,
15
- android_tv: 1,
16
- web: undefined,
17
- samsung_tv: undefined,
18
- lg_tv: undefined,
19
- default: undefined,
13
+ const styles = StyleSheet.create({
14
+ container: {
15
+ ...StyleSheet.absoluteFillObject,
16
+ position: "absolute",
17
+ },
20
18
  });
21
19
 
22
- export const TIMEOUT = 500; // 500 ms
20
+ export const TIMEOUT = 300; // 300 ms
23
21
 
24
22
  const HIDDEN = 0; // opacity = 0
25
23
 
@@ -33,37 +31,48 @@ export const withScreenRevealManager = (Component) => {
33
31
  return function WithScreenRevealManager(props: Props) {
34
32
  const { componentsToRender } = props;
35
33
 
36
- const [isReadyToShow, setIsReadyToShow] = React.useState(false);
34
+ const [isContentReadyToBeShown, setIsContentReadyToBeShown] =
35
+ React.useState(false);
37
36
 
38
- const handleSetIsReadyToShow = React.useCallback(() => {
39
- setIsReadyToShow(true);
37
+ const [isShowOverlay, setIsShowOverlay] = React.useState(true);
38
+
39
+ const theme = useTheme<BaseThemePropertiesTV>();
40
+
41
+ const handleSetIsContentReadyToBeShown = React.useCallback(() => {
42
+ setIsContentReadyToBeShown(true);
40
43
  }, []);
41
44
 
42
45
  const managerRef = useRefWithInitialValue<ScreenRevealManager>(
43
- () => new ScreenRevealManager(componentsToRender, handleSetIsReadyToShow)
46
+ () =>
47
+ new ScreenRevealManager(
48
+ componentsToRender,
49
+ handleSetIsContentReadyToBeShown
50
+ )
44
51
  );
45
52
 
46
53
  const opacityRef = useRefWithInitialValue<Animated.Value>(
47
- () => new Animated.Value(HIDDEN)
54
+ () => new Animated.Value(SHOWN)
48
55
  );
49
56
 
50
57
  React.useEffect(() => {
51
- if (!isReadyToShow) {
58
+ if (!isContentReadyToBeShown) {
52
59
  emitScreenRevealManagerIsNotReadyToShow();
53
60
  } else {
54
61
  emitScreenRevealManagerIsReadyToShow();
55
62
  }
56
- }, [isReadyToShow]);
63
+ }, [isContentReadyToBeShown]);
57
64
 
58
65
  React.useEffect(() => {
59
- if (isReadyToShow) {
66
+ if (isContentReadyToBeShown) {
60
67
  Animated.timing(opacityRef.current, {
61
- toValue: SHOWN,
68
+ toValue: HIDDEN,
62
69
  duration: TIMEOUT,
63
70
  useNativeDriver: true,
64
- }).start();
71
+ }).start(() => {
72
+ setIsShowOverlay(false);
73
+ });
65
74
  }
66
- }, [isReadyToShow]);
75
+ }, [isContentReadyToBeShown]);
67
76
 
68
77
  if (isFirstComponentScreenPicker(componentsToRender)) {
69
78
  // for screen-picker with have additional internal ComponentsMap, no need to add this wrapper
@@ -71,10 +80,7 @@ export const withScreenRevealManager = (Component) => {
71
80
  }
72
81
 
73
82
  return (
74
- <Animated.View
75
- style={{ opacity: opacityRef.current, flex }}
76
- testID="animated-component"
77
- >
83
+ <>
78
84
  <Component
79
85
  {...props}
80
86
  initialNumberToLoad={
@@ -85,7 +91,19 @@ export const withScreenRevealManager = (Component) => {
85
91
  }
86
92
  onLoadFailedFromScreenRevealManager={managerRef.current.onLoadFailed}
87
93
  />
88
- </Animated.View>
94
+ {isShowOverlay ? (
95
+ <Animated.View
96
+ style={[
97
+ styles.container,
98
+ {
99
+ opacity: opacityRef.current,
100
+ backgroundColor: theme.app_background_color,
101
+ },
102
+ ]}
103
+ testID="animated-component"
104
+ />
105
+ ) : null}
106
+ </>
89
107
  );
90
108
  };
91
109
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@applicaster/zapp-react-native-ui-components",
3
- "version": "15.0.0-alpha.2882475305",
3
+ "version": "15.0.0-alpha.3514407021",
4
4
  "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
5
5
  "main": "index.js",
6
6
  "types": "index.d.ts",
@@ -28,10 +28,10 @@
28
28
  },
29
29
  "homepage": "https://github.com/applicaster/quickbrick#readme",
30
30
  "dependencies": {
31
- "@applicaster/applicaster-types": "15.0.0-alpha.2882475305",
32
- "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.2882475305",
33
- "@applicaster/zapp-react-native-redux": "15.0.0-alpha.2882475305",
34
- "@applicaster/zapp-react-native-utils": "15.0.0-alpha.2882475305",
31
+ "@applicaster/applicaster-types": "15.0.0-alpha.3514407021",
32
+ "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.3514407021",
33
+ "@applicaster/zapp-react-native-redux": "15.0.0-alpha.3514407021",
34
+ "@applicaster/zapp-react-native-utils": "15.0.0-alpha.3514407021",
35
35
  "promise": "^8.3.0",
36
36
  "url": "^0.11.0",
37
37
  "uuid": "^3.3.2"