Skip to content

Commit c642587

Browse files
lukewalczaklukewalczak
authored
fix: example app tweaks (#2721)
1 parent c30c925 commit c642587

38 files changed

Lines changed: 1222 additions & 454 deletions

‎example/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,15 @@
1515
"@expo/vector-icons": "^12.0.0",
1616
"@react-native-community/async-storage": "~1.12.0",
1717
"@react-native-community/masked-view": "0.1.10",
18-
"@react-navigation/drawer": "^5.6.1",
18+
"@react-navigation/drawer": "^5.12.5",
1919
"@react-navigation/native": "^5.2.1",
2020
"@react-navigation/stack": "^5.2.16",
2121
"expo": "^40.0.0",
2222
"expo-font": "~8.4.0",
2323
"expo-keep-awake": "~8.4.0",
2424
"expo-splash-screen": "~0.8.1",
2525
"expo-status-bar": "~1.0.3",
26+
"expo-updates": "^0.5.4",
2627
"file-loader": "^4.0.0",
2728
"react": "16.13.1",
2829
"react-dom": "16.13.1",

‎example/src/DrawerItems.tsx‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as React from 'react';
2-
import { View, StyleSheet, Platform } from 'react-native';
2+
import { View, StyleSheet } from 'react-native';
3+
import { DrawerContentScrollView } from '@react-navigation/drawer';
34
import {
45
Badge,
56
Drawer,
@@ -9,6 +10,7 @@ import {
910
Colors,
1011
useTheme,
1112
} from 'react-native-paper';
13+
import * as Updates from 'expo-updates';
1214

1315
type Props = {
1416
toggleTheme: () => void;
@@ -43,8 +45,16 @@ const DrawerItems = ({ toggleTheme, toggleRTL, isRTL, isDarkTheme }: Props) => {
4345

4446
const { colors } = useTheme();
4547

48+
const _handleToggleRTL = () => {
49+
toggleRTL();
50+
Updates.reloadAsync();
51+
};
52+
4653
return (
47-
<View style={[styles.drawerContent, { backgroundColor: colors.surface }]}>
54+
<DrawerContentScrollView
55+
alwaysBounceVertical={false}
56+
style={[styles.drawerContent, { backgroundColor: colors.surface }]}
57+
>
4858
<Drawer.Section title="Example items">
4959
{DrawerItemsData.map((props, index) => (
5060
<Drawer.Item
@@ -70,7 +80,7 @@ const DrawerItems = ({ toggleTheme, toggleRTL, isRTL, isDarkTheme }: Props) => {
7080
</View>
7181
</View>
7282
</TouchableRipple>
73-
<TouchableRipple onPress={toggleRTL}>
83+
<TouchableRipple onPress={_handleToggleRTL}>
7484
<View style={styles.preference}>
7585
<Text>RTL</Text>
7686
<View pointerEvents="none">
@@ -79,14 +89,13 @@ const DrawerItems = ({ toggleTheme, toggleRTL, isRTL, isDarkTheme }: Props) => {
7989
</View>
8090
</TouchableRipple>
8191
</Drawer.Section>
82-
</View>
92+
</DrawerContentScrollView>
8393
);
8494
};
8595

8696
const styles = StyleSheet.create({
8797
drawerContent: {
8898
flex: 1,
89-
paddingTop: Platform.OS === 'android' ? 25 : 22,
9099
},
91100
preference: {
92101
flexDirection: 'row',

‎example/src/ExampleList.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,8 @@ export default function ExampleList({ navigation }: Props) {
108108
contentContainerStyle={{
109109
backgroundColor: colors.background,
110110
paddingBottom: safeArea.bottom,
111+
paddingLeft: safeArea.left,
112+
paddingRight: safeArea.right,
111113
}}
112114
style={{ backgroundColor: colors.background }}
113115
ItemSeparatorComponent={Divider}

‎example/src/Examples/ActivityIndicatorExample.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
import * as React from 'react';
22
import { View, StyleSheet } from 'react-native';
3-
import { ActivityIndicator, Colors, FAB, useTheme } from 'react-native-paper';
3+
import { ActivityIndicator, Colors, FAB } from 'react-native-paper';
4+
import ScreenWrapper from '../ScreenWrapper';
45

56
const ActivityIndicatorExample = () => {
67
const [animating, setAnimating] = React.useState<boolean>(true);
7-
const {
8-
colors: { background },
9-
} = useTheme();
108

119
return (
12-
<View style={[styles.container, { backgroundColor: background }]}>
10+
<ScreenWrapper style={styles.container}>
1311
<View style={styles.row}>
1412
<FAB
1513
small
@@ -33,18 +31,16 @@ const ActivityIndicatorExample = () => {
3331
<View style={styles.row}>
3432
<ActivityIndicator animating={animating} color={Colors.red500} />
3533
</View>
36-
</View>
34+
</ScreenWrapper>
3735
);
3836
};
3937

4038
ActivityIndicatorExample.title = 'Activity Indicator';
4139

4240
const styles = StyleSheet.create({
4341
container: {
44-
flex: 1,
4542
padding: 4,
4643
},
47-
4844
row: {
4945
justifyContent: 'center',
5046
alignItems: 'center',

‎example/src/Examples/AppbarExample.tsx‎

Lines changed: 37 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,8 @@
11
import * as React from 'react';
22
import { View, Platform, StyleSheet } from 'react-native';
33
import type { StackNavigationProp } from '@react-navigation/stack';
4-
import {
5-
Colors,
6-
Appbar,
7-
FAB,
8-
Switch,
9-
Paragraph,
10-
useTheme,
11-
} from 'react-native-paper';
4+
import { Appbar, FAB, Switch, Paragraph } from 'react-native-paper';
5+
import ScreenWrapper from '../ScreenWrapper';
126

137
type Props = {
148
navigation: StackNavigationProp<{}>;
@@ -17,8 +11,6 @@ type Props = {
1711
const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';
1812

1913
const AppbarExample = ({ navigation }: Props) => {
20-
const { colors } = useTheme();
21-
2214
const [showLeftIcon, setShowLeftIcon] = React.useState(true);
2315
const [showSubtitle, setShowSubtitle] = React.useState(true);
2416
const [showSearchIcon, setShowSearchIcon] = React.useState(true);
@@ -62,33 +54,38 @@ const AppbarExample = ({ navigation }: Props) => {
6254
]);
6355

6456
return (
65-
<View style={[styles.container, { backgroundColor: colors.background }]}>
66-
<View style={styles.row}>
67-
<Paragraph>Left icon</Paragraph>
68-
<Switch value={showLeftIcon} onValueChange={setShowLeftIcon} />
69-
</View>
70-
<View style={styles.row}>
71-
<Paragraph>Subtitle</Paragraph>
72-
<Switch value={showSubtitle} onValueChange={setShowSubtitle} />
73-
</View>
74-
<View style={styles.row}>
75-
<Paragraph>Search icon</Paragraph>
76-
<Switch value={showSearchIcon} onValueChange={setShowSearchIcon} />
77-
</View>
78-
<View style={styles.row}>
79-
<Paragraph>More icon</Paragraph>
80-
<Switch value={showMoreIcon} onValueChange={setShowMoreIcon} />
81-
</View>
82-
<View style={styles.row}>
83-
<Paragraph>Custom Color</Paragraph>
84-
<Switch value={showCustomColor} onValueChange={setShowCustomColor} />
85-
</View>
86-
<View style={styles.row}>
87-
<Paragraph>Exact Dark Theme</Paragraph>
88-
<Switch value={showExactTheme} onValueChange={setShowExactTheme} />
89-
</View>
57+
<>
58+
<ScreenWrapper
59+
style={styles.container}
60+
contentContainerStyle={styles.contentContainer}
61+
>
62+
<View style={styles.row}>
63+
<Paragraph>Left icon</Paragraph>
64+
<Switch value={showLeftIcon} onValueChange={setShowLeftIcon} />
65+
</View>
66+
<View style={styles.row}>
67+
<Paragraph>Subtitle</Paragraph>
68+
<Switch value={showSubtitle} onValueChange={setShowSubtitle} />
69+
</View>
70+
<View style={styles.row}>
71+
<Paragraph>Search icon</Paragraph>
72+
<Switch value={showSearchIcon} onValueChange={setShowSearchIcon} />
73+
</View>
74+
<View style={styles.row}>
75+
<Paragraph>More icon</Paragraph>
76+
<Switch value={showMoreIcon} onValueChange={setShowMoreIcon} />
77+
</View>
78+
<View style={styles.row}>
79+
<Paragraph>Custom Color</Paragraph>
80+
<Switch value={showCustomColor} onValueChange={setShowCustomColor} />
81+
</View>
82+
<View style={styles.row}>
83+
<Paragraph>Exact Dark Theme</Paragraph>
84+
<Switch value={showExactTheme} onValueChange={setShowExactTheme} />
85+
</View>
86+
</ScreenWrapper>
9087
<Appbar
91-
style={[styles.bottom]}
88+
style={styles.bottom}
9289
theme={{ mode: showExactTheme ? 'exact' : 'adaptive' }}
9390
>
9491
<Appbar.Action icon="archive" onPress={() => {}} />
@@ -97,7 +94,7 @@ const AppbarExample = ({ navigation }: Props) => {
9794
<Appbar.Action icon="delete" onPress={() => {}} />
9895
</Appbar>
9996
<FAB icon="reply" onPress={() => {}} style={styles.fab} />
100-
</View>
97+
</>
10198
);
10299
};
103100

@@ -107,8 +104,9 @@ export default AppbarExample;
107104

108105
const styles = StyleSheet.create({
109106
container: {
110-
flex: 1,
111-
backgroundColor: Colors.white,
107+
marginBottom: 56,
108+
},
109+
contentContainer: {
112110
paddingVertical: 8,
113111
},
114112
row: {

‎example/src/Examples/AvatarExample.tsx‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import * as React from 'react';
2-
import { View, ScrollView, StyleSheet } from 'react-native';
3-
import { Avatar, List, Colors, useTheme } from 'react-native-paper';
2+
import { View, StyleSheet } from 'react-native';
3+
import { Avatar, List, Colors } from 'react-native-paper';
4+
import ScreenWrapper from '../ScreenWrapper';
45

56
const AvatarExample = () => {
6-
const { colors } = useTheme();
7-
87
return (
9-
<ScrollView style={[styles.container, { backgroundColor: colors.surface }]}>
8+
<ScreenWrapper>
109
<List.Section title="Text">
1110
<View style={styles.row}>
1211
<Avatar.Text
@@ -42,16 +41,13 @@ const AvatarExample = () => {
4241
/>
4342
</View>
4443
</List.Section>
45-
</ScrollView>
44+
</ScreenWrapper>
4645
);
4746
};
4847

4948
AvatarExample.title = 'Avatar';
5049

5150
const styles = StyleSheet.create({
52-
container: {
53-
flex: 1,
54-
},
5551
row: {
5652
flexDirection: 'row',
5753
flexWrap: 'wrap',

‎example/src/Examples/BadgeExample.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,14 @@ import {
77
Paragraph,
88
Switch,
99
Colors,
10-
useTheme,
1110
} from 'react-native-paper';
11+
import ScreenWrapper from '../ScreenWrapper';
1212

1313
const BadgeExample = () => {
1414
const [visible, setVisible] = React.useState<boolean>(true);
15-
const {
16-
colors: { background },
17-
} = useTheme();
1815

1916
return (
20-
<View style={[styles.container, { backgroundColor: background }]}>
17+
<ScreenWrapper>
2118
<View style={[styles.row, styles.item]}>
2219
<Paragraph style={styles.label}>Show badges</Paragraph>
2320
<Switch
@@ -56,16 +53,13 @@ const BadgeExample = () => {
5653
</View>
5754
</View>
5855
</List.Section>
59-
</View>
56+
</ScreenWrapper>
6057
);
6158
};
6259

6360
BadgeExample.title = 'Badge';
6461

6562
const styles = StyleSheet.create({
66-
container: {
67-
flex: 1,
68-
},
6963
row: {
7064
flexDirection: 'row',
7165
flexWrap: 'wrap',

‎example/src/Examples/BannerExample.tsx‎

Lines changed: 13 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,18 @@
11
import * as React from 'react';
2-
import {
3-
View,
4-
StyleSheet,
5-
Image,
6-
ScrollView,
7-
SafeAreaView,
8-
Dimensions,
9-
Platform,
10-
} from 'react-native';
11-
import { Banner, FAB, useTheme } from 'react-native-paper';
2+
import { View, StyleSheet, Image, Dimensions, Platform } from 'react-native';
3+
import { Banner, FAB } from 'react-native-paper';
4+
import ScreenWrapper from '../ScreenWrapper';
125

136
const PHOTOS = Array.from({ length: 24 }).map(
147
(_, i) => `https://unsplash.it/300/300/?random&__id=${i}`
158
);
169

1710
const BannerExample = () => {
1811
const [visible, setVisible] = React.useState<boolean>(true);
19-
const {
20-
colors: { background },
21-
} = useTheme();
2212

2313
return (
24-
<View style={[styles.container, { backgroundColor: background }]}>
25-
<ScrollView>
14+
<>
15+
<ScreenWrapper>
2616
<Banner
2717
actions={[
2818
{
@@ -47,18 +37,14 @@ const BannerExample = () => {
4737
</View>
4838
))}
4939
</View>
50-
</ScrollView>
51-
<SafeAreaView>
52-
<View>
53-
<FAB
54-
icon="eye"
55-
label={visible ? 'Hide banner' : 'Show banner'}
56-
style={styles.fab}
57-
onPress={() => setVisible(!visible)}
58-
/>
59-
</View>
60-
</SafeAreaView>
61-
</View>
40+
</ScreenWrapper>
41+
<FAB
42+
icon="eye"
43+
label={visible ? 'Hide banner' : 'Show banner'}
44+
style={styles.fab}
45+
onPress={() => setVisible(!visible)}
46+
/>
47+
</>
6248
);
6349
};
6450

0 commit comments

Comments
 (0)