Гибридный импорт в монорепозиторий React/Expo.

Когда вы работаете в монорепозитории с приложениями ReactJS и Expo, это очень, очень классная функция в этой среде для решить, какой компонент, функцию, что бы вы ни хотели импортировать.

Допустим, вы хотите импортировать ту же функцию, которая открывает URL-адрес в новой вкладке браузера, но все мы знаем, что веб-API отличается от API браузера Expo.

Итак, у вас может быть одно имя пакета, скажем, @yourcompany/open-url, внутри этого пакета вы можете иметь следующие файлы:

openUrl.ts

export function openUrl() { 
  ... do whatever you want for web version
}

openUrl.native.ts

export function openUrl() { 
  ... do whatever you want for native version
}

index.ts

export * from './openUrl';

Я предполагаю, что вы Typescript, но в простом проекте Javascript этот подход также работает.

ВАЖНО. Имена функций и констант должны совпадать.

Следуя этой идее, вы можете унифицировать свои компоненты для работы с одним и тем же API как в браузере, так и в нативной среде.

Рассмотрим более крупный пример. Допустим, у вас есть компонент Authentification.tsx.

import Input from '@mycompany/input';
import Button from '@mycompany/button';
import Container from '@mycompany/container';
const Authentification = () => {
  ... any state logic
  return (
    <Container>
      <Input />
      <Input />
      <Button />
    </Container>
   )
 }

Если вы следуете той же идее, что и openUrl в компонентах Input, Container и Button, вы можете импортировать свой компонент Authentication с любой проблемой в любой среде, и у вас будет полностью гибридноеприложение!