From 65740723d9842bbd13e8d201848a7572bdbb0b1f Mon Sep 17 00:00:00 2001
From: Luna Wei <luwe@fb.com>
Date: Tue, 15 Jun 2021 12:21:27 -0700
Subject: [PATCH] Remove Picker from XHR example

Summary: Changelog: [Internal] Remove Picker from XHR examples

Reviewed By: kacieb

Differential Revision: D29082825

fbshipit-source-id: 7616847ff5f0da59a5e38898df78c911103699ba
---
 .../js/examples/XHR/XHRExampleBinaryUpload.js | 37 ++++++++++++++-----
 1 file changed, 28 insertions(+), 9 deletions(-)

diff --git a/packages/rn-tester/js/examples/XHR/XHRExampleBinaryUpload.js b/packages/rn-tester/js/examples/XHR/XHRExampleBinaryUpload.js
index fe93088dd9bcfc..85b01cce64a718 100644
--- a/packages/rn-tester/js/examples/XHR/XHRExampleBinaryUpload.js
+++ b/packages/rn-tester/js/examples/XHR/XHRExampleBinaryUpload.js
@@ -15,12 +15,12 @@ const React = require('react');
 const {
   Alert,
   Linking,
-  Picker,
   StyleSheet,
   Text,
   TouchableHighlight,
   View,
 } = require('react-native');
+import RNTOption from '../../components/RNTOption';
 
 const BINARY_TYPES = {
   String,
@@ -110,14 +110,20 @@ class XHRExampleBinaryUpload extends React.Component<{...}, $FlowFixMeState> {
   render(): React.Node {
     return (
       <View>
-        <Text>Upload 255 bytes as...</Text>
-        <Picker
-          selectedValue={this.state.type}
-          onValueChange={type => this.setState({type})}>
-          {Object.keys(BINARY_TYPES).map(type => (
-            <Picker.Item key={type} label={type} value={type} />
-          ))}
-        </Picker>
+        <View style={styles.block}>
+          <Text style={styles.title}>Upload 255 bytes as ...</Text>
+          <View style={styles.row}>
+            {Object.keys(BINARY_TYPES).map(type => (
+              <RNTOption
+                selected={this.state.type === type}
+                key={type}
+                label={type}
+                onPress={() => this.setState({type})}
+                style={styles.option}
+              />
+            ))}
+          </View>
+        </View>
         <View style={styles.uploadButton}>
           <TouchableHighlight onPress={this._upload}>
             <View style={styles.uploadButtonBox}>
@@ -131,6 +137,19 @@ class XHRExampleBinaryUpload extends React.Component<{...}, $FlowFixMeState> {
 }
 
 const styles = StyleSheet.create({
+  block: {
+    borderColor: 'rgba(0,0,0, 0.1)',
+    borderBottomWidth: 1,
+    padding: 6,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  title: {
+    fontWeight: 'bold',
+  },
+  option: {margin: 6},
   uploadButton: {
     marginTop: 16,
   },