diff --git a/src/playground/src/ui/screen/calendar/calendarCustomItem.component.tsx b/src/playground/src/ui/screen/calendar/calendarCustomItem.component.tsx
index bbf74bcc4..7c06f5970 100644
--- a/src/playground/src/ui/screen/calendar/calendarCustomItem.component.tsx
+++ b/src/playground/src/ui/screen/calendar/calendarCustomItem.component.tsx
@@ -7,7 +7,7 @@ import {
 import { StyleType } from '@kitten/theme';
 import { Text } from '@kitten/ui';
 
-export const CalendarCustomItem = (date: Date, style: StyleType): React.ReactElement<ViewProps> => {
+export const CalendarCustomItem = ({ date }, style: StyleType): React.ReactElement<ViewProps> => {
 
   const value: number = 100 * date.getDate() + Math.pow(date.getDate(), 2);
 
diff --git a/src/playground/src/ui/screen/calendar/type.ts b/src/playground/src/ui/screen/calendar/type.ts
index cccc833d4..a3cb681bc 100644
--- a/src/playground/src/ui/screen/calendar/type.ts
+++ b/src/playground/src/ui/screen/calendar/type.ts
@@ -161,6 +161,7 @@ const filterSection: ComponentShowcaseSection = {
 export const calendarShowcase: ComponentShowcase = {
   sections: [
     defaultSection,
+    // customItemSection,
     // momentSection,
     // dateFnsSection,
     // startViewSection,
diff --git a/src/playground/src/ui/screen/showcases/calendar/calendarBoundingMonth.component.tsx b/src/playground/src/ui/screen/showcases/calendar/calendarBoundingMonth.component.tsx
index 3903caee7..181c09cf6 100644
--- a/src/playground/src/ui/screen/showcases/calendar/calendarBoundingMonth.component.tsx
+++ b/src/playground/src/ui/screen/showcases/calendar/calendarBoundingMonth.component.tsx
@@ -30,8 +30,7 @@ export class CalendarBoundingMonthShowcase extends React.Component {
 
 const styles = StyleSheet.create({
   container: {
-    justifyContent: 'center',
-    alignItems: 'center',
     padding: 16,
+    minHeight: 376,
   },
 });
diff --git a/src/playground/src/ui/screen/showcases/calendar/calendarCustomDay.component.tsx b/src/playground/src/ui/screen/showcases/calendar/calendarCustomDay.component.tsx
index 9bea52ec7..b95b2d7ad 100644
--- a/src/playground/src/ui/screen/showcases/calendar/calendarCustomDay.component.tsx
+++ b/src/playground/src/ui/screen/showcases/calendar/calendarCustomDay.component.tsx
@@ -44,9 +44,8 @@ export class CalendarCustomDayShowcase extends React.Component {
 
 const styles = StyleSheet.create({
   container: {
-    justifyContent: 'center',
-    alignItems: 'center',
     padding: 16,
+    minHeight: 376,
   },
   dayContainer: {
     flex: 1,
diff --git a/src/playground/src/ui/screen/showcases/calendar/calendarCustomLocale.component.tsx b/src/playground/src/ui/screen/showcases/calendar/calendarCustomLocale.component.tsx
index be68dec48..a23bd5312 100644
--- a/src/playground/src/ui/screen/showcases/calendar/calendarCustomLocale.component.tsx
+++ b/src/playground/src/ui/screen/showcases/calendar/calendarCustomLocale.component.tsx
@@ -44,8 +44,7 @@ export class CalendarCustomLocaleShowcase extends React.Component {
 
 const styles = StyleSheet.create({
   container: {
-    justifyContent: 'center',
-    alignItems: 'center',
     padding: 16,
+    minHeight: 376,
   },
 });
diff --git a/src/playground/src/ui/screen/showcases/calendar/calendarFilterShowcase.component.tsx b/src/playground/src/ui/screen/showcases/calendar/calendarFilterShowcase.component.tsx
index d19baab34..a190e5d1e 100644
--- a/src/playground/src/ui/screen/showcases/calendar/calendarFilterShowcase.component.tsx
+++ b/src/playground/src/ui/screen/showcases/calendar/calendarFilterShowcase.component.tsx
@@ -34,8 +34,7 @@ export class CalendarFilterShowcase extends React.Component {
 
 const styles = StyleSheet.create({
   container: {
-    justifyContent: 'center',
-    alignItems: 'center',
     padding: 16,
+    minHeight: 376,
   },
 });
diff --git a/src/playground/src/ui/screen/showcases/calendar/calendarMoment.component.tsx b/src/playground/src/ui/screen/showcases/calendar/calendarMoment.component.tsx
index bbc371742..a22e93514 100644
--- a/src/playground/src/ui/screen/showcases/calendar/calendarMoment.component.tsx
+++ b/src/playground/src/ui/screen/showcases/calendar/calendarMoment.component.tsx
@@ -39,8 +39,7 @@ export class CalendarMomentShowcase extends React.Component {
 
 const styles = StyleSheet.create({
   container: {
-    justifyContent: 'center',
-    alignItems: 'center',
     padding: 16,
+    minHeight: 376,
   },
 });
diff --git a/src/playground/src/ui/screen/showcases/calendar/calendarSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/calendar/calendarSimpleUsage.component.tsx
index 3e24d7e10..9e276528f 100644
--- a/src/playground/src/ui/screen/showcases/calendar/calendarSimpleUsage.component.tsx
+++ b/src/playground/src/ui/screen/showcases/calendar/calendarSimpleUsage.component.tsx
@@ -29,8 +29,7 @@ export class CalendarSimpleUsageShowcase extends React.Component {
 
 const styles = StyleSheet.create({
   container: {
-    justifyContent: 'center',
-    alignItems: 'center',
     padding: 16,
+    minHeight: 376,
   },
 });