I'm working on a simple React app for data manipulation and I'm fairly new to the framework so I know I must be doing something obviously wrong. I have a list of strings I want to output to the screen and update when the data is changed. However, the list seems to not be rendered. I can't find any good resources online that don't use `<ul>` or `<li>` and neither of those elements works for me in my App return.

I've tried a dozen ways to render this list over the last 2 hours, but nothing has worked. Any ideas?

(I also would love any tips for cleaner code and the like. This is a quickly put together prototype, but I'm enjoying learning React Native so far, so I'd love any tips to improve my work.)

```
export default function App() {
      const [locationName, setLocationName] = React.useState("Location Name");
      const [id, setId] = React.useState("12345");
      const [isGallons, setIsGallons] = useState(false);
      const toggleSwitch = () => setIsGallons((previousState) => !previousState);
      const [meterReadings, setReadings] = useState([1234, 2345, 3456]);
      const [meterReadingList, setList] = useState(meterReadings);
      const [meterReadingInput, setReadingInput] = useState("");

      return (
        <SafeAreaView style={styles.container}>
          <Image source={require("./assets/icon.png")}></Image>
          <Text>Enter Location: </Text>
          <TextInput
            style={styles.input}
            placeholder="Location Name"
            onChangeText={(text) => setLocationName(text)}
          />
          <Text>Enter Id: </Text>
          <TextInput
            style={styles.input}
            placeholder="Id"
            onChangeText={(text) => setId(text)}
          />
          <Text>Is Gallons</Text>
          <Switch
            trackColor={{ false: "#767577", true: "#81b0ff" }}
            thumbColor={isGallons ? "#f5dd4b" : "#f4f3f4"}
            ios_backgroundColor="#3e3e3e"
            onValueChange={toggleSwitch}
            value={isGallons}
          />
          <Text>Enter New Reading: </Text>
          <TextInput
            style={styles.input}
            placeholder="Reading"
            onChangeText={(text) => setReadingInput(text)}
          />
          <FlatList>
            data={meterReadingList}
            renderItem={({ reading }) => <Text>{reading}</Text>}
          </FlatList>
          <Button
            onPress={() => {
              meterReadings.push(meterReadingInput);
              setList(meterReadings);
            }}
            title="Submit"
            color="#841584"
          />
          <StatusBar style="auto" />
        </SafeAreaView>
      );
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
      },
      input: {
        borderWidth: 1,
        borderColor: "#777",
        padding: 8,
        margin: 10,
        width: 200,
      },
    });

```