Fixing Drag and Drop and Pull-to-Refresh in React Native

TL;DR

• React Native upgrade caused drag and drop and pull-to-refresh regressions.
• Drag and drop’s auto-scroll feature stopped working.
• Pull-to-refresh had compatibility issues with new React Native APIs.
• Moved pull-to-refresh logic into refreshControl prop to resolve functionality disparity.
• Implemented class-based component to fix state tracking issues in pull-to-refresh for iOS.

Today I tackled issues that occurred after upgrading our React Native application. The primary problems revolved around the drag and drop functionality auto-scroll issue and the pull-to-refresh feature that became non-functional across platforms.

Drag and Drop

• Problem: Auto-scroll stopped, causing manual adjustments.
• Solution: Implemented a workaround to drop and manually scroll, as quick fix for the user functionality.

Pull-to-Refresh

• Challenges: Stopped working with new React Native setup.

  • iOS: Worked functionally, but visually stayed down.
  • Android: Displayed an error about native views.

• Investigation:

  • Initially tried re-implementing with class-based components.
  • Unsuccessful in fixing Android issue using class-based refactor.

• Solution:

  • For iOS: Clamped UI updates using internal state with timeouts, managed refreshing status properly, cleared issues visually.
  • For Android: Continued issue; speculated interaction with third-party libraries needed further exploration.

Next steps involve delving deep into the nested components and dependencies, especially focusing on Android’s integration with third-party libraries to identify the blank screen issue.