1. What is React Native and how is it different from ReactJS?
ReactJS is a JavaScript library for building web applications using components. It runs in the browser and uses HTML,
CSS, and JavaScript. React Native (RN) is a framework built on React, but it is used to build mobile apps for iOS and
Android. Instead of HTML/CSS, it uses native components (View, Text, Button). RN compiles to native code, giving
performance close to native apps, while ReactJS runs in the browser.
// ReactJS (Web)
function App() {
return <h1>Hello Web!</h1>;
}
// React Native (Mobile)
import { Text, View } from 'react-native';
function App() {
return (
<View>
<Text>Hello Mobile!</Text>
</View>
);
}
2. How does the React Native bridge work?
React Native apps are written in JavaScript but need to interact with native platform APIs (camera, GPS, etc.). The
Bridge is a communication layer between JavaScript and native code (Java/Kotlin for Android, Objective-C/Swift for
iOS). Example: when you call a RN API like Camera, the JS side sends a message to the bridge, which calls the native
module that actually interacts with hardware.
JS Code (React Native) → Bridge → Native Module (Android/iOS) → Executes → Sends result back via Brid
3. What are props vs state?
Props (properties): Used to pass data from parent to child. Immutable (cannot be changed by the child). State: Data
that belongs to a component. Can change during the component’s lifecycle using setState (class) or useState
(function).
function Greeting({ name }) { // props
const [count, setCount] = useState(0); // state
return (
<View>
<Text>Hello {name}</Text>
<Text>You clicked {count} times</Text>
<Button title="Click" onPress={() => setCount(count + 1)} />
</View>
);
}
4. Controlled vs uncontrolled components.
Controlled Components: Component state is controlled by React. Example: TextInput value managed via useState.
Uncontrolled Components: Component holds its own internal state. Less predictable, not recommended for most
cases.
// Controlled TextInput
const [text, setText] = useState("");
<TextInput
value={text}
onChangeText={setText}
/>
// Uncontrolled TextInput
<TextInput defaultValue="Hello" />
5. Functional components vs Class components.
Class Components: Older way of writing React components. Use render() and lifecycle methods
(componentDidMount, etc.). Functional Components: Simpler, use plain functions and hooks (useState, useEffect).
Preferred in modern React Native apps.
// Class Component
class MyClass extends React.Component {
state = { count: 0 };
render() {
return <Text>{this.state.count}</Text>;
}
}
// Functional Component
function MyFunc() {
const [count, setCount] = useState(0);
return <Text>{count}</Text>;
}
6. Lifecycle methods vs hooks.
Class components use lifecycle methods: componentDidMount, componentDidUpdate, componentWillUnmount.
Functional components use hooks: useEffect can handle mount, update, and unmount logic.
useEffect(() => {
console.log("Mounted");
return () => {
console.log("Unmounted");
};
}, []);
7. How do you style components in RN?
React Native doesn’t use CSS; it has its own styling system similar to CSS. Options: Inline styles, StyleSheet API
(better performance), or libraries (NativeWind, styled-components).
const styles = StyleSheet.create({
box: {
backgroundColor: "blue",
padding: 10,
},
});
<View style={styles.box}><Text>Styled!</Text></View>
8. Flexbox in RN vs CSS flexbox.
React Native uses Flexbox for layout, but defaults differ: - Web CSS: flexDirection: row by default. - RN: flexDirection:
column by default. Other properties like justifyContent, alignItems, flex work the same.
<View style={{ flexDirection: "row", justifyContent: "space-between" }}>
<Text>A</Text>
<Text>B</Text>
</View>
9. Debugging in RN (Metro, Flipper, LogBox).
Metro bundler: The JS bundler that compiles and serves your RN code. Flipper: A desktop debugging tool for
inspecting logs, layout, network, and performance. LogBox: RN’s in-app warning/error overlay that helps you spot
issues quickly.
# Common debugging commands
npx react-native start # Metro bundler
npx react-native log-android # Logs for Android
npx react-native log-ios # Logs for iOS
10. Differences between React Native CLI and Expo.
React Native CLI: More control, requires setting up Xcode/Android Studio. Can use any native modules. Good for
large, production apps. Expo: Easier to get started, comes with pre-built APIs (camera, push notifications). Limited
native module support (unless using Bare Workflow).
# Use CLI for production banking app
# Use Expo for quick prototype or POC
