React Native Questions

Refs provide a way to access a DOM node or component instance from within a component. In React, you can create a reference using useRef() hook.

• Inline styling
• StyleSheet
• Styled Components
• Tailwind

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions

justifyContent is used to align the content on the main axis. alignItems is used to align the content on the cross axis.

When flexDirection: "row", Main Axis is left to right

When flexDirection: "column", Main Axis is top to bottom

Use Flatlist when:

• A big list of similar items
• A list of items that you don't know the length

Use Scrollview when:

• A small list of items
• Generic items in a scrollable area

JSX is an HTML like syntax used by React and React Native that allows you to write HTML inside of JavaScript.

Props can be simply the component properties or pieces of data that are passed to the component.

• A native app is an app that is developed for use on a specific platform.
• For example Swift and Objective-C for native iOS apps and Java and Kotling for Android native apps.

React Native is an open-source mobile application framework created by Facebook.

It is used to develop applications for Android, iOS, Web, and UWP by enabling developers to use React and native platform capabilities.

• Code Reusability and Cross-platform compatibility
• Native Look and Feel
• Large Community Support
• Live/ Hot Reloading
• Great Performance 
• Open-source framework

• Async Storage
• SQLite
• Realm DB
• Watermelon DB
• MMKV

If you are building an app that depends a lot on native libraries, you may want to consider building a Native app, because native provides superior performance and gives developers complete access to the capabilities of each device. But you will have two codebases for your app, one for Android and one for iOS.

On the other hand, if your application does not depends a lot on native libraries, you may want to build a React Native app, because it is easier to maintain and it is easier to test.

• ReactJS main focus is Web Development
• ReactJS is a Javascript library
• React uses HTML tags like p,span,div, etc...
• React Native is focused on Mobile Development
• React Native is a mobile framework that uses Javascript Engine
• Both are open-source and supports the JSX syntax

State is a mutable data structure that is used to contain data about a component. A component's state can change over time; whenever it changes, the component re-renders

Props are immutable. State is mutable.

Hot Reloading

• It only reloads the file that changed
• The state of your app is maintained.
• Modify your code without any delay.

Live Reloading

• It reloads the whole app.
• The state of your app is reseted.

AppRegistry is the entry point to your React Native application. It is like the root component of your application.

StyleSheet.create is used to create a stylesheet object that you can use to style your components.

It's useful because moving your styles to a stylesheet object makes it easier to manage, reuse styles, and improve performance.

AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app.

• Camera
• Bluetooth
• Contacts
• Date Picker
• Image Picker

• Use FlatLIst or SectionList to render large lists.
• Remove console statements
• Memoize expensive computations (memo HOC, useCallback and useMemo)
• Cache image locally
• Use WebP image format
• Use Native driver with Animated API
• Use Hermes and ProGuard

Prop drilling is the term for passing data through several nested children components. It can cause issues with component reusability and app performance.

You can use PixelRatio which gives you access to the device's pixel density and font scale, so you can use it to handle different screen sizes, but there is a couple of libraries that provide some tools to handle responsiveness, like:

• react-native-responsive-screen
• react-native-responsive-fontsize
• react-native-auto-size-text

Hooks allow you to write functions that can be used in React components. They are a way to write code in a modular and reusable way, using all the React features.

Container components are the ones that manage the state of the application. They receive the props and pass them to the presentational components.

Presentational components are the ones that receive the props and render the UI. They don't manage or change the state of the application.

It is a hook that is called after the component is rendered for the first time, before the component is unmounted, and also when some of the props in the dependency array changes.

It helps React identify which items have changed, added, or removed, increasing its performance when diffing between the virtual and real DOM

You can implement animations in React Native using the Animated API or react-native-reanimated library

Redux is a state management pattern. It helps you manage the application state, synchronizing the application's state between multiple parts of the application.

It has three main parts:

• Reducers: A function that returns the next state given the current state and an action to handle.
• Actions: An object that describes an event. It has a type property that defines the event, and a payload property that contains the data associated with the event.
• Store: A single source of truth for the application state. It is the only source of truth for the application state.

You can use SVG in React Native using the react-native-svg library

Expo is a platform for building native apps for iOS and Android. It provides a set of tools that simplify the development of React Native apps.

You can use Chrome Dev Tools, react-native-debugger, Flipper or Reactotron to debug React Native apps.

