React-native-rnx NPM

react-native-rnx

Useful library package containing:

tab & stack navigation Provider + hook
translation hook
store hook (using react context, can be automatically persisted in LocalStorage if specified to Provider)
some UI components
some helpers

Installation

yarn add react-native-rnx

Also checkout the peerDependencies in package.json, it was tested only with these deps

Usage

// App.tsx
import {
  Router,
  initLocalization,
  useLocalization,
  createStateProvider,
} from 'react-native-rnx';

import en from '@localizations/en.json';
initLocalization({en});

import Routes from '@models/Routes';
import Home from '@screens/Home';
import Settings from '@screens/Settings';
import Feed from '@screens/Feed';
import NotificationsSettings from '@screens/NotificationsSettings';

interface GlobalState {
  username: string;
}

const App = () => {
  const {localize} = useLocalization();
  const [StateProvider] = useState(
    createStateProvider<GlobalState>({}, state => state, [
      'username', // If specied here, data will be persisted in local storage
    ]),
  );

  return (
    <StateProvider.Element>
      <Router
        tabs={{
          [Routes.Tab1]: {
            initial: Routes.Home,
            title: localize('tabs.1'),
            iconName: 'clock',
            screens: [
              {component: Home, name: Routes.Home},
            ],
          },
          [Routes.Tab2]: {
            initial: Routes.Explore,
            title: localize('tabs.2'),
            iconName: 'graduation-cap',
            screens: [
              {component: Feed, name: Routes.Feed},
            ],
          },
          [Routes.Tab3]: {
            initial: Routes.Settings,
            title: localize('tabs.3'),
            iconName: 'user',
            screens: [
              {component: Settings, name: Routes.Settings},
              {component: NotificationsSettings, name: Routes.NotificationsSettings},
            ],
          },
        }}
      />
    </StateProvider.Element>
  );
};

export default App;

How to use navigation hook

import {useNavigation} from '@react-navigation/native';
import Routes from '@models/Routes';

const Component = () => {
  const {navigate, goBack} = useNavigation();
  const notif = {data: 1};
  
  const navigateToNotifSettingsScreen = () => {
    navigate(Routes.NotificationsSettings, {notif});
  }
  
   const goBackInStack = () => {
      goBack();
   }
}
export default Component;

How to use store hook

import GlobalState from '@models/GlobalState';
import {useGlobalState} from 'react-native-rnx';

const Component = () => {
  const {globalState, setGlobalState} = useGlobalState<GlobalState>();
  const username = globalState.username;
  
  const updateUsername = (newVal: string) => {
    setGlobalState({username: newVal}); // This will be persist in localStorage because it was specifed in App.js
  }
}
export default Component;

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

2 months ago

2 months ago

2 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

6 months ago

6 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

9 months ago

10 months ago

10 months ago

10 months ago

8 months ago

8 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago