1. What is React Native and how does it differ from React?

React Native is a framework for building mobile applications using JavaScript and React. Unlike React, which is used for web development, React Native enables developers to create mobile apps that can run on both iOS and Android platforms using native components.

Differences:

• Platform: React is for web applications, while React Native is for mobile apps.
• Rendering: React uses the DOM, whereas React Native uses native components.
• Styling: React uses CSS, while React Native uses a style system based on JavaScript objects.

2. Explain the concept of JSX in React Native.

JSX (JavaScript XML) is a syntax extension for JavaScript that resembles HTML. In React Native, JSX is used to describe the UI components. It allows developers to write components that look similar to HTML, which are then transformed into JavaScript.

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

const HelloWorld = () => {
  return (
    <View>
      <Text>Hello, World!</Text>
    </View>
  );
};

3. How do you create a component in React Native?

Components can be created as either functional or class components. Here’s how to create a functional component:

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

const MyComponent = () => {
  return (
    <View>
      <Text>This is my component!</Text>
    </View>
  );
};

export default MyComponent;

4. What is the significance of the 'render' method in React Native components?

In class components, the render method is crucial as it specifies what the UI should look like. It returns the JSX that will be rendered to the screen.

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

class MyComponent extends React.Component {
  render() {
    return (
      <View>
        <Text>This is a class component!</Text>
      </View>
    );
  }
}

5. How would you style a React Native component?

Styling in React Native is done using JavaScript objects, and you can use the StyleSheet API for better organization and performance.

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

const StyledComponent = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Styled Text</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
    color: 'blue',
  },
});

export default StyledComponent;

6. Describe the purpose of 'props' in React Native.

Props (short for properties) are used to pass data from one component to another in React Native. They are read-only and help to make components dynamic and reusable.

const Greeting = ({ name }) => {
  return <Text>Hello, {name}!</Text>;
};

// Usage
<Greeting name="Jaihind" />

7. What is 'state' in React Native and how is it different from 'props'?

State is a local data storage that is mutable and managed within the component. Unlike props, which are passed down from parent to child, state can be changed by the component itself.

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

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>{count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
};

8. How do you handle user input using React Native?

User input can be handled using components like TextInput. The value of the input can be controlled using state.

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

const UserInput = () => {
  const [input, setInput] = useState('');

  return (
    <View>
      <TextInput
        value={input}
        onChangeText={text => setInput(text)}
        placeholder="Type something"
      />
      <Text>You typed: {input}</Text>
    </View>
  );
};

9. Explain the React Native component lifecycle.

The component lifecycle in React Native follows a similar approach to React. It includes:

• Mounting: When the component is being created and inserted into the DOM (constructor, componentDidMount).
• Updating: When the component is being re-rendered due to changes in props or state (componentDidUpdate).
• Unmounting: When the component is being removed from the DOM (componentWillUnmount).

10. How would you debug a React Native application?

Debugging can be done using:

• Console Logs: Using console.log statements.
• React Native Debugger: A standalone app for debugging React Native apps.
• Remote JS Debugging: Enabling it in the developer menu allows you to debug using Chrome DevTools.

11. What is the 'StyleSheet' component in React Native and why is it used?

StyleSheet is an abstraction for defining styles in a more structured way. It helps improve performance by allowing React Native to optimize styles.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

12. How do you handle navigation between screens in React Native?

Navigation is typically handled using libraries like React Navigation. You can define a stack navigator and navigate between screens.

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

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

13. Explain the concept of 'flexbox' and its role in React Native layout.

Flexbox is a layout model that provides a way to design a complex layout structure in a more efficient and predictable manner. In React Native, it's the primary way to arrange components.

const styles = {
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
};

14. What are 'keys' in React Native and why are they important in lists?

Keys are unique identifiers used by React to differentiate between elements in a list. They help React optimize rendering by tracking which items have changed, been added, or removed.

const items = ['Apple', 'Banana', 'Cherry'];

const ItemList = () => {
  return (
    <View>
      {items.map((item, index) => (
        <Text key={index}>{item}</Text>
      ))}
    </View>
  );
};

15. How can you make a network request in React Native?

You can make network requests using the built-in fetch API or libraries like Axios.

const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
};

16. Describe the purpose of 'AsyncStorage' in React Native.

AsyncStorage is a simple, unencrypted, asynchronous, persistent key-value storage system that is global to the app. It's useful for storing user preferences or session data.

import AsyncStorage from '@react-native-async-storage/async-storage';

// Storing data
await AsyncStorage.setItem('key', 'value');