A functional component is a function that returns a React element. A class component is a class that extends React.Component.

useState is a hook that allows you to manage the state of a component. It is a function that returns an array with two elements: the current state and a function to update the state, and it uses useReducer under the hood.

useReducer gives you more control over the state of your component. It takes a reducer function and initial state as arguments and returns the state and dispatch method.

The gesture responder system manages the lifecycle of gestures in your app. A touch can go through several phases as the app determines what the user's intention is.

For example, the app needs to determine if the touch is scrolling, sliding on a widget, or tapping. This can even change during the duration of a touch. There can also be multiple simultaneous touches.

We can say there are three threads that mainly run a React Native app:

• UI thread — this is the native thread used to run Swift/Objective C on iOS devices and Java/Kotlin on Android devices, an application’s UI is manipulated solely on this thread. Here the application’s Views are rendered and users of the app can interact with the OS. 
• JavaScript thread — this is the thread that executes JavaScript separately via a Javascript Engine. An application’s logic – including which Views to display and in what manner they are displayed.

Flux is an architecture for creating data layers in JavaScript applications. It was designed on Facebook along with the React view library.

It places a focus on creating explicit and understandable update paths for your application's data, which makes tracing changes during development simpler and makes bugs easier to track down and fix.

React Native has a lifecycle of three stages:

• Mounting
• Updating
• Unmounting

Mounting is the process of creating a native view and mounting it to the screen.

Updating is the process of updating the native view.

Unmounting is the process of removing the native view from the screen.

With React Hooks we can use useEffect and useState to manipulate and trigger these stages

On iOS simulators and devices, Android emulators and devices React Native uses JavaScriptCore.

useMemo is a React hook that allows you to memoize the return of expensive functions, avoiding calling them on every render.

useCallback is a React hook that returns a memoized version of the callback that only changes if one of the dependencies has changed.

It's useful when you have a component in which the child is re-rendering too often, so the function object returned from useCallback will be the same between re-renders.

memo is a React High Order Component that will cause React to skip rendering a component if its props have not changed.

1. React will merge the object that will pass in setState to the current state of the component
2. The reconciliation process will start.
3. React will construct a new tree of React Elements with your changes (Virtual DOM)
4. React will diff this new tree with the previous element tree (Real DOM)
5. By doing this the UI will be re-rendered by only making updates where absolutely necessary.

InteractionManager allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly.

Redux follows the unidirectional data flow.

So, an action is dispatched to the store's reducer along with the current state of the store. The reducer then returns a new state based on the action. The new state is then passed to the store's subscribers.

Component-Driven Development (CDD) is a development methodology that anchors the build process around components.

It is a process that builds UIs from the “bottom-up” by starting at the level of components and ending at the level of pages or screens.

Virtual DOM is a copy of the whole DOM object.

On the other hand, Shadow DOM creates small pieces of the DOM object which has isolated scope for the element they represent.

A higher-order component transforms a component into another component.

A HOC composes the original component by wrapping it in a container component. A HOC is a pure function with zero side effects.

Old Architecture

• The JavaScript thread.
• The Native/UI thread.
• The bridge.

New Architecture

• The bridge will be replaced by JSI
• Ability to swap the JavaScriptCore with other Engines
• Complete Interoperability between all threads
• Web-like Rendering system
• Time-sensitive tasks can be executed synchronously
• Lazy Loading of Turbo Modules
• Static Type Checking for compatibility between JS and Native Side

The Bridge in React Native is the layer that handles the interaction between JavaScript and the Native modules.

It is primarily a carrier layer that conducts asynchronously grouped feedback messages from JavaScript to Native modules.

Fabric is React Native's new rendering system, conceptual evolution of the legacy render system.

The core principles are to unify more render logic in C++, improve interoperability with host platforms, and unlock new capabilities for React Native.

Development began in 2018 and in 2021, React Native in the Facebook app is backed by the new renderer.

Over the Air updates are updates that are downloaded directly to the device, OTA allows us to send updated Javascript bundles directly to users.

Yes, React-Native creates a tree hierarchy to define the initial layout and creates a diff of that tree on each layout change to optimize the renderings.

But React Native manages the UI updates through couple of architecture layers that in the end translate how views should be rendered while trying to optimize the changes to a minimum in order to deliver the fastest rendering possible.