diff --git a/Libraries/Components/ScrollView/ScrollView.js b/Libraries/Components/ScrollView/ScrollView.js
index b42dc736f218b4..266e7283603d23 100644
--- a/Libraries/Components/ScrollView/ScrollView.js
+++ b/Libraries/Components/ScrollView/ScrollView.js
@@ -233,6 +233,19 @@ const ScrollView = createReactClass({
      *   - `true`, deprecated, use 'always' instead
      */
     keyboardShouldPersistTaps: PropTypes.oneOf(['always', 'never', 'handled', false, true]),
+    /**
+     * When non-null, the scroll view will adjust the scroll position so that the content at or
+     * beyond the specified index that is currently visible will not change position. This is useful
+     * for lists that are loading content in both directions, e.g. a chat thread, where new messages
+     * coming in might otherwise cause the scroll position to jump. A value of 1 can be used to skip
+     * a spinner that does not need to maintain position. The default value is null.
+     *
+     * Caveat: reordering elements in the scrollview with this enabled will probably cause jumpiness
+     * and jank. It can be fixed, but there are currently no plans to do so.
+     *
+     * @platform ios
+     */
+    maintainPositionAtOrBeyondIndex: PropTypes.number,
     /**
      * The maximum allowed zoom scale. The default value is 1.0.
      * @platform ios
diff --git a/RNTester/js/ScrollViewExample.js b/RNTester/js/ScrollViewExample.js
index 0074ea91c2ad2b..2d0dcde3d88a31 100644
--- a/RNTester/js/ScrollViewExample.js
+++ b/RNTester/js/ScrollViewExample.js
@@ -12,10 +12,13 @@
  */
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {
-  Platform,
+import type {StyleObj} from 'StyleSheetTypes';
+
+const ActivityIndicator = require('ActivityIndicator');
+const Platform = require('Platform');
+const React = require('react');
+const ReactNative = require('react-native');
+const {
   ScrollView,
   StyleSheet,
   Text,
@@ -30,11 +33,11 @@ exports.description =
   'Component that enables scrolling through child components';
 exports.examples = [
   {
-    title: '<ScrollView>',
+    title: '<ScrollView>\n',
     description:
       'To make content scrollable, wrap it within a <ScrollView> component',
     render: function() {
-      var _scrollView: ScrollView;
+      let _scrollView: ScrollView;
       return (
         <View>
           <ScrollView
@@ -49,33 +52,30 @@ exports.examples = [
             style={styles.scrollView}>
             {THUMB_URLS.map(createThumbRow)}
           </ScrollView>
-          <TouchableOpacity
-            style={styles.button}
+          <Button
+            label="Scroll to top"
             onPress={() => {
               _scrollView.scrollTo({y: 0});
-            }}>
-            <Text>Scroll to top</Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            style={styles.button}
+            }}
+          />
+          <Button
+            label="Scroll to bottom"
             onPress={() => {
               _scrollView.scrollToEnd({animated: true});
-            }}>
-            <Text>Scroll to bottom</Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            style={styles.button}
+            }}
+          />
+          <Button
+            label="Flash scroll indicators"
             onPress={() => {
               _scrollView.flashScrollIndicators();
-            }}>
-            <Text>Flash scroll indicators</Text>
-          </TouchableOpacity>
+            }}
+          />
         </View>
       );
     },
   },
   {
-    title: '<ScrollView> (horizontal = true)',
+    title: '<ScrollView> (horizontal = true)\n',
     description:
       "You can display <ScrollView>'s child components horizontally rather than vertically",
     render: function() {
@@ -83,7 +83,7 @@ exports.examples = [
         title: string,
         addtionalStyles: typeof StyleSheet,
       ) {
-        var _scrollView: ScrollView;
+        let _scrollView: ScrollView;
         return (
           <View style={addtionalStyles}>
             <Text style={styles.text}>{title}</Text>
@@ -96,27 +96,24 @@ exports.examples = [
               style={[styles.scrollView, styles.horizontalScrollView]}>
               {THUMB_URLS.map(createThumbRow)}
             </ScrollView>
-            <TouchableOpacity
-              style={styles.button}
+            <Button
+              label="Scroll to start"
               onPress={() => {
                 _scrollView.scrollTo({x: 0});
-              }}>
-              <Text>Scroll to start</Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              style={styles.button}
+              }}
+            />
+            <Button
+              label="Scroll to end"
               onPress={() => {
                 _scrollView.scrollToEnd({animated: true});
-              }}>
-              <Text>Scroll to end</Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              style={styles.button}
+              }}
+            />
+            <Button
+              label="Flash scroll indicators"
               onPress={() => {
                 _scrollView.flashScrollIndicators();
-              }}>
-              <Text>Flash scroll indicators</Text>
-            </TouchableOpacity>
+              }}
+            />
           </View>
         );
       }
