diff --git a/docs/aspectRatio.md b/docs/aspectRatio.md
new file mode 100644
index 000000000..99f98cb06
--- /dev/null
+++ b/docs/aspectRatio.md
@@ -0,0 +1,32 @@
+---
+id: aspectRatio
+title: AspectRatio
+---
+
+Aspect ratio controls the size of the undefined dimension of a node or child component. You can refer [mozilla.org](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details.
+
+## Import
+
+```jsx
+import { AspectRatio } from 'native-base';
+```
+
+## Example
+
+### Basic
+
+```ComponentSnackPlayer path=components,composites,AspectRatio,Basic.tsx
+
+```
+
+### Embed Image
+
+```ComponentSnackPlayer path=components,composites,AspectRatio,EmbedImage.tsx
+
+```
+
+## Props
+
+```ComponentPropTable path=composites,AspectRatio,index.tsx
+
+```
diff --git a/nb-plugins/utils/index.js b/nb-plugins/utils/index.js
index 872f340b8..3a88ec6b4 100644
--- a/nb-plugins/utils/index.js
+++ b/nb-plugins/utils/index.js
@@ -11,14 +11,38 @@ const prettier = require('prettier');
 
 const repoPath = path.resolve(__dirname, '..', '..', 'NativeBase');
 
-const storybookExamplePath = (repoPath) =>
-  path.resolve(repoPath, 'example', 'storybook', 'stories');
+function getRepoVersion(directory) {
+  if (directory.includes('versioned_repo')) {
+    return directory.split('versioned_repo/')[1].split('/')[0];
+  }
+
+  return 'next';
+}
+const storybookExamplePath = (repoPath) => {
+  return path.resolve(repoPath, 'example', 'storybook', 'stories');
+};
 const componentsRootPath = (repoPath) =>
   path.resolve(repoPath, 'src', 'components');
 
+const olderVersionSupport = [
+  '3.2.1',
+  '3.1.0',
+  '3.0.7',
+  '3.0.6',
+  '3.0.3',
+  '3.0.0',
+  '3.0.0-next.40',
+  '3.0.0-next.38',
+  '3.0.0-next.37',
+  '3.0.0-next.36',
+];
 const getSnackPlayerCodeSnippet = (repoPath, ...examplePath) => {
   // console.log('snippet args received', args);
-  const filePath = path.resolve(storybookExamplePath(repoPath), ...examplePath);
+  const filePath = path.resolve(
+    storybookExamplePath(repoPath),
+    olderVersionSupport.includes(getRepoVersion(repoPath)) ? 'components' : '', // add components older version docs.
+    ...examplePath
+  );
   const fileContent = fs.readFileSync(filePath, { encoding: 'utf-8' });
   try {
     let transformedFile = transformStorybookToDocExample(
diff --git a/sidebars.js b/sidebars.js
index 343c159b0..5bf3ee883 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -52,7 +52,7 @@ module.exports = {
       label: 'Layout',
       collapsed: false,
       items: [
-        // 'aspectRatio',
+        'aspectRatio',
         'box',
         'center',
         'container',
diff --git a/unreleased-docs/aspectRatio.md b/unreleased-docs/aspectRatio.md
deleted file mode 100644
index 9bcb91863..000000000
--- a/unreleased-docs/aspectRatio.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-id: aspectRatio
-title: AspectRatio
----
-
-## Implements
-
-- [`Box`](box.md)
-
-## Example
-
-### Basic
-
-```SnackPlayer name=AspectRatio%20Example
-import React from "react";
-import { AspectRatio, Box, NativeBaseProvider, Center } from "native-base";
-function Component() {
-  return (
-    <AspectRatio height={32} ratio={4/3}>
-      <Box bg="emerald.400" rounded="lg"/>
-    </AspectRatio>
-  );
-}
-
-// Example template which wraps component with NativeBaseProvider
-export default function () {
-  return (
-    <NativeBaseProvider>
-      <Center flex={1}>
-        <Component />
-      </Center>
-    </NativeBaseProvider>
-  );
-}
-```
-
-### Embed Image
-
-```SnackPlayer name=AspectRatio%20ExampleEmbedImage
-import React from "react";
-import { AspectRatio, Image, NativeBaseProvider, Center } from "native-base";
-function Component() {
-  return (
-    <AspectRatio ratio={0.87} height={200}>
-      <Image
-        resizeMode="cover"
-        source={{
-          uri: "https://alpha.nativebase.io/img/icon.png",
-        }}
-      />
-    </AspectRatio>
-  );
-}
-
-// Example template which wraps component with NativeBaseProvider
-export default function () {
-  return (
-    <NativeBaseProvider>
-      <Center flex={1}>
-        <Component />
-      </Center>
-    </NativeBaseProvider>
-  );
-}
-
-```
-
-## Props
-
-`AspectRatio` implements **[Box](box.md)**, so all the Box props can be passed to it.
-
-| Name  | Type   | Description                                    | Default |
-| ----- | ------ | ---------------------------------------------- | ------- |
-| ratio | number | The aspect ratio(width/height) of the content. | `4/3`   |