Merge branch 'master' into master

Author: guyca

.github/workflows/require-label.yml

@@ -8,6 +8,6 @@ jobs:
   enforce-label:
     runs-on: ubuntu-latest
     steps:
-    - uses: yogevbd/enforce-label-action@2.0.0
+    - uses: yogevbd/enforce-label-action@2.2.1
       with:
         REQUIRED_LABELS_ANY: "type: accepted/bug,type: accepted/enhancement,Infrastructure,type: documentation"

.vscode/settings.json

@@ -3,5 +3,4 @@
   "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
   "eslint.enable": true,
   "typescript.tsdk": "node_modules/typescript/lib",
-  "editor.formatOnSaveMode": "modifications"
 }

e2e/Buttons.test.js

@@ -32,10 +32,10 @@ describe('Buttons', () => {
 
   it('custom button is clickable', async () => {
     await elementByLabel('Two').tap();
-    await expect(elementByLabel('Thanks for that :)')).toExist();
+    await expect(elementByLabel('Times created: 1')).toExist();
   });
 
-  it(':ios: Reseting buttons should unmount button react view', async () => {
+  it(':ios: Resetting buttons should unmount button react view', async () => {
     await elementById(TestIDs.SHOW_LIFECYCLE_BTN).tap();
     await elementById(TestIDs.RESET_BUTTONS).tap();
     await expect(elementByLabel('Button component unmounted')).toBeVisible();
@@ -56,4 +56,10 @@ describe('Buttons', () => {
     await elementById(TestIDs.ADD_BUTTON).tap();
     await elementById(TestIDs.BUTTON_THREE).tap();
   });
+
+  it('Button component is not recreated if it has a predefined componentId', async () => {
+    await elementById(TestIDs.ADD_BUTTON).tap();
+    await elementById(TestIDs.ROUND_BUTTON).tap();
+    await expect(elementByLabel('Times created: 1')).toBeVisible();
+  });
 });

lib/android/app/src/main/java/com/reactnativenavigation/options/FadeAnimation.java

@@ -4,11 +4,11 @@
 import org.json.JSONObject;
 
 public class FadeAnimation extends NestedAnimationsOptions {
-    public FadeAnimation() {
+    public FadeAnimation(boolean reversed) {
         try {
             JSONObject alpha = new JSONObject();
-            alpha.put("from", 0);
-            alpha.put("to", 1);
+            alpha.put("from", reversed ? 1 : 0);
+            alpha.put("to", reversed ? 0 : 1);
             alpha.put("duration", 300);
 
             JSONObject content = new JSONObject();
@@ -21,4 +21,8 @@ public FadeAnimation() {
             e.printStackTrace();
         }
     }
+
+    public FadeAnimation() {
+        this(false);
+    }
 }

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/StackAnimator.kt

@@ -73,7 +73,7 @@ open class StackAnimator @JvmOverloads constructor(
     }
 
     private suspend fun popWithElementTransitions(appearing: ViewController<*>, disappearing: ViewController<*>, pop: NestedAnimationsOptions, set: AnimatorSet) {
-        val fade = if (pop.content.isFadeAnimation()) pop else FadeAnimation()
+        val fade = if (pop.content.isFadeAnimation()) pop else FadeAnimation(true)
         val transitionAnimators = transitionAnimatorCreator.create(pop, fade.content, disappearing, appearing)
         set.playTogether(fade.content.getAnimation(disappearing.view), transitionAnimators)
         transitionAnimators.listeners.forEach { listener: Animator.AnimatorListener -> set.addListener(listener) }

lib/ios/RNNLayoutManager.m

@@ -1,13 +1,12 @@
-
 #import "RNNLayoutManager.h"
 #import "RNNLayoutProtocol.h"
 #import "UIViewController+LayoutProtocol.h"
 
 @implementation RNNLayoutManager
 
 + (UIViewController *)findComponentForId:(NSString *)componentId {
-	for (UIWindow* window in UIApplication.sharedApplication.windows) {
-		UIViewController* result = [self findChildComponentForParent:window.rootViewController ForId:componentId];
+	for (UIWindow *window in UIApplication.sharedApplication.windows) {
+		UIViewController *result = [self findChildComponentForParent:window.rootViewController forId:componentId];
 		if (result) {
 			return result;
 		}
@@ -16,25 +15,20 @@ + (UIViewController *)findComponentForId:(NSString *)componentId {
 	return nil;
 }
 
-+ (UIViewController *)findChildComponentForParent:(UIViewController *)parentViewController ForId:(NSString *)componentId {
++ (UIViewController *)findChildComponentForParent:(UIViewController *)parentViewController forId:(NSString *)componentId {
 	if ([parentViewController.layoutInfo.componentId isEqualToString:componentId]) {
 		return parentViewController;
 	}
 
 	if (parentViewController.presentedViewController) {
-		if ([parentViewController.presentedViewController.layoutInfo.componentId isEqualToString:componentId]) {
-			return parentViewController.presentedViewController;
-		}
-		
-		UIViewController* modalResult = [self findChildComponentForParent:parentViewController.presentedViewController ForId:componentId];
+		UIViewController *modalResult = [self findChildComponentForParent:parentViewController.presentedViewController forId:componentId];
 		if (modalResult) {
 			return modalResult;
 		}
-		
 	}
 
-	for (UIViewController* childVC in parentViewController.childViewControllers) {
-		UIViewController* result = [self findChildComponentForParent:childVC ForId:componentId];
+	for (UIViewController *childVC in parentViewController.childViewControllers) {
+		UIViewController *result = [self findChildComponentForParent:childVC forId:componentId];
 		if (result) {
 			return result;
 		}
@@ -43,5 +37,4 @@ + (UIViewController *)findChildComponentForParent:(UIViewController *)parentView
 	return nil;
 }
 
-
 @end

lib/src/commands/OptionsProcessor.test.ts

@@ -3,7 +3,7 @@ import { UniqueIdProvider } from '../adapters/UniqueIdProvider';
 import { Store } from '../components/Store';
 import { OptionProcessorsStore } from '../processors/OptionProcessorsStore';
 import { Options, OptionsModalPresentationStyle } from '../interfaces/Options';
-import { mock, when, anyString, instance, anyNumber, verify } from 'ts-mockito';
+import { mock, when, instance, anyNumber, verify } from 'ts-mockito';
 import { ColorService } from '../adapters/ColorService';
 import { AssetService } from '../adapters/AssetResolver';
 import { Deprecations } from './Deprecations';
@@ -25,7 +25,9 @@ describe('navigation options', () => {
     const assetService = instance(mockedAssetService);
 
     const mockedColorService = mock(ColorService) as ColorService;
-    when(mockedColorService.toNativeColor(anyString())).thenReturn(666);
+    when(mockedColorService.toNativeColor('red')).thenReturn(0xffff0000);
+    when(mockedColorService.toNativeColor('green')).thenReturn(0xff00ff00);
+    when(mockedColorService.toNativeColor('blue')).thenReturn(0xff0000ff);
     const colorService = instance(mockedColorService);
     optionProcessorsRegistry = new OptionProcessorsStore();
     uut = new OptionsProcessor(
@@ -172,8 +174,8 @@ describe('navigation options', () => {
     };
     uut.processOptions(options, CommandName.SetRoot);
     expect(options).toEqual({
-      statusBar: { backgroundColor: 666 },
-      topBar: { background: { color: 666 } },
+      statusBar: { backgroundColor: 0xffff0000 },
+      topBar: { background: { color: 0xff0000ff } },
     });
   });
 
@@ -279,4 +281,41 @@ describe('navigation options', () => {
       }
     );
   });
+
+  it('transform searchBar bool to object', () => {
+    const options = { topBar: { searchBar: true as any } };
+    uut.processOptions(options, CommandName.SetRoot);
+    expect(options.topBar.searchBar).toStrictEqual({
+      visible: true,
+      hideOnScroll: false,
+      hideTopBarOnFocus: false,
+      obscuresBackgroundDuringPresentation: false,
+      backgroundColor: null,
+      tintColor: null,
+      placeholder: '',
+    });
+  });
+
+  it('transform searchBar bool to object and merges in deprecated values', () => {
+    const options = {
+      topBar: {
+        searchBar: true as any,
+        searchBarHiddenWhenScrolling: true,
+        hideNavBarOnFocusSearchBar: true,
+        searchBarBackgroundColor: 'red',
+        searchBarTintColor: 'green',
+        searchBarPlaceholder: 'foo',
+      },
+    };
+    uut.processOptions(options, CommandName.SetRoot);
+    expect(options.topBar.searchBar).toStrictEqual({
+      visible: true,
+      hideOnScroll: true,
+      hideTopBarOnFocus: true,
+      obscuresBackgroundDuringPresentation: false,
+      backgroundColor: 0xffff0000,
+      tintColor: 0xff00ff00,
+      placeholder: 'foo',
+    });
+  });
 });

lib/src/commands/OptionsProcessor.ts

@@ -10,7 +10,7 @@ import { Store } from '../components/Store';
 import { UniqueIdProvider } from '../adapters/UniqueIdProvider';
 import { ColorService } from '../adapters/ColorService';
 import { AssetService } from '../adapters/AssetResolver';
-import { Options } from '../interfaces/Options';
+import { Options, OptionsSearchBar, OptionsTopBar } from '../interfaces/Options';
 import { Deprecations } from './Deprecations';
 import { OptionProcessorsStore } from '../processors/OptionProcessorsStore';
 import { CommandName } from '../interfaces/CommandName';
@@ -49,7 +49,7 @@ export class OptionsProcessor {
   }
 
   private processObject(
-    objectToProcess: object,
+    objectToProcess: Record<string, any>,
     parentOptions: object,
     onProcess: (key: string, parentOptions: object) => void,
     commandName: CommandName,
@@ -72,8 +72,9 @@ export class OptionsProcessor {
 
       onProcess(key, parentOptions);
 
-      if (!isEqual(key, 'passProps') && (isObject(value) || isArray(value))) {
-        this.processObject(value, parentOptions, onProcess, commandName, objectPath);
+      const processedValue = objectToProcess[key];
+      if (!isEqual(key, 'passProps') && (isObject(processedValue) || isArray(processedValue))) {
+        this.processObject(processedValue, parentOptions, onProcess, commandName, objectPath);
       }
     });
   }
@@ -138,30 +139,34 @@ export class OptionsProcessor {
     }
   }
 
-  private processSearchBar(key: string, value: any, options: Record<string, any>) {
-    if (isEqual(key, 'searchBar')) {
-      typeof value === 'boolean' && this.deprecations.onProcessOptions(key, options, '');
+  private processSearchBar(key: string, value: OptionsSearchBar | boolean, options: OptionsTopBar) {
+    if (key !== 'searchBar') {
+      return;
+    }
+
+    const deprecatedSearchBarOptions: OptionsSearchBar = {
+      visible: false,
+      hideOnScroll: options.searchBarHiddenWhenScrolling ?? false,
+      hideTopBarOnFocus: options.hideNavBarOnFocusSearchBar ?? false,
+      obscuresBackgroundDuringPresentation: false,
+      backgroundColor: options.searchBarBackgroundColor,
+      tintColor: options.searchBarTintColor,
+      placeholder: options.searchBarPlaceholder ?? '',
+    };
+
+    if (typeof value === 'boolean') {
+      // Deprecated
+      this.deprecations.onProcessOptions(key, options, '');
+
+      options[key] = {
+        ...deprecatedSearchBarOptions,
+        visible: value,
+      };
+    } else {
       options[key] = {
-        ...options[key],
-        visible: options[key].visible ?? value,
-        hiddenWhenScrolling:
-          options[key].hiddenWhenScrolling ?? options.searchBarHiddenWhenScrolling ?? false,
-        hideTopBarOnFocus:
-          options[key].hideTopBarOnFocus ?? options.hideNavBarOnFocusSearchBar ?? false,
-        obscuresBackgroundDuringPresentation:
-          options[key].obscuresBackgroundDuringPresentation ?? false,
-        placeholder: options[key].placeholder ?? options.searchBarPlaceholder ?? '',
+        ...deprecatedSearchBarOptions,
+        ...value,
       };
-      this.processColor(
-        'backgroundColor',
-        options[key].backgroundColor ?? options.searchBarBackgroundColor,
-        options[key]
-      );
-      this.processColor(
-        'tintColor',
-        options[key].tintColor ?? options.searchBarTintColor,
-        options[key]
-      );
     }
   }
 

lib/src/interfaces/Options.ts

@@ -1105,6 +1105,17 @@ export interface ViewAnimationOptions extends ScreenAnimationOptions {
   id?: string;
 }
 
+export interface ModalAnimationOptions extends ViewAnimationOptions {
+  /**
+   * Animations to be applied on elements which are shared between the appearing and disappearing screens
+   */
+  sharedElementTransitions?: SharedElementTransition[];
+  /**
+   * Animations to be applied on views in the appearing or disappearing screens
+   */
+  elementTransitions?: ElementTransition[];
+}
+
 /**
  * Used for describing stack commands animations.
  */
@@ -1163,11 +1174,11 @@ export interface AnimationOptions {
   /**
    * Configure what animates when modal is shown
    */
-  showModal?: ViewAnimationOptions;
+  showModal?: ModalAnimationOptions;
   /**
    * Configure what animates when modal is dismissed
    */
-  dismissModal?: ViewAnimationOptions;
+  dismissModal?: ModalAnimationOptions;
 }
 
 /**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-navigation",
-  "version": "7.1.0",
+  "version": "7.2.0",
   "description": "React Native Navigation - truly native navigation for iOS and Android",
   "license": "MIT",
   "nativePackage": true,
@@ -184,4 +184,4 @@
       }
     }
   }
-}
+}

playground/src/screens/ButtonsScreen.tsx

@@ -55,6 +55,7 @@ export default class ButtonOptions extends NavigationComponent {
               name: Screens.RoundButton,
               passProps: {
                 title: 'Two',
+                timesCreated: 1,
               },
             },
           },

playground/src/screens/RoundedButton.tsx

@@ -5,19 +5,24 @@ import Colors from '../commons/Colors';
 
 interface Props extends NavigationComponentProps {
   title: string;
+  timesCreated?: number;
 }
 
+let timesCreated = 0;
 export default class RoundedButton extends React.Component<Props> {
   constructor(props: Props) {
     super(props);
     Navigation.events().bindComponent(this);
+    timesCreated = props.timesCreated ?? timesCreated + 1;
   }
 
   render() {
     return (
       <View style={styles.container}>
         <View style={styles.button}>
-          <TouchableOpacity onPress={() => Alert.alert(this.props.title, 'Thanks for that :)')}>
+          <TouchableOpacity
+            onPress={() => Alert.alert(this.props.title, `Times created: ${timesCreated}`)}
+          >
             <Text style={styles.text}>{this.props.title}</Text>
           </TouchableOpacity>
         </View>

scripts/test-e2e.js

@@ -27,5 +27,6 @@ function run() {
   }
   exec.execSync(
     `detox test --configuration ${configuration} ${headless$} -w ${workers} ${loglevel}`
-  ); //-f "ScreenStyle.test.js" --loglevel trace
+    // "Buttons.test.js" --loglevel trace`
+  );
 }