Category: React Native Interview Question

Though most of the CSS properties works in the same way in React native still there are few differences in CSS property values between a browser and React native:

1. Only two values of CSS property display (none, flex) is supported in React native. display none is used to hide an element.
2. aspectRatio is non-CSS property supported by React Native. we can use aspect ratio to give a size to an element. if either width or height is specified along with aspect ratio then other parameters will be calculated and applied based on aspect ratio value
3. marginHorizontal has the same effect as setting both marginLeft and marginRight. Similar to marginHorizontal, marginVertical has the same effect as setting both marginTop and marginBottom.
4. The default value of the position in React native is relative instead of static. so absolute positioning is always just relative to the parent.

Apart from the above difference, most of the CSS properties work exactly the same as they work in a browser.

By default, the main axis is the vertical axis and cross axis is the horizontal axis in React native. Since justifyContent and alignItems property works based on the main axis and cross axis, so justifyContent will align flex items vertically and alignItems will layout flex item horizontally. This default value of the main axis and cross axis can be changed by changing flexDirection property. If we set flexDirection to row in the flex container then the main axis will become horizontal axis and cross axis will become vertical axis. 

On changing default behaviour via flexDirection CSS property, the behaviour of alignItems and justifyContent will also get switched. The Concept of flexDirection is also present on the web. Flexbox is implemented as a single direction layout technique and this direction is managed by flexDirection CSS property. Apart from row and column, the flexDirection property has two more values: row-reverse and column-reverse. As the name suggests, the direction will remain horizontal and vertical but the direction will get changed.

Transitions are an important feature of mobile devices. So, this is one of the most frequently asked React Native interview questions and answers for senior developer in recent times.

You can think of alignItems as justifyContent behaviour for cross axis. Cross-axis in 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 a horizontal axis in 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 alignItems values:

• flex-start: this is the default value for alignItems. It means that flex items will start from the left and evenly distributed horizontally.
• Flex-end: this is just the opposite behaviour of flex-start. Elements start rendering from the right and go up to the left end.
• Center: Items will be placed in the middle
• Space-between: elements are evenly distributed along the cross axis (horizontal  axis)
• 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 a vertical axis in case of React native. Which 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 apply some control over the alignment of items when they overflow the line. Let me explain JustifyContent’s values:

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

CSS Flexbox is used to design a responsive layout easily without using float or position CSS property. Float and position values were used to build any type of UI which are not very easy. Flexbox is added in CSS3. Flexbox is designed to provide a consistent layout on different screen sizes. You will normally use a combination of flexDirection, alignItems, and justify-content to achieve the right layout. 

There are few differences in default values of few flex based CSS properties between React Native and on the browser. The default value of flexDirection is a row in the web but in case of React native, its default value is a column. Also, flex parameter only supports a single number in React native. Flexbox alignItems has few more values like flex-start which start aligning element from start and opposite of this is flex-end which places the first child element at the end. Similar to alignItems, justifyContents also have values which behaves where much similar to flexbox behaviour in a web browser.

By default, the View component in React Native has its display property set to flex. Flex is a CSS property used to expand and shrink components dynamically based on available space. Setting flex: 1 on a component makes it take up all the available space. If a parent element has flex: 1, its child elements will evenly distribute the available space among themselves. 

The width of a child element can be adjusted by assigning it a higher flex value; the larger the value, the more space the component will take relative to its siblings. However, for a component to expand, its parent must have dimensions greater than zero. If the parent element’s dimensions are not set, the flex property will not work, and the element will not be visible on the UI. 

In addition to the flex property, align-items and justify-content CSS properties are also used to design mobile UIs in React Native. 

React native follows the box-model concept of CSS. The size of the element is calculated based on the size of content, padding, border, margin. The simplest way to set the size of an element is to set width and height CSS property for an element. All dimensions in React Native is unitless and represent density-independent pixels. By setting fixed height and width, the element will look exactly the same size on different screen sizes. But there is an instance where you want to give the width and height of an element in percentage. 

Directly use of percentage is not supported in React native but React native does give a dimension module which can be used to give width in percentage. Dimension module gives the width and height of the mobile device. This information can be used to set the style of an element in runtime. Below is the example of how to use Dimension module from React native:

Importing module from React Native:
import { Dimension } from ‘react-native’;
Figure out 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.

Every React Native component like View, Text, Image etc… accepts a style prop which is an object of CSS rules. The only difference between CSS rules and CSS object used in React Native is key in CSS object has CSS rules in camelCase, for example, CSS rule background-colour will become backgroundColour in React Native. There are few restrictions over values of some CSS rules. But still, available CSS rules are enough to style a mobile app UI beautifully. React Native supports CSS flexbox to build UI layouts. We style our mobile screen like below snippet:

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
   }
});
Then we can use these style with View component like below:
<View style={styles.container}></View>

Stylesheet object is provided by React native library which has the method “create”. It takes an argument of type object and this object is the collection of CSS rules. As you can see in the above example, font-size CSS property in the web becomes font size in React native and flex-direction becomes flexDirection. I hope you got the idea about styling in React native application development. You can find the complete code on https://gist.github.com/PavanKu/98f92103af84faaf540aa348cf1a1126

Introduction: Watchman is an open-source project developed by Facebook that monitors files and tracks changes. 

Functionality: It can trigger actions based on file changes. 

Hot Reloading in React Native: 

• Watchman powers the hot reloading feature in React Native. 
• Hot reloading allows developers to see changes immediately without recompiling the entire project. 
• This feature speeds up development compared to traditional native mobile application development, which requires manual recompilation. 

Automation: When a developer makes changes in a React Native project file, Watchman detects the changes and triggers an automatic build, reflecting updates without manual intervention. 

Developer Benefits: The hot reloading feature makes React Native a developer-friendly framework, accelerating the development process. 

Setup: Installation of Watchman is included in the React Native environment setup instructions. 

Starting a project from scratch is always a little bit harder that is why there are some tooling available which we can use to bootstrap a React Native project.

• Using react-native-cli (https://www.npmjs.com/package/react-native-cli)
  • react-native-cli created a pure react native application as it doesn’t hide any piece of code in the generated project. You can see ios and android folder in a directory structure. Although, you don’t need to modify anything inside generated ios and android folder, They are required to run React native application successfully on the device.
• Using expo-cli (https://www.npmjs.com/package/expo-cli)
  • Expo-Cli is a third party tooling which provides base files and easy setup steps to start React Native app development. It also provides barcode based steps to share the app with other team members. The downside of bootstrapping React native app with expo cli is the size of the basic app is considerably big as expo cli includes few expo based libraries with the app.