+
+
+
+ NativeBase is a component library that enables devs to build universal design systems. It is built on top of React Native, allowing you to develop apps for Android, iOS and the Web.
+
+
+
+
+
+
+
+
A Brief History of NativeBase
+
+
+
+
What's New with NativeBase v3?
+
+We had clear goals in mind while building version 3. Take a look at some of the new features we added:
+
+
+
Multiplatform
+
+ NativeBase supports multiple platforms; android, iOS and web. You can also
+ customise properties using platform-specific props.
+
+
+
+
+
Inherently Beautiful
+
+ NativeBase ships with a default theme that provides beautiful components,
+ out of the box.
+
+
+
+
+
Accessible
+
+ This version has out of the box accessibility including focus management,
+ keyboard navigation and more.
+
+
+
+
+
Customisable
+
+
+
+The default theme can be extended as you desire. You can also customise specific components for your app needs.
+
+
+
+
diff --git a/versioned_docs/version-3.0.7/overlay.md b/versioned_docs/version-3.0.7/overlay.md
new file mode 100644
index 000000000..4dbcbad8c
--- /dev/null
+++ b/versioned_docs/version-3.0.7/overlay.md
@@ -0,0 +1,97 @@
+---
+id: overlay
+title: Overlay
+---
+
+`Overlay` is the fundamental component for positioning and controlling new components on top of existing ones.
+
+## Import
+
+```jsx
+import { Overlay, useOverlay } from 'native-base';
+```
+
+## Examples
+
+### Usage
+
+```SnackPlayer name=Overlay%20Usage
+import React from 'react';
+import { Button, useOverlay, NativeBaseProvider, Center } from 'native-base';
+
+function OverlayComponent () {
+ const { closeOverlay, setOverlay } = useOverlay();
+ return (
+
+
+```jsx
+import * as React from 'react';
+import { Text, View, StyleSheet, Image, Pressable } from 'react-native';
+
+export default function App() {
+ return (
+
+
+
+
+ Today @ 9PM
+ Let's talk about avatar!
+
+
+ Remind me
+
+
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ backgroundColor: '#0891b2',
+ paddingVertical: 16,
+ paddingHorizontal: 12,
+ borderRadius: 5,
+ alignSelf: 'center',
+ width: 375,
+ maxWidth: '100%',
+ },
+ timings: {
+ color: '#fff',
+ fontSize: 14,
+ },
+ metaContainer: {
+ justifyContent: 'space-between',
+ },
+ topContainer: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ },
+ avatar: {
+ height: 100,
+ width: 100,
+ borderRadius: 100,
+ },
+ description: {
+ color: 'white',
+ marginTop: 5,
+ fontSize: 20,
+ },
+ button: {
+ backgroundColor: '#22d3ee',
+ alignSelf: 'flex-start',
+ paddingHorizontal: 10,
+ paddingVertical: 5,
+ borderRadius: 3,
+ },
+ buttonText: {
+ fontWeight: 'bold',
+ color: 'white',
+ textTransform: 'uppercase',
+ fontSize: 14,
+ },
+});
+```
+
+
+
+
+
+```jsx
+import * as React from 'react';
+import {
+ NativeBaseProvider,
+ Box,
+ HStack,
+ VStack,
+ Text,
+ Pressable,
+ Image,
+} from 'native-base';
+
+export function UtilityFirstExample() {
+ return (
+
+
+
+
+
+
+ Today @ 9PM
+
+
+ Let's talk about avatar!
+
+
+
+
+ Remind me
+
+
+
+
+
+
+
+ );
+}
+```
+
+
+
+The above example demonstrates the usage of [utility props](utility-props) alongwith [VStack](vstack), [HStack](hstack) components. This approach allows us to style components without using StyleSheet API.
+
+Apart from productivity boost and saving time there are other benefits by styling components using utility props.
+No need to name styles anymore, no need to define an object and think about naming them.
+
+Using utility-first props, you can focus on creating reusable components instead of reusable stylesheets.
+
+Once you start writing styles this way, any other way will feel cumbersome.
+
+> Put simply, utility first approach opens up the Avatar state within developers.
+
+