bootstrap-rn 0.4.4 → 0.4.6

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 (36) hide show
  1. package/lib/module/components/Body.js +2 -2
  2. package/lib/module/components/Body.js.map +1 -1
  3. package/lib/module/components/SafeAreaView.js +42 -0
  4. package/lib/module/components/SafeAreaView.js.map +1 -0
  5. package/lib/module/components/helpers/Overlay.js +2 -13
  6. package/lib/module/components/helpers/Overlay.js.map +1 -1
  7. package/lib/module/components/modal/Modal.js +7 -3
  8. package/lib/module/components/modal/Modal.js.map +1 -1
  9. package/lib/module/components/offcanvas/Offcanvas.js +65 -67
  10. package/lib/module/components/offcanvas/Offcanvas.js.map +1 -1
  11. package/lib/module/components/popover/PopoverArrow.js +28 -0
  12. package/lib/module/components/popover/PopoverArrow.js.map +1 -1
  13. package/lib/module/components/tooltip/TooltipArrow.js +16 -0
  14. package/lib/module/components/tooltip/TooltipArrow.js.map +1 -1
  15. package/lib/module/index.js +1 -0
  16. package/lib/module/index.js.map +1 -1
  17. package/lib/typescript/components/Body.d.ts.map +1 -1
  18. package/lib/typescript/components/SafeAreaView.d.ts +12 -0
  19. package/lib/typescript/components/SafeAreaView.d.ts.map +1 -0
  20. package/lib/typescript/components/helpers/Overlay.d.ts.map +1 -1
  21. package/lib/typescript/components/modal/Modal.d.ts.map +1 -1
  22. package/lib/typescript/components/offcanvas/Offcanvas.d.ts.map +1 -1
  23. package/lib/typescript/components/popover/PopoverArrow.d.ts.map +1 -1
  24. package/lib/typescript/components/tooltip/TooltipArrow.d.ts.map +1 -1
  25. package/lib/typescript/index.d.ts +2 -0
  26. package/lib/typescript/index.d.ts.map +1 -1
  27. package/package.json +85 -85
  28. package/src/components/Body.tsx +53 -58
  29. package/src/components/SafeAreaView.tsx +64 -0
  30. package/src/components/helpers/Overlay.tsx +2 -13
  31. package/src/components/modal/Modal.tsx +243 -234
  32. package/src/components/offcanvas/Offcanvas.tsx +245 -245
  33. package/src/components/popover/PopoverArrow.tsx +192 -164
  34. package/src/components/tooltip/TooltipArrow.tsx +118 -102
  35. package/src/index.ts +3 -0
  36. package/src/theme/variables.ts +1420 -1420
