MobileMuse

Setting Up Your Environment

Make sure you have Node.js and npm installed. We will use Expo to create our React Native app.

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

Step 2: Create Basic Components

We’ll create two main components: IdeaList and AddIdea.

1. Create IdeaList.js

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

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

const IdeaList = ({ ideas }) => {
  return (
    <FlatList
      data={ideas}
      keyExtractor={(item, index) => index.toString()}
      renderItem={({ item }) => (
        <View style={styles.itemContainer}>
          <Text style={styles.itemText}>{item}</Text>
        </View>
      )}
    />
  );
};

const styles = StyleSheet.create({
  itemContainer: {
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  itemText: {
    fontSize: 18,
  },
});

export default IdeaList;

2. Create AddIdea.js

Now create another file called AddIdea.js:

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

const AddIdea = ({ 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 idea"
        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 AddIdea;

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 IdeaList from './components/IdeaList';
import AddIdea from './components/AddIdea';

const App = () => {
  const [ideas, setIdeas] = useState([]);

  const addIdea = (idea) => {
    setIdeas([...ideas, idea]);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>MobileMuse: Idea Manager</Text>
      <AddIdea onAdd={addIdea} />
      <IdeaList ideas={ideas} />
    </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.

Summary

In this tutorial, you created a simple React Native app called “MobileMuse” that allows users to add and manage creative ideas. You learned how to manage state and create reusable components in React Native.

Feel free to enhance the application by adding features like:

• Removing ideas
• Editing ideas
• Storing data with AsyncStorage for persistence