static not working

[Rahmat Zulfikri]

Describe the bug
Hi, first of all, I wanna says thanks for this awesome component. I found an issue with "static" props, it never applied to the component, check my code below.

Code snippet
static not working

const LoginScreen = register({
  loader: () => import('../Screens/Auth/LoginScreen'),
  name: NAVIGATION_NAME.AUTH.login,
  static: {
    options: {
      topBar: {
        visible: false
      }
    }
  }
});

If I add static like this, it working

const LoginScreen = register({
  loader: () => import('../Screens/Auth/LoginScreen'),
  name: NAVIGATION_NAME.AUTH.login
});

LoginScreen.options = {
  topBar: {
    visible: false
  }
};

based on that code, I assume that the optimized component from the register function does not apply the static props.

the other solution, I do a patch to register function like this

const register = <P extends {}>(component: PreLoadable & Partial<EnhancedPreLoadable>) => {
    const enhancedComponent: Component = {
        name: `Component${i++}`,
        ...defaultPreLoadable,
        ...component
    };
    const { name } = enhancedComponent;

    if (mapLoadable[name] !== undefined) {
        console.warn(`You are trying to add a new component with already existing name: ${name}. If you see this warning after fast/hot reloading and you use 'register' function in Navigator without separate 'index' files - it's fine. In other cases it may indicate an issue, since by default it will overwrite the data and screen will not be cached. See https://github.com/kirillzyusko/react-native-bundle-splitter/issues/29 for more details.`);
    }

    mapLoadable[name] = enhancedComponent;
    const optimizedComponent = optimized(name) as React.ComponentClass<P>;
   // apply static props
    if (enhancedComponent.static) {
        if (enhancedComponent.static) {
            Object.keys(enhancedComponent.static).forEach((key: string) => {
              // @ts-ignore
              optimizedComponent[key] = enhancedComponent.static[key];
            });
        }
    }
    return optimizedComponent
};

Please give me advice related to this issue.

Thank you.

[Kirill Zyusko]

Hi @RZulfikri

Could you try to remove this code:

return React.forwardRef((props: Props<T>, ref: React.Ref<T> | null) => {
    return <OptimizedComponent {...props} forwardedRef={ref} />;
  });

and instead of that use (and provide static options as per guide):

return OptimizedComponent;

If it works, then I think it's an unintentional mistake and the code should look like:

  const OptimizedComponentForwardedRef = React.forwardRef((props: Props<T>, ref: React.Ref<T> | null) => {
    return <OptimizedComponent {...props} forwardedRef={ref} />;
  });

  const registerData = mapLoadable[screenName];

  if (registerData.static) {
    Object.keys(registerData.static).forEach((key: string) => {
      // @ts-ignore
      OptimizedComponentForwardedRef[key] = registerData.static[key];
    });
  }

  return OptimizedComponentForwardedRef;

Could you please check it?

[Rahmat Zulfikri]

@kirillzyusko thanks for your fast response, this code is working.

  const OptimizedComponentForwardedRef = React.forwardRef((props: Props<T>, ref: React.Ref<T> | null) => {
    return <OptimizedComponent {...props} forwardedRef={ref} />;
  });

  const registerData = mapLoadable[screenName];

  if (registerData.static) {
    Object.keys(registerData.static).forEach((key: string) => {
      // @ts-ignore
      OptimizedComponentForwardedRef[key] = registerData.static[key];
    });
  }

  return OptimizedComponentForwardedRef;

thanks

[Kirill Zyusko]

@RZulfikri thank you for the input 😊

I will fix it today and will publish a new version! Thank you again!

[Kirill Zyusko]

Fixed in 666f04b