UI Change Request: Increase Slider Banner Height — Set Aspect Ratio to 16:9 (or 3:2)

Last Updated: 15/07/2026
Type: UI Layout Fix — Banner Aspect Ratio
Screen: Homepage (HomeScreen) — Active Banner / Image Slider Section

Aspect Ratio References:

• Reference 1: Comparison of common aspect ratios
• Reference 2: Illustration of 16:9, 3:2, 4:3, 1:1

---

1. Current Issue

The banner slider on the Homepage is currently too wide — its height is insufficient relative to its width, making the banner appear squished and visually unappealing.

Current Estimate: ~21:9 or wider than 16:9 → needs a height increase of ~20–30px to match standard proportions.

---

2. Target Aspect Ratios

Aspect Ratio	Description	When to Use
16:9	TV & Video — Standard HD ratio	✅ Priority — Try this first
3:2	Photography — Slightly taller than 16:9	✅ Use if 16:9 still looks too flat/squished
4:3	Classic TV — Squarish	❌ Do NOT use — too tall, consumes too much vertical space

Rule: Try 16:9 first. If the banner still feels too thin/short, switch to 3:2.

---

3. Calculating Height Based on Screen Width

On a device with a screen width of ~390px (e.g., iPhone 14):

Aspect Ratio	Width	Calculated Height	Notes
16:9	390px	390 × 9/16 = **219px**	Standard HD
3:2	390px	390 × 2/3 = **260px**	~41px taller than 16:9
4:3	390px	390 × 3/4 = **293px**	Too tall

---

4. Implementation (React Native)

Option 1 — Dynamic height based on screen width (Recommended ✅)

import { Dimensions } from 'react-native';

const { width: SCREEN_WIDTH } = Dimensions.get('window');

// Pick one of the two ratios:
const BANNER_HEIGHT_16_9 = SCREEN_WIDTH * (9 / 16);  // ~219px on 390px screens
const BANNER_HEIGHT_3_2  = SCREEN_WIDTH * (2 / 3);   // ~260px on 390px screens

// Styles:
const styles = StyleSheet.create({
  bannerContainer: {
    width: '100%',
    height: BANNER_HEIGHT_16_9,   // ← Change to BANNER_HEIGHT_3_2 if needed
    overflow: 'hidden',
  },
  bannerImage: {
    width: '100%',
    height: '100%',
    resizeMode: 'cover',          // ← Always use 'cover' to scale properly without distortion
  },
});

Option 2 — Use aspectRatio instead of a hardcoded height (More Flexible)

const styles = StyleSheet.create({
  bannerContainer: {
    width: '100%',
    aspectRatio: 16 / 9,   // ← Change to 3 / 2 if needed
    overflow: 'hidden',
  },
  bannerImage: {
    width: '100%',
    height: '100%',
    resizeMode: 'cover',
  },
});

✅ Option 2 is preferred because aspectRatio automatically scales the height relative to the actual width of the container, working across all screen sizes without importing Dimensions.

Slider Component Integration

const HomeBanner = ({ images }) => (
  <View style={styles.sliderWrapper}>
    <Swiper
      style={styles.bannerContainer}  // ← Height scales automatically based on aspectRatio
      autoplay
      autoplayTimeout={4}
      dot={<View style={styles.dot} />}
      activeDot={<View style={styles.activeDot} />}
    >
      {images.map((img, index) => (
        <Image
          key={index}
          source={{ uri: img.url }}
          style={styles.bannerImage}
          resizeMode="cover"
        />
      ))}
    </Swiper>
  </View>
);

const styles = StyleSheet.create({
  sliderWrapper: {
    width: '100%',
  },
  bannerContainer: {
    width: '100%',
    aspectRatio: 16 / 9,   // ← Change to 3 / 2 if needed
  },
  bannerImage: {
    width: '100%',
    height: '100%',
    resizeMode: 'cover',
  },
});

---

5. Upload Guidelines (For Admin / CMS)

Once the final aspect ratio is selected, provide instructions to the Admin/Marketing team:

Selected Ratio	Standard Image Dimensions	Maximum File Size
16:9	1280 × 720px or 1920 × 1080px	≤ 500KB
3:2	1200 × 800px or 1500 × 1000px	≤ 500KB

⚠️ Images uploaded with non-standard ratios will be cropped (resizeMode: 'cover'). Keep key content/visuals centered to avoid critical information getting cut off.

---

Technical Checklist

• Locate the Banner/Slider component in HomeScreen.tsx or BannerSlider.tsx.
• Replace the current hardcoded height with aspectRatio: 16 / 9 (try this first).
• Set resizeMode: 'cover' for the Image elements inside the slider.
• Test on a physical device/emulator: if 16:9 still feels too flat, switch to aspectRatio: 3 / 2.
• Confirm the final ratio and notify the Admin/Content team of the recommended upload dimensions.
• Verify layout scales correctly on both small (375px) and large (414px+) screens.