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

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

import React from 'react';
import { Image, StyleSheet, TouchableHighlight } from 'react-native';
import icons from '../icons';
export default class NavigationControl extends React.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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TouchableHighlight, {
      style: [this.props.style, styles.controlItem],
      onPress: () => this.props.onCompassClick()
    }, /*#__PURE__*/React.createElement(Image, {
      source: icons.COMPASS,
      style: {
        transform: [{
          rotate: this.state.heading + 'deg'
        }]
      }
    })));
  }

}
const styles = 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