// Retrieving data
const value = await AsyncStorage.getItem('key');

17. How can you integrate Redux with a React Native app?

You can integrate Redux by using react-redux library, which provides the <Provider> component to pass the store down the component tree.

import { Provider } from 'react-redux';
import { createStore } from 'redux';

const store = createStore(reducer);

const App = () => (
  <Provider store={store}>
    <MyComponent />
  </Provider>
);

18. How do you optimize performance in a React Native application?

Performance can be optimized by:

• Using PureComponents: They prevent unnecessary re-renders.
• Memoization: Using React.memo and useMemo.
• Avoiding inline functions in render.
• Using FlatList: For rendering large lists efficiently.

19. Explain the concept of 'HOC' (higher-order component) in React Native.

A higher-order component is a function that takes a component and returns a new component. It's used for code reuse and managing cross-cutting concerns.

const withLoading = WrappedComponent => {
  return class extends React.Component {
    render() {
      return this.props.isLoading ? <LoadingSpinner /> : <WrappedComponent {...this.props} />;
    }
  };
};

20. How can you integrate third-party libraries in a React Native app?

You can integrate third-party libraries by installing them via npm or yarn and linking them if necessary (for native modules).

npm install some-library

21. What are 'Touchable' components in React Native and how do they work?

Touchable components (e.g., TouchableOpacity, TouchableHighlight) are wrappers that provide feedback to the user when they tap on them.

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

const MyButton = () => (
  <TouchableOpacity onPress={() => alert('Pressed!')}>
    <Text>Press Me!</Text>
  </TouchableOpacity>
);

22. How do you handle form validation in React Native?

Form validation can be handled using libraries like Formik or by managing the validation manually using state.

const validateEmail = email => /\S+@\S+\.\S+/.test(email);

const handleSubmit = (email) => {
  if (validateEmail(email)) {
    // Proceed with valid email
  } else {
    // Show validation error
  }
};

23. Explain the architecture of a React Native app.

A typical React Native app architecture consists of:

• Components: Building blocks of the UI.
• Redux or Context API: For state management.
• Navigation: Managing screen transitions.
• API Calls: For data fetching.
• Native Modules: If native functionality is required.

24. What is the role of 'navigator' in React Navigation?

The navigator in React Navigation manages the navigation state and controls the navigation actions, allowing users to move between screens.

import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();

const AppNavigator = () => (
  <Stack.Navigator>
    <Stack.Screen name="Home" component={HomeScreen} />
  </Stack.Navigator>
);

25. How do you handle platform-specific code in React Native?

You can use the Platform module to write platform-specific code.

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

const Message = () => (
  <Text>{Platform.OS === 'ios' ? 'Hello iOS!' : 'Hello Android!'}</Text>
);

26. Discuss the benefits and drawbacks of using Expo for React Native development.

Benefits:

• Quick setup with managed workflow.
• Access to many built-in APIs and components.
• Easy deployment to app stores.

Drawbacks:

• Limited control over native code.
• Larger app size due to bundled libraries.

27. Explain the concept of 'props drilling' and how to avoid it.

Props drilling refers to passing data through many layers of components. It can be avoided using context or state management libraries (like Redux) to share state globally.

28. How can you handle offline storage in a React Native app?

You can use AsyncStorage or libraries like Realm and SQLite for local data persistence.

29. Discuss the role of 'shouldComponentUpdate' in React Native.

shouldComponentUpdate is a lifecycle method that allows you to optimize performance by preventing unnecessary re-renders when the state or props haven't changed.

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.value !== this.props.value;
  }
}

30. Explain the Virtual DOM and its relevance in React Native.

The Virtual DOM is a lightweight copy of the actual DOM. React Native uses it to optimize rendering by updating only the parts of the UI that have changed, resulting in better performance.

31. How can you achieve a responsive design in React Native?

Responsive design can be achieved using:

• Flexbox for layout.
• Dimensions API to get screen size.
• Media queries using libraries like react-native-responsive-screen.

32. Explain the purpose of the 'AppState' module in React Native.

The AppState module allows you to determine the current state of the app (active, background, or inactive) and handle transitions between these states.

import { AppState } from 'react-native';

const handleAppStateChange = (nextAppState) => {
  console.log(nextAppState);
};

useEffect(() => {
  const subscription = AppState.addEventListener('change', handleAppStateChange);
  return () => subscription.remove();
}, []);

33. Describe the bridge communication in React Native.

The bridge is a communication layer between JavaScript and native code. It allows data to be passed back and forth, enabling interaction with native APIs.

