From 675d19fd5272f70e9d12f04c971a72332a810fef Mon Sep 17 00:00:00 2001
From: lukewalczak <lukasz.walczak.pwr@gmail.com>
Date: Wed, 3 Feb 2021 16:21:02 +0100
Subject: [PATCH] Move custom indicator to be rendered above the colors to
 avoid the crash on Android

---
 .../src/color-palette/index.native.js         | 67 ++++++++++---------
 .../src/color-palette/style.native.scss       |  2 +-
 2 files changed, 36 insertions(+), 33 deletions(-)

diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js
index 8df4889acd83b..e98b1dfe00d54 100644
--- a/packages/components/src/color-palette/index.native.js
+++ b/packages/components/src/color-palette/index.native.js
@@ -208,38 +208,6 @@ function ColorPalette( {
 			onScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }
 			ref={ scrollViewRef }
 		>
-			{ colors.map( ( color ) => {
-				const scaleValue = isSelected( color ) ? scaleInterpolation : 1;
-				return (
-					<TouchableWithoutFeedback
-						onPress={ () => onColorPress( color ) }
-						key={ `${ color }-${ isSelected( color ) }` }
-						accessibilityRole={ 'button' }
-						accessibilityState={ { selected: isSelected( color ) } }
-						accessibilityHint={ color }
-					>
-						<Animated.View
-							style={ {
-								transform: [
-									{
-										scale: scaleValue,
-									},
-								],
-							} }
-						>
-							<ColorIndicator
-								color={ color }
-								isSelected={ isSelected( color ) }
-								opacity={ opacity }
-								style={ [
-									styles.colorIndicator,
-									customColorIndicatorStyles,
-								] }
-							/>
-						</Animated.View>
-					</TouchableWithoutFeedback>
-				);
-			} ) }
 			{ shouldShowCustomIndicator && (
 				<View
 					style={ customIndicatorWrapperStyle }
@@ -275,6 +243,41 @@ function ColorPalette( {
 					</TouchableWithoutFeedback>
 				</View>
 			) }
+			{ colors.map( ( color ) => {
+				const scaleValue = isSelected( color ) ? scaleInterpolation : 1;
+				return (
+					<View key={ `${ color }-${ isSelected( color ) }` }>
+						<TouchableWithoutFeedback
+							onPress={ () => onColorPress( color ) }
+							accessibilityRole={ 'button' }
+							accessibilityState={ {
+								selected: isSelected( color ),
+							} }
+							accessibilityHint={ color }
+						>
+							<Animated.View
+								style={ {
+									transform: [
+										{
+											scale: scaleValue,
+										},
+									],
+								} }
+							>
+								<ColorIndicator
+									color={ color }
+									isSelected={ isSelected( color ) }
+									opacity={ opacity }
+									style={ [
+										styles.colorIndicator,
+										customColorIndicatorStyles,
+									] }
+								/>
+							</Animated.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;
 }