@@ -130,22 +127,144 @@ exports.examples = [
     },
   },
 ];
+if (Platform.OS === 'ios') {
+  exports.examples.push({
+    title: '<ScrollView> smooth bi-directional content loading\n',
+    description:
+      'The `maintainPositionAtOrBeyondIndex` prop allows insertions to either end of the content ' +
+      'without causing the visible content to jump. Re-ordering is not supported.',
+    render: function() {
+      let itemCount = 6;
+      class AppendingList extends React.Component<{}, *> {
+        state = {
+          items: [...Array(itemCount)].map((_, ii) => (
+            <Thumb msg={`Item ${ii}`} />
+          )),
+        };
+        render() {
+          return (
+            <View>
+              <ScrollView
+                automaticallyAdjustContentInsets={false}
+                maintainPositionAtOrBeyondIndex={1}
+                style={styles.scrollView}>
+                <ActivityIndicator style={{height: 40}} />
+                {this.state.items.map(item =>
+                  React.cloneElement(item, {key: item.props.msg}),
+                )}
+              </ScrollView>
+              <ScrollView
+                horizontal={true}
+                automaticallyAdjustContentInsets={false}
+                maintainPositionAtOrBeyondIndex={1}
+                style={[styles.scrollView, styles.horizontalScrollView]}>
+                <ActivityIndicator style={{height: 40}} />
+                {this.state.items.map(item =>
+                  React.cloneElement(item, {key: item.props.msg, style: null}),
+                )}
+              </ScrollView>
+              <View style={styles.row}>
+                <Button
+                  label="Add to top"
+                  onPress={() => {
+                    this.setState(state => {
+                      const idx = itemCount++;
+                      return {
+                        items: [
+                          <Thumb
+                            style={{paddingTop: idx * 5}}
+                            msg={`Item ${idx}`}
+                          />,
+                        ].concat(state.items),
+                      };
+                    });
+                  }}
+                />
+                <Button
+                  label="Remove top"
+                  onPress={() => {
+                    this.setState(state => ({
+                      items: state.items.slice(1),
+                    }));
+                  }}
+                />
+                <Button
+                  label="Change height top"
+                  onPress={() => {
+                    this.setState(state => ({
+                      items: [
+                        React.cloneElement(state.items[0], {
+                          style: {paddingBottom: Math.random() * 40},
+                        }),
+                      ].concat(state.items.slice(1)),
+                    }));
+                  }}
+                />
+              </View>
+              <View style={styles.row}>
+                <Button
+                  label="Add to end"
+                  onPress={() => {
+                    this.setState(state => ({
+                      items: state.items.concat(
+                        <Thumb msg={`Item ${itemCount++}`} />,
+                      ),
+                    }));
+                  }}
+                />
+                <Button
+                  label="Remove end"
+                  onPress={() => {
+                    this.setState(state => ({
+                      items: state.items.slice(0, -1),
+                    }));
+                  }}
+                />
+                <Button
+                  label="Change height end"
+                  onPress={() => {
+                    this.setState(state => ({
+                      items: state.items.slice(0, -1).concat(
+                        React.cloneElement(
+                          state.items[state.items.length - 1],
+                          {
+                            style: {paddingBottom: Math.random() * 40},
+                          },
+                        ),
+                      ),
+                    }));
+                  }}
+                />
+              </View>
+            </View>
+          );
+        }
+      }
+      return <AppendingList />;
+    },
+  });
+}
 
