Session 03_04-Working with React Native.pptx
- 1. Working with React Native
- 2. 01/18/2025 2 Objectives ◆ Understanding how React Native works ◆ Understanding React Native component life cycle phases ◆ How to creating components in React Native ◆ Host platform APIs
- 3. How does React Native work?
- 4. 01/18/2025 4 How does React Native (RN) work? ◆ React Native allows the development of apps consisting of JS code and native by making the bridge between an app and a target platform. ◆ When JavaScript has been running along with some native code, React Native’s bridge system leverages the React library and transfers the components’ hierarchy to the mobile device view.
- 5. 01/18/2025 5 How does RN work? (contd.)
- 6. 01/18/2025 6 How does RN work? (contd.) ◆ The current React Native architecture is based on 3 major pillas: JavaScript Thread: • This is the place where the entire JavaScript code is placed and compiled. • When the app is bundled for production, the JavaScript Core runs the bundle when the user starts the app. Native Thread: • This is the place where the native code is executed. This component handles the user’s interface and ensures seamless communication with the JS thread whenever the app needs to update the UI, run native functions, etc. • All the native modules lie in the startup, which means they will always be bundled if the user wants to access them.
- 7. 01/18/2025 7 How does RN work? (contd.) ◆ Shadow Thread: It is the place where the layout of your application is calculated. This cross-platform framework handles this task with the help of Facebook's own layout engine called Yoga. It transforms flexbox layouts, calculates them and sends them to the app’s interface.
- 8. 01/18/2025 8 Process involved in working of RN 1. At the beginning of the application, the main cable starts working and starts loading JS loads. 2. If the JavaScript code is successfully uploaded, the main thread sends it to another JS thread because when JS performs heavy calculations, it temporarily installs the cable, and the UI string will not suffer at any time. 3. When the React starts delivering, the Reconciler starts to “vary”, and when it produces a new DOM (structure), it sends changes to another series (Shadow Cable). 4. The shadow string calculates the structure and sends the parameters/properties of the structure to the main sequence (UI). (Here you are wondering why we call it “shadow”? Because it produces shade nodes.) 5. Since only the main thread is able to render something on the screen, the shadow string must send the generated structure to the main series, and then the UI renders.
- 9. 01/18/2025 9 RN Features ◆ NPM repository support NPM is a repository of prefabricated libraries that engineers can use to work with the React Native framework. This will make the development process much faster, allowing React Native developers to download code patterns from the NPM library. ◆ Reuse of code This is a key feature of any different platform development framework. However, the % of code you can reuse varies depending on the platform. In the case of React Native, you can apply the entire code to all different forums. This will save a lot of time and reduces costs.
- 10. 01/18/2025 10 RN Features (contd.) ◆ Flexible planning language Language planning and its feasibility play a significant role in the functioning and success of the framework. Learning becomes faster and more accessible when the primary language becomes the most common framework for cross-field development. ◆ A Powerful Community The React Native framework became popular among engineers worldwide soon after its launch in 2015. The community has been growing and contributing to an open-source framework, expanding and accelerating its operations. This feature protects the future of the React Native cross-platform framework and makes it attractive to other engineers.
- 11. 01/18/2025 11 RN Features (contd.) ◆ Supports 3D Group Libraries Integration with 3d team libraries empowers developers with out-of-the-box solutions and increases development opportunities. ◆ Use High Performance in Mobile Environments React Native developers can also use more code in the mobile space than any other, making it the fastest platform for mobile apps.
- 12. 01/18/2025 12 RN Features (contd.) ◆ HMR (Hot Module Replacement) Save time by updating only modified code. Maintains application status (lost during reload). Updates the browser as soon as changes are made to the JS code. ◆ UI-rich Skills The framework has special render capabilities as well as many UI libraries for all types of applications.
- 13. React Native component life cycle phases
- 14. 01/18/2025 14 RN component life cycle phases ◆ A component’s life cycle in React Native can be divided into four phases.
- 15. 01/18/2025 15 RN component life cycle phases (contd.) 1. Mounting: In this section, a partial model is created and installed in the DOM. 2. Updating: In this phase, the reaction component is said to be born and begins to grow with the latest updates. 3. Unmounting: At this stage, part of the react is removed from the actual DOM. 4. Error Handling: It is called in case any error occurs while assigning a part.
- 16. 01/18/2025 16 RN component life cycle phases - methods (contd.)
- 17. 01/18/2025 17 Mounting phase ◆ constructor() The first method called the life cycle of the traditional part of the reaction. It is used to start the part with the original shape. In the builder no UI rendering is performed. It gets props as an argument and we can set the situation this way. ◆ static getDerivedStateFromProps() It is called just before the delivery method, both at the first launch and the next update. We could not update the status within this method. If we want to review the situation, we have to come back, and another object of opposition is also empty.
- 18. 01/18/2025 18 Mounting phase (contd.) ◆ render() It is the only method required in the reaction component. render () method is pure function which means it does not change the state. It returns the same result every time it is requested and does not link directly to the browser. ◆ componentDidMount() This method is called when the native part of the react has finished supplying. It is a wonderful place to upload data from remote storage and update the status as a result. This will update the UI of our mobile screen.
- 19. 01/18/2025 19 Updating Phase ◆ static getDerivedStateFromProps(): This method is used whenever any changes in the situation or props occur. ◆ shouldComponentUpdate() It is used before the dedication when new buildings or circuits are adopted. The default value for this method is approximate. This method is not used during the first offer or when forceUpdate() is used. ◆ Render(): Whenever there is any change in the state or props then render methods are used again.
- 20. 01/18/2025 20 Updating phase (contd.) ◆ getSnapshotBeforeUpdate() This method is used before the newly released output. Allows our component to retrieve certain information from DOM before it is modified. ◆ componentDidUpdate() It is used immediately after partial rewriting is complete. It is important to note that it is not called the first offer.
- 21. 01/18/2025 21 Unmounting phase ◆ componentWillUnmount(): Used when a component is removed from DOM. We can perform cleanup tasks in this way, such as doing illegal things, canceling an ongoing network request. Error Handling Phase ◆ getDerivedStateFromError(): It is used whenever an error occurs while delivering. It detects an error as a parameter and returns the value to update the status. ◆ componentDidCatch(): Tis is requested if any error is cast on the genealogy.
- 22. Creating components in React Native
- 23. 01/18/2025 23 React Native - Class Component ./common_components/New.js App.js
- 24. 01/18/2025 24 React Native - Class Component (contd.) ◆ In the code above, we imported the React and Component from the react library. These are used to form part. Then, we introduce a Text component which is an integral part of the react-native. ◆ Then we create a classroom with a new name that expands the building phase. Then we present the Text component as a response to a new class, which is returned that way. ◆ Then we export New class as default.
- 25. 01/18/2025 25 React Native - Function Component ./common_components/New.js App.js
- 26. 01/18/2025 26 React Native - Function Component (contd.) ◆ In the code above, we announced function New that restores the text feature. ◆ Remember, any part of the return function is provided as a response. ◆ Therefore, no need to use the render() method within it.
- 27. 01/18/2025 27 React Native - Component on iOS and Android iOS Android
- 29. 01/18/2025 29 Host Platform APIs ◆ When we create a cross-platform application, we want to reuse as much code as possible. ◆ Circumstances may arise where it makes sense that the code is different, for example, we may want to use different visual components for Android and iOS. ◆ React Native provides a Platform module that detects the platform on which the application operates.
- 30. 01/18/2025 30 Using Platform module - 1
- 31. 01/18/2025 31 Using Platform module - 2 ./common_components/ComponentIOS.js ./common_components/ComponentAdroid.js
- 32. 01/18/2025 32 Using Platform module – 2 (contd.) ./common_components/ComponentIOS.js
- 33. 01/18/2025 33 Summary ◆ In this session, we learned the following: About how React Native works. Understanding to rendering life cycle. Creating components in React Native host platform.