Refactor: The OptionPicker

- change ScrollView to FlatList
- fix autoFocus props

src/OptionPicker/OptionPicker.js

@@ -44,7 +44,7 @@ export default function OptionPicker(props: Props) {
     <View>
       <View style={styles.inputWrapper}>
         <TagsInput
-          autofocus
+          autoFocus
           tags={tags}
           onClearPress={onClearPress}
           value={text}

src/OptionPicker/OptionPicker.stories.js

@@ -16,10 +16,14 @@ storiesOf('OptionPicker', module)
     const onClearPress = action('onClearPress');
     const onPressAdd = action('onPressAdd');
     const onPressItem = action('onPressItem');
-    const selected = select('selected', {
-      None: null,
-      Prague: [Prague],
-    });
+    const selected = select(
+      'selected',
+      {
+        None: null,
+        Prague: [Prague],
+      },
+      null,
+    );
     const options = object('Options', mockedPlaces);
     const label = text('label', 'From:');
     const placeholder = text('placeholder', 'Departure point');

src/OptionPicker/OptionPickerTypes.js

@@ -1,7 +1,7 @@
 // @flow
 
 export type OptionType = {
-  +id: string | number,
+  +id: string,
   +label: string,
   +text: ?string,
   +type: 'localization' | 'destination' | 'airplane' | 'bus' | 'train', // @TODO use IconNameType as enum types

src/OptionPicker/__tests__/__snapshots__/OptionPicker.test.js.snap

@@ -12,7 +12,8 @@ exports[`OptionPicker render 1`] = `
     }
   >
     <TagsInput
-      autofocus={true}
+      autoCorrect={false}
+      autoFocus={true}
       fontSize={16}
       label="label"
       onChangeText={

src/OptionPicker/components/OptionList.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import { ScrollView } from 'react-native';
+import { FlatList, Keyboard } from 'react-native';
 
 import Option from './Option';
 import { areSelectedOptionsChanged } from '../helpers';
@@ -20,20 +20,31 @@ export default class OptionList extends React.Component<Props> {
     return areSelectedOptionsChanged(options, nextProps.options);
   }
 
+  renderOption = ({ item }: { item: OptionType }) => {
+    const { onItemPress, onAddPress } = this.props;
+    return (
+      <Option
+        option={item}
+        key={item.id}
+        onItemPress={onItemPress}
+        onAddPress={onAddPress}
+      />
+    );
+  };
+
+  keyExtractor = (item: OptionType) => item.id;
+
   render() {
-    const { options, onItemPress, onAddPress } = this.props;
+    const { options } = this.props;
 
     return (
-      <ScrollView>
-        {options.map(option => (
-          <Option
-            option={option}
-            key={option.id}
-            onItemPress={onItemPress}
-            onAddPress={onAddPress}
-          />
-        ))}
-      </ScrollView>
+      <FlatList
+        keyboardShouldPersistTaps="always"
+        onScroll={Keyboard.dismiss}
+        data={options}
+        renderItem={this.renderOption}
+        keyExtractor={this.keyExtractor}
+      />
     );
   }
 }