-class Thumb extends React.Component<$FlowFixMeProps, $FlowFixMeState> {
-  shouldComponentUpdate(nextProps, nextState) {
-    return false;
-  }
-
+class Thumb extends React.PureComponent<{|
+  source?: string | number,
+  msg?: string,
+  style?: StyleObj,
+|}> {
   render() {
+    const {source} = this.props;
     return (
-      <View style={styles.thumb}>
-        <Image style={styles.img} source={this.props.source} />
+      <View style={[styles.thumb, this.props.style]}>
+        <Image
+          style={styles.img}
+          source={source == null ? THUMB_URLS[6] : source}
+        />
+        <Text>{this.props.msg}</Text>
       </View>
     );
   }
 }
 
-var THUMB_URLS = [
+let THUMB_URLS = [
   require('./Thumbnails/like.png'),
   require('./Thumbnails/dislike.png'),
   require('./Thumbnails/call.png'),
@@ -162,9 +281,15 @@ var THUMB_URLS = [
 
 THUMB_URLS = THUMB_URLS.concat(THUMB_URLS); // double length of THUMB_URLS
 
-var createThumbRow = (uri, i) => <Thumb key={i} source={uri} />;
+const createThumbRow = (uri, i) => <Thumb key={i} source={uri} />;
 
-var styles = StyleSheet.create({
+const Button = ({label, onPress}) => (
+  <TouchableOpacity style={styles.button} onPress={onPress}>
+    <Text>{label}</Text>
+  </TouchableOpacity>
+);
+
+const styles = StyleSheet.create({
   scrollView: {
     backgroundColor: '#eeeeee',
     height: 300,
@@ -184,6 +309,10 @@ var styles = StyleSheet.create({
     backgroundColor: '#cccccc',
     borderRadius: 3,
   },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
   thumb: {
     margin: 5,
     padding: 5,
diff --git a/React/Views/ScrollView/RCTScrollView.h b/React/Views/ScrollView/RCTScrollView.h
index 90b8e3700f093b..cb3518bbf19d1a 100644
--- a/React/Views/ScrollView/RCTScrollView.h
+++ b/React/Views/ScrollView/RCTScrollView.h
@@ -45,6 +45,7 @@
 @property (nonatomic, assign) BOOL DEPRECATED_sendUpdatedChildFrames;
 @property (nonatomic, assign) NSTimeInterval scrollEventThrottle;
 @property (nonatomic, assign) BOOL centerContent;
+@property (nonatomic, copy) NSNumber *maintainPositionAtOrBeyondIndex;
 @property (nonatomic, assign) int snapToInterval;
 @property (nonatomic, copy) NSString *snapToAlignment;
 
diff --git a/React/Views/ScrollView/RCTScrollView.m b/React/Views/ScrollView/RCTScrollView.m
index e25a5161c61b80..66cfa14f95a013 100644
--- a/React/Views/ScrollView/RCTScrollView.m
+++ b/React/Views/ScrollView/RCTScrollView.m
@@ -15,6 +15,8 @@
 #import "RCTEventDispatcher.h"
 #import "RCTLog.h"
 #import "RCTUIManager.h"
+#import "RCTUIManagerObserverCoordinator.h"
+#import "RCTUIManagerUtils.h"
 #import "RCTUtils.h"
 #import "UIView+Private.h"
 #import "UIView+React.h"
@@ -355,9 +357,15 @@ - (void)didMoveToWindow
 
 @end
 
+@interface RCTScrollView () <RCTUIManagerObserver>
+
+@end
+
 @implementation RCTScrollView
 {
   RCTEventDispatcher *_eventDispatcher;
+  CGRect _prevFirstVisibleFrame;
+  __weak UIView *_firstVisibleView;
   RCTCustomScrollView *_scrollView;
   UIView *_contentView;
   NSTimeInterval _lastScrollDispatchTime;
@@ -492,6 +500,7 @@ - (void)setClipsToBounds:(BOOL)clipsToBounds
 - (void)dealloc
 {
   _scrollView.delegate = nil;
+  [_eventDispatcher.bridge.uiManager.observerCoordinator removeObserver:self];
 }
 
 - (void)layoutSubviews
@@ -666,7 +675,6 @@ - (void)scrollViewDidScroll:(UIScrollView *)scrollView
     _lastScrollDispatchTime = now;
     _allowNextScrollNoMatterWhat = NO;
   }
-
   RCT_FORWARD_SCROLL_EVENT(scrollViewDidScroll:scrollView);
 }
 
@@ -903,6 +911,66 @@ - (void)updateContentOffsetIfNeeded
   }
 }
 
+// maintainPositionAtOrBeyondIndex is used to allow seamless loading of content from both ends of
+// the scrollview without the visible content jumping in position.
+- (void)setMaintainPositionAtOrBeyondIndex:(NSNumber *)maintainPositionAtOrBeyondIndex
+{
+  if (maintainPositionAtOrBeyondIndex != nil) {
+    [_eventDispatcher.bridge.uiManager.observerCoordinator addObserver:self];
+  } else {
+    [_eventDispatcher.bridge.uiManager.observerCoordinator removeObserver:self];
+  }
+  _maintainPositionAtOrBeyondIndex = maintainPositionAtOrBeyondIndex;
+}
+
+#pragma mark - RCTUIManagerObserver
+
+- (void)uiManagerWillPerformMounting:(RCTUIManager *)manager
+{
+  RCTAssertUIManagerQueue();
+  [manager prependUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
+    BOOL horz = [self isHorizontal:self->_scrollView];
+    NSUInteger minIdx = [self->_maintainPositionAtOrBeyondIndex integerValue];
+    for (NSUInteger ii = minIdx; ii < self->_contentView.subviews.count; ++ii) {
+      // Find the first entirely visible view. This must be done after we update the content offset
+      // or it will tend to grab rows that were made visible by the shift in position
+      UIView *subview = self->_contentView.subviews[ii];
+      if ((horz
+           ? subview.frame.origin.x >= self->_scrollView.contentOffset.x
+           : subview.frame.origin.y >= self->_scrollView.contentOffset.y) ||
+          ii == self->_contentView.subviews.count - 1) {
+        self->_prevFirstVisibleFrame = subview.frame;
+        self->_firstVisibleView = subview;
+        break;
+      }
+    }
+  }];
+  [manager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
+    if (self->_maintainPositionAtOrBeyondIndex == nil) {
+      return; // The prop might have changed in the previous UIBlocks, so need to abort here.
+    }
+    // TODO: detect and handle/ignore re-ordering
+    if ([self isHorizontal:self->_scrollView]) {
+      CGFloat deltaX = self->_firstVisibleView.frame.origin.x - self->_prevFirstVisibleFrame.origin.x;
+      if (ABS(deltaX) > 0.1) {
+        self->_scrollView.contentOffset = CGPointMake(
+          self->_scrollView.contentOffset.x + deltaX,
+          self->_scrollView.contentOffset.y
+        );
+      }
+    } else {
+      CGRect newFrame = self->_firstVisibleView.frame;
+      CGFloat deltaY = newFrame.origin.y - self->_prevFirstVisibleFrame.origin.y;
+      if (ABS(deltaY) > 0.1 || deltaY != 0.0) {
+        self->_scrollView.contentOffset = CGPointMake(
+          self->_scrollView.contentOffset.x,
+          self->_scrollView.contentOffset.y + deltaY
+        );
+      }
+    }
+  }];
+}
+
 // Note: setting several properties of UIScrollView has the effect of
 // resetting its contentOffset to {0, 0}. To prevent this, we generate
 // setters here that will record the contentOffset beforehand, and
diff --git a/React/Views/ScrollView/RCTScrollViewManager.m b/React/Views/ScrollView/RCTScrollViewManager.m
index efa162bc77e057..f771fa551ff888 100644
--- a/React/Views/ScrollView/RCTScrollViewManager.m
+++ b/React/Views/ScrollView/RCTScrollViewManager.m
@@ -62,6 +62,7 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(bouncesZoom, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(canCancelContentTouches, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(centerContent, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(maintainPositionAtOrBeyondIndex, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(automaticallyAdjustContentInsets, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(decelerationRate, CGFloat)
 RCT_EXPORT_VIEW_PROPERTY(directionalLockEnabled, BOOL)