Category: React Native Interview Question

You can think of alignItems as justifyContent behaviour for cross-axis. Cross-axis in the case if React native is the horizontal axis. CSS alignItems property sets the alignSelf value on all direct children as a group. In Flexbox, it controls the alignment of items on the cross-axis. By default, the cross axis is horizontal in the case of React native. We can use this property to layout elements in the flex container. The alignItems property supports following values: stretch|center|flex-start|flex-end|baseline|initial|inherit; Let me explain align items values: 

1. flex-start: this is the default value for alignItems. It means that flex items will start from the left and be evenly distributed horizontally. 
2. Flex-end: this is just the opposite behavior of flex-start. Elements start rendering from the right and go up to the left end. 
3. Center: Items will be placed in the middle 
4. Space-between: elements are evenly distributed along the cross-axis (horizontal axis) 
5. Space-around: flex items will be evenly distributed with equal space around them 

JustifyContent property aligns the flexible container’s items when the items do not use all available space on the main axis. By default, the main axis is vertical in the case of React native. This means justifyContent property aligns child elements of flex parent vertically in React native. We can use this property to layout elements in a flex container. JustifyContent supports the following values: flex-start|flex-end|centre|space-between|space-around|initial|inherit; It also applies some control over the alignment of items when they overflow the line. Let me explain JustifyContent’s values: 

1. flex-start: this is the default value for justifyContent. It means that flex items will start from the top and be evenly distributed vertically. 
2. Flex-end: this is just the opposite behavior of flex-start. Elements start rendering from the bottom 
3. Center: Items will be placed in the middle 
4. Space-between: elements are evenly distributed along the main axis (vertical axis) 
5. Space-around: flex items will be evenly distributed with equal space around them 

CSS Flexbox is used to design responsive layouts easily, without relying on float or position CSS properties, which can be cumbersome. Introduced in CSS3, Flexbox ensures consistent layouts across different screen sizes. 

In React Native, you typically use a combination of flexDirection, alignItems, and justifyContent to achieve the desired layout. There are some differences in the default values of certain flex-based CSS properties between React Native and web browsers: 

• flexDirection: Defaults to row on the web, but to column in React Native. 
• flex: In React Native, the flex parameter supports only a single number. 

Flexbox properties like alignItems and justifyContent help position elements: 

• alignItems: Values like flex-start align elements from the start, while flex-end places the first child element at the end. 
• justifyContent: Similar to alignItems, it positions elements along the main axis. 

These properties allow for easy and flexible layout designs, ensuring responsive and adaptive UIs across different devices. 

React Native follows the box model concept of CSS, where the size of an element is determined by its content, padding, border, and margin. The simplest way to set an element’s size is by specifying the width and height CSS properties. In React Native, all dimensions are unitless and represent density-independent pixels, ensuring consistent element sizes across different screen sizes when using fixed values. 

However, if you need to set dimensions as a percentage, React Native does not directly support this. Instead, it provides the Dimensions module, which gives the width and height of the mobile device. This information can be used to dynamically set an element’s style at runtime, allowing for responsive design by calculating percentage-based dimensions. 

Below is an example of how to use the Dimension module from React native: 

Importing module from React Native: 

import { Dimension } from ‘react-native’; 

Figure out the width and height of the device: 

const deviceWidth = Dimension.get(“window”).width; 

const deviceHeight = Dimension.get(“window”).height; 

Calculate the style value:

Width: deviceWidth*<percentageValue>/100 

But the simplest way is by setting width and height CSS for an element. 

The state is another way apart from props by which we can modify a React component. React component’s state value changes in the life cycle of the component, unlike props. We should not directly change the state value of the react component. React framework gives the setState method by which the state of a component should be changed. 

import React from 'react'; 
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'; 
 
class Counter extends React.Component { 
  state = { count: 0 }; 
  increment = () => this.setState({count: this.state.count + 1}); 
  decrement = () => this.setState({count: this.state.count - 1}); 
  render() { 
    return ( 
      <View style={styles.container}> 
        <TouchableOpacity onPress={this.decrement}> 
          <Text style={styles.text}>-</Text> 
        </TouchableOpacity> 
        <Text style={styles.text}>{this.state.count}</Text> 
        <TouchableOpacity onPress={this.increment}> 
          <Text style={styles.text}>+</Text> 
        </TouchableOpacity> 
      </View> 
    ); 
  } 
}; 
const styles = StyleSheet.create({ 
  container: { 
    flexDirection: 'row', 
    borderRadius: 5, 
    borderWidth: 1, 
    borderColor: '#1a91b8', 
    padding: 5, 
    backgroundColor: '#eaf7fd' 
  }, 
  text: { 
    color: '#015169', 
    fontWeight: 'bold', 
    fontSize: 20, 
    padding: 15 
  } 
}); 
export default Counter; 
 

The above code is an implementation of a counter component. This component has a state count whose value is changed by clicking on the plus (+) and minus (-) buttons. As the state count of this component is changing the number displayed on UI is also changing. Whenever we create any component in React, first we divide the screen in the component and then decide what state a component should have. The beauty of this component is that it is an independent component and can be used anywhere in the application. That is how we make several fully functional components in React to build the complete application. 

Integrating third-party libraries involves: 

• Installation: Use npm or yarn to install the library. 
• Linking: Use react-native link or manually link the library if needed. 
• Configuration: Follow the library’s setup instructions for configuration and usage. 

These steps ensure the library is correctly integrated and functional within the React Native app. 

Native Modules allow integrating custom native code into a React Native app: 

• Custom Code: Write native code in Java (Android) or Objective-C/Swift (iOS). 
• JavaScript Bridge: Expose native functionalities to JavaScript through the bridge. 
• Integration: Use NativeModules to access and utilize native modules in the React Native app. 

Native Modules provide flexibility to leverage platform-specific features and optimize performance. 

Yes, React Native can be used for building TV applications: 

• React Native for TV: Extends the core framework to support TV devices like Apple TV and Android TV. 
• TV-specific Components: Provides components and navigation patterns tailored for TV interfaces. 

While React Native supports TV app development, community support and documentation are still evolving. 

Managing app state can be done using: 

• Redux Thunk:
  • Allows writing action creators that return a function instead of an action. 
  • Suitable for simple asynchronous logic like API calls. 
• Redux Saga:
  • Uses generator functions to handle side effects more efficiently. 
  • Ideal for complex asynchronous workflows, allowing better control over execution flow. 

Both tools enhance state management in large applications by handling asynchronous actions effectively. 

Keys in React Native are crucial for: 

• Identification: Help React identify which items have changed, are added, or are removed. 
• Performance: Improve performance by enabling efficient re-rendering of lists. 
• Order Management: Ensure elements are correctly ordered and maintained during updates. 

Keys should be unique to ensure React can manage component updates accurately.