docs: add get started button on initial page (#3697)

Author: lukewalczak

docs/src/components/BannerExample.tsx

@@ -142,7 +142,7 @@ const BannerExample = () => {
 export default function WithProvider() {
   const isDarkTheme = useColorMode().colorMode === 'dark';
   return (
-    <BrowserOnly>
+    <BrowserOnly fallback={<ProgressBar indeterminate />}>
       {() => (
         <Provider theme={isDarkTheme ? DarkTheme : DefaultTheme}>
           <BannerExample />

docs/src/components/GetStartedButtons.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import Link from '@docusaurus/Link';
+import { useColorMode } from '@docusaurus/theme-common';
+import {
+  Button,
+  MD3DarkTheme as DarkTheme,
+  MD3LightTheme as DefaultTheme,
+  Provider,
+} from 'react-native-paper';
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    paddingBottom: 16,
+  },
+  button: {
+    marginRight: 16,
+  },
+});
+
+const GetStartedButton = () => {
+  return (
+    <View style={styles.container}>
+      <Link to="docs/guides/getting-started" style={{ textDecoration: 'none' }}>
+        <Button mode="elevated" style={styles.button}>
+          Get started
+        </Button>
+      </Link>
+      <Button
+        mode="elevated"
+        onPress={() =>
+          window.open(
+            'https://snack.expo.dev/@react-native-paper/react-native-paper-example_v5'
+          )
+        }
+      >
+        Try on Snack
+      </Button>
+    </View>
+  );
+};
+
+export default function WithProvider() {
+  const isDarkTheme = useColorMode().colorMode === 'dark';
+  return (
+    <BrowserOnly>
+      {() => (
+        <Provider theme={isDarkTheme ? DarkTheme : DefaultTheme}>
+          <GetStartedButton />
+        </Provider>
+      )}
+    </BrowserOnly>
+  );
+}

docs/src/pages/index.mdx

@@ -2,11 +2,15 @@
 
 # Cross-platform Material Design for React Native
 
+import {Button} from 'react-native-paper';
+import GetStartedButtons from '../components/GetStartedButtons';
 import BannerExample from '../components/BannerExample';
 
 Paper is a collection of customizable and production-ready components for React Native, following Google’s Material Design guidelines.
 
-Try the demo on [Snack](https://snack.expo.dev/@react-native-paper/react-native-paper-example_v5), [iOS](https://apps.apple.com/app/react-native-paper/id1548934513) or [Android](https://play.google.com/store/apps/details?id=com.callstack.reactnativepaperexample).
+<GetStartedButtons />
+
+Or check the demo app on [iOS](https://apps.apple.com/app/react-native-paper/id1548934513) or [Android](https://play.google.com/store/apps/details?id=com.callstack.reactnativepaperexample).
 
 <BannerExample />