<ActionSheet/> not working like it should

[Jsmyth]

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.

[emccorson]

I had a look at your code and I can’t see anything obvious that would be causing the problem.

Can you please post a working version of the code somewhere so I can run it (on codepen or github or whatever)?

Also, it looks like your syntax for defining methods in App might be wrong e.g.:

  _modalHandler = (name) => {

should be

  _modalHandler(name) {

[emccorson]

Never mind, I just figured it out from the image you posted on Discord.

The problem is that ActionSheet by itself doesn’t have any kind of background, so it will literally just show the child elements. Usually the child elements are ActionSheetButtons which have a proper background. You can see an example here: https://onsen.io/playground/?framework=react&category=reference&module=action-sheet

Since you have img elements in your ActionSheet it will just show the images as they are with no background. You could add styling to the child elements if you still just want to use img.

By the way, SpeedDial might be more suitable if you want open a series of icons. https://onsen.io/playground/?framework=react&category=reference&module=speed-dial