Description
Delphine Bugner, Mobile Tech Lead at BAM, discusses the inner workings of Yoga in React Native. Yoga is responsible for positioning components on the screen based on their dimensions and styling props. Delphine emphasizes the importance of understanding how things work under the hood and why they were designed that way. She shares her uncommon journey into becoming a React Native tech lead and her passion for exploring the technical aspects of technology. She also discusses the architecture of Yoga and how it works under the hood, including the translation of JSX into native views, the creation of shadow nodes and Yoga nodes, and the communication between JavaScript and native code. The conversation concludes with a discussion about the future of Yoga and its alignment with React on the web.
Learn React Native - https://galaxies.dev
Delphine Bugner
Delphine Twitter: https://twitter.com/DelphineBugnerDelphine Github: https://github.com/delphinebugnerLinks
Delphine "The Yoga Enigma" talk in Berlin: https://www.youtube.com/watch?v=LU3vK3IbprYYoga: https://www.yogalayout.dev/Takeaways
Yoga is responsible for positioning components on the screen based on their dimensions and styling props in React Native.Understanding how things work under the hood and why they were designed that way is important for developers.Yoga was created as a replacement for CSS in React Native and provides a common platform-agnostic layouting solution.The architecture of Yoga involves the translation of JSX into native views, the creation of shadow nodes and Yoga nodes, and the communication between JavaScript and native code.The new architecture in React Native improves code maintenance and performance.View flattening is a concept in Yoga that minimizes unnecessary containers in the view hierarchy.Debugging Yoga can be done by using breakpoints in C++ to understand the algorithm and identify the source of bugs. The new architecture in React Native brings more conformity with the web and allows for features like suspense and transitions that were not possible before.Working with native modules in React Native is not as difficult as it may seem, and developers can use tools like Bob or Create React Native Library CLI to simplify the process.Expo provides a more maintained and active ecosystem compared to the community libraries, making it a good choice for new projects.Yoga is continuously evolving to align React Native with the web, and future updates will offer more configuration options for developers.
In this conversation, Simon Grimm and Britta Evans-Fenton discuss the importance of accessibility in React Native and mobile development. Britta shares her personal journey into accessibility, motivated by her grandmother's experience with macular degeneration. They explore the definition of...
Published 11/05/24
What are my top 3 libraries? Which styling solution is the best? How can we build better universal apps for web, iOS and Android? In this special Q&A episode I answered tons of your questions about the current state of React Native, Expo and the future improvements like RSC or Expo DOM...
Published 10/22/24