React Native Interview Questions & Answers for Beginners - Part 2

• What are props in React Native?

            Props, short for properties, are a way of passing data from parent components to child components in React and React Native. They are read-only and help to control a component's behavior and rendering.

            Here's an example of using props in React Native:

            import React from 'react';

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

            // Define a component that accepts props

            const Greeting = (props) => {

                  return (

                    <View>

                      <Text>Hello {props.name}!</Text>

                    </View>

             );

            }

            // Use the component and pass a prop

            export default function App() {

                  return (

                    <View>

                          <Greeting name="John" />

                          <Greeting name="Jane" />

                    </View>

                  );

             }

            In this example, the Greeting component accepts a prop named name. When we use the Greeting component in the App component, we pass different name props to it. The Greeting component uses this prop to render different greetings.

• What is the difference between state and props?
  
  

  In React and React Native, state and props are both plain JavaScript objects. While they might seem similar, they have different roles:                                                                                                                                           

  1. Props (Properties): Props are how components talk to each other. They are passed from the parent component to the child component and are read-only, meaning that a child component cannot change the props it receives. Props are used to pass data and event handlers down to child components.
  2. State: State is managed within the component (similar to variables declared within a function). State starts with a default value when a component mounts and then suffers from mutations in time (mostly generated from user events). State is used for data that should change over time and affect the component's rendering.
  
  

  Here's a simple way to remember the difference: props are like function parameters, while state is like a variable declared inside a function. If a component needs to maintain a value that can change over time and affect the component's rendering, it should be part of the state. If a component needs to pass a value or an event handler to a child component, it should be passed as a prop.

• Can you explain the component lifecycle in React Native?

            In React and React Native, each component has several lifecycle methods that you can override to run code at particular times in the process. The lifecycle methods are divided into three main phases: Mounting, Updating, and Unmounting.

1. Mounting: These methods are called in the following order when an instance of a component is being created and inserted into the DOM:
• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()
2. Updating: An update can be caused by changes to props or state. These methods are called in the following order when a component is being re-rendered:
• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()
3. Unmounting: This method is called when a component is being removed from the DOM:
• componentWillUnmount()

            It's worth noting that React has shifted towards functional components and hooks, which provide similar capabilities as lifecycle methods. For example, the useEffect hook can replicate the behavior of componentDidMount, componentDidUpdate, and componentWillUnmount combined.

            And here's how you might achieve with hooks in a functional component:

            import React, { useState, useEffect } from 'react';

            const ExampleComponent = (props) => {

              const [state, setState] = useState({

                // Initialize your state

               });

              useEffect(() => {

            // This runs after the component mounts, similar to componentDidMount

            // and it runs after updates, similar to componentDidUpdate

            return () => {

          // This is a cleanup function that runs before the component unmounts, similar to componentWillUnmount

    };

              }, [/* dependencies */]);

              // Render your component

            };

• How do you handle routing and navigation in React Native?

            In React Native, routing and navigation are typically handled by using a third-party library, as React Native does not have a built-in navigation solution. The two most popular libraries are React Navigation and React Native Navigation.

            React Navigation is a pure JavaScript solution and is generally easier to set up and use. Here's a basic example of how you might use it:

        import { NavigationContainer } from '@react-navigation/native';

        import { createStackNavigator } from '@react-navigation/stack';

        // Define your screens

        function HomeScreen() {

              return <Text>Home Screen</Text>;

        }

        function DetailsScreen() {

          return <Text>Details Screen</Text>;

        }

        // Create a stack navigator

const Stack = createStackNavigator();

        function App() {

          return (

            <NavigationContainer>

              <Stack.Navigator initialRouteName="Home">

               <Stack.Screen name="Home" component={HomeScreen} />

                <Stack.Screen name="Details" component={DetailsScreen} />

              </Stack.Navigator>

            </NavigationContainer>

          );

        }

            React Native Navigation, on the other hand, is a native navigation solution. It can be more performant and feel more "native", but it's also more difficult to set up, especially if you're not familiar with native iOS and Android development.

            Both libraries allow you to define different "screens" as separate components, and then define how to navigate between them. They support a variety of navigation patterns, including stack navigation (where screens are pushed and popped from a stack), tab navigation, drawer navigation, and more.

• How do you handle styling in React Native?

                In React Native, styling is typically handled using a JavaScript abstraction similar to CSS called StyleSheet. It allows you to define styles in a separate object or file, and then apply those styles to React Native components using the style prop.

                Here's an example:

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

            export default function App() {

              return (

                <View style={styles.container}>

                  <Text style={styles.text}>Hello, world!</Text>

                </View>

              );

            }

            const styles = StyleSheet.create({

              container: {

                flex: 1,

                backgroundColor: '#fff',

                alignItems: 'center',

                justifyContent: 'center',

           },

          text: {

            color: 'blue',

            fontSize: 30,

          },

        });

            In this example, we define two styles: container and text. We then apply these styles to the View and Text components using the style prop.

            It's worth noting that while StyleSheet in React Native is similar to CSS, it's not identical. For example, styles are written in camelCase rather than kebab-case, and there are differences in how certain styles are applied.

            In addition to StyleSheet, there are also third-party libraries available for styling in React Native, such as styled-components, which allows you to write actual CSS in your JavaScript files.

• How do you handle user input in React Native?

                In React Native, user input is typically handled using the TextInput component, which is a basic input field. You can listen for changes to its value using the onChangeText prop, and you can store its value in state using the value prop.

                Here's an example:

        import React, { useState } from 'react';

        import { TextInput, View } from 'react-native';

        export default function App() {

              const [text, setText] = useState('');

          return (

            <View>

              <TextInput

        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}

        onChangeText={text => setText(text)}

        value={text}

              />

            </View>

          );

        }

                In this example, we're using the useState hook to create a state variable text and a function setText to update it. We pass setText to the onChangeText prop of TextInput, so that every time the user types into the input field, setText is called with the new text, updating the state. 

                We also pass text to the value prop of TextInput to ensure that the displayed value of the input field always reflects the current state.