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