React-native - How to create a infinite picker

Question

I would like to create a infinite/loop react-native Picker like on the image below.

So, my question is: When I'm scrolling, how can I make the Picker start again from the first item after reach out the last item?

Here's my code:

render() {
  const hourItems = [];
  for(var i = 0; i < 24; i++) {
    hourItems.push(
      <Picker.Item label={i.toString()} value={i} key={i} />
    );
  }

  return(
    <ScrollView style={styles.panel}>
      <Picker
        selectedValue={this.state.hour}
        onValueChange={(itemValue, itemIndex) => this.setState({ hour: itemValue })}
      >
        {hourItems}
      </Picker>
    </ScrollView>
  );
}

Outpatient

I think you should precise your question. With what exactly You have a problem? You dont know how to make an infinite loop or how to design your app to match your screen? – Collum

When I'm scrolling, how can I make the Picker start again from the first item after reach out the last item? – Outpatient

ok, see my answer below – Collum

I'm having the same problem here. Have you found any solution so far? – Angelika

Answer 1

I finally found a way to get the infinite picker.(Time picker)

We can just use this library "React Native DateTimePicker" https://github.com/react-native-datetimepicker/datetimepicker

npm install @react-native-community/datetimepicker --save

import DateTimePicker from '@react-native-community/datetimepicker';

// Example for iOS

export const App = () => {
  const [date, setDate] = useState(new Date(1598051730000));
  const [mode, setMode] = useState('date');
  const [show, setShow] = useState(false);

  const onChange = (event, selectedDate) => {
    const currentDate = selectedDate;
    setShow(false);
    setDate(currentDate);
  };

  const showMode = (currentMode) => {
    setShow(true);
    setMode(currentMode);
  };

  const showDatepicker = () => {
    showMode('date');
  };

  const showTimepicker = () => {
    showMode('time');
  };

  return (
    <SafeAreaView>
      <Button onPress={showDatepicker} title="Show date picker!" />
      <Button onPress={showTimepicker} title="Show time picker!" />
      <Text>selected: {date.toLocaleString()}</Text>
      {show && (
        <DateTimePicker
          testID="dateTimePicker"
          value={date}
          mode={mode}
          is24Hour={true}
          onChange={onChange}
        />
      )}
    </SafeAreaView>
  );
};

Angelika

Answer 2

Create redux action which increment value of the minutes and hours. Inside that action you can check whether it should be reset, for example:

export const tick = () => (dispatch, getState) => {
   const { minute } = getState().clock
   if (minute === 59) {
     dispatch({ type: RESET_MINUTE})
     dispatch({ type: INCREMENT_HOUR})
   } else {
     dispatch({ type: INCREMENT_MINUTE})
   }
}

and in the reducer:

const createReducer = (initialState, handlers) =>
  (state = initialState, action) => {
    if (handlers.hasOwnProperty(action.type)) {
      return handlers[action.type](state, action)
    }
    return state
  }

export default createReducer(initialState, {
  INCREMENT_HOUR(state, action) {
    return {
      ...state,
      hour: state.hour + 1,
    }
  },
  INCREMENT_MINUTE(state, action) {
    return {
      ...state,
      minute: state.minute + 1,
    }
  },
  RESET_MINUTE(state) {
    return {
      ...state,
      minute: 0,
    }
  },
})

then connect your component with the reducer and the update should be automatic :)

Collum

1. Using redux is completely unnecessary added complication 2. This doesn't create the UI the asker was asking for – Jehovah

@Jehovah nope, please read his question once again. He is not asking "how to create UI" but how to make it work like this. I agree that today redux is not necessary, in fact I would recommend to use hooks, but over two years ago it was the best solution for state management across application. – Collum