react-native-navigation/lib/module/Mock/Components/ComponentScreen.js

React Native Navigation - truly native navigation for iOS and Android

"use strict";

import React, { Component } from 'react';
import { View, Text, TouchableOpacity, Image } from 'react-native';
import { Navigation } from 'react-native-navigation';
import { VISIBLE_SCREEN_TEST_ID } from "../constants.js";
import { LayoutStore } from "../Stores/LayoutStore.js";
import { connect } from "../connect.js";
import { TopBar } from "./TopBar.js";
import { events } from "../Stores/EventsStore.js";
import _ from 'lodash';
import { switchTabByIndex } from "../actions/layoutActions.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function isURISource(src) {
  return !!src && typeof src === 'object' && 'uri' in src;
}
export const ComponentScreen = connect(class extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    this.props.layoutNode.componentDidMount();
  }
  isVisible() {
    const isVisible = LayoutStore.isVisibleLayout(this.props.layoutNode);
    return isVisible;
  }
  renderTabBar() {
    const bottomTabs = this.props.layoutNode.getBottomTabs();
    if (!bottomTabs) return null;
    const bottomTabsOptions = bottomTabs.resolveOptions().bottomTabs;
    if (bottomTabsOptions?.visible === false) return null;
    const buttons = bottomTabs.children.map((child, i) => {
      const bottomTabOptions = child.resolveOptions().bottomTab;
      const icon = bottomTabs.selectedIndex === i ? bottomTabOptions?.selectedIcon : bottomTabOptions?.icon;
      const iconURI = isURISource(icon) ? icon.uri : undefined;
      return /*#__PURE__*/_jsx(View, {
        children: /*#__PURE__*/_jsx(TouchableOpacity, {
          style: {
            padding: 10
          },
          testID: bottomTabOptions?.testID,
          onPress: () => {
            events.invokeBottomTabPressed({
              tabIndex: i
            });
            if (_.defaultTo(bottomTabOptions?.selectTabOnPress, true)) switchTabByIndex(this.props.layoutNode.getBottomTabs(), i);
          },
          children: /*#__PURE__*/_jsxs(View, {
            style: {
              justifyContent: 'center',
              alignItems: 'center'
            },
            children: [/*#__PURE__*/_jsx(Text, {
              children: bottomTabOptions?.badge
            }), iconURI && /*#__PURE__*/_jsx(Image, {
              style: {
                width: 18,
                height: 18,
                marginBottom: 5
              },
              source: {
                uri: iconURI
              }
            }), /*#__PURE__*/_jsx(Text, {
              style: {
                fontSize: 12
              },
              children: bottomTabOptions?.text || ''
            })]
          })
        })
      }, `tab-${i}`);
    });
    return /*#__PURE__*/_jsx(View, {
      testID: bottomTabsOptions?.testID,
      style: {
        flexDirection: 'row',
        justifyContent: 'center',
        width: '100%',
        backgroundColor: '#F0F2F5'
      },
      children: buttons
    });
  }
  render() {
    const Component = Navigation.mock.store.getWrappedComponent(this.props.layoutNode.data.name);
    if (!Component) throw new Error(`${this.props.layoutNode.data.name} has not been registered.`);
    return /*#__PURE__*/_jsxs(View, {
      testID: this.isVisible() ? VISIBLE_SCREEN_TEST_ID : undefined,
      children: [this.props.layoutNode.getStack() && /*#__PURE__*/_jsx(TopBar, {
        layoutNode: this.props.layoutNode,
        topBarOptions: this.props.layoutNode.resolveOptions().topBar,
        backButtonOptions: this.props.layoutNode.resolveOptions().topBar?.backButton
      }), /*#__PURE__*/_jsx(Component, {
        componentId: this.props.layoutNode.nodeId
      }), this.renderTabBar()]
    });
  }
});
//# sourceMappingURL=ComponentScreen.js.map