{"id":20556441,"url":"https://github.com/flagsmith/react-native-performance-monitor","last_synced_at":"2025-04-06T09:09:53.598Z","repository":{"id":38917514,"uuid":"239611222","full_name":"Flagsmith/react-native-performance-monitor","owner":"Flagsmith","description":"React Native Performance Monitor - Realtime graphing of React Native render performance","archived":false,"fork":false,"pushed_at":"2023-03-02T16:57:50.000Z","size":20391,"stargazers_count":356,"open_issues_count":20,"forks_count":13,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-05-07T20:03:03.940Z","etag":null,"topics":["monitoring","performance","react","react-components","react-native","react-native-component"],"latest_commit_sha":null,"homepage":"https://react-native-performance-monitor-orpin.now.sh","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Flagsmith.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-02-10T20:54:35.000Z","updated_at":"2024-04-18T09:48:00.000Z","dependencies_parsed_at":"2024-01-13T17:11:22.918Z","dependency_job_id":"770e5cfe-f949-4add-b155-4361effc7b0b","html_url":"https://github.com/Flagsmith/react-native-performance-monitor","commit_stats":null,"previous_names":["bullettrainhq/react-native-performance-monitor"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Flagsmith%2Freact-native-performance-monitor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Flagsmith%2Freact-native-performance-monitor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Flagsmith%2Freact-native-performance-monitor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Flagsmith%2Freact-native-performance-monitor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Flagsmith","download_url":"https://codeload.github.com/Flagsmith/react-native-performance-monitor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247457803,"owners_count":20941906,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["monitoring","performance","react","react-components","react-native","react-native-component"],"created_at":"2024-11-16T03:27:47.619Z","updated_at":"2025-04-06T09:09:53.582Z","avatar_url":"https://github.com/Flagsmith.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg width=\"100%\" src=\"https://github.com/Flagsmith/flagsmith/raw/main/static-files/hero.png\"/\u003e\n\n# React Native Performance Monitor\n\n\u003cimg src=\"example.gif\"/\u003e\n\nThis project lets you see a realtime graph of render times within your React Native app. The purpose is for you to be able to create experiments (i.e. change markup and see how it affects render times).\n\n\n# Installation\n\n```\nnpm i react-native-performance-monitor --save\nnpx react-native-performance-monitor get\n```\n\n\n# Usage\n```\nimport withPerformanceMonitor from 'react-native-performance-monitor/provider';\nexport default withPerformanceMonitor({WrappedComponent: YourScreen, id: 'Screen Name'});\n```\n\n# An example\n\nSet your baseline at http://127.0.0.1:8125/ by clicking remount. Pause the recorder, and adjust your component with what you think will improve performance.\n\n\nHere's a before and after with this approach\n\nBaseline\n```\n\u003cText style={[this.props.style]}\u003e\n    {this.props.children}\n\u003c/Text\u003e\n```\n\nImproved\n```\n\u003cText style={this.props.style}\u003e\n    {this.props.children}\n\u003c/Text\u003e\n```\n\nWith this before and after I observed the following within a large flat list. \n\n\u003cimg src=\"example2.png\"/\u003e\n\n# Connecting to a real device\n\nIn order to connect to a real device you will need to set the IP of your computer, for example:\n\n```\nexport default withPerformanceMonitor({ WrappedComponent: AwesomeChat, id: 'AwesomeChat', ip: '192.168.1.10'});\n```\n\nBy default the server is listening on port 8125 for event updates and 8126 for websocket.\nIf you need to configure the port, because you are tunneling your request or similar, and or disable the Websocket communication, you can do it like this:\n\n```\nexport default withPerformanceMonitor({WrappedComponent: AwesomeChat, id: 'AwesomeChat', ip: '192.168.1.10', events: undefined, showLogs: undefined, port: 80, enableWS: false});\n```\n\n# How it works\n\nThe overall implementation is quite straight forward and simply involved passing the onRenderCallback values via a websocket server to finally render them in a fancy graph.\n\nThere are 3 main components:\n\n- A [React Native component](https://github.com/BulletTrainHQ/react-native-performance-monitor/blob/master/lib/provider.js) that sends profile data to a server via REST and listens to messages (remount and forceUpdate) to trigger renders.\n- A [Web socket server](https://github.com/BulletTrainHQ/react-native-performance-monitor/blob/master/lib/src/server.js) responsible for passing messages between the graph and the react native component\n- A [Web application](https://github.com/BulletTrainHQ/react-native-performance-monitor/blob/master/components/App.js) that receives websocket values and renders them to a graph\n\nThe following diagram is a brief explanation of the data flow:\n\n\u003cimg src=\"./data-flow.png\"/\u003e\n\n## Contributing\n\nPlease read [CONTRIBUTING.md](https://gist.github.com/kyle-ssg/c36a03aebe492e45cbd3eefb21cb0486) for details on our code of conduct, and the process for submitting pull requests to us.\n\n## Useful links\n\n[Website](https://www.flagsmith.com/)\n\n[Documentation](https://docs.flagsmith.com/)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflagsmith%2Freact-native-performance-monitor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflagsmith%2Freact-native-performance-monitor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflagsmith%2Freact-native-performance-monitor/lists"}