NativeNest

Setting Up Your Environment

Make sure you have Node.js and npm installed. You can set up a new React Native project using Expo, which simplifies the process:

1. Install Expo CLI if you haven’t already:bashCopy codenpm install -g expo-cli
2. Create a new project:bashCopy codeexpo init my-native-app cd my-native-app
3. Choose a template (for example, the “blank” template).

Step 2: Create Basic Components

We’ll create two main components: ItemList and AddItem.

1. Create ItemList.js

In the components folder (create it if it doesn’t exist), create a new file called ItemList.js:

jsxCopy code// components/ItemList.js
import React from 'react';
import { View, Text, FlatList } from 'react-native';

const ItemList = ({ items }) => {
  return (
    <FlatList
      data={items}
      keyExtractor={(item, index) => index.toString()}
      renderItem={({ item }) => (
        <View style={{ padding: 10 }}>
          <Text>{item}</Text>
        </View>
      )}
    />
  );
};

export default ItemList;

2. Create AddItem.js

Now create another file called AddItem.js:

jsxCopy code// components/AddItem.js
import React, { useState } from 'react';
import { View, TextInput, Button } from 'react-native';

const AddItem = ({ onAdd }) => {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = () => {
    if (inputValue) {
      onAdd(inputValue);
      setInputValue('');
    }
  };

  return (
    <View style={{ flexDirection: 'row', padding: 10 }}>
      <TextInput
        style={{
          borderWidth: 1,
          borderColor: '#ccc',
          flex: 1,
          marginRight: 10,
          padding: 10,
        }}
        placeholder="Add new item"
        value={inputValue}
        onChangeText={setInputValue}
      />
      <Button title="Add" onPress={handleSubmit} />
    </View>
  );
};

export default AddItem;

Step 3: Main Application Component

Now, let’s connect everything in App.js.

jsxCopy code// App.js
import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import ItemList from './components/ItemList';
import AddItem from './components/AddItem';

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

  const addItem = (item) => {
    setItems([...items, item]);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>My Item List</Text>
      <AddItem onAdd={addItem} />
      <ItemList items={items} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
});

export default App;

Step 4: Run Your Application

Start your application using Expo:

bashCopy codeexpo start

This will open a new tab in your browser where you can run the app on an emulator or your physical device using the Expo Go app.

Step 5: Explore and Enhance

You now have a basic React Native application! You can enhance it by adding features like:

• Removing items
• Editing items
• Styling with more complex designs
• Persisting data using AsyncStorage

Summary

In this tutorial, you created a simple React Native app that allows users to add items to a list. You learned how to manage state and create reusable components in React Native.