Q 1 : What is React Native Apps?
React Native Apps are not web applications. These types of apps are running on mobile devices, and cannot load over the browser. Also, they are not hybrid apps that build over Ionic, Phonegap, etc. which can run over WebView component. They are the real native apps built in a single language JavaScript with the native components to run on mobile devices.
Q 2 : Are all React components usable in React Native?
React web components use DOM elements (ex. div, h1, table, etc.) to display on UI. But, these components are not supported in React Native. You will need to find libraries or components which is made specifically for React Native. It is very hard to find that there are components available, which support both. But, it should be easy to figure out that the given components are made for React Native or not. Thus, it makes clear that all components are not usable in the React Native.
Q 3. : Can we combine native iOS or Android code in React Native?
Yes, we can combine the native iOS or Android code with React Native. It can combine the components written in Objective-C, Java, and Shift.
Q 4. : Do we use the same code base for Android and iOS?
Yes, we can use the same codebase for Android and iOS, and React takes care of all the native component translations. For example, a React Native ScrollView use ScrollView on Android and UiScrollView on iOS.
Q 5. : React Native Interview Questions For Freshers
The virtual DOM is a concept that lies at the heart of React Native and React. The virtual DOM is a JavaScript representation of the actual DOM (the tree of HTML elements in the browser). React uses the virtual DOM to update the user interface in a more efficient manner than manipulating the actual DOM directly.
In React Native, the virtual DOM provides the same benefits as in React: improved performance and optimized updates. The virtual DOM is able to identify and update only the elements that have changed, rather than reloading the entire DOM tree.
Key Benefits of Virtual DOM
- Faster updates: Only update the elements that have changed, rather than the entire DOM tree.
- Improved performance: The virtual DOM reduces the amount of work the JavaScript engine has to do to update the UI.
- Better abstraction: The virtual DOM allows React to provide a higher-level API for building user interfaces.
Q 6. : What is the difference between React Native and React?
React is a JavaScript library for building user interfaces, while React Native is a framework for building native mobile applications. Although React and React Native share many similarities, there are some key differences between the two:
- React is used for building web applications, while React Native is used for building native mobile apps.
- React uses the virtual DOM to update the UI, while React Native uses native components instead of the virtual DOM.
- React uses CSS for styling, while React Native uses a styling system that is similar but not identical to CSS.
In summary, React and React Native share the same core principles, but are optimized for different use cases and environments.
Q 7. : How does React Native handle styling and layout?
React Native uses a styling system that is similar but not identical to CSS. Style sheets in React Native are written in JavaScript, rather than CSS.
React Native also includes a set of layout and positioning tools, such as flexbox, to help developers arrange and size their components. The layout and styling in React Native are designed to provide a native look and feel to the user interface.
Q 8. : What are the benefits of using React Native?
React Native provides several benefits over traditional native mobile development and hybrid development approaches:
- Cross-platform development: Develop for both iOS and Android using the same code base.
- Improved performance: Use native components for the best performance and user experience.
- Familiar development environment: Write in the familiar React programming language and utilize its components.
- Faster development: Use hot reloading to preview changes instantly without recompiling the entire app.
- Reusable code: Reuse code across platforms and take advantage of the modular architecture of React.
Q 9. : What is the role of React Native bridge?
The React Native bridge is the mechanism that allows communication between the JavaScript code and the native platform code. The JavaScript code, which is written in React Native, runs in a separate JavaScript thread, while the native platform code runs on the device’s main thread. The React Native bridge is responsible for passing data and messages between the JavaScript code and the native platform code.
The bridge allows the JavaScript code to call native platform APIs and interact with native components, and it also allows the native platform code to call JavaScript functions and access JavaScript data. This enables the React Native app to access native functionality, such as camera, accelerometer, and other device APIs, as well as to display native UI components, such as buttons, text inputs, and others.
Q 10. : How does React Native handle different screen sizes?
React Native uses Flexbox to handle the layout of the UI elements. Flexbox provides a flexible and scalable layout system that can be used to adapt the UI to different screen sizes. In Flexbox, you define the direction of the main axis (row or column), and then you can align and distribute space among the items along the main axis.
For example, you can use the flex property to control the width or height of a component relative to its siblings, or you can use the alignSelf property to control the alignment of a component along the cross axis.
By using Flexbox, React Native provides a flexible and scalable layout system that can be used to create responsive UI that looks great on any screen size.
Q 11. : What is the role of Flexbox in React Native?
Flexbox, short for Flexible Box Layout, is a layout model in React Native that provides a flexible and scalable way to arrange UI elements in a two-dimensional space. It enables developers to specify the direction of the main axis (row or column), and then align and distribute space among the elements along the main axis.
Flexbox is designed to handle the layout of UI elements in a flexible and scalable manner, and it is particularly well-suited for creating responsive UI that looks great on any screen size. In React Native, Flexbox is used as the default layout engine, and it provides a comprehensive set of tools for controlling the layout of UI elements.
Q 12. : What is the role of components in React Native?
In React Native, components are the building blocks of the user interface. They define what to display on the screen and how it should look and behave. Components are written in JavaScript and can receive and manage props, and keep their own state.
Each component is isolated and does not affect the others, which makes it easier to manage and maintain the code. Components can also be combined and reused, making it possible to create complex UI elements from smaller, reusable parts.
Q 13. : What is the difference between TextInput and Text components in React Native?
The TextInput component is used for entering and editing text. It provides a text input field that can be used to gather text input from the user.
The Text component, on the other hand, is used for displaying text that is not editable by the user. It provides a way to display static text in your app.
In other words, TextInput is used for input fields while Text is used for labels or simple text displays.
Q 14. : What are the different ways to store data in React Native?
In React Native, there are several ways to store data, including:
- AsyncStorage: AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value data store that is global to the app. It can be used to store data that needs to persist across app launches, such as the user’s authentication token.
- Realm: Realm is an open-source, object-oriented database that can be used to store data in React Native. It provides a performant alternative to SQLite and is well suited for handling large amounts of structured data.
- SQLite: SQLite is a software library that provides a relational database management system. It can be used to store data in React Native and can be integrated with the app through a library such as react-native-sqlite-storage.
- Firebase Realtime Database: Firebase Realtime Database is a cloud-hosted NoSQL database that allows data to be stored and synchronized across multiple devices in real-time. It can be used to store data in React Native and provides a simple way to persist data in the cloud.
In general, the choice of data storage solution will depend on the specific needs of the app, including the size and complexity of the data, the requirement for real-time synchronization, and the need for data persistence across app launches.
Q 15. : Do we use IDE for React Native?
We use IDE for React Native such as: WebStorm, Visual Studio Code, Atom and so on.
Q 16. : What is Flexbox?
Flexbox short for the Flexible Box Module is both a one-dimensional layout and a method whose function is to distribute space between elements within the interface and create practical alignment capabilities. It works with the layout in one dimension at a time and it can occur as a column or row.
