Github Copilot for React Expo

I decided to try out Github Copilot for a side project I'm working on and gave it the following prompt:

Create an Expo view that displays a form that allows users to create a task for a pet. The form should include the following:

A dropdown containing the name of the task to be performed

A reminder date that allows the user to select a date using a calendar widget

A time input that allows the user to select a time using a time widget

Imagine my surprise when it gave this output:

import React, { useState } from "react";

import { View, Text, Button, StyleSheet } from "react-native";

import { Picker } from "@react-native-picker/picker";

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

const AddTaskScreen = () => {
  const [taskName, setTaskName] = useState("");

  const [reminderDate, setReminderDate] = useState(new Date());

  const [reminderTime, setReminderTime] = useState(new Date());

  const [showDatePicker, setShowDatePicker] = useState(false);

  const [showTimePicker, setShowTimePicker] = useState(false);

  const taskOptions = [
    { label: "Feeding", value: "feeding" },

    { label: "Vet Appointment", value: "vetAppointment" },

    { label: "Grooming", value: "grooming" },

    { label: "Cleaning", value: "cleaning" },
  ];

  const onDateChange = (event, selectedDate) => {
    const currentDate = selectedDate || reminderDate;

    setShowDatePicker(false);

    setReminderDate(currentDate);
  };

  const onTimeChange = (event, selectedTime) => {
    const currentTime = selectedTime || reminderTime;

    setShowTimePicker(false);

    setReminderTime(currentTime);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.label}>Task Name</Text>

      <Picker
        selectedValue={taskName}
        onValueChange={(itemValue) => setTaskName(itemValue)}
        style={styles.picker}
      >
        {taskOptions.map((task) => (
          <Picker.Item key={task.value} label={task.label} value={task.value} />
        ))}
      </Picker>

      <Text style={styles.label}>Reminder Date</Text>

      <Button title="Select Date" onPress={() => setShowDatePicker(true)} />

      {showDatePicker && (
        <DateTimePicker
          value={reminderDate}
          mode="date"
          display="default"
          onChange={onDateChange}
        />
      )}

      <Text style={styles.label}>Reminder Time</Text>

      <Button title="Select Time" onPress={() => setShowTimePicker(true)} />

      {showTimePicker && (
        <DateTimePicker
          value={reminderTime}
          mode="time"
          display="default"
          onChange={onTimeChange}
        />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,

    padding: 20,

    backgroundColor: "#fff",
  },

  label: {
    fontSize: 18,

    marginVertical: 10,
  },

  picker: {
    height: 50,

    width: "100%",
  },
});

export default AddTaskScreen;

I was surprised to see such easy to read code and that useful React utilities were imported to display the datepicker and dropdown.

After reading through the code there's some obvious changes such as using the datepicker for both the date and time but so far Copilot seems to be a great starting point for developing features.

Blog

Github Copilot for React Expo

S “BigSlyGuy” Willis

Join Our Newsletter. No Spam, Only the good stuff.

Related