Model scrolling to input as a React effect

Author: cubuspl42

src/PickerAvoidingView/index.ios.js

@@ -2,11 +2,7 @@ import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { PickerStateContext } from '../PickerStateProvider';
 import { IOS_MODAL_ANIMATION_DURATION_MS, IOS_MODAL_HEIGHT } from '../constants';
-
-function schedule(callback, timeout) {
-    const handle = setTimeout(callback, timeout);
-    return () => clearTimeout(handle);
-}
+import { schedule } from './utils';
 
 /**
  * PickerAvoidingView is a React component that adjusts the view layout to avoid

src/PickerAvoidingView/utils.js

@@ -0,0 +1,4 @@
+export function schedule(callback, timeout) {
+    const handle = setTimeout(callback, timeout);
+    return () => clearTimeout(handle);
+}

src/index.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, useEffect } from 'react';
 import {
     Dimensions,
     Keyboard,
@@ -16,6 +16,12 @@ import { defaultStyles } from './styles';
 import { PickerAvoidingView } from './PickerAvoidingView';
 import { PickerStateContext, PickerStateProvider } from './PickerStateProvider';
 import { IOS_MODAL_ANIMATION_DURATION_MS, IOS_MODAL_HEIGHT } from './constants';
+import { schedule } from './PickerAvoidingView/utils';
+
+function EffectRunner({ effect, children }) {
+    useEffect(effect ?? (() => {}), [effect]);
+    return children;
+}
 
 export default class RNPickerSelect extends PureComponent {
     static contextType = PickerStateContext;
@@ -248,13 +254,19 @@ export default class RNPickerSelect extends PureComponent {
 
             // If TextInput is below picker modal, scroll up
             if (textInputBottomY > modalY) {
+                const scrollView = this.props.scrollViewRef.current;
+                const scrollViewContentOffsetY = this.props.scrollViewContentOffsetY;
+
                 // Wait until the modal animation finishes, so the scrolling is effective when PickerAvoidingView is
                 // used
-                setTimeout(() => {
-                    this.props.scrollViewRef.current.scrollTo({
-                        y: textInputBottomY - modalY + 10 + this.props.scrollViewContentOffsetY,
-                    });
-                }, IOS_MODAL_ANIMATION_DURATION_MS + 50);
+                this.setState({
+                    scrollToInputEffect: () =>
+                        schedule(() => {
+                            scrollView.scrollTo({
+                                y: textInputBottomY - modalY + 10 + scrollViewContentOffsetY,
+                            });
+                        }, IOS_MODAL_ANIMATION_DURATION_MS + 50),
+                });
             }
         });
     }
@@ -615,7 +627,7 @@ export default class RNPickerSelect extends PureComponent {
         );
     }
 
-    render() {
+    renderForPlatform() {
         const { children, useNativeAndroidPickerStyle } = this.props;
 
         if (Platform.OS === 'ios') {
@@ -632,6 +644,14 @@ export default class RNPickerSelect extends PureComponent {
 
         return this.renderAndroidNativePickerStyle();
     }
+
+    render() {
+        return (
+            <EffectRunner effect={this.state.scrollToInputEffect}>
+                {this.renderForPlatform()}
+            </EffectRunner>
+        );
+    }
 }
 
 export { defaultStyles, PickerStateProvider, PickerAvoidingView };