Support combining multiple abs modifiers (#1509)

Author: ethanshar

generatedTypes/src/commons/modifiers.d.ts

@@ -80,9 +80,7 @@ export declare function extractTypographyValue(props: Dictionary<any>): object |
 export declare function extractPaddingValues(props: Dictionary<any>): Partial<Record<NativePaddingKeyType, number>>;
 export declare function extractMarginValues(props: Dictionary<any>): Partial<Record<NativeMarginModifierKeyType, number>>;
 export declare function extractAlignmentsValues(props: Dictionary<any>): any;
-export declare function extractPositionStyle(props: Dictionary<any>): {
-    position: "absolute";
-} | undefined;
+export declare function extractPositionStyle(props: Dictionary<any>): {} | undefined;
 export declare function extractFlexStyle(props: Dictionary<any>): Partial<Record<NativeFlexModifierKeyType, number>> | undefined;
 export declare function extractAccessibilityProps(props?: any): Partial<any>;
 export declare function extractAnimationProps(props?: any): Pick<any, "onAnimationEnd" | "animation" | "duration" | "delay" | "direction" | "easing" | "iterationCount" | "transition" | "onAnimationBegin" | "useNativeDriver">;

src/commons/__tests__/modifiers.spec.js

@@ -249,6 +249,11 @@ describe('Modifiers', () => {
     it('should return absolute with horizontal values', () => {
       expect(uut.extractPositionStyle({absH: true})).toEqual({position: 'absolute', left: 0, right: 0});
     });
+
+    it('should combine multiple abs modifiers', () => {
+      expect(uut.extractPositionStyle({absB: true, absR: true})).toEqual({position: 'absolute', bottom: 0, right: 0});
+      expect(uut.extractPositionStyle({absH: true, absV: true})).toEqual({position: 'absolute', top: 0, left: 0, bottom: 0, right: 0});
+    });
   });
 
   describe('extractFlexStyle - flex modifier', () => {

src/commons/modifiers.ts

@@ -231,16 +231,20 @@ export function extractPositionStyle(props: Dictionary<any>) {
   } as const;
 
   const keys = Object.keys(props);
-  const positionProp = _.findLast(keys, prop => POSITION_KEY_PATTERN.test(prop) && !!props[prop]);
-  if (positionProp) {
+  const positionProps = _.filter(keys, prop => POSITION_KEY_PATTERN.test(prop) && !!props[prop]);
+  let style = {};
+
+  _.forEach(positionProps, positionProp => {
     const positionVariationKey = _.split(positionProp, 'abs')[1] as keyof typeof POSITION_CONVERSIONS;
     if (positionVariationKey) {
       const positionVariation = POSITION_CONVERSIONS[positionVariationKey];
       const styleKey = `absolute${positionVariation}` as keyof typeof styles;
-      return styles[styleKey];
+      style = {...style, ...styles[styleKey]};
     }
-    return styles.absolute;
-  }
+    style = {...style, ...styles.absolute};
+  });
+    
+  return _.isEmpty(style) ? undefined : style;
 }
 
 export function extractFlexStyle(props: Dictionary<any>): Partial<Record<NativeFlexModifierKeyType, number>> | undefined {