Set Up Your Project

First, make sure you have React Native set up. If you haven’t set up a project yet, you can create one using the following command:

bashCopy codenpx react-native init MyAwesomeApp

Step 2: Create a Simple List App

Now, you can replace the contents of App.js with the following code:

javascriptCopy codeimport React, { useState } from 'react';
import { StyleSheet, Text, View, FlatList, TextInput, Button } from 'react-native';

const App = () => {
  const [items, setItems] = useState([]);
  const [textInput, setTextInput] = useState('');

  const addItem = () => {
    if (textInput.trim()) {
      setItems([...items, { key: textInput }]);
      setTextInput('');
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>My Item List</Text>
      <TextInput
        style={styles.input}
        placeholder="Add a new item"
        value={textInput}
        onChangeText={setTextInput}
      />
      <Button title="Add Item" onPress={addItem} />
      <FlatList
        data={items}
        renderItem={({ item }) => <Text style={styles.item}>{item.key}</Text>}
        keyExtractor={(item) => item.key}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
  item: {
    padding: 10,
    fontSize: 18,
    borderBottomColor: '#ccc',
    borderBottomWidth: 1,
  },
});

export default App;

Step 3: Run Your App

To run your app, use the following command in your project directory:

bashCopy codenpx react-native run-android

or

bashCopy codenpx react-native run-ios