Resolved android picker styling issues (microsoft#6179)

Author: Vivek Kozhisseri

source/community/reactnative/src/components/inputs/choice-set/choice-set-input.js

@@ -182,30 +182,44 @@ export class ChoiceSetInput extends React.Component {
 					</View>
 				</TouchableOpacity>}
 				{((Platform.OS === Constants.PlatformIOS) ? this.state.isPickerSelected : true) &&
-					<Picker
-						mode={'dropdown'}
-						itemStyle={this.styleConfig.picker}
-						selectedValue={this.getPickerInitialValue(addInputItem)}
-						onValueChange={
-							(itemValue) => {
-								this.setState({
-									selectedPickerValue: itemValue,
-									isError: false
-								})
-								addInputItem(this.id, { value: itemValue, errorState: false });
-							}}>
-						{this.choices.map((item, key) => (
-							<Picker.Item
-								label={item.title}
-								value={item.value} key={key}
-							/>)
-						)}
-					</Picker>
+					this.getPickerComponent(addInputItem)
 				}
 			</View>
 		)
 	}
 
+	getPickerComponent(addInputItem) {
+		let picker = (
+			<Picker
+				mode={'dropdown'}
+				itemStyle={this.styleConfig.picker}
+				selectedValue={this.getPickerInitialValue(addInputItem)}
+				onValueChange={
+					(itemValue) => {
+						this.setState({
+							selectedPickerValue: itemValue,
+							isError: false
+						})
+						addInputItem(this.id, { value: itemValue, errorState: false });
+					}}>
+				{this.choices.map((item, key) => (
+					<Picker.Item
+						label={item.title}
+						value={item.value} key={key}
+					/>)
+				)}
+			</Picker>
+		);
+		if (Platform.OS == Constants.PlatformAndroid) {
+			picker = (
+				<View style={this.styleConfig.dropdown}>
+					{picker}
+				</View>
+			)
+		}
+		return picker;
+	}
+
 	/**
 	 * @description Renders CheckBoxes component as per the json
 	 */

source/community/reactnative/src/utils/theme-config.js

@@ -114,13 +114,31 @@ export const defaultThemeConfig = {
         inactiveColor: Constants.LightBlack,
     },
     dropdown: {
-        flexDirection: Constants.FlexRow,
-        justifyContent: Constants.SpaceBetween,
-        alignItems: Constants.FlexEnd,
-        borderWidth: 1,
-        backgroundColor: Constants.WhiteColor,
-        borderColor: Constants.LightGreyColor,
-        borderRadius: 5,
+        ios: {
+            flexDirection: Constants.FlexRow,
+            justifyContent: Constants.SpaceBetween,
+            alignItems: Constants.FlexEnd,
+            borderWidth: 1,
+            backgroundColor: Constants.WhiteColor,
+            borderColor: Constants.LightGreyColor,
+            borderRadius: 5,
+        },
+        android: {
+            borderWidth: 1,
+            backgroundColor: Constants.WhiteColor,
+            borderColor: Constants.LightGreyColor,
+            borderRadius: 5,
+            backgroundColor: Constants.LightGreyColor,
+        },
+        windows: {
+            flexDirection: Constants.FlexRow,
+            justifyContent: Constants.SpaceBetween,
+            alignItems: Constants.FlexEnd,
+            borderWidth: 1,
+            backgroundColor: Constants.WhiteColor,
+            borderColor: Constants.LightGreyColor,
+            borderRadius: 5,
+        }
     },
     dropdownText: {
         color: Constants.BlackColor,