mapwize-ui-react-native/lib/commonjs/components/navigationControls.js

Fully featured and ready to use UI to add Mapwize Indoor Maps and Navigation in your React Native app.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _reactNative = require("react-native");

var _icons = _interopRequireDefault(require("../icons"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

class NavigationControl extends _react.default.Component {
  constructor(props) {
    var _props$onReady;

    super(props);
    (_props$onReady = props.onReady) === null || _props$onReady === void 0 ? void 0 : _props$onReady.call(props, this);
    this.state = {
      heading: 0
    };
  }

  setHeading(heading) {
    this.setState({
      heading
    });
  }

  render() {
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableHighlight, {
      style: [this.props.style, styles.controlItem],
      onPress: () => this.props.onCompassClick()
    }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
      source: _icons.default.COMPASS,
      style: {
        transform: [{
          rotate: this.state.heading + 'deg'
        }]
      }
    })));
  }

}

exports.default = NavigationControl;

const styles = _reactNative.StyleSheet.create({
  navigationControl: {
    display: 'flex',
    flexDirection: 'column'
  },
  controlItem: {
    alignSelf: 'center',
    margin: 2,
    borderRadius: 20,
    height: 40,
    width: 40,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.2,
    shadowRadius: 0,
    elevation: 2
  },
  zoomIn: {
    padding: 16
  },
  zoomOut: {
    padding: 16
  }
});
//# sourceMappingURL=navigationControls.js.map