package/src/components/popover/PopoverArrow.tsx CHANGED
@@ -1,164 +1,192 @@
1
- import React from 'react';
2
- import View, { ViewProps, ViewRef } from '../View';
3
- import { subtract } from '../../theme/functions';
4
- import StyleSheet from '../../style/StyleSheet';
5
- import { getStyles } from '../../utils';
6
- import css from '../../style/css';
7
- import useForcedContext from '../../hooks/useForcedContext';
8
- import PopoverContext from './PopoverContext';
9
- import type { ThemeVariables } from '../../types';
10
-
11
- export interface PopoverArrowProps extends ViewProps {}
12
-
13
- const styles = StyleSheet.create({
14
- '.popover-arrow': css`
15
- position: absolute;
16
- // display: block;
17
- width: $popover-arrow-width;
18
- height: $popover-arrow-height;
19
- `,
20
- '.popover-arrow::before': css`
21
- position: absolute;
22
- // display: block;
23
- // content: "";
24
- border-top-color: transparent;
25
- border-right-color: transparent;
26
- border-left-color: transparent;
27
- border-bottom-color: transparent;
28
- border-style: solid;
29
- `,
30
- '.popover-arrow::after': css`
31
- position: absolute;
32
- // display: block;
33
- // content: "";
34
- border-top-color: transparent;
35
- border-right-color: transparent;
36
- border-left-color: transparent;
37
- border-bottom-color: transparent;
38
- border-style: solid;
39
- `,
40
- '.bs-popover-top .popover-arrow': css`
41
- bottom: ${subtract(
42
- (t: ThemeVariables) => `-${t['popover-arrow-height']}`,
43
- (t: ThemeVariables) => t['popover-border-width'],
44
- )};
45
- `,
46
- '.bs-popover-top .popover-arrow::before': css`
47
- bottom: 0;
48
- border-top-width: $popover-arrow-height;
49
- border-right-width: $popover-arrow-width * 0.5;
50
- border-left-width: $popover-arrow-width * 0.5;
51
- border-bottom-width: 0;
52
- border-top-color: $popover-arrow-outer-color;
53
- `,
54
- '.bs-popover-top .popover-arrow::after': css`
55
- bottom: $popover-border-width;
56
- border-top-width: $popover-arrow-height;
57
- border-right-width: $popover-arrow-width * 0.5;
58
- border-left-width: $popover-arrow-width * 0.5;
59
- border-bottom-width: 0;
60
- border-top-color: $popover-arrow-color;
61
- `,
62
- '.bs-popover-end .popover-arrow': css`
63
- left: ${subtract(
64
- (t: ThemeVariables) => `-${t['popover-arrow-height']}`,
65
- (t: ThemeVariables) => t['popover-border-width'],
66
- )};
67
- width: $popover-arrow-height;
68
- height: $popover-arrow-width;
69
- `,
70
- '.bs-popover-end .popover-arrow::before': css`
71
- left: 0;
72
- border-top-width: $popover-arrow-width * 0.5;
73
- border-right-width: $popover-arrow-height;
74
- border-left-width: 0;
75
- border-bottom-width: $popover-arrow-width * 0.5;
76
- border-right-color: $popover-arrow-outer-color;
77
- `,
78
- '.bs-popover-end .popover-arrow::after': css`
79
- left: $popover-border-width;
80
- border-top-width: $popover-arrow-width * 0.5;
81
- border-right-width: $popover-arrow-height;
82
- border-left-width: 0;
83
- border-bottom-width: $popover-arrow-width * 0.5;
84
- border-right-color: $popover-arrow-color;
85
- `,
86
- '.bs-popover-bottom .popover-arrow': css`
87
- top: ${subtract(
88
- (t: ThemeVariables) => `-${t['popover-arrow-height']}`,
89
- (t: ThemeVariables) => t['popover-border-width'],
90
- )};
91
- `,
92
- '.bs-popover-bottom .popover-arrow::before': css`
93
- top: 0;
94
- border-top-width: 0;
95
- border-right-width: $popover-arrow-width * 0.5;
96
- border-left-width: $popover-arrow-width * 0.5;
97
- border-bottom-width: $popover-arrow-height;
98
- border-bottom-color: $popover-arrow-outer-color;
99
- `,
100
- '.bs-popover-bottom .popover-arrow::after': css`
101
- top: $popover-border-width;
102
- border-top-width: 0;
103
- border-right-width: $popover-arrow-width * 0.5;
104
- border-left-width: $popover-arrow-width * 0.5;
105
- border-bottom-width: $popover-arrow-height;
106
- border-bottom-color: $popover-arrow-color;
107
- `,
108
- '.bs-popover-start .popover-arrow': css`
109
- right: ${subtract(
110
- (t: ThemeVariables) => `-${t['popover-arrow-height']}`,
111
- (t: ThemeVariables) => t['popover-border-width'],
112
- )};
113
- width: $popover-arrow-height;
114
- height: $popover-arrow-width;
115
- `,
116
- '.bs-popover-start .popover-arrow::before': css`
117
- right: 0;
118
- border-top-width: $popover-arrow-width * 0.5;
119
- border-right-width: 0;
120
- border-left-width: $popover-arrow-height;
121
- border-bottom-width: $popover-arrow-width * 0.5;
122
- border-left-color: $popover-arrow-outer-color;
123
- `,
124
- '.bs-popover-start .popover-arrow::after': css`
125
- right: $popover-border-width;
126
- border-top-width: $popover-arrow-width * 0.5;
127
- border-right-width: 0;
128
- border-left-width: $popover-arrow-height;
129
- border-bottom-width: $popover-arrow-width * 0.5;
130
- border-left-color: $popover-arrow-color;
131
- `,
132
- });
133
-
134
- const PopoverArrow = React.forwardRef<ViewRef, PopoverArrowProps>(
135
- (props, ref) => {
136
- const { style, ...elementProps } = props;
137
-
138
- const { placement, arrowStyle, popper } = useForcedContext(PopoverContext);
139
-
140
- const classes = getStyles(styles, [
141
- '.popover-arrow',
142
- popper && `.bs-popover-${placement} .popover-arrow`,
143
- ]);
144
- const beforeClasses = getStyles(styles, [
145
- '.popover-arrow::before',
146
- popper && `.bs-popover-${placement} .popover-arrow::before`,
147
- ]);
148
- const afterClasses = getStyles(styles, [
149
- '.popover-arrow::after',
150
- popper && `.bs-popover-${placement} .popover-arrow::after`,
151
- ]);
152
-
153
- return (
154
- <View {...elementProps} ref={ref} style={[classes, arrowStyle, style]}>
155
- <View style={beforeClasses} />
156
- <View style={afterClasses} />
157
- </View>
158
- );
159
- },
160
- );
161
-
162
- PopoverArrow.displayName = 'PopoverArrow';
163
-
164
- export default PopoverArrow;
1
+ import React from 'react';
2
+ import View, { ViewProps, ViewRef } from '../View';
3
+ import { subtract } from '../../theme/functions';
4
+ import StyleSheet from '../../style/StyleSheet';
5
+ import { getStyles } from '../../utils';
6
+ import css from '../../style/css';
7
+ import useForcedContext from '../../hooks/useForcedContext';
8
+ import PopoverContext from './PopoverContext';
9
+ import type { ThemeVariables } from '../../types';
10
+
11
+ export interface PopoverArrowProps extends ViewProps {}
12
+
13
+ // Note: Border colors are defined for each side, because it seems like that the new react native
14
+ // architecture overwrites border colors from a previous style on Android.
15
+ // Example: `.bs-popover-top .popover-arrow::before` overwrites `.popover-arrow::before`
16
+
17
+ const styles = StyleSheet.create({
18
+ '.popover-arrow': css`
19
+ position: absolute;
20
+ // display: block;
21
+ width: $popover-arrow-width;
22
+ height: $popover-arrow-height;
23
+ `,
24
+ '.popover-arrow::before': css`
25
+ position: absolute;
26
+ // display: block;
27
+ // content: "";
28
+ border-top-color: transparent;
29
+ border-right-color: transparent;
30
+ border-left-color: transparent;
31
+ border-bottom-color: transparent;
32
+ border-style: solid;
33
+ `,
34
+ '.popover-arrow::after': css`
35
+ position: absolute;
36
+ // display: block;
37
+ // content: "";
38
+ border-top-color: transparent;
39
+ border-right-color: transparent;
40
+ border-left-color: transparent;
41
+ border-bottom-color: transparent;
42
+ border-style: solid;
43
+ `,
44
+ '.bs-popover-top .popover-arrow': css`
45
+ bottom: ${subtract(
46
+ (t: ThemeVariables) => `-${t['popover-arrow-height']}`,
47
+ (t: ThemeVariables) => t['popover-border-width'],
48
+ )};
49
+ `,
50
+ '.bs-popover-top .popover-arrow::before': css`
51
+ bottom: 0;
52
+ border-top-width: $popover-arrow-height;
53
+ border-right-width: $popover-arrow-width * 0.5;
54
+ border-left-width: $popover-arrow-width * 0.5;
55
+ border-bottom-width: 0;
56
+ border-top-color: $popover-arrow-outer-color;
57
+ border-right-color: transparent; // added for bootstrap-rn
58
+ border-left-color: transparent; // added for bootstrap-rn
59
+ border-bottom-color: transparent; // added for bootstrap-rn
60
+ `,
61
+ '.bs-popover-top .popover-arrow::after': css`
62
+ bottom: $popover-border-width;
63
+ border-top-width: $popover-arrow-height;
64
+ border-right-width: $popover-arrow-width * 0.5;
65
+ border-left-width: $popover-arrow-width * 0.5;
66
+ border-bottom-width: 0;
67
+ border-top-color: $popover-arrow-color;
68
+ border-right-color: transparent; // added for bootstrap-rn
69
+ border-left-color: transparent; // added for bootstrap-rn
70
+ border-bottom-color: transparent; // added for bootstrap-rn
71
+ `,
72
+ '.bs-popover-end .popover-arrow': css`
73
+ left: ${subtract(
74
+ (t: ThemeVariables) => `-${t['popover-arrow-height']}`,
75
+ (t: ThemeVariables) => t['popover-border-width'],
76
+ )};
77
+ width: $popover-arrow-height;
78
+ height: $popover-arrow-width;
79
+ `,
80
+ '.bs-popover-end .popover-arrow::before': css`
81
+ left: 0;
82
+ border-top-width: $popover-arrow-width * 0.5;
83
+ border-right-width: $popover-arrow-height;
84
+ border-left-width: 0;
85
+ border-bottom-width: $popover-arrow-width * 0.5;
86
+ border-top-color: transparent; // added for bootstrap-rn
87
+ border-right-color: $popover-arrow-outer-color;
88
+ border-left-color: transparent; // added for bootstrap-rn
89
+ border-bottom-color: transparent; // added for bootstrap-rn
90
+ `,
91
+ '.bs-popover-end .popover-arrow::after': css`
92
+ left: $popover-border-width;
93
+ border-top-width: $popover-arrow-width * 0.5;
94
+ border-right-width: $popover-arrow-height;
95
+ border-left-width: 0;
96
+ border-bottom-width: $popover-arrow-width * 0.5;
97
+ border-top-color: transparent; // added for bootstrap-rn
98
+ border-right-color: $popover-arrow-color;
99
+ border-left-color: transparent; // added for bootstrap-rn
100
+ border-bottom-color: transparent; // added for bootstrap-rn
101
+ `,
102
+ '.bs-popover-bottom .popover-arrow': css`
103
+ top: ${subtract(
104
+ (t: ThemeVariables) => `-${t['popover-arrow-height']}`,
105
+ (t: ThemeVariables) => t['popover-border-width'],
106
+ )};
107
+ `,
108
+ '.bs-popover-bottom .popover-arrow::before': css`
109
+ top: 0;
110
+ border-top-width: 0;
111
+ border-right-width: $popover-arrow-width * 0.5;
112
+ border-left-width: $popover-arrow-width * 0.5;
113
+ border-bottom-width: $popover-arrow-height;
114
+ border-top-color: transparent; // added for bootstrap-rn
115
+ border-right-color: transparent; // added for bootstrap-rn
116
+ border-left-color: transparent; // added for bootstrap-rn
117
+ border-bottom-color: $popover-arrow-outer-color;
118
+ `,
119
+ '.bs-popover-bottom .popover-arrow::after': css`
120
+ top: $popover-border-width;
121
+ border-top-width: 0;
122
+ border-right-width: $popover-arrow-width * 0.5;
123
+ border-left-width: $popover-arrow-width * 0.5;
124
+ border-bottom-width: $popover-arrow-height;
125
+ border-top-color: transparent; // added for bootstrap-rn
126
+ border-right-color: transparent; // added for bootstrap-rn
127
+ border-left-color: transparent; // added for bootstrap-rn
128
+ border-bottom-color: $popover-arrow-color;
129
+ `,
130
+ '.bs-popover-start .popover-arrow': css`
131
+ right: ${subtract(
132
+ (t: ThemeVariables) => `-${t['popover-arrow-height']}`,
133
+ (t: ThemeVariables) => t['popover-border-width'],
134
+ )};
135
+ width: $popover-arrow-height;
136
+ height: $popover-arrow-width;
137
+ `,
138
+ '.bs-popover-start .popover-arrow::before': css`
139
+ right: 0;
140
+ border-top-width: $popover-arrow-width * 0.5;
141
+ border-right-width: 0;
142
+ border-left-width: $popover-arrow-height;
143
+ border-bottom-width: $popover-arrow-width * 0.5;
144
+ border-top-color: transparent; // added for bootstrap-rn
145
+ border-right-color: transparent; // added for bootstrap-rn
146
+ border-left-color: $popover-arrow-outer-color;
147
+ border-bottom-color: transparent; // added for bootstrap-rn
148
+ `,
149
+ '.bs-popover-start .popover-arrow::after': css`
150
+ right: $popover-border-width;
151
+ border-top-width: $popover-arrow-width * 0.5;
152
+ border-right-width: 0;
153
+ border-left-width: $popover-arrow-height;
154
+ border-bottom-width: $popover-arrow-width * 0.5;
155
+ border-top-color: transparent; // added for bootstrap-rn
156
+ border-right-color: transparent; // added for bootstrap-rn
157
+ border-left-color: $popover-arrow-color;
158
+ border-bottom-color: transparent; // added for bootstrap-rn
159
+ `,
160
+ });
161
+
162
+ const PopoverArrow = React.forwardRef<ViewRef, PopoverArrowProps>(
163
+ (props, ref) => {
164
+ const { style, ...elementProps } = props;
165
+
166
+ const { placement, arrowStyle, popper } = useForcedContext(PopoverContext);
167
+
168
+ const classes = getStyles(styles, [
169
+ '.popover-arrow',
170
+ popper && `.bs-popover-${placement} .popover-arrow`,
171
+ ]);
172
+ const beforeClasses = getStyles(styles, [
173
+ '.popover-arrow::before',
174
+ popper && `.bs-popover-${placement} .popover-arrow::before`,
175
+ ]);
176
+ const afterClasses = getStyles(styles, [
177
+ '.popover-arrow::after',
178
+ popper && `.bs-popover-${placement} .popover-arrow::after`,
179
+ ]);
180
+
181
+ return (
182
+ <View {...elementProps} ref={ref} style={[classes, arrowStyle, style]}>
183
+ <View style={beforeClasses} />
184
+ <View style={afterClasses} />
185
+ </View>
186
+ );
187
+ },
188
+ );
189
+
190
+ PopoverArrow.displayName = 'PopoverArrow';
191
+
192
+ export default PopoverArrow;
package/src/components/tooltip/TooltipArrow.tsx CHANGED
@@ -1,102 +1,118 @@
1
- import React from 'react';
2
- import View, { ViewProps, ViewRef } from '../View';
3
- import StyleSheet from '../../style/StyleSheet';
4
- import { getStyles } from '../../utils';
5
- import css from '../../style/css';
6
- import useForcedContext from '../../hooks/useForcedContext';
7
- import TooltipContext from './TooltipContext';
8
-
9
- export interface TooltipArrowProps extends ViewProps {}
10
-
11
- const styles = StyleSheet.create({
12
- '.tooltip-arrow': css`
13
- position: absolute;
14
- // display: block;
15
- width: $tooltip-arrow-width;
16
- height: $tooltip-arrow-height;
17
- `,
18
- '.tooltip-arrow::before': css`
19
- position: absolute;
20
- // content: "";
21
- border-top-color: transparent;
22
- border-right-color: transparent;
23
- border-left-color: transparent;
24
- border-bottom-color: transparent;
25
- border-style: solid;
26
- `,
27
- '.bs-tooltip-top .tooltip-arrow': css`
28
- bottom: 0;
29
- `,
30
- '.bs-tooltip-top .tooltip-arrow::before': css`
31
- top: -1px;
32
- border-top-width: $tooltip-arrow-height;
33
- border-right-width: $tooltip-arrow-width * 0.5;
34
- border-left-width: $tooltip-arrow-width * 0.5;
35
- border-bottom-width: 0;
36
- border-top-color: $tooltip-arrow-color;
37
- `,
38
- '.bs-tooltip-end .tooltip-arrow': css`
39
- left: 0;
40
- width: $tooltip-arrow-height;
41
- height: $tooltip-arrow-width;
42
- `,
43
- '.bs-tooltip-end .tooltip-arrow::before': css`
44
- right: -1px;
45
- border-top-width: $tooltip-arrow-width * 0.5;
46
- border-right-width: $tooltip-arrow-height;
47
- border-left-width: 0;
48
- border-bottom-width: $tooltip-arrow-width * 0.5;
49
- border-right-color: $tooltip-arrow-color;
50
- `,
51
- '.bs-tooltip-bottom .tooltip-arrow': css`
52
- top: 0;
53
- `,
54
- '.bs-tooltip-bottom .tooltip-arrow::before': css`
55
- bottom: -1px;
56
- border-top-width: 0;
57
- border-right-width: $tooltip-arrow-width * 0.5;
58
- border-left-width: $tooltip-arrow-width * 0.5;
59
- border-bottom-width: $tooltip-arrow-height;
60
- border-bottom-color: $tooltip-arrow-color;
61
- `,
62
- '.bs-tooltip-start .tooltip-arrow': css`
63
- right: 0;
64
- width: $tooltip-arrow-height;
65
- height: $tooltip-arrow-width;
66
- `,
67
- '.bs-tooltip-start .tooltip-arrow::before': css`
68
- left: -1px;
69
- border-top-width: $tooltip-arrow-width * 0.5;
70
- border-right-width: 0;
71
- border-left-width: $tooltip-arrow-height;
72
- border-bottom-width: $tooltip-arrow-width * 0.5;
73
- border-left-color: $tooltip-arrow-color;
74
- `,
75
- });
76
-
77
- const TooltipArrow = React.forwardRef<ViewRef, TooltipArrowProps>(
78
- (props, ref) => {
79
- const { style, ...elementProps } = props;
80
-
81
- const { placement, arrowStyle, popper } = useForcedContext(TooltipContext);
82
-
83
- const classes = getStyles(styles, [
84
- '.tooltip-arrow',
85
- popper && `.bs-tooltip-${placement} .tooltip-arrow`,
86
- ]);
87
- const beforeClasses = getStyles(styles, [
88
- '.tooltip-arrow::before',
89
- popper && `.bs-tooltip-${placement} .tooltip-arrow::before`,
90
- ]);
91
-
92
- return (
93
- <View {...elementProps} ref={ref} style={[classes, arrowStyle, style]}>
94
- <View style={beforeClasses} />
95
- </View>
96
- );
97
- },
98
- );
99
-
100
- TooltipArrow.displayName = 'TooltipArrow';
101
-
102
- export default TooltipArrow;
1
+ import React from 'react';
2
+ import View, { ViewProps, ViewRef } from '../View';
3
+ import StyleSheet from '../../style/StyleSheet';
4
+ import { getStyles } from '../../utils';
5
+ import css from '../../style/css';
6
+ import useForcedContext from '../../hooks/useForcedContext';
7
+ import TooltipContext from './TooltipContext';
8
+
9
+ export interface TooltipArrowProps extends ViewProps {}
10
+
11
+ // Note: Border colors are defined for each side, because it seems like that the new react native
12
+ // architecture overwrites border colors from a previous style on Android.
13
+ // Example: `.bs-tooltip-top .tooltip-arrow::before` overwrites `.tooltip-arrow::before`
14
+
15
+ const styles = StyleSheet.create({
16
+ '.tooltip-arrow': css`
17
+ position: absolute;
18
+ // display: block;
19
+ width: $tooltip-arrow-width;
20
+ height: $tooltip-arrow-height;
21
+ `,
22
+ '.tooltip-arrow::before': css`
23
+ position: absolute;
24
+ // content: "";
25
+ border-top-color: transparent;
26
+ border-right-color: transparent;
27
+ border-left-color: transparent;
28
+ border-bottom-color: transparent;
29
+ border-style: solid;
30
+ `,
31
+ '.bs-tooltip-top .tooltip-arrow': css`
32
+ bottom: 0;
33
+ `,
34
+ '.bs-tooltip-top .tooltip-arrow::before': css`
35
+ top: -1px;
36
+ border-top-width: $tooltip-arrow-height;
37
+ border-right-width: $tooltip-arrow-width * 0.5;
38
+ border-left-width: $tooltip-arrow-width * 0.5;
39
+ border-bottom-width: 0;
40
+ border-top-color: $tooltip-arrow-color;
41
+ border-right-color: transparent; // added for bootstrap-rn
42
+ border-left-color: transparent; // added for bootstrap-rn
43
+ border-bottom-color: transparent; // added for bootstrap-rn
44
+ `,
45
+ '.bs-tooltip-end .tooltip-arrow': css`
46
+ left: 0;
47
+ width: $tooltip-arrow-height;
48
+ height: $tooltip-arrow-width;
49
+ `,
50
+ '.bs-tooltip-end .tooltip-arrow::before': css`
51
+ right: -1px;
52
+ border-top-width: $tooltip-arrow-width * 0.5;
53
+ border-right-width: $tooltip-arrow-height;
54
+ border-left-width: 0;
55
+ border-bottom-width: $tooltip-arrow-width * 0.5;
56
+ border-top-color: transparent; // added for bootstrap-rn
57
+ border-right-color: $tooltip-arrow-color;
58
+ border-left-color: transparent; // added for bootstrap-rn
59
+ border-bottom-color: transparent; // added for bootstrap-rn
60
+ `,
61
+ '.bs-tooltip-bottom .tooltip-arrow': css`
62
+ top: 0;
63
+ `,
64
+ '.bs-tooltip-bottom .tooltip-arrow::before': css`
65
+ bottom: -1px;
66
+ border-top-width: 0;
67
+ border-right-width: $tooltip-arrow-width * 0.5;
68
+ border-left-width: $tooltip-arrow-width * 0.5;
69
+ border-bottom-width: $tooltip-arrow-height;
70
+ border-top-color: transparent; // added for bootstrap-rn
71
+ border-right-color: transparent; // added for bootstrap-rn
72
+ border-left-color: transparent; // added for bootstrap-rn
73
+ border-bottom-color: $tooltip-arrow-color;
74
+ `,
75
+ '.bs-tooltip-start .tooltip-arrow': css`
76
+ right: 0;
77
+ width: $tooltip-arrow-height;
78
+ height: $tooltip-arrow-width;
79
+ `,
80
+ '.bs-tooltip-start .tooltip-arrow::before': css`
81
+ left: -1px;
82
+ border-top-width: $tooltip-arrow-width * 0.5;
83
+ border-right-width: 0;
84
+ border-left-width: $tooltip-arrow-height;
85
+ border-bottom-width: $tooltip-arrow-width * 0.5;
86
+ border-top-color: transparent; // added for bootstrap-rn
87
+ border-right-color: transparent; // added for bootstrap-rn
88
+ border-left-color: $tooltip-arrow-color;
89
+ border-bottom-color: transparent; // added for bootstrap-rn
90
+ `,
91
+ });
92
+
93
+ const TooltipArrow = React.forwardRef<ViewRef, TooltipArrowProps>(
94
+ (props, ref) => {
95
+ const { style, ...elementProps } = props;
96
+
97
+ const { placement, arrowStyle, popper } = useForcedContext(TooltipContext);
98
+
99
+ const classes = getStyles(styles, [
100
+ '.tooltip-arrow',
101
+ popper && `.bs-tooltip-${placement} .tooltip-arrow`,
102
+ ]);
103
+ const beforeClasses = getStyles(styles, [
104
+ '.tooltip-arrow::before',
105
+ popper && `.bs-tooltip-${placement} .tooltip-arrow::before`,
106
+ ]);
107
+
108
+ return (
109
+ <View {...elementProps} ref={ref} style={[classes, arrowStyle, style]}>
110
+ <View style={beforeClasses} />
111
+ </View>
112
+ );
113
+ },
114
+ );
115
+
116
+ TooltipArrow.displayName = 'TooltipArrow';
117
+
118
+ export default TooltipArrow;
package/src/index.ts CHANGED
@@ -210,6 +210,9 @@ export type { SwitchProps } from './components/forms/Switch';
210
210
  export { default as Spinner } from './components/spinners/Spinner';
211
211
  export type { SpinnerProps } from './components/spinners/Spinner';
212
212
 
213
+ export { default as SafeAreaView } from './components/SafeAreaView';
214
+ export type { SafeAreaViewProps } from './components/SafeAreaView';
215
+
213
216
  export { default as ScrollView } from './components/ScrollView';
214
217
  export type { ScrollViewProps } from './components/ScrollView';
215
218