diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js
index 152845b80d2fc..0ae41ca2227b7 100644
--- a/packages/components/src/color-palette/index.native.js
+++ b/packages/components/src/color-palette/index.native.js
@@ -16,7 +16,7 @@ import { map, uniq } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useRef, useEffect, useState } from '@wordpress/element';
+import { useRef, useEffect } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 /**
  * Internal dependencies
@@ -50,15 +50,6 @@ function ColorPalette( {
 		'linear-gradient(240deg, rgba(0,255,0,.8) 0%, rgba(0,255,0,0) 70.71%)',
 		'linear-gradient(360deg, rgba(0,0,255,.8) 0%, rgba(0,0,255,0) 70.71%)',
 	];
-	const isCustomGradientColor = isGradientColor && isSelectedCustom();
-
-	const [
-		shouldShowCustomIndicator,
-		setShouldShowCustomIndicator,
-	] = useState(
-		shouldShowCustomIndicatorOption &&
-			( ! isGradientSegment || isCustomGradientColor )
-	);
 
 	const scrollViewRef = useRef();
 	const isIOS = Platform.OS === 'ios';
@@ -77,17 +68,10 @@ function ColorPalette( {
 	const customIndicatorColor = isGradientSegment
 		? activeColor
 		: customSwatchGradients;
-
-	useEffect( () => {
-		setShouldShowCustomIndicator(
-			shouldShowCustomIndicatorOption &&
-				( ! isGradientSegment || isCustomGradientColor )
-		);
-	}, [
-		shouldShowCustomIndicatorOption,
-		isGradientSegment,
-		isCustomGradientColor,
-	] );
+	const isCustomGradientColor = isGradientColor && isSelectedCustom();
+	const shouldShowCustomIndicator =
+		shouldShowCustomIndicatorOption &&
+		( ! isGradientSegment || isCustomGradientColor );
 
 	const accessibilityHint = isGradientSegment
 		? __( 'Navigates to customize the gradient' )
@@ -97,7 +81,7 @@ function ColorPalette( {
 	useEffect( () => {
 		if ( scrollViewRef.current ) {
 			if ( isSelectedCustom() ) {
-				scrollViewRef.current.scrollToEnd();
+				scrollToEndWithDelay();
 			} else {
 				scrollViewRef.current.scrollTo( { x: 0, y: 0 } );
 			}
@@ -180,10 +164,19 @@ function ColorPalette( {
 	function onContentSizeChange( width ) {
 		contentWidth = width;
 		if ( isSelectedCustom() && scrollViewRef.current ) {
-			scrollViewRef.current.scrollToEnd( { animated: ! isIOS } );
+			scrollToEndWithDelay();
 		}
 	}
 
+	function scrollToEndWithDelay() {
+		const delayedScroll = setTimeout( () => {
+			scrollViewRef.current.scrollToEnd();
+		}, ANIMATION_DURATION );
+		return () => {
+			clearTimeout( delayedScroll );
+		};
+	}
+
 	function onCustomIndicatorLayout( { nativeEvent } ) {
 		const { width } = nativeEvent.layout;
 		if ( width !== customIndicatorWidth ) {
@@ -225,6 +218,41 @@ function ColorPalette( {
 			onScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }
 			ref={ scrollViewRef }
 		>
+			{ shouldShowCustomIndicator && (
+				<View
+					style={ customIndicatorWrapperStyle }
+					onLayout={ onCustomIndicatorLayout }
+				>
+					{ shouldShowCustomVerticalSeparator && (
+						<View style={ verticalSeparatorStyle } />
+					) }
+					<TouchableWithoutFeedback
+						onPress={ onCustomPress }
+						accessibilityRole={ 'button' }
+						accessibilityState={ { selected: isSelectedCustom() } }
+						accessibilityHint={ accessibilityHint }
+					>
+						<View style={ customIndicatorWrapperStyle }>
+							<ColorIndicator
+								withCustomPicker={ ! isGradientSegment }
+								color={ customIndicatorColor }
+								isSelected={ isSelectedCustom() }
+								style={ [
+									styles.colorIndicator,
+									customColorIndicatorStyles,
+								] }
+							/>
+							{ shouldShowCustomLabel && (
+								<Text style={ customTextStyle }>
+									{ isIOS
+										? customText
+										: customText.toUpperCase() }
+								</Text>
+							) }
+						</View>
+					</TouchableWithoutFeedback>
+				</View>
+			) }
 			{ colors.map( ( color ) => {
 				const scaleValue = isSelected( color ) ? scaleInterpolation : 1;
 				return (
@@ -260,43 +288,6 @@ function ColorPalette( {
 					</View>
 				);
 			} ) }
-			{ shouldShowCustomIndicator && (
-				<View
-					style={ customIndicatorWrapperStyle }
-					onLayout={ onCustomIndicatorLayout }
-				>
-					{ shouldShowCustomVerticalSeparator && (
-						<View style={ verticalSeparatorStyle } />
-					) }
-					<TouchableWithoutFeedback
-						onPress={ onCustomPress }
-						accessibilityRole={ 'button' }
-						accessibilityState={ {
-							selected: isSelectedCustom(),
-						} }
-						accessibilityHint={ accessibilityHint }
-					>
-						<View style={ customIndicatorWrapperStyle }>
-							<ColorIndicator
-								withCustomPicker={ ! isGradientSegment }
-								color={ customIndicatorColor }
-								isSelected={ isSelectedCustom() }
-								style={ [
-									styles.colorIndicator,
-									customColorIndicatorStyles,
-								] }
-							/>
-							{ shouldShowCustomLabel && (
-								<Text style={ customTextStyle }>
-									{ isIOS
-										? customText
-										: customText.toUpperCase() }
-								</Text>
-							) }
-						</View>
-					</TouchableWithoutFeedback>
-				</View>
-			) }
 		</ScrollView>
 	);
 }
diff --git a/packages/components/src/color-palette/style.native.scss b/packages/components/src/color-palette/style.native.scss
index af618dfafded2..f23bbae26f65e 100644
--- a/packages/components/src/color-palette/style.native.scss
+++ b/packages/components/src/color-palette/style.native.scss
@@ -1,5 +1,5 @@
 .contentContainer {
-	flex-direction: row;
+	flex-direction: row-reverse;
 	padding: 0 $grid-unit-20;
 }
 
diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
index 6ff33e3fb685a..4f53e4a30c6d7 100644
--- a/packages/react-native-editor/CHANGELOG.md
+++ b/packages/react-native-editor/CHANGELOG.md
@@ -11,6 +11,7 @@ For each user feature we should also add a importance categorization label  to i
 
 ## Unreleased
 -   [*] Bottom-sheet: Add custom header [#30291]
+-   [*] Fixes color picker rendering bug when scrolling [#30994]
 
 ## 1.52.0