Rocket Ship

Simon Grimm

Welcome aboard the Rocket Ship, the ultimate podcast voyage into the heart of React Native development with Simon Grimm! Whether you're a seasoned mobile app developer or just starting your journey, this is your go-to destination for all things React Native and Expo. read less
TechnologyTechnology
EducationEducation

Episodes

#055 - Why Companies use React Native, Job Interviews & Open Source Trends with Jamon Holmgren
4d ago
#055 - Why Companies use React Native, Job Interviews & Open Source Trends with Jamon Holmgren
In this conversation, Simon Grimm interviews Jamon Holmgren, co-founder of Infinite Red, discussing the evolution and advantages of React Native in mobile app development. They explore the early adoption of React Native, its comparison with Flutter, the job market for developers, and the importance of open source contributions in the tech industry. Jamon shares insights from his extensive coding experience and the strategic decisions that led Infinite Red to focus on React Native. They delve into the Ignite boilerplate for React Native development, the importance of choosing the right tech stack, and the utility of Reactotron as a developer tool.The discussion also touches on hiring trends in the React Native space, emphasizing the need for cultural fit and the unique hiring process at Infinite Red. In this conversation, Jamon and Simon discuss the importance of building a lasting company culture, essential skills for React Native developers, the significance of self-evaluation and continuous learning, effective networking and job searching strategies in tech, the future of React Native in the context of AI, and the trend towards universal applications while maintaining user experience.Learn React Native - https://galaxies.devJamon HolmgrenJamon X: https://x.com/jamonholmgrenJamon personal: https://jamon.dev/Jamon LinkedIn: https://www.linkedin.com/in/jamonholmgren/Jamon Bluesky: https://bsky.app/profile/jamon.devLinksInfinite Red: https://infinite.red/React Native Radio: https://reactnativeradio.com/Ignite: https://github.com/infinitered/igniteReactotron: https://github.com/infinitered/reactotronTakeawaysInfinite Red was founded through collaboration in open source.React Native was chosen for its cross-platform capabilities.React Native allows for significant code reuse, often exceeding expectations.The community around React Native is a major strength.Open source contributions can accelerate product development.Companies are increasingly investing in open source for strategic benefits.The job market favors React Native developers due to its widespread use.Ignite serves as a valuable resource for React Native developers.Ignite serves as a reliable boilerplate for React Native projects.Choosing the right tech stack can simplify development processes.Reactotron offers unique features that enhance the debugging experience.The UI of Reactotron needs improvement to appeal to developers.Hiring at Infinite Red focuses on cultural fit and seniority.Self-evaluation during the hiring process is crucial for accurate assessment.The job market for React Native developers is becoming more competitive.  Building a company culture that encourages long-term relationships is crucial.Investing in employees and understanding their needs fosters loyalty.React Native developers should focus on performance and state management skills.Self-evaluation helps identify areas for improvement and training needs.Networking is essential for job searching in tech.Active engagement on social media can enhance job prospects.AI will significantly impact the future of software development.Universal applications should prioritize user experience over uniformity.Convergence of tools is beneficial, but UI patterns must remain platform-specific.Continuous learning and adaptation are key to thriving in tech.
#054 - React Native Music Game with Kim Chouard (Skia, NativeWind, Expo AV)
Nov 19 2024
#054 - React Native Music Game with Kim Chouard (Skia, NativeWind, Expo AV)
In this conversation, Simon Grimm interviews Kim Chouard, a developer and educator, about his journey in coding, the challenges of building a multiplatform music game using React Native, and the innovative app Odisei Play that aims to help users learn to play wind instruments. Kim shares insights on the creative aspects of coding, the evolution of React Native, and the technology stack behind Odisei Play, including audio handling and pitch recognition. The discussion highlights the importance of education, creativity, and community in the tech space. In this conversation, Kim Chouard discusses the evolving landscape of development tools, particularly focusing on AI tools and their implications for new developers. He shares insights on the Expo audio package and the challenges faced in audio synchronization within applications. The discussion also delves into the use of Skia for performance optimization in React Native applications, highlighting its capabilities and the need for better documentation. Finally, Kim emphasizes the importance of a web-first approach in React Native development, advocating for a unified community that leverages the strengths of both web and mobile development.Learn React Native - https://galaxies.devKim ChouardKim X: https://x.com/KimChouardKim personal: https://chouard.kim/Kim LinkedIn: https://www.linkedin.com/in/kimchouard/LinksOdisei Music's website (creator of Odisei Play): https://odiseimusic.com/Kim AppJS Talk: https://www.youtube.com/watch?v=PGvhniTxpu4&ab_channel=SoftwareMansionExpo AV: https://docs.expo.dev/versions/latest/sdk/av/Chromatic: https://www.chromatic.com/Storybook: https://storybook.js.org/TakeawaysKim's mission is to leverage games for alternative education.Coding can be a creative process, not just technical.Building a music game requires precise timing and performance.React Native's rapid evolution presents both opportunities and challenges.Odisei Play aims to make learning wind instruments accessible and fun.The app combines elements of gamification and music education.Skia is crucial for the performance of the Odisei Play app.Bluetooth technology can be optimized for real-time music applications.AI tools like Cursor can enhance coding efficiency.Community support is vital for navigating the fast-paced tech landscape. AI tools can accelerate development but may lead to inconsistencies.Expo AV is the only production-ready audio library available now, although it has some limitationNew opportunities of more robust alternatives for audio handling are on the horizon (expo-audio, react-native audio, etc.)Audio synchronization remains a significant challenge in app development.Skia provides a powerful canvas for creating high-performance applications.The integration of web technologies can enhance React Native development.Community collaboration is essential for overcoming development hurdles.Real-time audio recognition is complex and requires advanced algorithms.A web-first approach can simplify the development process for React Native.The React Native community is passionate and supportive.Future advancements in 3D and game development are on the horizon.
#053 - Why Accessibility in React Native matters with Britta Evans-Fenton
Nov 5 2024
#053 - Why Accessibility in React Native matters with Britta Evans-Fenton
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 accessibility, the consequences of neglecting it, and the various tools and features available to enhance accessibility in mobile applications. The discussion emphasizes the need for inclusivity in technology and the potential legal implications of failing to comply with accessibility standards. In this conversation, Simon and Britta Evans-Fenton delve into the complexities of accessibility in React Native applications. They discuss the current state of accessibility resources, practical steps developers can take to improve accessibility in their apps, and the importance of community awareness. Britta emphasizes the need for a mindset shift among developers to prioritize accessibility, considering the growing number of users who will require these features in the future. The conversation also touches on potential improvements for accessibility tools and APIs in React Native.Learn React Native - https://galaxies.devBritta Evans-FentonBritta X: https://x.com/13rittaBritta LinkedIn: https://www.linkedin.com/in/britta-evans-fenton/LinksAccessibility Cheat Sheet: https://scanqr.to/5e270983Crafting an Inclusive Shopify Point of Sale: https://www.youtube.com/watch?v=IoFnQQj4g1AAccessibilityInfo API: https://reactnative.dev/docs/accessibilityinfoTakeawaysAccessibility is crucial for creating inclusive technology.Personal experiences can drive a passion for accessibility.Understanding accessibility benefits everyone, not just those with disabilities.The European Accessibility Act will impose fines for non-compliance.Companies can gain customers by prioritizing accessibility.Accessibility features include screen readers and voice control.There are various layers to accessibility beyond visual impairments.Developers should be aware of both iOS and Android accessibility nuances.Using accessibility tools can enhance user experience for all.Accessibility is about removing barriers for all users. There is a lack of resources on accessibility in React Native compared to web development.Many developers do not consider accessibility because they do not have disabilities themselves.Grouping components can significantly improve accessibility for users with screen readers.Accessibility labels and roles are crucial for making interactive elements understandable.Overloading elements with unnecessary labels can confuse users, especially those with partial vision.Testing apps manually can help identify accessibility issues.Keeping labels concise is essential for effective communication with screen readers.Building a community around accessibility awareness is vital for improvement.The aging population will increasingly require accessible technology.Developers should engage with local organizations to better understand accessibility needs.
#052 - Styling, RSC, Expo, Universal Apps, EAS, Debugging, Strict DOM, React Native Q&A
Oct 22 2024
#052 - Styling, RSC, Expo, Universal Apps, EAS, Debugging, Strict DOM, React Native Q&A
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 components and react-strict-dom.Learn React Native - https://galaxies.devLinkshttps://docs.swmansion.com/react-native-reanimated/https://gorhom.dev/react-native-bottom-sheet/blog/bottom-sheet-v5https://zeego.dev/https://docs.expo.dev/build-reference/variables/https://podcast.galaxies.dev/episodes/051-react-native-brownfield-integration-with-mariusz-staniszhttps://www.youtube.com/watch?v=OT5hQbvGRW8&ab_channel=SimonGrimmhttps://docs.expo.dev/guides/analyzing-bundles/https://docs.expo.dev/review/overview/#internal-distribution-with-eas-buildhttps://docs.expo.dev/eas-update/getting-started/#configure-the-update-channelhttps://tamagui.dev/https://onestack.dev/https://www.nativewind.dev/TakeawaysReanimated is a core library for React Native projects.TypeScript is recommended for better reliability in mobile development.Secret keys should not be stored in the app's code or .env files.Using a server to store sensitive keys is a safer approach.Integrating React Native into existing apps can be challenging but rewarding.Unistyles is a powerful styling solution for React Native.Expo is widely adopted and offers many advantages for new projects.Ejecting from Expo is no longer necessary with pre-builds.Reducing app size often involves optimizing images and assets.EAS updates can streamline workflows for larger teams.
#051 - React Native Brownfield Integration with Mariusz Stanisz
Oct 8 2024
#051 - React Native Brownfield Integration with Mariusz Stanisz
In this conversation, Simon Grimm interviews Mariusz Stanisz, a React Native developer, about the complexities and challenges of Brownfield integration in mobile applications. Mariusz shares his experiences, insights, and the potential benefits of integrating React Native into existing native applications. The discussion covers the technical aspects of integration, communication between native and React Native apps, and the future of Brownfield integration in the React Native ecosystem.Learn React Native - https://galaxies.devMariusz StaniszMariusz X: https://x.com/staszekscp_Mariusz GitHub: https://github.com/staszekscpLinksMariusz AppJS Talk: https://www.youtube.com/watch?v=mOg29UnIMMA&ab_channel=SoftwareMansionReact Native Brownfield Docs: https://reactnative.dev/docs/integration-with-existing-appsReact Native Brownfield Tools: https://github.com/callstack/react-native-brownfieldTakeawaysBrownfield integration allows for gradual migration to React Native.Challenges arise from integrating into existing large native applications.Communication between native and React Native can be achieved through various methods.Brownfield integration is not widely used, making resources scarce.The integration process can speed up development significantly.Hot Reload works well in simple applications during integration.React Native's new architecture presents both opportunities and challenges.Documentation and community support for Brownfield integration need improvement.Testing and debugging can be more complex in Brownfield scenarios.
#050 - New Arch, JSI, Native Modules & Rust with Oscar Franco
Sep 24 2024
#050 - New Arch, JSI, Native Modules & Rust with Oscar Franco
In this conversation, Simon Grimm interviews Oskar Franco about the new architecture in React Native. They discuss the current bridge concept, the need for a new architecture, and the three main components of the new architecture: Fabric, JSI, and CodeGen. They also talk about the challenges and benefits of migrating to the new architecture, the use of host objects, and how to create a new architecture-ready native module with JSI. In this conversation, Oscar Franco discusses different module systems in React Native, including Turbo Modules, Expo Modules, and Nitro Modules. He explains that Turbo Modules came with a new architecture and offer benefits such as code generation and lazy initialization. Expo Modules are easy to initialize but may have performance issues for certain use cases. Nitro Modules, are considered the fastest alternative. Oscar also talks about using Rust in React Native and the benefits it provides, such as memory safety and better tooling. He created the OP-SQLite library, which is claimed to be the fastest SQLite library for React Native.Learn React Native - https://galaxies.devOscar FrancoOscar X: https://x.com/ospfrancoOscar website: https://ospfranco.com/Oscar GitHub: https://github.com/ospfrancoOscar YouTube: https://www.youtube.com/@ospfrancoLinksAbout the New Architecture: https://reactnative.dev/docs/the-new-architecture/landing-pageReact Native Bridgeless Mode for Dummies: https://www.youtube.com/watch?v=K5HBIKAjZ4UReact Native Builder Bob: https://github.com/callstack/react-native-builder-bobOP-Sqlite: https://github.com/OP-Engineering/op-sqliteTakeawaysThe current bridge concept in React Native uses JSON serialization, which can become a bottleneck for performance.The new architecture in React Native includes Fabric, JSI, and CodeGen, which aim to improve performance and provide better interoperability between JavaScript and native code.Migrating to the new architecture can be challenging, especially for larger projects and dependencies that are not updated for the new architecture.The use of host objects allows for the creation of hybrid objects that have both native and JavaScript functionality.Creating a new architecture-ready native module with JSI can be facilitated by using tools like React Native Builder Bob.Turbo Modules offer benefits such as code generation and lazy initialization, but setting them up can be painful.Expo Modules are easy to initialize and portable, but they may have performance issues for certain use cases.Nitro Modules, developed by Marc Rousavy, are considered the fastest alternative.Rust is a memory-safe language with integrated tooling and is becoming popular for writing SDKs for React Native.OP-SQLite is a fast SQLite library for React Native that uses host objects for improved performance.
#049 - Migrating to Expo from RNC CLI & Testing Libraries with Steve Galili
Sep 10 2024
#049 - Migrating to Expo from RNC CLI & Testing Libraries with Steve Galili
Steve Galili, lead software engineer at MyWheels, discusses the transition from the React Native Community CLI to Expo for their car-sharing platform. He highlights the benefits of Expo, such as easier development and maintenance, and the challenges of convincing the team and management to make the switch. Steve also shares insights into the technology stack of the MyWheels app, including a back office admin tool, a B2B portal, and the core app. He mentions the future plan to migrate to Expo router and the importance of prioritizing core functionality during the migration process. Steve also shares the benefits of using Expo, such as faster builds and easier onboarding for web developers. He then highlights the importance of testing in React Native and introduces the React Native Testing repository he created. Steve expresses his excitement for React Server Components in React Native and the potential improvements they can bring to the MyWheels app.Learn React Native - https://galaxies.devSteve GaliliSteve X: https://x.com/vanGalileaSteve website: https://stevegalili.com/Steve GitHub: https://github.com/vanGalilea/LinksMyWheels' Journey from RNC CLI to Expo: https://expo.dev/blog/from-rnc-cli-to-expoMyWheels: https://mywheels.nl/enReact Native Testing: https://github.com/vanGalilea/react-native-testingMock Service Worker: https://mswjs.io/TakeawaysThe transition from React Native Community CLI to Expo can bring benefits such as easier development and maintenance.Convincing the team and management to make the switch to Expo can be a challenge, but highlighting the issues with the current setup and the potential improvements can help.During the migration process, it's important to prioritize core functionality and make decisions based on the impact on users and other apps. Expo offers benefits such as faster builds and easier onboarding for web developers.Front-end Innovation Days provide dedicated time for developers to work on innovative projects.Testing is important in React Native, and the React Native Testing repository provides practical examples and resources.Maestro and MSW are useful tools for testing and mocking API calls in React Native.React Server Components in React Native have the potential to improve app performance and security.
#048 - MLKit & The React Native Paradox with Gant Laborde
Aug 27 2024
#048 - MLKit & The React Native Paradox with Gant Laborde
In this conversation, Simon Grimm interviews Gant Laborde, CIO at Infinite Red, about his role, his sci-fi novel, and the React Native Paradox. Gant explores the reasons behind React Native's success and its consistency and care as key factors. They also touch on the competition between React Native and Flutter, and the challenges faced by Google in maintaining consistency and community support. In this conversation, Gant Laborde discusses the future of AI and its integration into mobile and web projects. He highlights the importance of understanding the business logic and using AI as a feature to enhance the user experience. Gant also explains ML Kit, a Google initiative that provides pre-trained models for image and text recognition, face detection, and more. He emphasizes the need for developers to explore and experiment with AI to discover innovative ways to improve their products. Gant encourages developers to think about how AI can add value and increase the quality of life for users.Learn React Native - https://galaxies.devGant LabordeGant X: https://x.com/GantLabordeGant website: https://gantlaborde.comGant GitHub: https://github.com/GantManLinksThe React Native Paradox (Chain React 2024): https://www.youtube.com/watch?v=jo2LjKJp0aA&list=PLFHvL21g9bk0XOO9XK6d6S9w1jBU6Dz_U&index=6React Native Ignite: Building an AI app: https://www.youtube.com/watch?v=ivfXKYPS6Xw&list=PLSk21zn8fFZDMGB9UCnqz4WqLbnOgLnp5&index=3Infinite Red React Native ML Kit template: https://github.com/infinitered/react-native-mlkit Google ML Kit: https://developers.google.com/ml-kitTakeawaysAs CIO at Infinite Red, Gant's role is to drive innovation and explore new technologies for the company.The React Native Paradox refers to the success of React Native despite other technologies attempting to bring web technology to mobile.Consistency and care are key factors in the success of React Native.Flutter, while popular, faces challenges due to Google's history of discontinuing projects and lack of consistency.The community support and open-source nature of React Native contribute to its longevity and adoption.Google's focus on multiple technologies and lack of consistency can hinder the success of its projects.Long-term success in technology requires multi-generational thinking and community support. AI is becoming an integral part of mobile and web projects, and its integration should focus on enhancing the user experience and adding value to the product.ML Kit, a Google initiative, provides pre-trained models for various AI tasks such as image and text recognition, face detection, and more.Developers should explore and experiment with AI to discover innovative ways to improve their products and solve real-world problems.Understanding the business logic and the problem being solved is crucial for effectively integrating AI into projects.
#047 - Challenges of Building an On-call App with Rory Bain
Aug 13 2024
#047 - Challenges of Building an On-call App with Rory Bain
In this conversation, Simon interviews Rory Bain, a product engineer at Incident.io, about his experience building a multi-platform on-call mobile app using React Native. Rory shares his background in native mobile app development and his transition to React Native. They discuss the reasons for choosing React Native over frameworks like Flutter or Kotlin Multiplatform. Rory also explains the process of developing the on-call app, including the use of Expo and the challenges of implementing push notifications and critical alerts on Android. They also dive into the differences between iOS and Android development, the use of libraries like Tailwind and SWR, the challenges of CI/CD integration, and debugging issues with Expo's EAS.Learn React Native - https://galaxies.devRory BainRory X: https://x.com/rorybainRory GitHub: https://github.com/rorydbainLinksBuilding a multi-platform on-call mobile app: https://incident.io/hubs/building-on-call/building-a-multi-platform-on-call-mobile-appBehind the Flame: Rory: https://incident.io/blog/behind-the-flame-roryincident.io On-call: https://incident.io/on-callVercel SWR: https://github.com/vercel/swrTakeawaysThe on-call mobile app at Incident.io was developed using React Native and Expo, which allowed for quick prototyping and hot reloading.Choosing React Native over other frameworks like Flutter or Kotlin Multiplatform was influenced by the familiarity with JavaScript and web-based tooling, as well as the desire for a native feel on each platform.Implementing push notifications and critical alerts on Android required writing custom native modules and using data-only notifications to wake up the app and display the notifications.The use of Expo and managed projects simplified the development process and eliminated the need for developers to install Android Studio or Xcode. Building a multi-platform on-call mobile app requires considering the differences between iOS and Android development.Libraries like Tailwind and SWR can enhance the development experience and provide consistent styling and API handling across platforms.Integrating CI/CD for mobile apps can be challenging, especially when dealing with versioning and remote updates.Debugging issues with Expo's EAS may require trial and error and using local build processes to identify and resolve problems.
#046 - Developing React Native TV Apps with Giovanni Laquidara
Jul 30 2024
#046 - Developing React Native TV Apps with Giovanni Laquidara
In this conversation, Simon Grimm interviews Giovanni Laquidara, a developer advocate at Amazon, about TV app development with React Native. Giovanni shares his experience working with React Native at Amazon and explains how React Native can be used to develop TV apps. He also discusses the challenges and considerations when developing for TV, such as the 10-foot UI, navigation, and remote control interaction. Giovanni recommends using separate repositories for different TV platforms and emphasizes the importance of designing for readability and accessibility in TV apps. Building TV apps with React Native requires handling fragmentation, focus management, and performance considerations. Integration with TV remotes can be challenging due to different key mappings. Testing on various platforms is crucial. TV apps often focus on streaming media, but there are opportunities for educational, fitness, and gaming apps. The developer experience is improving, and AI services may be integrated into TV apps in the future.Learn React Native - https://galaxies.devGiovanni LaquidaraGiovanni LinkedIn: https://www.linkedin.com/in/glaquidara/Giovanni Twitter: https://x.com/giolaqLinksGiovanni App.js talk: https://www.youtube.com/live/s0wn7qpBoB8?t=12161sBuild Expo apps for TV: https://docs.expo.dev/guides/building-for-tv/React Native tvOS Github: https://github.com/react-native-tvos/react-native-tvosIgniteTV template: https://github.com/react-native-tvos/IgniteTVTakeawaysReact Native can be used to develop TV apps for platforms like Android TV, Fire TV, and tvOS.Developing for TV requires considering the 10-foot UI, where users are typically three meters away from the screen.TV app navigation should be easy and seamless, with a focus on simplicity and avoiding complex interactions.Separate repositories are recommended for different TV platforms due to the fragmentation and differences in SDKs.Designing for readability and accessibility is crucial in TV app development. Building TV apps with React Native requires handling fragmentation, focus management, and performance considerations.Testing on various platforms is crucial for TV app development.TV apps often focus on streaming media, but there are opportunities for educational, fitness, and gaming apps.The developer experience for TV app development is improving.AI services may be integrated into TV apps in the future.Deployment to app stores follows similar processes as mobile apps.
#045 - React Native Apps for Seafarers with Gabriel Dierks
Jul 16 2024
#045 - React Native Apps for Seafarers with Gabriel Dierks
In this conversation, Gabriel Dierks, a lead mobile engineer at Kadmos, discusses the challenges and solutions related to mobile app development for seafarers. He also shares insights on the technology stack, release pipelines, and user experience considerations. The conversation covers topics such as the specific niche of the shipping industry, the challenges faced by seafarers, the technology stack used at Kadmos, and the release pipeline for app updates. The conversation dives further into app deployment, versioning, fingerprint comparison, Huawei App Gallery, and mobile app integration. It also delves into the challenges of integrating Huawei push service, and the connection between the web application and the mobile app for card activation. The discussion highlights the unique market focus of Kadmos and the challenges of catering to a different market.Learn React Native - https://galaxies.devGabriel DierksGabriel Twitter: https://x.com/GarioTVLinksApp.js talk: https://www.youtube.com/live/MdCn0Iq0ucU?si=8-AJoLnOsC8StM6w&t=26324Kadmos: https://www.kadmos.io/Huawei App Gallery: https://appgallery.huawei.com/TakeawaysInsights into the challenges and solutions of mobile app development for seafarersUnderstanding the technology stack and release pipeline for app updatesConsiderations for user experience in the shipping industry niche Insights into the deployment process for mobile apps, including versioning and fingerprint comparison.Challenges and considerations for integrating with the Huawei App Gallery and Huawei push service.The connection between web application and mobile app for card activation and the unique market focus of Kadmos.The impact of market differences on app development and the importance of a seamless fintech experience for users.
#044 - Yoga, Layouting and New Architecture with Delphine Bugner
Jul 2 2024
#044 - Yoga, Layouting and New Architecture with Delphine Bugner
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.devDelphine BugnerDelphine Twitter: https://twitter.com/DelphineBugnerDelphine Github: https://github.com/delphinebugnerLinksDelphine "The Yoga Enigma" talk in Berlin: https://www.youtube.com/watch?v=LU3vK3IbprYYoga: https://www.yogalayout.dev/TakeawaysYoga 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.
#043 - React Native Best Practices Template with Youssouf El Azizi
Jun 18 2024
#043 - React Native Best Practices Template with Youssouf El Azizi
Yousouf El-Azizi, mobile tribe lead at Obytes and core team member of the GeeksBlaBla community in Morocco, discusses his path into technology and becoming a React Native developer. He also talks about his role as the leader of the mobile tribe at Obytes and the benefits of using their open-source starter template. The template, which has gained popularity on GitHub, includes Expo, TypeScript, Tailwind CSS, Husky, Lint-staged, Expo Router, React Query, React Hook Form, and localization with I18n. The conversation covers various topics related to the Obytes Starter template for React Native. The main themes include the use of Tailwind CSS, the benefits of using the template, the integration of GitHub actions for automation, the use of React Query Kit and TanStack Query for data fetching, the use of Maestro for end-to-end testing, and the importance of documentation. The conversation also touches on the negative aspects of social media and the benefits of following the right people on GitHub.Learn React Native - https://galaxies.devYoussouf El AziziYoussouf Twitter: https://twitter.com/ElaziziYoussoufYoussouf Website: https://elazizi.com/LinksObytes starter: https://starter.obytes.com/GitHub Feed is underrated: https://elazizi.com/posts/github-feed-is-underrated/TakeawaysThe mobile tribe at Obytes follows the Spotify model of managing teams, with tribes focusing on technology and squads focusing on projects.The Obytes starter template is an opinionated template that helps align teams and projects, providing a strong foundation and best practices.The template includes Expo, TypeScript, Tailwind CSS, Husky, Lint-staged, Expo Router, React Query, React Hook Form, and localization with I18n.Yousuf discusses the decision-making process behind adopting technologies for the starter template, such as Expo Router and Native Wind. The Obytes Starter template for React Native is designed to incorporate best practices and provide a solid foundation for new projects.Tailwind CSS is a popular framework for styling in React Native and is widely used in the React Native ecosystem.GitHub actions are used in the template for automation, including validation, testing, and building the app for different environments.React Query Kit and TenStack Query are used for data fetching and provide an easy way to manage queries and mutations.Maestro is used for end-to-end testing and provides a simple and intuitive way to write tests.Documentation is an important aspect of the template and guides how to use the various features and technologies.Following the right people on GitHub can be a valuable source of learning and discovering new projects and best practices.Social media platforms like Twitter can be overwhelming and cause anxiety, and it's important to be mindful of the time spent on them.
#042 - React Native is alive! App.js Recap with Áron Berezkin
Jun 4 2024
#042 - React Native is alive! App.js Recap with Áron Berezkin
In this episode, Simon and Aaron recap the App.js conference and discuss the key themes and talks. They cover topics such as the state of Expo, the recommended framework for React Native, the importance of iteration speed, the introduction of Expo Orbit and Expo Atlas, the use of React Server Components, real-time 3D applications, Brownfield app integration, and local-first applications. They also highlight the challenges and benefits of using feature flagging and building native libraries. The React Native community is praised for its diversity of skills and the inspiration it provides. The future of React Native includes updates to Expo SDK, the release of React Server components, and the exploration of universal apps and low-code tools.Learn React Native - https://galaxies.devÁron BerezkinAron Twitter: https://twitter.com/AronBerezkinAron Blog: https://www.aronberezkin.com/Aron Github: https://github.com/AronBeTakeawaysExpo is the recommended framework for React Native and focuses on improving iteration speed.Expo introduced Expo Orbit, a tool for managing EAS builds, and Expo Atlas, a bundle analyzer for JavaScript bundles.Evan Bacon showcased the use of React Server Components with AI integration, demonstrating the potential of server-driven native UI.Mariusz shared his experience with Brownfield app integration, highlighting the challenges and successes of integrating React Native into existing iOS and Android applications.Søren Brammer-Schmidt and Brent Vatne discussed local-first applications and the use of Prisma for local data management and synchronization.Fernando Rojo built an open-source native library called Galleria for image viewing and zooming, emphasizing the importance of not being afraid to build native libraries. Don't be afraid to build native modules in React NativeEducate yourself about accessibility and make small changes to improve the experienceThe React Native community is diverse and inspiringUpdates to Expo SDK and the release of React Server components are expected
#041 - The Evolution of JavaScript Frameworks with Maximilian Schwarzmüller
May 21 2024
#041 - The Evolution of JavaScript Frameworks with Maximilian Schwarzmüller
In this conversation, Simon Grimm interviews Maximilian Schwarzmüller, a renowned online course creator, about his experience of creating courses and his vast knowledge of various technologies. They discuss the current state of JavaScript frameworks like Angular, React, and Vue, as well as emerging frameworks like Solid.js and Svelte. They also touch on the Node.js environment and the popularity of Express. The conversation then shifts to mobile app development, with a focus on Ionic and React Native. They explore the strengths and limitations of these frameworks and their relevance in the current market. The conversation explores the pros and cons of cross-platform development frameworks, including Ionic, React Native, and Flutter. They discuss their personal preferences and experiences with each framework, highlighting the advantages and limitations of each. They also touch on the future of cross-platform development and the importance of staying up to date with the latest technologies. The conversation concludes with tips for effective learning, emphasizing the importance of building projects and solving real-world problems.Learn React Native - https://galaxies.devMaximilian SchwarzmüllerMaximilian Twitter: https://twitter.com/maxedapps Maximilian YouTube: https://www.youtube.com/@maximilian-schwarzmuellerMaximilian Podcast: https://maximilian-schwarzmueller.com/podcast/Udemy courses: https://www.udemy.com/user/academind/LinksAcademind: https://academind.com/coursesAcademind YouTube: https://www.youtube.com/@academindTakeawaysThe JavaScript framework ecosystem is evolving, with established frameworks like React and Angular continuing to innovate and improve.State management is a key area of focus, with many frameworks adopting signals as a way to manage state more efficiently.There is a trend towards full stack development, where the boundaries between front-end and back-end become less clear.Express remains a popular choice for building APIs in the Node.js environment, despite the emergence of newer frameworks.Ionic and React Native are both viable options for mobile app development, with Ionic being more focused on web technologies and React Native providing a more native-like experience. Ionic, React Native, and Flutter are popular cross-platform development frameworks, each with its own advantages and limitations.Ionic is straightforward to work with and suitable for building less complex applications, but it may lack certain features and performance compared to React Native.React Native and Flutter offer the advantage of compiling code to native UI components or machine code, potentially resulting in better performance and a more integrated development experience.The choice between cross-platform and native development depends on the specific requirements of the project and the need for platform-specific features and performance.The future of cross-platform development looks promising, with ongoing advancements in frameworks like React Native and the emergence of new contenders like Tori.To learn effectively, it's important to build projects and solve real-world problems, rather than relying solely on tutorials and courses.
#040 - From Next.js to React Native with Kitze
May 7 2024
#040 - From Next.js to React Native with Kitze
In this conversation, Simon and Kitze discuss various topics including Kitze's experience as a React Native developer, his encounter with Gary Vee, and his popular product Sizzy. The conversation revolves around the challenges of building customizable UI components in React Native and the lack of comprehensive libraries. Simon and Kitze discuss their frustrations with existing libraries and the need for better primitives and components. The conversation then shifts to the Benji app and the process of building a native app from scratch. In this conversation, Kitze and Simon discuss various topics related to app development, including the challenges of building a native app with React Native based on an existing Next.js project, the use of Tailwind CSS, and the performance issues on Android. Learn React Native - https://galaxies.devKitzeKitze Twitter: https://twitter.com/thekitze Kitze Website: https://www.kitze.io/ LinksSizzy: https://sizzy.co/Zero to shipped course: https://www.zerotoshipped.com/Benji: https://benji.so/Gluestack: https://gluestack.io/TakeawaysThe choice of libraries in development can greatly impact productivity and the developer experience.The React Native ecosystem offers a variety of tools and libraries that can enhance the development process.The challenges of building and maintaining a successful product or project require dedication, focus, and continuous improvement.The lack of comprehensive UI component libraries in React Native can be frustrating and lead to the need for custom solutions.Having better primitives and components in React Native would make app development easier.Being open about not having all the answers shouldn't discourage people from teaching.Building a native app from scratch can be challenging, especially when transitioning from a web app.Finding the right tech stack and considering the need for a native app early on can save time and effort.Building a native app with React Native can be challenging, especially when trying to maintain consistency between the web and mobile versions.Tailwind CSS offers a wide range of components and resources, making it a popular choice for app development.Android performance can be a pain point in React Native development, requiring optimization and testing on Android devices.Integrating Apple Health data and implementing in-app purchases can be complex tasks that require careful consideration and planning.
#038 - Expo EAS and 100 Snakes with Jon Samp
Apr 16 2024
#038 - Expo EAS and 100 Snakes with Jon Samp
In this episode, Jon Samp, head of product at Expo, shares his background in herpetology research and how he transitioned into programming. He discusses his experience developing the Codecademy app with Expo and the challenges he faced. John also talks about his other apps, including the Single Origin coffee timer and WordCheck for Scrabble. He emphasizes the ease of creating hobby apps with React Native and the importance of using native elements for good design. The conversation concludes with a discussion on EAS and how teams can work better together. Jon highlights the improvements being made to the onboarding experience and the Expo dashboard, and the focus on workflow improvements and release management. He also shares future plans for EAS, including enhancing team coordination and communication and improving device management and notifications.Learn React Native - https://galaxies.devJon SampJon Twitter: https://twitter.com/jonsampJon Website: https://jonsamp.devLinksExpo EAS: https://expo.dev/easTakeawaysReact Native and Expo make it easy to develop hobby apps without a large team or production process.Using native elements and animations in React Native apps can enhance the user experience and make the app feel more polished.EAS (Expo Application Services) simplifies the development and deployment process for React Native apps.EAS allows for side-loading apps on iOS and Android, making it easy to distribute apps for development purposes.The easiest way to distribute iOS apps is to use EAS device calling create, which generates a QR code that can be scanned to install a provisioning profile.EAS supports updates and over-the-air updates, allowing for easy distribution of app updates to users.EAS provides a faster and more convenient way to build and distribute private applications compared to using Xcode and Android Studio.Future plans for EAS include improving the onboarding experience, enhancing team coordination and communication, and adding features for release management and workflow improvements.
#036 - React Native Apps using Web3 & AI with Nader Dabit
Apr 2 2024
#036 - React Native Apps using Web3 & AI with Nader Dabit
In this episode, Simon interviews Nader Dabit, a developer and expert in AI and Web3. Nader shares his background and explains why he left his job at AWS to focus on Web3. He discusses the current state of Web3 and AI, highlighting the job market and opportunities in the blockchain space. Nader also explains the concept of EigenLayer and its role in providing security for new blockchain networks. He emphasizes the importance of practical use cases in Web3 and discusses the potential for decentralized social networks. In this conversation, Nader Dabit and Simon discuss the intersection of Web3 and React Native, as well as the practical applications of AI in mobile app development. Learn React Native - https://galaxies.devNader DabitNader Twitter: https://twitter.com/dabit3Nader YouTube: https://www.youtube.com/c/naderdabitWilliam Github: https://github.com/dabit3LinksEigenlabs: https://www.eigenlabs.org/Bluesky: https://bsky.app/Farcaster: https://www.farcaster.xyz/Warpcast: https://warpcast.com/Lens Protocol: https://www.lens.xyz/React Native AI: https://github.com/dabit3/react-native-aiTakeawaysWeb3 and AI offer different opportunities and challenges, with Web3 currently having a more promising job market.Stablecoins are a powerful use case in Web3, providing a stable currency for international transactions.Decentralized social networks are emerging as a practical use case in Web3, offering public, immutable infrastructure and increased user control.The complexity and terminology of Web3 can be overwhelming, but embracing the chaotic and fast-paced environment can lead to success.Web3 offers exciting possibilities for building decentralized apps and social networks.React Native provides a powerful framework for developing apps on Web3.AI APIs make it easy to incorporate AI capabilities into mobile apps.Differentiation and rapid iteration are key to success in the Web3 space.