ErrorBoundary.ts

2. Решаем проблему с крашем всего приложения в пользу краша конкретной БОЛЬШОЙ части интерефейса, с возможностью исправить проблему вручную

<div>
  <ErrorBoundary>
    <ProfileScreen />
  </ErrorBoundary>
  <ErrorBoundary title="Ошибка!" description="Что-то случилось" action={(props) => <Button onPress={props.onRefresh}>Повторить</Button>}>
    <OrderItems />
  </ErrorBoundary>
  <ErrorBoundary>
    <OrderList />
  </ErrorBoundary>
</div>

Feature.ts

4. Решаем проблему с фичами, теперь чтобы скрыть какую-то возможность лучше использовать HOC компонент

<Feature name="user.can.delete.sale_point" enabled>
    <FeatureUserCanDeleteSalePoint />
</Feature>
<Feature name="user.can.delete.sale_point" disabled>
    <FeatureUserCanDeleteSalePoint />
</Feature>
<Feature name="user.can.delete.sale_point" enabled andUserRoles={["admin", "director"]}>
    <FeatureUserCanDeleteSalePoint />
</Feature>

For.ts

import React from 'react';

type ForProps<TElement> = {
  of: TElement[];
  render: (el: TElement, index: number) => JSX.Element;
}

/**
 * Use for render array of data elements
 *
 * @example
 *
 * const NumberView = ({ item, index }) => <Text>{item}</Text>;
 *
 * <For<number> of={[1,2,3,4,5]} render={NumberView}>
 */
export const For = <T,>({ of, render }: ForProps<T>): JSX.Element => <>{of.map(render)}</>;

If.ts

import React from 'react';

type IfProps = {
  children: React.ReactElement<any>;
  value: boolean;
  otherwise?: JSX.Element;
}

/**
 * Used for conditional rendering
 * 
 * @example
 * 
 * <If value={user.age > 18} otherwise={<BabyAlert messsage="You so baby"/>}>
 *   <Show18+ />
 * </If>
 */
export const If = ({ value = true, children, otherwise = null}: IfProps): JSX.Element => value ? children : otherwise;