📐 React Native Flexbox Layout System (TypeScript)

React Native-এ Layout তৈরি করার মূল ভিত্তি হলো Flexbox। Web-এর CSS Flexbox-এর মতো হলেও React Native-এর Flexbox কিছুটা আলাদা এবং মোবাইল UI ডিজাইনের জন্য অপ্টিমাইজড।

🔹 Flexbox কী?

Flexbox একটি layout system যার মাধ্যমে আমরা screen-এর মধ্যে Row বা Column ভিত্তিকভাবে UI elements সাজাতে পারি।

🔹 Flexbox Properties (Core)

• flex – space কিভাবে ভাগ হবে
• flexDirection – row / column
• justifyContent – main axis alignment
• alignItems – cross axis alignment
• alignSelf – single item alignment
• flexWrap – wrap behavior

🔹 Basic Flex Layout (TypeScript Example)

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

const FlexExample = (): JSX.Element => {
  return (
    <View style={{ flex: 1 }}>

      <View style={{ flex: 1, backgroundColor: 'red' }} />
      <View style={{ flex: 2, backgroundColor: 'green' }} />
      <View style={{ flex: 1, backgroundColor: 'blue' }} />

    </View>
  );
};

export default FlexExample;
  

🔹 flexDirection (Row vs Column)

<View style={{ flexDirection: 'row' }}>
  <Text>One</Text>
  <Text>Two</Text>
  <Text>Three</Text>
</View>
  

🔹 justifyContent (Main Axis)

justifyContent: 'space-between'
  

• flex-start
• center
• flex-end
• space-between
• space-around
• space-evenly

📌 Row হলে → horizontal alignment
📌 Column হলে → vertical alignment

🔹 alignItems (Cross Axis)

alignItems: 'center'
  

• flex-start
• center
• flex-end
• stretch

🔹 Real Life Layout Example (Header + Content + Footer)

<View style={{ flex: 1 }}>

  <View style={{ flex: 1, backgroundColor: '#0f766e' }} />
  <View style={{ flex: 6, backgroundColor: '#99f6e4' }} />
  <View style={{ flex: 1, backgroundColor: '#115e59' }} />

</View>
  

✅ Best Practices (Interview + Production)

• সবসময় flex:1 দিয়ে root container শুরু করুন
• Nested View কম রাখুন
• Percentage layout এড়িয়ে চলুন
• Responsive UI-এর জন্য Flexbox ব্যবহার করুন
• TypeScript ব্যবহার করলে JSX.Element return করুন