title: Build a custom seconds and minutes input in React Native?
body: <p>Im making an exercise timer and I need an input for seconds and minutes. </p>
  
  <p>The ideal UX would 2 select lists side by side. Tapping on the input would open both lists, so different from the web where you can only focus on one at a time.</p>
  
  <p>Ive made a demo here, although it would need to be in a modal or similar: 
  <a href="https://snack.expo.io/@jamesweblondon/intelligent-apple" rel="nofollow noreferrer">https://snack.expo.io/@jamesweblondon/intelligent-apple</a></p>
  
  <pre><code>import * as React from 'react';
  import { Text, View, StyleSheet, ScrollView, TouchableOpacity } from 'react-native';
  
  const minutes = new Array(10).fill('').map((item, index)=&gt;{
    return index;
  })
  const seconds = new Array(60).fill('').map((item, index)=&gt;{
    return index;
  })
  
  const Item = ({text, isSelected, onPress}) =&gt; {
    return(
      &lt;TouchableOpacity 
        onPress={onPress}
        style={[styles.item, isSelected &amp;&amp; styles.itemIsSelected]}&gt;
        {text}
      &lt;/TouchableOpacity&gt;
    )
  }
  
  export default function App() {
    const [selectedMinute, setSelectedMinute] = React.useState(1);
    const [selectedSeconds, setSelectedSeconds] = React.useState(10);
  
    return (
      &lt;View style={styles.container}&gt;
        &lt;View style={styles.row}&gt;
          &lt;Text style={styles.heading}&gt;Minutes&lt;/Text&gt;
          &lt;ScrollView style={styles.scroll}&gt;
            {
              minutes.map((item, index)=&gt;{
                return &lt;Item
                  onPress={()=&gt;setSelectedMinute(item)} 
                  text={item} 
                  key={item} 
                  isSelected={selectedMinute === index} 
                /&gt;
              })
            }
          &lt;/ScrollView&gt;
        &lt;/View&gt;
        &lt;View style={styles.row}&gt;
          &lt;Text style={styles.heading}&gt;Seconds&lt;/Text&gt;
          &lt;ScrollView style={styles.scroll}&gt;
            {
              seconds.map((item, index)=&gt;{
                return &lt;Item 
                  onPress={()=&gt;setSelectedSeconds(item)} 
                  text={item} 
                  key={item} 
                  isSelected={selectedSeconds === index} 
                /&gt;
              })
            }
          &lt;/ScrollView&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flexDirection: 'row',
      height: 300
    },
    row: {
      flex: 1,
    },
    scroll: {
      height: 300
    },
    heading: {
      fontSize: 20,
      fontWeight: 'bold',
      textAlign: 'center'
    },
    item: {
      padding: 30,
      backgroundColor: 'grey',
      borderColor: 'white',
      borderWidth: 1,
      justifyContent: 'center',
      alignItems: 'center'
    },
    itemIsSelected: {
      backgroundColor: 'gold'
    }
  });
  </code></pre>
  
  <p>Is it OK to build your own inputs in React Native? This would be a a bad idea on the web as it would probably result in worse UX (especially for keyboard navigation) and a component that screen readers wouldn't know how to use. </p>
  
  <p>I couldn't find a library that does quite what I need. This is close but you can only have one list open at a time. It also had a major bug with Redux making it unusable for me:
  <a href="https://github.com/lawnstarter/react-native-picker-select#readme" rel="nofollow noreferrer">https://github.com/lawnstarter/react-native-picker-select#readme</a></p>
  
  <p>Ive been trying to use the <code>Picker</code> component as I imagine it's more semantic? It works how I need on iOS but not Android (see screenshots): </p>
  
  <p><a href="https://i.stack.imgur.com/DoJ4p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DoJ4p.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/F5Vsl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F5Vsl.png" alt="enter image description here"></a></p>