Prev Next

Angular / React native

Could not find what you were looking for? send us the question and we would be happy to answer your question.

What is React-native framework?

React Native is an open-source framework for building Android and iOS applications using React and the app platform's native capabilities. With React Native, you use JavaScript to access your platform's APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code.

The concepts are based on react framework. React Native runs on React, a popular open-source library for building user interfaces with JavaScript.

Mention a few core components in React-native?

Core Component include,

  • <View>, a container that supports layout with flexbox, style, some touch handling, and accessibility controls.
  • <Text>, displays, styles, and nests strings of text and even handles touch events.
  • <Image>, displays various types of images.
  • <ScrollView>, a generic scrolling container that can contain multiple components and views.
  • <TextInput>, allows the user to enter text.
What is JSX?

React and React Native use JSX, a syntax that lets you write elements inside JavaScript like so: <Text>Hello, I am your cat!</Text>.

JSX is a syntax extension to JavaScript and it produces React elements. It also renders variables and expressions.

What are Props in React-native?

Props is short for "properties". Props let you customize React components. For example, here you pass each <Cat> a different name for Cat to render:

import React from 'react';
import { Text, View } from 'react-native';

const Cat = (props) => {
  return (
    <View>
      <Text>Hello, I am {props.name}!</Text>
    </View>
  );
}

const Cafe = () => {
  return (
    <View>
      <Cat name="Maru" />
      <Cat name="Jellylorum" />
      <Cat name="Spot" />
    </View>
  );
}

What is state in React-native components?

State is useful for handling data that changes over time or that comes from user interaction. The state tracks your component variables and acts as private storage for your component.

Use props to configure a component when it renders. Use state to keep track of any component data that you expect to change over time.

Difference between state and props in React.

Props are passed from a parent component, but the state is managed by the component itself. A component cannot change its props, but it can change its state.

What is REDUX?

Redux is a state management tool for JavaScript applications. You can use Redux together with React, or with any other view library.

It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

Redux is made up of the following key parts:

  • actions,
  • reducers,
  • store,
  • dispatch,
  • selector.

What is REDUX Ducks pattern?

Ducks is essentially a proposal for bundling reducers, action types, and actions of REDUX into the same file.

What are hooks in React/React-native?

Hooks are the new feature introduced in the React 16.8 version. It allows you to use state and other React features without writing a class. Hooks are the functions which "hook into" React state and lifecycle features from function components.

useState and useEffect are few examples of React hooks.

Difference between Flux and Redux.

The primary difference between Flux and Redux is that Flux uses multiple Stores per app, but Redux uses just one Store per app. Rather than placing state information in multiple Stores across the application, Redux keeps everything in one region of the app.

Difference between useEffect hook and useLayoutEffect.

The main difference between useEffect hook and useLayoutEffect hook is in the timing of their invocation. useEffect hook is invoked after the DOM is painted. useLayoutEffect hook on the other hand is invoked synchronously before changes are painted on the screen.

Use useLayoutEffect hook instead of useEffect hook if your effect will mutate the DOM. useEffect hook is called after the screen is painted. Therefore mutating the DOM again immediately after the screen has been painted, will cause a flickering effect if the mutation is visible to the client.

What are native apps?

Native mobile apps are the most common type of apps that are built for specific platforms and are written in languages that is platform specific. For example, Swift and Objective-C for native iOS apps and Java or Kotlin for native Android apps.

Native apps are also built using the specific Integrated Development Environment (IDE) for the selected operating systems such as Android Studio and Xcode for IOS.

Benefits Of Native Mobile App Development.

  • Native Apps have the best performance.
  • Native Apps are more Secure.
  • Native Apps are more Interactive And Intuitive.
  • Native Apps allow developers to access the full feature set of devices.
  • Native App development tends to have fewer bugs.
What is an Offline first application?

Offline first is an application development paradigm where developers ensure that the functionality of an app is unaffected by the intermittent lack of a network connection. In addition to that, "offline first" usually implies the ability to sync data between multiple devices.

What is Javascript Obfuscator?

JavaScript Obfuscator converts or encodes the actual source code of JavaScript to an unreadable format by making the code into machine-level language because stealing the code from the unauthorized end user. This process is 100% safe in JavaScript and the best way to protect source code.

What is Component-Driven Development?

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.

In this methodology, we split the complete UI design into several small reusable components and develop them independently, and the complete UI is built by composing these small components.

What is the use of watchman for react native?

