fix: example app tweaks

example/package.json

@@ -15,14 +15,15 @@
     "@expo/vector-icons": "^12.0.0",
     "@react-native-community/async-storage": "~1.12.0",
     "@react-native-community/masked-view": "0.1.10",
-    "@react-navigation/drawer": "^5.6.1",
+    "@react-navigation/drawer": "^5.12.5",
     "@react-navigation/native": "^5.2.1",
     "@react-navigation/stack": "^5.2.16",
     "expo": "^40.0.0",
     "expo-font": "~8.4.0",
     "expo-keep-awake": "~8.4.0",
     "expo-splash-screen": "~0.8.1",
     "expo-status-bar": "~1.0.3",
+    "expo-updates": "^0.5.4",
     "file-loader": "^4.0.0",
     "react": "16.13.1",
     "react-dom": "16.13.1",

example/src/DrawerItems.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { View, StyleSheet, Platform } from 'react-native';
+import { View, StyleSheet } from 'react-native';
+import { DrawerContentScrollView } from '@react-navigation/drawer';
 import {
   Drawer,
   Switch,
@@ -8,6 +9,7 @@ import {
   Colors,
   useTheme,
 } from 'react-native-paper';
+import * as Updates from 'expo-updates';
 
 type Props = {
   toggleTheme: () => void;
@@ -31,8 +33,16 @@ const DrawerItems = ({ toggleTheme, toggleRTL, isRTL, isDarkTheme }: Props) => {
 
   const { colors } = useTheme();
 
+  const _handleToggleRTL = () => {
+    toggleRTL();
+    Updates.reloadAsync();
+  };
+
   return (
-    <View style={[styles.drawerContent, { backgroundColor: colors.surface }]}>
+    <DrawerContentScrollView
+      alwaysBounceVertical={false}
+      style={[styles.drawerContent, { backgroundColor: colors.surface }]}
+    >
       <Drawer.Section title="Example items">
         {DrawerItemsData.map((props, index) => (
           <Drawer.Item
@@ -58,7 +68,7 @@ const DrawerItems = ({ toggleTheme, toggleRTL, isRTL, isDarkTheme }: Props) => {
             </View>
           </View>
         </TouchableRipple>
-        <TouchableRipple onPress={toggleRTL}>
+        <TouchableRipple onPress={_handleToggleRTL}>
           <View style={styles.preference}>
             <Text>RTL</Text>
             <View pointerEvents="none">
@@ -67,14 +77,13 @@ const DrawerItems = ({ toggleTheme, toggleRTL, isRTL, isDarkTheme }: Props) => {
           </View>
         </TouchableRipple>
       </Drawer.Section>
-    </View>
+    </DrawerContentScrollView>
   );
 };
 
 const styles = StyleSheet.create({
   drawerContent: {
     flex: 1,
-    paddingTop: Platform.OS === 'android' ? 25 : 22,
   },
   preference: {
     flexDirection: 'row',

example/src/ExampleList.tsx

@@ -108,6 +108,8 @@ export default function ExampleList({ navigation }: Props) {
       contentContainerStyle={{
         backgroundColor: colors.background,
         paddingBottom: safeArea.bottom,
+        paddingLeft: safeArea.left,
+        paddingRight: safeArea.right,
       }}
       style={{ backgroundColor: colors.background }}
       ItemSeparatorComponent={Divider}

example/src/Examples/ActivityIndicatorExample.tsx

@@ -1,15 +1,13 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
-import { ActivityIndicator, Colors, FAB, useTheme } from 'react-native-paper';
+import { ActivityIndicator, Colors, FAB } from 'react-native-paper';
+import ScreenWrapper from '../ScreenWrapper';
 
 const ActivityIndicatorExample = () => {
   const [animating, setAnimating] = React.useState<boolean>(true);
-  const {
-    colors: { background },
-  } = useTheme();
 
   return (
-    <View style={[styles.container, { backgroundColor: background }]}>
+    <ScreenWrapper style={styles.container}>
       <View style={styles.row}>
         <FAB
           small
@@ -33,18 +31,16 @@ const ActivityIndicatorExample = () => {
       <View style={styles.row}>
         <ActivityIndicator animating={animating} color={Colors.red500} />
       </View>
-    </View>
+    </ScreenWrapper>
   );
 };
 
 ActivityIndicatorExample.title = 'Activity Indicator';
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
     padding: 4,
   },
-
   row: {
     justifyContent: 'center',
     alignItems: 'center',

example/src/Examples/AppbarExample.tsx

@@ -1,14 +1,8 @@
 import * as React from 'react';
 import { View, Platform, StyleSheet } from 'react-native';
 import type { StackNavigationProp } from '@react-navigation/stack';
-import {
-  Colors,
-  Appbar,
-  FAB,
-  Switch,
-  Paragraph,
-  useTheme,
-} from 'react-native-paper';
+import { Appbar, FAB, Switch, Paragraph } from 'react-native-paper';
+import ScreenWrapper from '../ScreenWrapper';
 
 type Props = {
   navigation: StackNavigationProp<{}>;
@@ -17,8 +11,6 @@ type Props = {
 const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';
 
 const AppbarExample = ({ navigation }: Props) => {
-  const { colors } = useTheme();
-
   const [showLeftIcon, setShowLeftIcon] = React.useState(true);
   const [showSubtitle, setShowSubtitle] = React.useState(true);
   const [showSearchIcon, setShowSearchIcon] = React.useState(true);
@@ -62,33 +54,38 @@ const AppbarExample = ({ navigation }: Props) => {
   ]);
 
   return (
-    <View style={[styles.container, { backgroundColor: colors.background }]}>
-      <View style={styles.row}>
-        <Paragraph>Left icon</Paragraph>
-        <Switch value={showLeftIcon} onValueChange={setShowLeftIcon} />
-      </View>
-      <View style={styles.row}>
-        <Paragraph>Subtitle</Paragraph>
-        <Switch value={showSubtitle} onValueChange={setShowSubtitle} />
-      </View>
-      <View style={styles.row}>
-        <Paragraph>Search icon</Paragraph>
-        <Switch value={showSearchIcon} onValueChange={setShowSearchIcon} />
-      </View>
-      <View style={styles.row}>
-        <Paragraph>More icon</Paragraph>
-        <Switch value={showMoreIcon} onValueChange={setShowMoreIcon} />
-      </View>
-      <View style={styles.row}>
-        <Paragraph>Custom Color</Paragraph>
-        <Switch value={showCustomColor} onValueChange={setShowCustomColor} />
-      </View>
-      <View style={styles.row}>
-        <Paragraph>Exact Dark Theme</Paragraph>
-        <Switch value={showExactTheme} onValueChange={setShowExactTheme} />
-      </View>
+    <>
+      <ScreenWrapper
+        style={styles.container}
+        contentContainerStyle={styles.contentContainer}
+      >
+        <View style={styles.row}>
+          <Paragraph>Left icon</Paragraph>
+          <Switch value={showLeftIcon} onValueChange={setShowLeftIcon} />
+        </View>
+        <View style={styles.row}>
+          <Paragraph>Subtitle</Paragraph>
+          <Switch value={showSubtitle} onValueChange={setShowSubtitle} />
+        </View>
+        <View style={styles.row}>
+          <Paragraph>Search icon</Paragraph>
+          <Switch value={showSearchIcon} onValueChange={setShowSearchIcon} />
+        </View>
+        <View style={styles.row}>
+          <Paragraph>More icon</Paragraph>
+          <Switch value={showMoreIcon} onValueChange={setShowMoreIcon} />
+        </View>
+        <View style={styles.row}>
+          <Paragraph>Custom Color</Paragraph>
+          <Switch value={showCustomColor} onValueChange={setShowCustomColor} />
+        </View>
+        <View style={styles.row}>
+          <Paragraph>Exact Dark Theme</Paragraph>
+          <Switch value={showExactTheme} onValueChange={setShowExactTheme} />
+        </View>
+      </ScreenWrapper>
       <Appbar
-        style={[styles.bottom]}
+        style={styles.bottom}
         theme={{ mode: showExactTheme ? 'exact' : 'adaptive' }}
       >
         <Appbar.Action icon="archive" onPress={() => {}} />
@@ -97,7 +94,7 @@ const AppbarExample = ({ navigation }: Props) => {
         <Appbar.Action icon="delete" onPress={() => {}} />
       </Appbar>
       <FAB icon="reply" onPress={() => {}} style={styles.fab} />
-    </View>
+    </>
   );
 };
 
@@ -107,8 +104,9 @@ export default AppbarExample;
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
-    backgroundColor: Colors.white,
+    marginBottom: 56,
+  },
+  contentContainer: {
     paddingVertical: 8,
   },
   row: {

example/src/Examples/AvatarExample.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react';
-import { View, ScrollView, StyleSheet } from 'react-native';
-import { Avatar, List, Colors, useTheme } from 'react-native-paper';
+import { View, StyleSheet } from 'react-native';
+import { Avatar, List, Colors } from 'react-native-paper';
+import ScreenWrapper from '../ScreenWrapper';
 
 const AvatarExample = () => {
-  const { colors } = useTheme();
-
   return (
-    <ScrollView style={[styles.container, { backgroundColor: colors.surface }]}>
+    <ScreenWrapper>
       <List.Section title="Text">
         <View style={styles.row}>
           <Avatar.Text
@@ -42,16 +41,13 @@ const AvatarExample = () => {
           />
         </View>
       </List.Section>
-    </ScrollView>
+    </ScreenWrapper>
   );
 };
 
 AvatarExample.title = 'Avatar';
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
   row: {
     flexDirection: 'row',
     flexWrap: 'wrap',

example/src/Examples/BadgeExample.tsx

@@ -7,17 +7,14 @@ import {
   Paragraph,
   Switch,
   Colors,
-  useTheme,
 } from 'react-native-paper';
+import ScreenWrapper from '../ScreenWrapper';
 
 const BadgeExample = () => {
   const [visible, setVisible] = React.useState<boolean>(true);
-  const {
-    colors: { background },
-  } = useTheme();
 
   return (
-    <View style={[styles.container, { backgroundColor: background }]}>
+    <ScreenWrapper>
       <View style={[styles.row, styles.item]}>
         <Paragraph style={styles.label}>Show badges</Paragraph>
         <Switch
@@ -56,16 +53,13 @@ const BadgeExample = () => {
           </View>
         </View>
       </List.Section>
-    </View>
+    </ScreenWrapper>
   );
 };
 
 BadgeExample.title = 'Badge';
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
   row: {
     flexDirection: 'row',
     flexWrap: 'wrap',

example/src/Examples/BannerExample.tsx

@@ -1,28 +1,18 @@
 import * as React from 'react';
-import {
-  View,
-  StyleSheet,
-  Image,
-  ScrollView,
-  SafeAreaView,
-  Dimensions,
-  Platform,
-} from 'react-native';
-import { Banner, FAB, useTheme } from 'react-native-paper';
+import { View, StyleSheet, Image, Dimensions, Platform } from 'react-native';
+import { Banner, FAB } from 'react-native-paper';
+import ScreenWrapper from '../ScreenWrapper';
 
 const PHOTOS = Array.from({ length: 24 }).map(
   (_, i) => `https://unsplash.it/300/300/?random&__id=${i}`
 );
 
 const BannerExample = () => {
   const [visible, setVisible] = React.useState<boolean>(true);
-  const {
-    colors: { background },
-  } = useTheme();
 
   return (
-    <View style={[styles.container, { backgroundColor: background }]}>
-      <ScrollView>
+    <>
+      <ScreenWrapper>
         <Banner
           actions={[
             {
@@ -47,18 +37,14 @@ const BannerExample = () => {
             </View>
           ))}
         </View>
-      </ScrollView>
-      <SafeAreaView>
-        <View>
-          <FAB
-            icon="eye"
-            label={visible ? 'Hide banner' : 'Show banner'}
-            style={styles.fab}
-            onPress={() => setVisible(!visible)}
-          />
-        </View>
-      </SafeAreaView>
-    </View>
+      </ScreenWrapper>
+      <FAB
+        icon="eye"
+        label={visible ? 'Hide banner' : 'Show banner'}
+        style={styles.fab}
+        onPress={() => setVisible(!visible)}
+      />
+    </>
   );
 };