Add with-redux example

with-redux/App.js

@@ -0,0 +1,11 @@
+import { Provider } from "react-redux";
+import { store } from "./redux/store";
+import CounterScreen from "./CounterScreen";
+
+export default function App() {
+  return (
+    <Provider store={store}>
+      <CounterScreen />
+    </Provider>
+  );
+}

with-redux/CounterScreen.js

@@ -0,0 +1,113 @@
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  StyleSheet,
+  TouchableOpacity,
+} from "react-native";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  increment,
+  decrement,
+  incrementByAmount,
+  decrementByAmount,
+} from "./redux/slices/counterSlice";
+
+const CounterComponent = () => {
+  const [inputValue, setInputValue] = useState("");
+  const dispatch = useDispatch();
+  const counter = useSelector((state) => state.counter.value);
+
+  const handleIncrement = () => {
+    dispatch(incrementByAmount(Number(inputValue) || 0));
+  };
+
+  const handleDecrement = () => {
+    dispatch(decrementByAmount(Number(inputValue) || 0));
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={{ fontSize: 25, fontWeight: "600", marginVertical: 10 }}>
+        Expo with Redux State Management
+      </Text>
+      <Text style={{ fontSize: 20, fontWeight: "600", marginVertical: 10 }}>
+        Counter: {counter}
+      </Text>
+
+      <View style={styles.buttonContainer}>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => dispatch(increment())}
+        >
+          <Text style={styles.buttonText}>Increment</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => dispatch(decrement())}
+        >
+          <Text style={styles.buttonText}>Decrement</Text>
+        </TouchableOpacity>
+      </View>
+
+      <Text style={{ fontSize: 20, fontWeight: "600", marginVertical: 15 }}>
+        Increment or Decrement with Custom Values
+      </Text>
+
+      <TextInput
+        style={styles.inputText}
+        placeholder="Enter Value"
+        keyboardType="numeric"
+        value={inputValue}
+        onChangeText={setInputValue}
+      />
+
+      <View style={styles.buttonContainer}>
+        <TouchableOpacity style={styles.button} onPress={handleIncrement}>
+          <Text style={styles.buttonText}>Increment</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.button} onPress={handleDecrement}>
+          <Text style={styles.buttonText}>Decrement</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+  },
+  buttonContainer: {
+    maxWidth: 200,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginBottom: 15,
+  },
+  button: {
+    backgroundColor: "#000000",
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    borderRadius: 5,
+    marginRight: 10,
+  },
+  buttonText: {
+    color: "#ffffff",
+    fontSize: 16,
+    textAlign: "center",
+  },
+  inputText: {
+    height: 40,
+    width: 300,
+    borderColor: "#000000",
+    borderWidth: 1,
+    borderRadius: 10,
+    paddingHorizontal: 10,
+    marginBottom: 20,
+    backgroundColor: "#fff",
+  },
+});
+
+export default CounterComponent;

with-redux/README.md

@@ -0,0 +1,49 @@
+# Expo with Redux Counter Example
+
+<p>
+  <!-- iOS -->
+  <a href="https://itunes.apple.com/app/apple-store/id982107779">
+    <img alt="Supports Expo iOS" longdesc="Supports Expo iOS" src="https://img.shields.io/badge/iOS-4630EB.svg?style=flat-square&logo=APPLE&labelColor=999999&logoColor=fff" />
+  </a>
+  <!-- Android -->
+  <a href="https://play.google.com/store/apps/details?id=host.exp.exponent&referrer=blankexample">
+    <img alt="Supports Expo Android" longdesc="Supports Expo Android" src="https://img.shields.io/badge/Android-4630EB.svg?style=flat-square&logo=ANDROID&labelColor=A4C639&logoColor=fff" />
+  </a>
+  <!-- Web -->
+  <a href="https://docs.expo.dev/workflow/web/">
+    <img alt="Supports Expo Web" longdesc="Supports Expo Web" src="https://img.shields.io/badge/web-4630EB.svg?style=flat-square&logo=GOOGLE-CHROME&labelColor=4285F4&logoColor=fff" />
+  </a>
+</p>
+
+This project shows how to integrate **Redux** with an **Expo** app using a simple counter application where you can:
+
+- Increment or decrement the counter value.
+- Increment or decrement the value by a custom input.
+
+## 🚀 How to use
+
+- Navigate to the project directory:
+
+```bash
+cd with-redux
+```
+
+- Install Dependencies:
+
+```bash
+npm install
+# or
+yarn install
+```
+
+Start the development server:
+
+```bash
+npm start
+# or
+yarn start
+```
+
+## 📝 Notes
+
+- Learn more about [Redux](https://redux.js.org/)

with-redux/app.json

@@ -0,0 +1,12 @@
+{
+  "expo": {
+    "name": "blank",
+    "slug": "blank",
+    "version": "1.0.0",
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ]
+  }
+}

with-redux/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

with-redux/package.json

@@ -0,0 +1,20 @@
+{
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@reduxjs/toolkit": "^2.5.0",
+    "expo": "^52.0.16",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.3",
+    "react-native-web": "~0.19.6",
+    "react-redux": "^9.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.19.3"
+  }
+}

with-redux/redux/slices/counterSlice.js

@@ -0,0 +1,24 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const counterSlice = createSlice({
+  name: "counter",
+  initialState: { value: 0 },
+  reducers: {
+    increment: (state) => {
+      state.value += 1;
+    },
+    decrement: (state) => {
+      state.value -= 1;
+    },
+    incrementByAmount: (state, action) => {
+      state.value += action.payload;
+    },
+    decrementByAmount: (state, action) => {
+      state.value -= action.payload;
+    },
+  },
+});
+
+export const { increment, decrement, incrementByAmount, decrementByAmount } =
+  counterSlice.actions;
+export default counterSlice.reducer;

with-redux/redux/store.js

@@ -0,0 +1,8 @@
+import { configureStore } from "@reduxjs/toolkit";
+import counterReducer from "./slices/counterSlice";
+
+export const store = configureStore({
+  reducer: {
+    counter: counterReducer,
+  },
+});