Hey React Native 🩵 Developers,
One of the biggest and most exciting conferences, App Js Conf 2024 on React Native, organized by Software Mansion with Expo as the main partner, has recently concluded. The three-day event started on May 22nd, filled with exciting talks. One of the most exciting talks was on ❝ React Native IDE is now open ❞. Today, we will explore more details about it! 🚀
On stage, Krzysztof Magiera, co-founder of Software Mansion, has announced the open beta program for React Native IDE. It has been 9 months since they began working on it, and they have made significant progress.
When someone starts to build a React Native app using the React Native CLI, they need to perform lots of tasks according to the React Native website to set up the development environment. For example, tons of commands must be installed, CocoaPods must be set up, and Ruby must be set up with correct versions, among other complex tasks, are involved.
React Native IDE made it easy for react native developers to set up the environment. The IDE is a Visual Studio Code extension that only runs on macOS now. Below is a screenshot from Visual Studio Code.
Let’s explore the most exciting features of the React Native IDE.
- Snap Recording
- Component Inspector
- Access logs easily
- Navigation made easier
- Better Components preview
- Break Points without any other application 🚀
With the React Native IDE, you can record a video capturing 5-7 seconds of the history of your previous interactions within the app, as shown below.
You can left-click on any JSX component displayed on the device, as shown below, to inspect the component’s <View/> hierarchy. Clicking on the component will open the corresponding code in VSCode.
React Native IDE truly enables you to open all your logs in VSCode, as illustrated below.
When you click on the “Logs” button at the top right, it will open the log menu at the bottom. Additionally, you can navigate to the corresponding code from each log by clicking on the box indicated in green.
React Native IDE has greatly simplified navigation, as shown below. You can view all your previous navigation history directly from the IDE. The example below uses the Expo router, which is a file-based routing system.
React Native IDE offers a preview() method that allows you to get a preview of the component you are developing, as shown below 🚀.
Another exciting feature is that React Native IDE supports breakpoints. You can even add breakpoints inside native code 🔥.
I hope you enjoyed reading it. It would be really great if you could consider giving it a STAR ⭐️.
I'm Anis, Sr. React Native Engineer and the author of React Native Advanced Guide Book with 1.7K STAR ⭐️. Over 5 years in React Native and Full Stack, I’ve built numerous production-grade apps. You can 🩵 CONNECT me in X for any consultation.