Создать пользовательский ввод секунд и секунд в React Native?

Question

Я делаю таймер тренировки, и мне нужен ввод для секунд и минут.

Идеальный UX - 2 списка для выбора. Нажатие на ввод откроет оба списка, так что в отличие от Интернета, где вы можете сосредоточиться только на одном за раз.

Я сделал демо здесь, хотя это должно быть в модальном или аналогичном: https://snack.expo.io/@jamesweblondon / smart-apple

import * as React from 'react';
import { Text, View, StyleSheet, ScrollView, TouchableOpacity } from 'react-native';

const minutes = new Array(10).fill('').map((item, index)=>{
  return index;
})
const seconds = new Array(60).fill('').map((item, index)=>{
  return index;
})

const Item = ({text, isSelected, onPress}) => {
  return(
    <TouchableOpacity 
      onPress={onPress}
      style={[styles.item, isSelected && styles.itemIsSelected]}>
      {text}
    </TouchableOpacity>
  )
}

export default function App() {
  const [selectedMinute, setSelectedMinute] = React.useState(1);
  const [selectedSeconds, setSelectedSeconds] = React.useState(10);

  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <Text style={styles.heading}>Minutes</Text>
        <ScrollView style={styles.scroll}>
          {
            minutes.map((item, index)=>{
              return <Item
                onPress={()=>setSelectedMinute(item)} 
                text={item} 
                key={item} 
                isSelected={selectedMinute === index} 
              />
            })
          }
        </ScrollView>
      </View>
      <View style={styles.row}>
        <Text style={styles.heading}>Seconds</Text>
        <ScrollView style={styles.scroll}>
          {
            seconds.map((item, index)=>{
              return <Item 
                onPress={()=>setSelectedSeconds(item)} 
                text={item} 
                key={item} 
                isSelected={selectedSeconds === index} 
              />
            })
          }
        </ScrollView>
      </View>
    </View>
  );
}

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'
  }
});

Можно ли создавать собственные входы в React Native? Это было бы плохой идеей в Интернете, поскольку это, вероятно, привело бы к ухудшению UX (особенно для навигации по клавиатуре) и компоненту, который программы чтения с экрана не знали бы, как использовать.

Я не смог найти библиотеку, которая делает именно то, что мне нужно. Это близко, но вы можете открыть только один список за раз. У него также была серьезная ошибка с Redux, делающая его непригодным для меня: https://github.com/lawnstarter/react-native-picker-select#readme

Я пытался использовать компонент Picker, так как я думаю, что он более семанти c? Это работает так, как мне нужно на iOS, но не Android (см. Скриншоты):