Put status bar underlay on main example page.

dream-sports-labs · Jan 31, 2018 · 82b4693 · 82b4693
1 parent 2df16ca
commit 82b4693
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 27 deletions.
diff --git a/example/fastImage/Button.js b/example/fastImage/Button.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Text, TouchableOpacity, StyleSheet } from 'react-native'
+import { StyleSheet, Text, TouchableOpacity } from 'react-native'
 
 const Button = ({ text, onPress }) => (
   <TouchableOpacity onPress={onPress}>

diff --git a/example/fastImage/FastImageExamples.js b/example/fastImage/FastImageExamples.js
@@ -8,6 +8,7 @@ import BorderRadiusExample from './BorderRadiusExample'
 import FeatureText from './FeatureText'
 import ProgressExample from './ProgressExample'
 import PreloadExample from './PreloadExample'
+import StatusBarUnderlay, { STATUS_BAR_HEIGHT } from './StatusBarUnderlay'
 
 const FastImageExample = () => (
   <View style={styles.container}>
@@ -32,6 +33,7 @@ const FastImageExample = () => (
         <PreloadExample />
       </View>
     </ScrollView>
+    <StatusBarUnderlay />
   </View>
 )
 
@@ -52,7 +54,7 @@ const styles = StyleSheet.create({
     color: '#222',
   },
   contentContainer: {
-    marginTop: 40,
+    marginTop: 20,
     marginBottom: 20,
   },
   image: {
@@ -66,7 +68,9 @@ const styles = StyleSheet.create({
     alignItems: 'stretch',
     backgroundColor: '#fff',
   },
-  scrollContainer: {},
+  scrollContainer: {
+    marginTop: STATUS_BAR_HEIGHT,
+  },
   scrollContentContainer: {
     alignItems: 'stretch',
     flex: 0,

diff --git a/example/fastImage/FeatureText.js b/example/fastImage/FeatureText.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Text, StyleSheet } from 'react-native'
+import { StyleSheet, Text } from 'react-native'
 
 export default ({ text }) => <Text style={styles.style}>{text}</Text>
 

diff --git a/example/fastImage/GifExample.js b/example/fastImage/GifExample.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { View, StyleSheet } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 import withCacheBust from './withCacheBust'
 import SectionFlex from './SectionFlex'
 import FastImage from 'react-native-fast-image'

diff --git a/example/fastImage/ImageGrid.js b/example/fastImage/ImageGrid.js
@@ -1,12 +1,6 @@
 import React, { Component } from 'react'
-import {
-  StyleSheet,
-  View,
-  FlatList,
-  Platform,
-  StatusBar,
-  Text,
-} from 'react-native'
+import { FlatList, StyleSheet, Text, View, } from 'react-native'
+import StatusBarUnderlay, { STATUS_BAR_HEIGHT } from './StatusBarUnderlay'
 
 const getImageUrl = (id, width, height) =>
   `https://unsplash.it/${width}/${height}?image=${id}`
@@ -87,24 +81,15 @@ class ImageGrid extends Component {
           keyExtractor={this._extractKey}
           getItemLayout={this._getItemLayout}
         />
-        <View style={styles.statusBarUnderlay} />
+        <StatusBarUnderlay />
       </View>
     )
   }
 }
 
 const MARGIN = 2
-const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBar.currentHeight
 
 const styles = StyleSheet.create({
-  statusBarUnderlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    height: STATUS_BAR_HEIGHT,
-    backgroundColor: 'white',
-  },
   container: {
     flex: 1,
     backgroundColor: '#fff',

diff --git a/example/fastImage/PreloadExample.js b/example/fastImage/PreloadExample.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { View, StyleSheet } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 import SectionFlex from './SectionFlex'
 import FastImage from 'react-native-fast-image'
 import Section from './Section'

diff --git a/example/fastImage/PriorityExample.js b/example/fastImage/PriorityExample.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { StyleSheet, View, PixelRatio } from 'react-native'
+import { PixelRatio, StyleSheet, View } from 'react-native'
 import withCacheBust from './withCacheBust'
 import FastImage from 'react-native-fast-image'
 import Section from './Section'

diff --git a/example/fastImage/Section.js b/example/fastImage/Section.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { View, StyleSheet } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 
 export default ({ children }) => <View style={styles.section}>{children}</View>
 

diff --git a/example/fastImage/SectionFlex.js b/example/fastImage/SectionFlex.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { TouchableOpacity, StyleSheet } from 'react-native'
+import { StyleSheet, TouchableOpacity } from 'react-native'
 
 export default ({ children, onPress, style }) => (
   <TouchableOpacity style={[styles.sectionFlex, style]} onPress={onPress}>

diff --git a/example/fastImage/StatusBarUnderlay.js b/example/fastImage/StatusBarUnderlay.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import { Platform, StatusBar, StyleSheet, View } from 'react-native'
+
+export const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBar.currentHeight
+
+export default () => <View style={styles.statusBarUnderlay} />
+
+const styles = StyleSheet.create({
+  statusBarUnderlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: STATUS_BAR_HEIGHT,
+    backgroundColor: 'white',
+  },
+})