I can’t seem to get the ActionSheet component to show up like it should.
this is my ActionModal.js component that houses the Sheet.
import React from 'react';
import { ActionSheet, AlertDialog } from 'react-onsenui';
import conveyances from '../markers/conveyance.png';
import travellers from '../markers/travellers.png';
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css'
const ActionModal = (props) => {
console.log(props.name);
return (
<ActionSheet isOpen={true} >
<p>{props.name}</p>
<img src={travellers}/>
<img src={conveyances}/>
</ActionSheet>
)
}
export default ActionModal
This is my App.js container where I render the ActionModal component.
import React, { Component } from 'react';
import MapView from './containers/MapView';
import TitleBar from './components/TitleBar';
import {Marker} from 'react-map-gl';
import ActionModal from './components/ActionModal';
import carIcon from './markers/car2.png';
import planeIcon from './markers/plane2.png';
import shipIcon from './markers/boat2.png';
import bcIcon from './markers/british-columbia.png';
import './App.css';
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css'
class App extends Component {
state = {
viewport: {
width: '100vw',
height: '100vh',
latitude: 49.288826,
longitude: -123.111122,
zoom: 8
},
isModalOpen: false,
currentSelectedRegion: {
name: null
}
};
_modalHandler = (name) => {
const isOpen = this.state.isModalOpen;
const currentName = name;
console.log(currentName);
this.setState({isModalOpen: !isOpen,
currentSelectedRegion: {
name: currentName
}});
// setTimeout(() => {
// console.log('after setSate' + this.state.isModalOpen);
// }, 3000);
}
_iconHandler = (icon) => {
switch (icon) {
case "carIcon":
return carIcon;
case "planeIcon":
return planeIcon;
case "shipIcon":
return shipIcon;
case "bcIcon":
return bcIcon;
default:
break;
}
}
_renderMarkers = (marker, i) => {
const {name, coordinates, icon} = marker;
console.log(name);
return (
<Marker key={i} longitude={coordinates[0]} latitude={coordinates[1]} >
<div onClick={() => this._modalHandler(name)}>
<img src={this._iconHandler(icon)}/>
</div>
</Marker>
);
}
_handleViewportChange = (viewport) => {
this.setState({viewport})
}
render() {
return (
<div>
<TitleBar/>
<MapView viewport = {this.state.viewport} renderMarkers = {this._renderMarkers} handleViewportChange = {this._handleViewportChange}/>
<ActionModal isOpen = {this.state.isModalOpen} name = {this.state.currentSelectedRegion.name}/>
</div>
);
}
}
export default App;
The I am trying to get the component to show on top of a Map View page (a ReactMapGL map) when a Marker is tapped on.
This is that MapView code
import React, { Component } from 'react';
import ReactMapGL, {Marker} from 'react-map-gl';
import SegmentBar from '../components/SegmentBar';
import App from '../App';
import markerJson from '../data/markerJson';
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css'
const accessToken = 'pk.eyJ1IjoiamFzb25zbXl0aCIsImEiOiJjanA0Mm8wd3Ewb2h4M2txcnNqcHNvaG4wIn0.EWZeuDd8KwPHC6IjhE2fdg';
const mapboxStyle = 'mapbox://styles/jasonsmyth/cjp46uagu0mtj2spdtwgced8c';
const MapView = (props) => {
return (
<ReactMapGL
{...props.viewport}
onViewportChange={(viewport) => props.handleViewportChange(viewport)}
mapboxApiAccessToken={accessToken}
mapStyle= {mapboxStyle} style={{'zIndex': 0}}>
{ markerJson.map(props.renderMarkers) }
<SegmentBar/>
</ReactMapGL>
)
}
export default MapView;
I can see what I put inside the ActionSheet fine and it opens and closes (with the mask overlay) just fine. It just doesn’t seem to be getting any styling at all.
all I see is two icons and a line of text, no cancel button or box surround them.