Author: saqibkhan

Setting Up Your Environment

If you haven’t already set up a React project, you can use Create React App:

bashCopy codenpx create-react-app react-wave
cd react-wave

Step 2: Create a Wave Component

We will create a component that renders a wave using SVG. Let’s create a new file called Wave.js in the src folder.

1. Create Wave.js

jsxCopy code// src/Wave.js
import React from 'react';

const Wave = ({ amplitude, frequency, speed }) => {
  const wavePath = (t) => {
const y = amplitude * Math.sin(frequency * t);
return ${t},${y + 100}; // Adjust y offset to position the wave in the SVG
  };

  const points = Array.from({ length: 200 }, (_, i) => wavePath(i * speed)).join(' ');

  return (
<svg width="100%" height="200" viewBox="0 0 200 200">
  <polyline
    points={points}
    fill="none"
    stroke="blue"
    strokeWidth="2"
    strokeLinecap="round"
  />
</svg>
  );
};

export default Wave;

Step 3: Integrate Wave Component in App

Now, let’s use the Wave component in App.js and add some basic state management to animate it.

1. Update App.js

jsxCopy code// src/App.js
import React, { useState, useEffect } from 'react';
import Wave from './Wave';
import './App.css';

const App = () => {
  const [amplitude, setAmplitude] = useState(20);
  const [frequency, setFrequency] = useState(0.1);
  const [speed, setSpeed] = useState(0.2);
  const [offset, setOffset] = useState(0);

  useEffect(() => {
const interval = setInterval(() => {
  setOffset((prevOffset) => (prevOffset + speed) % 200);
}, 100);
return () => clearInterval(interval);
  }, [speed]);

  return (
<div className="App">
  <h1>Wave Animation</h1>
  <Wave amplitude={amplitude} frequency={frequency} speed={offset} />
  <div className="controls">
    <label>
      Amplitude:
      <input
        type="number"
        value={amplitude}
        onChange={(e) => setAmplitude(e.target.value)}
      />
    </label>
    <label>
      Frequency:
      <input
        type="number"
        value={frequency}
        onChange={(e) => setFrequency(e.target.value)}
      />
    </label>
    <label>
      Speed:
      <input
        type="number"
        value={speed}
        onChange={(e) => setSpeed(e.target.value)}
      />
    </label>
  </div>
</div>
  );
};

export default App;

Step 4: Add Basic Styles

Add some basic styles in App.css to make it look nicer:

cssCopy code/* src/App.css */
.App {
  text-align: center;
  padding: 20px;
}

.controls {
  margin-top: 20px;
}

.controls label {
  margin: 0 10px;
}

Step 5: Run Your Application

Start your application using:

bashCopy codenpm start

Summary

You now have a simple React application that features a wave animation! Users can control the amplitude, frequency, and speed of the wave through input fields. This serves as a basic introduction to creating animations with SVG in React.

Feel free to experiment with different values and enhance the app with more features, such as color customization or saving configurations!

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.

Setting Up Your Environment

Make sure you have Node.js and npm installed. You can create a new React app using Create React App by running:

bashCopy codenpx create-react-app my-app
cd my-app

Step 2: Creating the Basic Components

We’ll create a simple application with two main components: ItemList and AddItem.

1. Create ItemList.js

In the src folder, create a new file called ItemList.js:

jsxCopy code// src/ItemList.js
import React from 'react';

const ItemList = ({ items }) => {
  return (
<ul>
  {items.map((item, index) => (
    <li key={index}>{item}</li>
  ))}
</ul>
  );
};

export default ItemList;

2. Create AddItem.js

Now create another file called AddItem.js:

jsxCopy code// src/AddItem.js
import React, { useState } from 'react';

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

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

  return (
<form onSubmit={handleSubmit}>
  <input
    type="text"
    value={inputValue}
    onChange={(e) => setInputValue(e.target.value)}
    placeholder="Add new item"
  />
  <button type="submit">Add</button>
</form>
  );
};

export default AddItem;

Step 3: Main Application Component

Now, let’s tie everything together in App.js.

jsxCopy code// src/App.js
import React, { useState } from 'react';
import ItemList from './ItemList';
import AddItem from './AddItem';

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

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

  return (
<div>
  <h1>My Item List</h1>
  <AddItem onAdd={addItem} />
  <ItemList items={items} />
</div>
  );
};

export default App;

Step 4: Run Your Application

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

bashCopy codenpm start

Step 5: Explore and Enhance

You now have a basic React application that allows you to add items to a list. You can enhance it by adding features like:

• Removing items
• Editing items
• Styling with CSS
• Persisting data to local storage

Summary

This tutorial introduced you to the basics of React by building a simple item list app. You learned how to manage state and create reusable components. As you get comfortable, try expanding the app with more features and styling!