Make sure to proxy special prop `ref`

src/components/structures/ScrollPanel.js

@@ -19,6 +19,7 @@ const ReactDOM = require("react-dom");
 import PropTypes from 'prop-types';
 import Promise from 'bluebird';
 import { KeyCode } from '../../Keyboard';
+import sdk from '../../index.js';
 
 const DEBUG_SCROLL = false;
 // var DEBUG_SCROLL = true;
@@ -223,7 +224,7 @@ module.exports = React.createClass({
     onResize: function() {
         this.props.onResize();
         this.checkScroll();
-        this.refs.geminiPanel.forceUpdate();
+        if (this._gemScroll) this._gemScroll.forceUpdate();
     },
 
     // after an update to the contents of the panel, check that the scroll is
@@ -664,7 +665,17 @@ module.exports = React.createClass({
             throw new Error("ScrollPanel._getScrollNode called when unmounted");
         }
 
-        return this.refs.geminiPanel.scrollbar.getViewElement();
+        if (!this._gemScroll) {
+            // Likewise, we should have the ref by this point, but if not
+            // turn the NPE into something meaningful.
+            throw new Error("ScrollPanel._getScrollNode called before gemini ref collected");
+        }
+
+        return this._gemScroll.scrollbar.getViewElement();
+    },
+
+    _collectGeminiScroll: function(gemScroll) {
+        this._gemScroll = gemScroll;
     },
 
     render: function() {
@@ -672,7 +683,7 @@ module.exports = React.createClass({
         // TODO: the classnames on the div and ol could do with being updated to
         // reflect the fact that we don't necessarily contain a list of messages.
         // it's not obvious why we have a separate div and ol anyway.
-        return (<GeminiScrollbarWrapper autoshow={true} ref="geminiPanel"
+        return (<GeminiScrollbarWrapper autoshow={true} wrappedRef={this._collectGeminiScroll}
                 onScroll={this.onScroll} onResize={this.onResize}
                 className={this.props.className} style={this.props.style}>
                     <div className="mx_RoomView_messageListWrapper">

src/components/views/elements/GeminiScrollbarWrapper.js

@@ -26,7 +26,7 @@ class GeminiScrollbarWrapper extends React.Component {
         // By default GeminiScrollbar allows native scrollbars to be used
         // on macOS. Use forceGemini to enable Gemini's non-native
         // scrollbars on all OSs.
-        return <GeminiScrollbar forceGemini={true} {...this.props}>
+        return <GeminiScrollbar ref={this.props.wrappedRef} forceGemini={true} {...this.props}>
             { this.props.children }
         </GeminiScrollbar>;
     }

src/components/views/rooms/RoomList.js

@@ -507,7 +507,8 @@ module.exports = React.createClass({
     onShowMoreRooms: function() {
         // kick gemini in the balls to get it to wake up
         // XXX: uuuuuuugh.
-        this.refs.gemscroll.forceUpdate();
+        if (!this._gemScroll) return;
+        this._gemScroll.forceUpdate();
     },
 
     _getEmptyContent: function(section) {
@@ -598,6 +599,10 @@ module.exports = React.createClass({
         return ret;
     },
 
+    _collectGemini(gemScroll) {
+        this._gemScroll = gemScroll;
+    },
+
     render: function() {
         const RoomSubList = sdk.getComponent('structures.RoomSubList');
         const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
@@ -605,7 +610,7 @@ module.exports = React.createClass({
         const self = this;
         return (
             <GeminiScrollbarWrapper className="mx_RoomList_scrollbar"
-                 autoshow={true} onScroll={self._whenScrolling} ref="gemscroll">
+                autoshow={true} onScroll={self._whenScrolling} wrappedRef={this._collectGemini}>
             <div className="mx_RoomList">
                 <RoomSubList list={[]}
                              extraTiles={this._makeGroupInviteTiles()}