Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
React Native · Question Set
Styling & Layout with Flexbox interview questions for placements and exams.
Questions
14
Included in this set
Subject
React Native
Explore more sets
Difficulty
Mixed
Level of this set
Go through each question and its explanation. Use this set as a focused practice pack for React Native.
React Native does not support traditional CSS files because it doesn’t use a web DOM. Styling is done using JavaScript objects, StyleSheet.create, or third-party libraries like styled-components. Each style is written using camelCase property names similar to CSS but interpreted natively by the platform.
For complete preparation, combine this set with full subject-wise practice for React Native. You can also explore other subjects and sets from the links below.
Unlike web CSS where the default is row, React Native defaults flexDirection to column. This means elements are stacked vertically unless changed to row explicitly.
alignItems controls the cross-axis alignment of children. When flexDirection is 'row', it aligns items vertically. Common values include 'flex-start', 'center', and 'stretch'.
The flexWrap property lets items wrap onto multiple lines when there isn’t enough space. By default, React Native uses 'nowrap', so you need to explicitly set flexWrap to 'wrap' to allow wrapping.
React Native supports 'absolute' and 'relative' positioning through the position property. When set to 'absolute', an element can be placed anywhere using top, left, right, and bottom values.
React Native doesn’t use traditional CSS media queries, but it supports responsive layouts through Flexbox, percentages, and Dimensions API. You can calculate screen width and height using Dimensions.get('window') and adjust layout dynamically. Flexbox ensures elements resize proportionally on different screens.
const { width, height } = Dimensions.get('window');Use flex when you want elements to automatically fill available space relative to siblings. Fixed or percentage widths are suitable for predictable layouts, while flex is better for dynamic screens that vary in size or orientation.
Common mistakes include confusing main and cross-axis directions, using row when column is intended, and combining alignItems and justifyContent incorrectly. Developers also sometimes forget that React Native defaults to flexDirection: 'column', unlike web Flexbox where 'row' is default.
In React Native, zIndex works similarly to CSS—it controls the stacking order of positioned elements. However, it only affects siblings within the same parent View. It doesn’t apply globally across the entire screen like in web browsers.
justifyContent defines how children are positioned along the container’s main axis. Values like 'flex-start', 'center', and 'space-between' determine how items are spaced within the parent view.
StyleSheet.create() helps improve performance by freezing style definitions and preventing new object creation on each render. It also validates property names, catching typos early during development.
const styles = StyleSheet.create({
container: { flex: 1, padding: 20 }
});alignSelf lets an individual child override its parent’s alignItems value. For example, a single View can align itself differently while others follow the parent’s rule.
As of now, React Native does not support the 'gap' property that exists in web Flexbox. Developers achieve similar spacing using margin or by wrapping children inside spacing containers.
Avoid deeply nested Views; it increases rendering cost. Use flexbox efficiently to adapt to different screens without absolute positioning everywhere. Reuse styles with StyleSheet.create to avoid creating new objects each render. Also, minimize unnecessary re-renders with React.memo or PureComponent.