PersonPicker.jsx

import * as React from "react";
import { View } from "react-native";
import { fetchAvailablePeople, saveSelectedPerson } from "./api";

const PersonPicker = () => {
  const [availablePeople, setAvailablePeople] = useState([]);
  const [selectedPerson, setSelectedPerson] = useState(null);

  useEffect(() => {
    const people = fetchAvailablePeople();
    setAvailablePeople(people);
  });

  return (
    <View style={{ flex: 1, backgroundColor: "#fff" }}>
      {availablePeople.length ? (
        availablePeople.map(person => (
          <View style={{ flexDirection: "row" }}>
            <View>
              <TouchableOpacity
                style={{ flex: 1 }}
                onPress={() => setSelectedPerson(person.id)}
              >
                <View
                  style={{
                    flexDirection: "row",
                    backgroundColor:
                      selectedPerson == person.id ? "green" : "#fff"
                  }}
                >
                  <Text>{person.name}</Text>
                  <Text>{person.title}</Text>
                  <Text>{person.wage}</Text>
                </View>
              </TouchableOpacity>
            </View>
          </View>
        ))
      ) : (
        <View>
          <Text>People are loading. Please wait.</Text>
        </View>
      )}
      <TouchableOpacity
        disabled={selectedPerson == null}
        onPress={saveSelectedPerson}
      >
        <View>
          <Text>Save</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
};

export default PersonPicker;