AspectRatio | NativeBase

NativeBase

3.4.x

Announcing NativeBase Startup+ bundle 🎉

⌘

Hire us

NativeBase

Introduction

Getting Started

Installation

Setup NativeBase Provider

Resources

Contribution

Creating a Universal App with NativeBase and Solito

New

Core Concepts

Utility First

Utility Props Specificity

Design Tokens

Pseudo Props: Overview

Pseudo Props: Dos & Don'ts

Internal Pseudo Props

New

Responsive

Features

Utility Props

Color mode (Dark Mode)

Theme

Customizing Components

Making components dark mode compatible

Layout

Forms

Data Display

Feedback

Typography

Overlay

Disclosure

Media and Icons

Transition

Others

ReactNative Components

Hooks

Examples

Recipes

Designs

Forms

Layout

AspectRatio

Aspect ratio controls the size of the undefined dimension of a node or child component. You can refer

mozilla.org

for more details.

Import

Copy
import { AspectRatio } from 'native-base';

Example

Basic


Playground
const Example = () => {
  return <AspectRatio height={200} ratio={{
    base: 4 / 3,
    md: 16 / 9
  }}>
      <Box bg="red.400" />
    </AspectRatio>;
};const Example = () => {
  return <AspectRatio height={200} ratio={{
    base: 4 / 3,
    md: 16 / 9
  }}>
      <Box bg="red.400" />
    </AspectRatio>;
};

Embed Image


Playground
const Example = () => {
  return <AspectRatio ratio={{
    base: 3 / 4,
    md: 9 / 10
  }} height={{
    base: 200,
    md: 400
  }}>
      <Image resizeMode="cover" source={{
      uri: "https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
    }} alt="Picture of a Flower" />
    </AspectRatio>;
};const Example = () => {
  return <AspectRatio ratio={{
    base: 3 / 4,
    md: 9 / 10
  }} height={{
    base: 200,
    md: 400
  }}>
      <Image resizeMode="cover" source={{
      uri: "https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
    }} alt="Picture of a Flower" />
    </AspectRatio>;
};