CrossPlatformer

Setting Up Your Environment

Make sure you have Node.js and npm installed. We’ll use Expo for easy cross-platform development.

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

Step 2: Create Basic Components

We will create two main components: HobbyList and AddHobby.

1. Create HobbyList.js

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

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

const HobbyList = ({ hobbies, onDelete }) => {
  return (
    <FlatList
      data={hobbies}
      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 HobbyList;

2. Create AddHobby.js

Now create another file called AddHobby.js:

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

const AddHobby = ({ 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 hobby"
        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 AddHobby;

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 HobbyList from './components/HobbyList';
import AddHobby from './components/AddHobby';

const App = () => {
  const [hobbies, setHobbies] = useState([]);

  const addHobby = (hobby) => {
    setHobbies([...hobbies, hobby]);
  };

  const deleteHobby = (index) => {
    const newHobbies = hobbies.filter((_, i) => i !== index);
    setHobbies(newHobbies);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>CrossPlatformer: Hobby Manager</Text>
      <AddHobby onAdd={addHobby} />
      <HobbyList hobbies={hobbies} onDelete={deleteHobby} />
    </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:

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. You can also run it on the web by selecting the web option in the Expo interface.

Summary

In this tutorial, you created a simple cross-platform app called “CrossPlatformer” that allows users to manage a list of hobbies. You learned how to handle state, create reusable components, and work with React Native, which can be run on both mobile and web.

Feel free to enhance the application with features like:

• Editing hobbies
• Persisting data using AsyncStorage
• Adding categories for hobbies