React Native uses watchman to detect when you've made code changes and then automatically build and push the update your device without you needing to manually refresh it.

The Facebook watchman service is designed to scale to very large filesystem trees and to aggregate watching resources across multiple projects.

What are Refs used for in React Native?

Refs provide a way to access DOM nodes or React elements created in the render method.

There are a few good use cases for refs:

  • Managing focus, text selection, or media playback.
  • Triggering imperative animations.
  • Integrating with third-party DOM libraries.

What is the default value of position CSS property in react-native?

The default value for position property is relative whereas in browser it is static.

What are the different ways to create React components?

There are 2 ways of writing a react component.

Functional component uses a simple function which returns the JSX.

Class based component uses the class keyword introduced in ES6. it implements render lifecycle method which returns the JSX.

Difference between Functional component and class-based component in React.

Functional component.Class-based component.
Functional component cannot have state ( before React hooks, now it can have state with React 16.8 or higher). It renders component only based on props that are supplied from the parent.A class-based component can have component level state.
Functional component are simple functions and light weighted. These are functions that accepts props as an argument and returns a React element.A class-based component is a complex structure. It is an instance of a class derived from React. Component class. The class must implement a render() member function which returns a React component to be rendered.
functional component cannot use lifecycle methods.The class-based component use lifecycle methods such as componentDidMount.

Functional component example:

function Hello(props) {
  return <h1>Hello, {props.userName}</h1>;
}

Class based component example:

class Hello extends React.Component {
  render() {
    return <h1>Hello, {this.props.userName}</h1>;
  }
}

What is useFocusEffect hook in React navigation?

The useFocusEffect is analogous to React's useEffect hook. The only difference is that it only runs if the screen is currently focused.

The useFocusEffect hook runs the effect as soon as the screen comes into focus. The effect will run whenever the dependencies passed to React.useCallback change, i.e. it'll run on the initial render (if the screen is focused) as well as on subsequent renders if the dependencies have changed.

What is react-navigation?

React Navigation is a standalone library that enables you to implement navigation functionality in a React Native application. It also enables structuring your application using multiple screens.

React Navigation is written in JavaScript and does not directly use the native navigation APIs on iOS and Android.

What are the 2 axes of flexbox?

The 2 axes are main axis and the cross axis. The main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it.

The main axis is defined by flex-direction, which has four possible values: row, row-reverse, column, column-reverse. For row or row-reverse, your main axis will run along the row in the inline direction (row- left to right, row-reverse-right to left). For column or column-reverse it is block direction.

The cross axis runs perpendicular to the main axis, therefore if your flex-direction (main axis) is set to row or row-reverse the cross axis runs down the columns. If your main axis is column or column-reverse then the cross axis runs along the rows.

What is marginVertical CSS property?

marginVertical is not part of standard CSS but with react-native, setting marginVertical has the same effect as setting both marginTop and marginBottom.

Differentiate: ScrollView vs FlatList elements.

ScrollView renders all its react child components at once, but this has a performance downside.

FlatList renders items lazily, when they are about to appear, and removes items that scroll way off-screen to save memory and processing time.

What are the 3 fundamental principles of REDUX?

Single source of truth - the global state of your application is stored in an object tree within a single store.

State is read-only - the only way to change the state is to emit an action, an object describing what happened.

Changes are made with pure function - To specify how the state tree is transformed by actions, write pure reducers.

Types of React navigation.
  • Stack Navigator,
  • Native Stack Navigator,
  • Drawer Navigator,
  • Bottom Tab Navigator,
  • Material Bottom Tab Navigator,
  • Material Top Tab Navigator.
Explain stack navigator in React navigation.

React Navigation's stack navigator provides a way for your app to transition between screens and manage navigation history.

Stack navigator provides a way for your app to transition between screens where each new screen is placed on top of a stack.

Difference between React Native and React.

ReactJS is a JavaScript library, supporting both front-end web and being run on a server, for building user interfaces and web applications. It follows the concept of reusable components.

React Native is a mobile framework that makes use of the JavaScript engine available on the host, allowing you to build mobile applications for different platforms (iOS, Android, and Windows Mobile) in JavaScript that allows you to use ReactJS to build reusable components and communicate with native components.

Both follow the JSX/TSX syntax extension of JavaScript.

What is React native elements library?

React native elements is a Cross Platform UI Toolkit for React Native. It is cross-platform across android, IOS and web.

Built completely in Javascript.

«
»
ES6 Interview questions

Comments & Discussions