infinitered / reactotron

A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.
https://docs.infinite.red/reactotron/
MIT License
14.82k stars 942 forks source link

New iOS tab is created every time I relaunch the app. #1387

Open ubaidvalere opened 8 months ago

ubaidvalere commented 8 months ago
image
jamonholmgren commented 8 months ago

This is a confirmed bug, and we have some ideas how we'll fix this. cc @joshuayoes

joshuayoes commented 7 months ago

For now, this can be fixed by calling setAsyncStorageHandler like so

import Reactotron from "reactotron-react-native";
import { AsyncStorage } from "@react-native-async-storage/async-storage";

Reactotron
  .configure() 
  .useReactNative() 
  .setAsyncStorageHandler(AsyncStorage) // allows Reactotron to store an ID in async storage to prevent this from happening
  .connect(); 
joshuayoes commented 7 months ago

If you are using another storage package like react-native-mmkv, you could also write your own getClientId and setClientId functions

import { MMKV } from 'react-native-mmkv'
import Reactotron from 'reactotron-react-native'

const REACTOTRON_ASYNC_CLIENT_ID = "@REACTOTRON/clientId"

const storage = new MMKV({ id: REACTOTRON_ASYNC_CLIENT_ID })

const getClientId = async () => storage.getString(REACTOTRON_ASYNC_CLIENT_ID)!

const setClientId = async (clientId: string) => {
  storage.set(REACTOTRON_ASYNC_CLIENT_ID, clientId)
}

Reactotron.configure({
  getClientId,
  setClientId,
})
  .useReactNative()
  .connect()
Ajmal0197 commented 7 months ago

New tab issue fixed as per @joshuayoes soln:

import Reactotron, { networking } from 'reactotron-react-native';
import { reactotronRedux } from 'reactotron-redux';
import mmkvPlugin from 'reactotron-react-native-mmkv';
import { MMKV } from 'react-native-mmkv';

const REACTOTRON_ASYNC_CLIENT_ID = '@REACTOTRON/clientId';
const storage = new MMKV({ id: REACTOTRON_ASYNC_CLIENT_ID });
const getClientId = async () => storage.getString(REACTOTRON_ASYNC_CLIENT_ID);
const setClientId = async (clientId) => {
  storage.set(REACTOTRON_ASYNC_CLIENT_ID, clientId);
};

Reactotron.configure({
  getClientId,
  setClientId,
})
  .useReactNative()
  .use(reactotronRedux()) //  <- here i am!
  .use(
    mmkvPlugin({
      storage, // mmkv instance
      ignore: ['secret', 'persist:root']
    })
  )
  .connect();

const yeOldeConsoleLog = console.log;
console.log = (...args) => {
  // always call the old one, because React Native does magic swizzling too
  yeOldeConsoleLog(...args);

  Reactotron.display({
    name: 'CONSOLE',
    value: args,
    preview: args.length > 0 && typeof args[0] === 'string' ? args[0] : null,
  });
};

export default Reactotron;