34. How does React Native achieve native performance?

React Native achieves native performance by rendering components using native views instead of web views, leveraging the native platform's capabilities and optimizing performance with the Virtual DOM.

35. Explain the use of 'native modules' in React Native.

Native modules allow you to access native functionalities that are not available in JavaScript. You can create your own modules or use existing ones to bridge between JavaScript and native code.

36. What are the limitations of React Native?

• Limited access to native APIs.
• Performance may be lower compared to fully native apps for complex animations.
• Dependency on third-party libraries for some functionalities.

37. How would you handle state synchronization between React components?

State synchronization can be achieved using a global state management solution like Redux, Context API, or by lifting the state up to a common parent component.

38. Discuss the role of 'LayoutAnimation' for creating smooth transitions in React Native.

LayoutAnimation allows you to animate layout changes in a smoother way, providing a better user experience during transitions.

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

const animate = () => {
  LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
  // State change that causes layout change
};

39. How can you implement background tasks in a React Native app?

You can use libraries like react-native-background-fetch or react-native-background-task to handle background tasks.

40. How do you perform navigation using the 'react-navigation' library?

Navigation can be set up using createStackNavigator, createDrawerNavigator, or createBottomTabNavigator.

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

const Stack = createStackNavigator();

const App = () => (
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  </NavigationContainer>
);

41. How can you handle the dynamic linking of libraries in a React Native project?

Dynamic linking can be managed using react-native link for linking native dependencies, or you can manually link them in your project settings.

42. Explain the concept of 'Babel' and its role in React Native development.

Babel is a JavaScript compiler that converts modern JavaScript (ES6+) into backwards-compatible versions for older environments. It allows you to use the latest features in React Native apps.

43. Discuss the use of 'ErrorUtils' in error handling within a React Native app.

ErrorUtils is a global object that allows you to handle uncaught errors in React Native applications, providing a way to capture and log errors.

ErrorUtils.setGlobalHandler((error, isFatal) => {
  console.log(error);
});

44. How would you implement a custom loading spinner in React Native?

You can use the ActivityIndicator component to create a loading spinner.

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

const LoadingSpinner = () => (
  <View>
    <ActivityIndicator size="large" color="#0000ff" />
  </View>
);

45. Explain the concept of 'code signing' and its importance in React Native app deployment.

Code signing is the process of digitally signing your application to confirm its identity and ensure that it hasn’t been tampered with. It is crucial for security and is required for app store submissions.

46. Discuss the role of 'PureComponent' in React Native and when to use it.

PureComponent is a type of component that implements a shallow comparison of props and state. It prevents unnecessary re-renders when the props/state haven't changed, optimizing performance.

class MyPureComponent extends React.PureComponent {
  render() {
    return <Text>{this.props.text}</Text>;
  }
}

47. How do you create a custom transition animation between screens using 'react-navigation'?

You can define custom transition animations by using the screenOptions prop in your navigator.

const App = () => (
  <NavigationContainer>
    <Stack.Navigator
      screenOptions={{
        animationEnabled: true,
        gestureEnabled: true,
        transitionSpec: {
          open: { animation: 'timing', config: { duration: 500 } },
          close: { animation: 'timing', config: { duration: 500 } },
        },
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
  </NavigationContainer>
);

48. Explain the purpose of 'AccessibilityRole' and 'AccessibilityState' in React Native.

AccessibilityRole defines the purpose of a component for accessibility services (e.g., button, header), while AccessibilityState provides information about the current state (e.g., selected, disabled) to assistive technologies.

<TouchableOpacity accessibilityRole="button" accessibilityState={{ selected: true }}>
  <Text>Press Me!</Text>
</TouchableOpacity>

49. Discuss the benefits of using TypeScript with React Native.

Using TypeScript in React Native provides:

• Type safety, reducing runtime errors.
• Better developer experience with autocompletion and code navigation.
• Improved maintainability of the codebase.

50. How can you implement a parallax effect in a React Native app?

A parallax effect can be implemented using the ScrollView component and adjusting the position of background images based on scroll events.

import { ScrollView, Image, View } from 'react-native';

const ParallaxEffect = () => (
  <ScrollView
    onScroll={event => {
      const scrollY = event.nativeEvent.contentOffset.y;
      // Adjust background image position based on scrollY
    }}
  >
    <Image source={require('./background.jpg')} style={{ height: 300 }} />
    <View style={{ height: 800 }} />
  </ScrollView>
);

These explanations and examples should provide a solid understanding of React Native concepts and practices. If you need further details or specific implementations, feel free to ask!