In our codebase, we have a ScrollView that contains an array of items users can push into and pop out of. We use contentContainerStyle to style the array items.

  scrollView: {
    flexDirection: 'row',
    width: '100%',
    flexShrink: 0.1,
    borderRadius: 20,
    backgroundColor: 'red',
  },
  contentContainer: {
    padding: 20,
    alignItems: 'center',
    minWidth: '100%',
    backgroundColor: 'green',
  },

As the array gets longer, at some point, the width (flexDirection is row) of the contentContainer gets longer to the right than the scrollView, and the contentContainer becomes horizontally scrollable within the ScrollView. The green View completely covers up the red View.

As the array gets popped, on iOS, the width of the contentContainer decreases and knows to center itself (or it knows to automatically scroll to the right the same amount of pixels as the popped item took up), so the View is still all green. But on Android, it does not center itself. We see the red background on the right where the popped items were. The red area ends where the width of the contentContainer is reduced enough to be the same as the ScrollView.

The user can scroll the green to the right so the green takes up all the space again, but Android should behave like iOS.

Is there anyway this can be fixed? I’m on RN0.64.4 (yes I’m working on upgrading it)