Nativator

Setting Up Your Environment

Make sure you have Node.js and npm installed. We will use Expo for easy React Native development.

1. Install Expo CLI if you haven’t already:bashCopy codenpm install -g expo-cli
2. Create a new project:bashCopy codeexpo init Nativator cd Nativator
3. Choose the “blank” template when prompted.

Step 2: Create Basic Components

We will create two main components: PlantList and AddPlant.

1. Create PlantList.js

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

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

const PlantList = ({ plants, onDelete }) => {
  return (
    <FlatList
      data={plants}
      keyExtractor={(item, index) => index.toString()}
      renderItem={({ item, index }) => (
        <View style={styles.itemContainer}>
          <Text style={styles.itemText}>{item}</Text>
          <Button title="Delete" onPress={() => onDelete(index)} />
        </View>
      )}
    />
  );
};

const styles = StyleSheet.create({
  itemContainer: {
    padding: 15,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  itemText: {
    fontSize: 18,
  },
});

export default PlantList;

2. Create AddPlant.js

Now create another file called AddPlant.js:

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

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

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

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Add a new native plant"
        value={inputValue}
        onChangeText={setInputValue}
      />
      <Button title="Add" onPress={handleSubmit} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    marginVertical: 20,
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    flex: 1,
    padding: 10,
    marginRight: 10,
  },
});

export default AddPlant;

Step 3: Main Application Component

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

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

const App = () => {
  const [plants, setPlants] = useState([]);

  const addPlant = (plant) => {
    setPlants([...plants, plant]);
  };

  const deletePlant = (index) => {
    const newPlants = plants.filter((_, i) => i !== index);
    setPlants(newPlants);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Nativator: Native Plant Manager</Text>
      <AddPlant onAdd={addPlant} />
      <PlantList plants={plants} onDelete={deletePlant} />
    </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

Now you can start your application. In your terminal, run:

bashCopy codeexpo start

This command will open a new tab in your browser, allowing you to 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 called “Nativator” that allows you to manage a list of native plants. You can enhance it by adding features like:

• Editing plant names
• Categorizing plants by type
• Storing plants in local storage for persistence

Summary

In this tutorial, you created a simple plant manager app with React Native. You learned how to manage state, create reusable components, and handle user interactions.