artyorsh

React Native Metro and Babel resolver functions for monorepo projects

Have you ever faced troubles when configuring a fresh react-native app to test your framework locally? These utility functions will help you to configure metro and babel to run your monorepo-structured framework and test it's modules without a need to publish them.

Simply copy and paste the files below into your project root and follow the guides explained in both of them.

See an Example project

artyorsh

import * as React from 'react';
import {
  RefreshControl as RNRefreshControl,
  RefreshControlProps as RNRefreshControlProps,
  StyleSheet,
  View,
  ViewProps,
} from 'react-native';
import {
  Spinner,

artyorsh

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

export const AuthNavigator = (): React.ReactElement => (
  <Stack.Navigator headerMode='none'>
    <Stack.Screen name='Sign In' component={SignInScreen}/>
    <Stack.Screen name='Sign Up' component={SignUpScreen}/>
  </Stack.Navigator>
);

artyorsh

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { SignInScreen, SignUpScreen, ResetPasswordScreen } from '@app-scenes/auth';
import { AppRoute } from './app-routes';

const Stack = createStackNavigator();

export const AuthNavigator = (): React.ReactElement => (
  <Stack.Navigator headerMode='none'>
    <Stack.Screen name={AppRoute.SIGN_IN} component={SignInScreen}/>

artyorsh

import React from 'react';
import { NavigationNativeContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { AuthNavigator } from './auth.navigator';
import { AppRoute } from './app-routes';

const Stack = createStackNavigator();

export const AppNavigator = (config): React.ReactElement => (
  <NavigationNativeContainer>

artyorsh

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { TodoScreen, TodoInProgressScreen, TodoDoneScreen } from '@app-scenes/todo';
import { AppRoute } from './app-routes';

const Stack = createStackNavigator();
const TopTab = createMaterialTopTabNavigator();

export const TodoNavigator = (): React.ReactElement => (

artyorsh

import React from 'react';
import { NavigationNativeContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { AuthNavigator } from './auth.navigator';
import { TodoNavigator } from './todo.navigator';
import { AppRoute } from './app-routes';

const Stack = createStackNavigator();

export const AppNavigator = (config): React.ReactElement => (

artyorsh

import React from 'react';
import { TabBar, Tab, Divider } from 'react-native-ui-kitten';
import { SafeAreaLayout, SaveAreaInset, SafeAreaLayoutElement } from '@app-components/safe-area-layout.component';
import { Toolbar } from '@app-components/toolbar.component';
import { DoneAllIcon, GridIcon } from '@app-assets/icons';

export const TodoScreen = (props): SafeAreaLayoutElement => {

  const onTabSelect = (index: number): void => {
    const { [index]: selectedTabRoute } = props.state.routeNames;

artyorsh

import React from 'react';
import { BottomNavigation, BottomNavigationTab, Divider } from 'react-native-ui-kitten';
import { SafeAreaLayout, SafeAreaLayoutElement, SaveAreaInset } from '@app-components/safe-area-layout.component';
import { LayoutIcon, PersonIcon } from '@app-assets/icons';

export const BottomHomeScreen = (props): SafeAreaLayoutElement => {

  const onSelect = (index: number): void => {
    const { [index]: selectedRoute } = props.state.routeNames;
    props.navigation.navigate(selectedRoute);

artyorsh

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { ProfileScreen } from '@app-scenes/profile';
import { AppRoute } from './app-routes';

const Stack = createStackNavigator();

export const ProfileNavigator = (): React.ReactElement => (
  <Stack.Navigator headerMode='none'>
    <Stack.Screen name={AppRoute.PROFILE} component={ProfileScreen}/>