Managing App State and Lifecycle

import { AppState } from 'react-native';\n\nconst handleAppStateChange = (nextAppState) => {\n  console.log('App state changed to:', nextAppState);\n};\n\nAppState.addEventListener('change', handleAppStateChange);\n\n// Clean up listener when component unmounts\nconst unsubscribe = AppState.addEventListener('change', handleAppStateChange);\nunsubscribe.remove();

import { AppState } from 'react-native';\n\nconst handleAppStateChange = (nextAppState) => {\n  if (nextAppState === 'background') {\n    console.log('App went to background');\n  } else if (nextAppState === 'active') {\n    console.log('App is active');\n  }\n};\n\nAppState.addEventListener('change', handleAppStateChange);

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    return { count: nextProps.value };
  }

  shouldComponentUpdate(nextProps, nextState) {
    return nextState.count !== this.state.count;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    return { scrollTop: this.scrollContainer.scrollTop };
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    this.scrollContainer.scrollTop = snapshot.scrollTop;
  }

  componentWillUnmount() {
    clearTimeout(this.timer);
  }
}

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';

const DataComponent = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Fetch error:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <Text>Loading...</Text>;
  return <View><Text>Data: {JSON.stringify(data)}</Text></View>;
&#125;;

export default DataComponent;

import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';

const SubscriptionComponent = () => {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const intervalId = setInterval(() => {
      setTime(new Date());
    }, 1000);

    // Cleanup function
    return () => clearInterval(intervalId);
  }, []);

  return <View><Text>Current time: {time.toLocaleTimeString()}</Text></View>;
&#125;;

export default SubscriptionComponent;

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onPress={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function counterReducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(counterReducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onPress={() => dispatch({ type: 'increment' })}>+</button>
      <button onPress={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

import AsyncStorage from '@react-native-async-storage/async-storage';

const saveData = async (key, value) => {
  try {
    await AsyncStorage.setItem(key, JSON.stringify(value));
  } catch (error) {
    console.error('Error saving data:', error);
  }
};

const loadData = async (key) => {
  try {
    const value = await AsyncStorage.getItem(key);
    return value ? JSON.parse(value) : null;
  } catch (error) {
    console.error('Error loading data:', error);
    return null;
  }
};

// Usage
saveData('userPreferences', { theme: 'dark', notifications: true });
loadData('userPreferences').then(data => console.log(data));

import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import AsyncStorage from '@react-native-async-storage/async-storage';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';

const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
  stateReconciler: autoMergeLevel2
};

const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(persistedReducer);
const persistor = persistStore(store);

// In your app component
import { PersistGate } from 'redux-persist/integration/react';

<PersistGate loading={null} persistor={persistor}>
  <App />
</PersistGate>

import { AppState } from 'react-native';\n\nconst handleAppStateChange = (nextAppState) => {\n  if (nextAppState === 'active') {\n    console.log('App has come to the foreground');\n  } else if (nextAppState === 'background') {\n    console.log('App has gone to the background');\n  }\n};\n\nAppState.addEventListener('change', handleAppStateChange);\n\n// Don't forget to remove the listener when component unmounts\nconst unsubscribe = AppState.addEventListener('change', handleAppStateChange);\nunsubscribe.remove();

import React, { useReducer } from 'react';

const initialState = {
  count: 0,
  name: 'React Native'
};

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'SET_NAME':
      return { ...state, name: action.name };
    default:
      throw new Error();
  }
}

function App() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <View>
      <Text>Count: {state.count}</Text>
      <Text>Name: {state.name}</Text>
      <Button title="Increment" onPress={() => dispatch({ type: 'INCREMENT' })} />
      <Button title="Set Name" onPress={() => dispatch({ type: 'SET_NAME', name: 'New Name' })} />
    </View>
  );
}

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

import React, { useState, useEffect } from 'react';

function AsyncComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('/api/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error("Fetch error:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <div>Loading...</div>;
  return <div>Data: {JSON.stringify(data)}</div>;
}