[docs] fix constants in blurview example (#7988)

expo · Apr 24, 2020 · 085eca3 · 085eca3
1 parent b5c35b9
commit 085eca3
Show file tree

Hide file tree

Showing 10 changed files with 177 additions and 169 deletions.
diff --git a/docs/pages/versions/unversioned/sdk/blur-view.md b/docs/pages/versions/unversioned/sdk/blur-view.md
@@ -1,13 +1,13 @@
 ---
 title: BlurView
-sourceCodeUrl: 'https://github.com/expo/expo/tree/sdk-36/packages/expo-blur'
+sourceCodeUrl: 'https://github.com/expo/expo/tree/master/packages/expo-blur'
 ---
 
 import InstallSection from '~/components/plugins/InstallSection';
 import PlatformsSection from '~/components/plugins/PlatformsSection';
 import SnackInline from '~/components/plugins/SnackInline';
 
-A React component that renders a native blur view on iOS and falls back to a semi-transparent view on Android. A common usage of this is for navigation bars, tab bars, and modals.
+A React component that blurs everything underneath the view. On iOS, it renders a native blur view. On Android, it falls back to a semi-transparent view. Common usage of this is for navigation bars, tab bars, and modals.
 
 <PlatformsSection android emulator ios simulator web />
 
@@ -21,19 +21,23 @@ A React component that renders a native blur view on iOS and falls back to a sem
 
 ```js
 import React from 'react';
-import { Image, StyleSheet, View } from 'react-native';
+import { Image, Text, StyleSheet, View } from 'react-native';
+import Constants from 'expo-constants';
 import { BlurView } from 'expo-blur';
+
 const uri = 'https://s3.amazonaws.com/exp-icon-assets/ExpoEmptyManifest_192.png';
 
 export default function App() {
   return (
-    <View style={styles.container}>
-      <Image style={{ width: 192, height: 192 }} source={{ uri }} />
-
-      {/* Adjust the tint and intensity */}
-      <BlurView tint="light" intensity={50} style={styles.notBlurred}>
-        <Image style={{ width: 96, height: 96 }} source={{ uri }} />
-      </BlurView>
+    <View style={{ flex: 1 }}>
+      <View style={styles.container}>
+        <Image style={styles.blurredImage} source={{ uri }} />
+
+        {/* Adjust the tint and intensity */}
+        <BlurView intensity={100} style={[StyleSheet.absoluteFill, styles.nonBlurredContent]}>
+          <Text>Hello! I am bluring contents underneath</Text>
+        </BlurView>
+      </View>
     </View>
   );
 }
@@ -51,5 +55,3 @@ import { BlurView } from 'expo-blur';
 
 - **tint (string)** -- `light`, `default` or `dark`.
 - **intensity (number)** -- A number from `1` to `100` to control the intensity of the blur effect.
-
-#
diff --git a/docs/pages/versions/v34.0.0/sdk/blur-view.md b/docs/pages/versions/v34.0.0/sdk/blur-view.md
@@ -1,64 +1,50 @@
 ---
 title: BlurView
-sourceCodeUrl: "https://github.com/expo/expo/tree/sdk-34/packages/expo-blur"
+sourceCodeUrl: https://github.com/expo/expo/tree/sdk-34/packages/expo-blur
 ---
 
+import InstallSection from '~/components/plugins/InstallSection';
+import PlatformsSection from '~/components/plugins/PlatformsSection';
 import SnackInline from '~/components/plugins/SnackInline';
 
-A React component that renders a native blur view on iOS and falls back to a semi-transparent view on Android. A common usage of this is for navigation bars, tab bars, and modals.
+A React component that blurs everything underneath the view. On iOS, it renders a native blur view. On Android, it falls back to a semi-transparent view. Common usage of this is for navigation bars, tab bars, and modals.
 
-#### Platform Compatibility
-
-| Android Device | Android Emulator | iOS Device | iOS Simulator |  Web  |
-| ------ | ---------- | ------ | ------ | ------ |
-| ✅     |  ✅     | ✅     | ✅     | ✅    |
+<PlatformsSection android emulator ios simulator web />
 
 ## Installation
 
-For [managed](../../introduction/managed-vs-bare/#managed-workflow) apps, you'll need to run `expo install expo-blur`. To use it in a [bare](../../introduction/managed-vs-bare/#bare-workflow) React Native app, follow its [installation instructions](https://github.com/expo/expo/tree/master/packages/expo-blur).
+<InstallSection packageName="expo-blur" />
 
 ## Usage
 
 <SnackInline label='Basic BlurView usage' templateId="blur-view" dependencies={['expo-blur']}>
 
-```javascript
+```js
 import React from 'react';
-import { Image, StyleSheet, View } from 'react-native';
+import { Image, Text, StyleSheet, View } from 'react-native';
+import Constants from 'expo-constants';
 import { BlurView } from 'expo-blur';
+
 const uri = 'https://s3.amazonaws.com/exp-icon-assets/ExpoEmptyManifest_192.png';
 
-export default class BlurViewExample extends React.Component {
-  render() {
-    return (
+export default function App() {
+  return (
+    <View style={{ flex: 1 }}>
       <View style={styles.container}>
-        <Image style={{ width: 192, height: 192 }} source={{ uri }} />
+        <Image style={styles.blurredImage} source={{ uri }} />
 
         {/* Adjust the tint and intensity */}
-        <BlurView tint="light" intensity={50} style={styles.notBlurred}>
-          <Image style={{ width: 96, height: 96 }} source={{ uri }} />
+        <BlurView intensity={100} style={[StyleSheet.absoluteFill, styles.nonBlurredContent]}>
+          <Text>Hello! I am bluring contents underneath</Text>
         </BlurView>
-
       </View>
-    );
-  }
+    </View>
+  );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  notBlurred: {
-    ...StyleSheet.absoluteFill,
-    top: Constants.statusBarHeight,
-  }
-});
 ```
 
 </SnackInline>
 
-
 ## API
 
 ```js
@@ -69,5 +55,3 @@ import { BlurView } from 'expo-blur';
 
 - **tint (string)** -- `light`, `default` or `dark`.
 - **intensity (number)** -- A number from `1` to `100` to control the intensity of the blur effect.
-
-#
diff --git a/docs/pages/versions/v35.0.0/sdk/blur-view.md b/docs/pages/versions/v35.0.0/sdk/blur-view.md
@@ -1,64 +1,50 @@
 ---
 title: BlurView
-sourceCodeUrl: "https://github.com/expo/expo/tree/sdk-35/packages/expo-blur"
+sourceCodeUrl: https://github.com/expo/expo/tree/sdk-35/packages/expo-blur
 ---
 
+import InstallSection from '~/components/plugins/InstallSection';
+import PlatformsSection from '~/components/plugins/PlatformsSection';
 import SnackInline from '~/components/plugins/SnackInline';
 
-A React component that renders a native blur view on iOS and falls back to a semi-transparent view on Android. A common usage of this is for navigation bars, tab bars, and modals.
+A React component that blurs everything underneath the view. On iOS, it renders a native blur view. On Android, it falls back to a semi-transparent view. Common usage of this is for navigation bars, tab bars, and modals.
 
-#### Platform Compatibility
-
-| Android Device | Android Emulator | iOS Device | iOS Simulator |  Web  |
-| ------ | ---------- | ------ | ------ | ------ |
-| ✅     |  ✅     | ✅     | ✅     | ✅    |
+<PlatformsSection android emulator ios simulator web />
 
 ## Installation
 
-For [managed](../../introduction/managed-vs-bare/#managed-workflow) apps, you'll need to run `expo install expo-blur`. To use it in a [bare](../../introduction/managed-vs-bare/#bare-workflow) React Native app, follow its [installation instructions](https://github.com/expo/expo/tree/master/packages/expo-blur).
+<InstallSection packageName="expo-blur" />
 
 ## Usage
 
 <SnackInline label='Basic BlurView usage' templateId="blur-view" dependencies={['expo-blur']}>
 
-```javascript
+```js
 import React from 'react';
-import { Image, StyleSheet, View } from 'react-native';
+import { Image, Text, StyleSheet, View } from 'react-native';
+import Constants from 'expo-constants';
 import { BlurView } from 'expo-blur';
+
 const uri = 'https://s3.amazonaws.com/exp-icon-assets/ExpoEmptyManifest_192.png';
 
-export default class BlurViewExample extends React.Component {
-  render() {
-    return (
+export default function App() {
+  return (
+    <View style={{ flex: 1 }}>
       <View style={styles.container}>
-        <Image style={{ width: 192, height: 192 }} source={{ uri }} />
+        <Image style={styles.blurredImage} source={{ uri }} />
 
         {/* Adjust the tint and intensity */}
-        <BlurView tint="light" intensity={50} style={styles.notBlurred}>
-          <Image style={{ width: 96, height: 96 }} source={{ uri }} />
+        <BlurView intensity={100} style={[StyleSheet.absoluteFill, styles.nonBlurredContent]}>
+          <Text>Hello! I am bluring contents underneath</Text>
         </BlurView>
-
       </View>
-    );
-  }
+    </View>
+  );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  notBlurred: {
-    ...StyleSheet.absoluteFill,
-    top: Constants.statusBarHeight,
-  }
-});
 ```
 
 </SnackInline>
 
-
 ## API
 
 ```js
@@ -69,5 +55,3 @@ import { BlurView } from 'expo-blur';
 
 - **tint (string)** -- `light`, `default` or `dark`.
 - **intensity (number)** -- A number from `1` to `100` to control the intensity of the blur effect.
-
-#
diff --git a/docs/pages/versions/v36.0.0/sdk/blur-view.md b/docs/pages/versions/v36.0.0/sdk/blur-view.md
@@ -1,13 +1,13 @@
 ---
 title: BlurView
-sourceCodeUrl: 'https://github.com/expo/expo/tree/sdk-36/packages/expo-blur'
+sourceCodeUrl: https://github.com/expo/expo/tree/sdk-36/packages/expo-blur
 ---
 
 import InstallSection from '~/components/plugins/InstallSection';
 import PlatformsSection from '~/components/plugins/PlatformsSection';
 import SnackInline from '~/components/plugins/SnackInline';
 
-A React component that renders a native blur view on iOS and falls back to a semi-transparent view on Android. A common usage of this is for navigation bars, tab bars, and modals.
+A React component that blurs everything underneath the view. On iOS, it renders a native blur view. On Android, it falls back to a semi-transparent view. Common usage of this is for navigation bars, tab bars, and modals.
 
 <PlatformsSection android emulator ios simulator web />
 
@@ -21,19 +21,23 @@ A React component that renders a native blur view on iOS and falls back to a sem
 
 ```js
 import React from 'react';
-import { Image, StyleSheet, View } from 'react-native';
+import { Image, Text, StyleSheet, View } from 'react-native';
+import Constants from 'expo-constants';
 import { BlurView } from 'expo-blur';
+
 const uri = 'https://s3.amazonaws.com/exp-icon-assets/ExpoEmptyManifest_192.png';
 
 export default function App() {
   return (
-    <View style={styles.container}>
-      <Image style={{ width: 192, height: 192 }} source={{ uri }} />
-
-      {/* Adjust the tint and intensity */}
-      <BlurView tint="light" intensity={50} style={styles.notBlurred}>
-        <Image style={{ width: 96, height: 96 }} source={{ uri }} />
-      </BlurView>
+    <View style={{ flex: 1 }}>
+      <View style={styles.container}>
+        <Image style={styles.blurredImage} source={{ uri }} />
+
+        {/* Adjust the tint and intensity */}
+        <BlurView intensity={100} style={[StyleSheet.absoluteFill, styles.nonBlurredContent]}>
+          <Text>Hello! I am bluring contents underneath</Text>
+        </BlurView>
+      </View>
     </View>
   );
 }
@@ -51,5 +55,3 @@ import { BlurView } from 'expo-blur';
 
 - **tint (string)** -- `light`, `default` or `dark`.
 - **intensity (number)** -- A number from `1` to `100` to control the intensity of the blur effect.
-
-#
diff --git a/docs/pages/versions/v37.0.0/sdk/blur-view.md b/docs/pages/versions/v37.0.0/sdk/blur-view.md
@@ -1,13 +1,13 @@
 ---
 title: BlurView
-sourceCodeUrl: 'https://github.com/expo/expo/tree/sdk-36/packages/expo-blur'
+sourceCodeUrl: https://github.com/expo/expo/tree/sdk-37/packages/expo-blur
 ---
 
 import InstallSection from '~/components/plugins/InstallSection';
 import PlatformsSection from '~/components/plugins/PlatformsSection';
 import SnackInline from '~/components/plugins/SnackInline';
 
-A React component that renders a native blur view on iOS and falls back to a semi-transparent view on Android. A common usage of this is for navigation bars, tab bars, and modals.
+A React component that blurs everything underneath the view. On iOS, it renders a native blur view. On Android, it falls back to a semi-transparent view. Common usage of this is for navigation bars, tab bars, and modals.
 
 <PlatformsSection android emulator ios simulator web />
 
@@ -21,19 +21,23 @@ A React component that renders a native blur view on iOS and falls back to a sem
 
 ```js
 import React from 'react';
-import { Image, StyleSheet, View } from 'react-native';
+import { Image, Text, StyleSheet, View } from 'react-native';
+import Constants from 'expo-constants';
 import { BlurView } from 'expo-blur';
+
 const uri = 'https://s3.amazonaws.com/exp-icon-assets/ExpoEmptyManifest_192.png';
 
 export default function App() {
   return (
-    <View style={styles.container}>
-      <Image style={{ width: 192, height: 192 }} source={{ uri }} />
-
-      {/* Adjust the tint and intensity */}
-      <BlurView tint="light" intensity={50} style={styles.notBlurred}>
-        <Image style={{ width: 96, height: 96 }} source={{ uri }} />
-      </BlurView>
+    <View style={{ flex: 1 }}>
+      <View style={styles.container}>
+        <Image style={styles.blurredImage} source={{ uri }} />
+
+        {/* Adjust the tint and intensity */}
+        <BlurView intensity={100} style={[StyleSheet.absoluteFill, styles.nonBlurredContent]}>
+          <Text>Hello! I am bluring contents underneath</Text>
+        </BlurView>
+      </View>
     </View>
   );
 }
@@ -51,5 +55,3 @@ import { BlurView } from 'expo-blur';
 
 - **tint (string)** -- `light`, `default` or `dark`.
 - **intensity (number)** -- A number from `1` to `100` to control the intensity of the blur effect.
-
-#
diff --git a/docs/static/examples/unversioned/blur-view.js b/docs/static/examples/unversioned/blur-view.js
@@ -1,29 +1,37 @@
 import React from 'react';
-import { Image, StyleSheet, View } from 'react-native';
+import { Image, Text, StyleSheet, View } from 'react-native';
+import Constants from 'expo-constants';
 import { BlurView } from 'expo-blur';
+
 const uri = 'https://s3.amazonaws.com/exp-icon-assets/ExpoEmptyManifest_192.png';
 
 export default function App() {
   return (
-    <View style={styles.container}>
-      <Image style={{ width: 192, height: 192 }} source={{ uri }} />
+    <View style={{ flex: 1 }}>
+      <View style={styles.container}>
+        <Image style={styles.blurredImage} source={{ uri }} />
 
-      {/* Adjust the tint and intensity */}
-      <BlurView tint="light" intensity={50} style={styles.notBlurred}>
-        <Image style={{ width: 96, height: 96 }} source={{ uri }} />
-      </BlurView>
+        {/* Adjust the tint and intensity */}
+        <BlurView intensity={100} style={[StyleSheet.absoluteFill, styles.nonBlurredContent]}>
+          <Text>Hello! I am bluring contents underneath</Text>
+        </BlurView>
+      </View>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
     alignItems: 'center',
+    justifyContent: 'center',
   },
-  notBlurred: {
-    ...StyleSheet.absoluteFill,
-    top: Constants.statusBarHeight,
+  blurredImage: {
+    width: 192,
+    height: 192,
+  },
+  nonBlurredContent: {
+    alignItems: 'center',
+    justifyContent: 'center',
   },
 });