diff --git a/common/cpp/react/renderer/components/safeareacontext/RNCSafeAreaViewShadowNode.cpp b/common/cpp/react/renderer/components/safeareacontext/RNCSafeAreaViewShadowNode.cpp index 2e710ad..811d909 100644 --- a/common/cpp/react/renderer/components/safeareacontext/RNCSafeAreaViewShadowNode.cpp +++ b/common/cpp/react/renderer/components/safeareacontext/RNCSafeAreaViewShadowNode.cpp @@ -22,7 +22,8 @@ inline YGValue valueFromEdges(YGStyle::Edges edges, YGEdge edge, YGEdge axis) { return edges[YGEdgeAll]; } -inline float getEdgeValue(std::string edgeMode, float insetValue, float edgeValue) { +inline float +getEdgeValue(std::string edgeMode, float insetValue, float edgeValue) { if (edgeMode == "off") { return edgeValue; } else if (edgeMode == "maximum") { @@ -64,10 +65,22 @@ void RNCSafeAreaViewShadowNode::adjustLayoutWithState() { valueFromEdges(props.yogaStyle.margin(), YGEdgeRight, YGEdgeHorizontal); } - top = yogaStyleValueFromFloat(getEdgeValue(edges.top, stateData.insets.top, (top.unit == YGUnitPoint ? top.value : 0))); - left = yogaStyleValueFromFloat(getEdgeValue(edges.left, stateData.insets.left, (left.unit == YGUnitPoint ? left.value : 0))); - right = yogaStyleValueFromFloat(getEdgeValue(edges.right, stateData.insets.right, (right.unit == YGUnitPoint ? right.value : 0))); - bottom = yogaStyleValueFromFloat(getEdgeValue(edges.bottom, stateData.insets.bottom, (bottom.unit == YGUnitPoint ? bottom.value : 0))); + top = yogaStyleValueFromFloat(getEdgeValue( + edges.top, + stateData.insets.top, + (top.unit == YGUnitPoint ? top.value : 0))); + left = yogaStyleValueFromFloat(getEdgeValue( + edges.left, + stateData.insets.left, + (left.unit == YGUnitPoint ? left.value : 0))); + right = yogaStyleValueFromFloat(getEdgeValue( + edges.right, + stateData.insets.right, + (right.unit == YGUnitPoint ? right.value : 0))); + bottom = yogaStyleValueFromFloat(getEdgeValue( + edges.bottom, + stateData.insets.bottom, + (bottom.unit == YGUnitPoint ? bottom.value : 0))); YGStyle adjustedStyle = getConcreteProps().yogaStyle; if (props.mode == RNCSafeAreaViewMode::Padding) { diff --git a/ios/RNCSafeAreaShadowView.m b/ios/RNCSafeAreaShadowView.m index f4f2b33..25c326b 100644 --- a/ios/RNCSafeAreaShadowView.m +++ b/ios/RNCSafeAreaShadowView.m @@ -3,10 +3,10 @@ #import #include +#import "RNCSafeAreaViewEdgeMode.h" #import "RNCSafeAreaViewEdges.h" #import "RNCSafeAreaViewLocalData.h" #import "RNCSafeAreaViewMode.h" -#import "RNCSafeAreaViewEdgeMode.h" // From RCTShadowView.m typedef NS_ENUM(unsigned int, meta_prop_t) { @@ -113,14 +113,17 @@ - (void)updateInsets if (mode == RNCSafeAreaViewModePadding) { [self extractEdges:_paddingMetaProps top:&top right:&right bottom:&bottom left:&left]; super.paddingTop = (YGValue){[self getEdgeValue:edges.top insetValue:insets.top edgeValue:top], YGUnitPoint}; - super.paddingRight = (YGValue){[self getEdgeValue:edges.right insetValue:insets.right edgeValue:right], YGUnitPoint}; - super.paddingBottom = (YGValue){[self getEdgeValue:edges.bottom insetValue:insets.bottom edgeValue:bottom], YGUnitPoint}; + super.paddingRight = + (YGValue){[self getEdgeValue:edges.right insetValue:insets.right edgeValue:right], YGUnitPoint}; + super.paddingBottom = + (YGValue){[self getEdgeValue:edges.bottom insetValue:insets.bottom edgeValue:bottom], YGUnitPoint}; super.paddingLeft = (YGValue){[self getEdgeValue:edges.left insetValue:insets.left edgeValue:left], YGUnitPoint}; } else if (mode == RNCSafeAreaViewModeMargin) { [self extractEdges:_marginMetaProps top:&top right:&right bottom:&bottom left:&left]; super.marginTop = (YGValue){[self getEdgeValue:edges.top insetValue:insets.top edgeValue:top], YGUnitPoint}; super.marginRight = (YGValue){[self getEdgeValue:edges.right insetValue:insets.right edgeValue:right], YGUnitPoint}; - super.marginBottom = (YGValue){[self getEdgeValue:edges.bottom insetValue:insets.bottom edgeValue:bottom], YGUnitPoint}; + super.marginBottom = + (YGValue){[self getEdgeValue:edges.bottom insetValue:insets.bottom edgeValue:bottom], YGUnitPoint}; super.marginLeft = (YGValue){[self getEdgeValue:edges.left insetValue:insets.left edgeValue:left], YGUnitPoint}; } } diff --git a/ios/RNCSafeAreaView.m b/ios/RNCSafeAreaView.m index dd6887b..834d816 100644 --- a/ios/RNCSafeAreaView.m +++ b/ios/RNCSafeAreaView.m @@ -23,7 +23,8 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge _bridge = bridge; // Defaults _mode = RNCSafeAreaViewModePadding; - _edges = RNCSafeAreaViewEdgesMake(RNCSafeAreaViewEdgeModeOff, RNCSafeAreaViewEdgeModeOff, RNCSafeAreaViewEdgeModeOff, RNCSafeAreaViewEdgeModeOff); + _edges = RNCSafeAreaViewEdgesMake( + RNCSafeAreaViewEdgeModeOff, RNCSafeAreaViewEdgeModeOff, RNCSafeAreaViewEdgeModeOff, RNCSafeAreaViewEdgeModeOff); } return self; diff --git a/ios/RNCSafeAreaViewEdgeMode.h b/ios/RNCSafeAreaViewEdgeMode.h index dd1a449..406c719 100644 --- a/ios/RNCSafeAreaViewEdgeMode.h +++ b/ios/RNCSafeAreaViewEdgeMode.h @@ -8,5 +8,5 @@ typedef NS_ENUM(NSInteger, RNCSafeAreaViewEdgeMode) { }; @interface RCTConvert (RNCSafeAreaViewEdgeMode) - + (RNCSafeAreaViewEdgeMode)RNCSafeAreaViewEdgeMode:(nullable id)json; ++ (RNCSafeAreaViewEdgeMode)RNCSafeAreaViewEdgeMode:(nullable id)json; @end diff --git a/ios/RNCSafeAreaViewEdges.h b/ios/RNCSafeAreaViewEdges.h index a9cd958..a2e1503 100644 --- a/ios/RNCSafeAreaViewEdges.h +++ b/ios/RNCSafeAreaViewEdges.h @@ -2,10 +2,14 @@ #import "RNCSafeAreaViewEdgeMode.h" typedef struct RNCSafeAreaViewEdges { - RNCSafeAreaViewEdgeMode top; - RNCSafeAreaViewEdgeMode right; - RNCSafeAreaViewEdgeMode bottom; - RNCSafeAreaViewEdgeMode left; + RNCSafeAreaViewEdgeMode top; + RNCSafeAreaViewEdgeMode right; + RNCSafeAreaViewEdgeMode bottom; + RNCSafeAreaViewEdgeMode left; } RNCSafeAreaViewEdges; -RNCSafeAreaViewEdges RNCSafeAreaViewEdgesMake(RNCSafeAreaViewEdgeMode top, RNCSafeAreaViewEdgeMode right, RNCSafeAreaViewEdgeMode bottom, RNCSafeAreaViewEdgeMode left); +RNCSafeAreaViewEdges RNCSafeAreaViewEdgesMake( + RNCSafeAreaViewEdgeMode top, + RNCSafeAreaViewEdgeMode right, + RNCSafeAreaViewEdgeMode bottom, + RNCSafeAreaViewEdgeMode left); diff --git a/ios/RNCSafeAreaViewEdges.m b/ios/RNCSafeAreaViewEdges.m index fa415db..aadb825 100644 --- a/ios/RNCSafeAreaViewEdges.m +++ b/ios/RNCSafeAreaViewEdges.m @@ -1,29 +1,36 @@ -#import #import "RNCSafeAreaViewEdges.h" +#import #import "RNCSafeAreaViewEdgeMode.h" -RNCSafeAreaViewEdges RNCSafeAreaViewEdgesMake(RNCSafeAreaViewEdgeMode top, RNCSafeAreaViewEdgeMode right, RNCSafeAreaViewEdgeMode bottom, RNCSafeAreaViewEdgeMode left) +RNCSafeAreaViewEdges RNCSafeAreaViewEdgesMake( + RNCSafeAreaViewEdgeMode top, + RNCSafeAreaViewEdgeMode right, + RNCSafeAreaViewEdgeMode bottom, + RNCSafeAreaViewEdgeMode left) { - RNCSafeAreaViewEdges edges; - edges.top = top; - edges.left = left; - edges.bottom = bottom; - edges.right = right; - return edges; + RNCSafeAreaViewEdges edges; + edges.top = top; + edges.left = left; + edges.bottom = bottom; + edges.right = right; + return edges; } RNCSafeAreaViewEdges RNCSafeAreaViewEdgesMakeString(NSString *top, NSString *right, NSString *bottom, NSString *left) { - RNCSafeAreaViewEdges edges; - edges.top = [RCTConvert RNCSafeAreaViewEdgeMode:top]; - edges.right = [RCTConvert RNCSafeAreaViewEdgeMode:right]; - edges.bottom = [RCTConvert RNCSafeAreaViewEdgeMode:bottom]; - edges.left = [RCTConvert RNCSafeAreaViewEdgeMode:left]; - return edges; + RNCSafeAreaViewEdges edges; + edges.top = [RCTConvert RNCSafeAreaViewEdgeMode:top]; + edges.right = [RCTConvert RNCSafeAreaViewEdgeMode:right]; + edges.bottom = [RCTConvert RNCSafeAreaViewEdgeMode:bottom]; + edges.left = [RCTConvert RNCSafeAreaViewEdgeMode:left]; + return edges; } @implementation RCTConvert (RNCSafeAreaViewEdges) -RCT_CUSTOM_CONVERTER(RNCSafeAreaViewEdges, RNCSafeAreaViewEdges, RNCSafeAreaViewEdgesMakeString(json[@"top"], json[@"right"], json[@"bottom"], json[@"left"])) +RCT_CUSTOM_CONVERTER( + RNCSafeAreaViewEdges, + RNCSafeAreaViewEdges, + RNCSafeAreaViewEdgesMakeString(json[@"top"], json[@"right"], json[@"bottom"], json[@"left"])) @end diff --git a/src/SafeAreaView.tsx b/src/SafeAreaView.tsx index a0ad2e1..3944860 100644 --- a/src/SafeAreaView.tsx +++ b/src/SafeAreaView.tsx @@ -23,23 +23,23 @@ export const SafeAreaView = React.forwardRef< SafeAreaViewProps >(({ edges, ...props }, ref) => { const nativeEdges = useMemo(() => { - const _edges = Array.isArray(edges) - ? edges.reduce((accum, edge) => { - accum[edge] = 'additive'; - return accum; - }, {}) - : edges; - - if (_edges === undefined) { + if (edges == null) { return defaultEdges; } + const edgesObj = Array.isArray(edges) + ? edges.reduce((acc, edge) => { + acc[edge] = 'additive'; + return acc; + }, {}) + : edges; + // make sure that we always pass all edges, required for fabric const requiredEdges: Record = { - top: _edges.top ?? 'off', - right: _edges.right ?? 'off', - bottom: _edges.bottom ?? 'off', - left: _edges.left ?? 'off', + top: edgesObj.top ?? 'off', + right: edgesObj.right ?? 'off', + bottom: edgesObj.bottom ?? 'off', + left: edgesObj.left ?? 'off', }; return requiredEdges; diff --git a/src/__tests__/SafeAreaView-test.tsx b/src/__tests__/SafeAreaView-test.tsx index 396be85..4a667b5 100644 --- a/src/__tests__/SafeAreaView-test.tsx +++ b/src/__tests__/SafeAreaView-test.tsx @@ -32,4 +32,29 @@ describe('SafeAreaView', () => { ); expect(component).toMatchSnapshot(); }); + + it('can set edges', () => { + const component = ReactTestRenderer.create( + + + + + , + ); + expect(component).toMatchSnapshot(); + }); + + it('can set edges value type', () => { + const component = ReactTestRenderer.create( + + + + + , + ); + expect(component).toMatchSnapshot(); + }); }); diff --git a/src/__tests__/__snapshots__/SafeAreaView-test.tsx.snap b/src/__tests__/__snapshots__/SafeAreaView-test.tsx.snap index f16526e..a6079af 100644 --- a/src/__tests__/__snapshots__/SafeAreaView-test.tsx.snap +++ b/src/__tests__/__snapshots__/SafeAreaView-test.tsx.snap @@ -14,12 +14,12 @@ exports[`SafeAreaView can override padding styles 1`] = ` > `; +exports[`SafeAreaView can set edges 1`] = ` + + + + + +`; + +exports[`SafeAreaView can set edges value type 1`] = ` + + + + + +`; + exports[`SafeAreaView renders 1`] = `