spaghettic0des/react-native-navigation-register-screens

This is a utility function to register an array of screens instead of calling `Navigation.registerComponent` multiple times

react-native-navigation-register-screens

Easier way to register RNN components.

Example

Function Component

import {
  ScreenFC,
} from 'react-native-navigation-register-screens';

type MyFunctionComponentProps = {
  hello: string,
};

const MyFunctionComponent: ScreenFC<MyFunctionComponentProps> = ({
  hello,
  componentId,
}) {
  console.log(componentId);
  return (
    <View>
      <Text>{hello}</Text>
    </View>
  );
};

MyFunctionComponent.screenName = 'MyApp.Screens.MyFunctionComponent';

MyFunctionComponent.options = props => {
  console.log(props);

  return {
    topBar: {
      title: {
        text: 'Pushed screen title',
      },
    },
  };
};

Registering Screens

import {registerScreens} from 'react-native-navigation-register-screens';

registerScreens([MyFunctionComponent, MyClassComponent, MyPureComponent]);

With providers

If your using react-redux's Provider or other similar libraries, you can provide a third parameter as the callback function.

import {Provider} from 'react-redux';
import store from '../store';

registerScreens(
  [MyFunctionComponent, MyClassComponent, MyPureComponent],
  (Component) => (props) => (
    <Provider store={store}>
      <Component {...props} />
    </Provider>
  ),
);

License

react-native-navigation-register-screens is MIT licensed, as found in the LICENSE file.

react-native-navigation-register-screens's Issues

Refactor types to be more flexible

Currently the types are a little bit buggy/hacky, specially when wrapping the screen component with a HOC (e.g Redux connect).

Refactor the types to handle these situations.

Add example project

Setup Github Actions

Automate NPM publish with Github actions.