-
Notifications
You must be signed in to change notification settings - Fork 127
/
App.tsx
143 lines (132 loc) · 4.64 KB
/
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
*/
import React from 'react';
import type {PropsWithChildren} from 'react';
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
useColorScheme,
View,
} from 'react-native';
import {Colors, Header} from 'react-native/Libraries/NewAppScreen';
import firebase from '@react-native-firebase/app';
import analytics from '@react-native-firebase/analytics';
import appCheck from '@react-native-firebase/app-check';
import appDistribution from '@react-native-firebase/app-distribution';
import auth from '@react-native-firebase/auth';
import crashlytics from '@react-native-firebase/crashlytics';
import database from '@react-native-firebase/database';
import dynamicLinks from '@react-native-firebase/dynamic-links';
import firestore from '@react-native-firebase/firestore';
import functions from '@react-native-firebase/functions';
import inAppMessaging from '@react-native-firebase/in-app-messaging';
import installations from '@react-native-firebase/installations';
import messaging from '@react-native-firebase/messaging';
import perf from '@react-native-firebase/perf';
import remoteConfig from '@react-native-firebase/remote-config';
import storage from '@react-native-firebase/storage';
type SectionProps = PropsWithChildren<{
title: string;
}>;
function Section({children, title}: SectionProps): JSX.Element {
const isDarkMode = useColorScheme() === 'dark';
return (
<View style={styles.sectionContainer}>
<Text
style={[
styles.sectionTitle,
{
color: isDarkMode ? Colors.white : Colors.black,
},
]}>
{title}
</Text>
<Text
style={[
styles.sectionDescription,
{
color: isDarkMode ? Colors.light : Colors.dark,
},
]}>
{children}
</Text>
</View>
);
}
function App(): JSX.Element {
const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
const dynStyles = StyleSheet.create({
colors: {
color: isDarkMode ? Colors.white : Colors.black,
},
});
return (
<SafeAreaView style={backgroundStyle}>
<StatusBar
barStyle={isDarkMode ? 'light-content' : 'dark-content'}
backgroundColor={backgroundStyle.backgroundColor}
/>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={backgroundStyle}>
<View
style={{
backgroundColor: isDarkMode ? Colors.black : Colors.white,
alignItems: 'center',
}}>
<Section title="RNFirebase Build Demo" />
<Text />
<Text style={dynStyles.colors}>JSI Executor: {global.__jsiExecutorDescription}</Text>
<Text />
<Text style={dynStyles.colors}>These firebase modules appear to be working:</Text>
<Text />
{firebase.apps.length && <Text style={dynStyles.colors}>app()</Text>}
{analytics().native && <Text style={dynStyles.colors}>analytics()</Text>}
{appCheck().native && <Text style={dynStyles.colors}>appCheck()</Text>}
{appDistribution().native && <Text style={dynStyles.colors}>appDistribution()</Text>}
{auth().native && <Text style={dynStyles.colors}>auth()</Text>}
{crashlytics().native && <Text style={dynStyles.colors}>crashlytics()</Text>}
{database().native && <Text style={dynStyles.colors}>database()</Text>}
{dynamicLinks().native && <Text style={dynStyles.colors}>dynamicLinks()</Text>}
{firestore().native && <Text style={dynStyles.colors}>firestore()</Text>}
{functions().native && <Text style={dynStyles.colors}>functions()</Text>}
{inAppMessaging().native && <Text style={dynStyles.colors}>inAppMessaging()</Text>}
{installations().native && <Text style={dynStyles.colors}>installations()</Text>}
{messaging().native && <Text style={dynStyles.colors}>messaging()</Text>}
{perf().native && <Text style={dynStyles.colors}>perf()</Text>}
{remoteConfig().native && <Text style={dynStyles.colors}>remoteConfig()</Text>}
{storage().native && <Text style={dynStyles.colors}>storage()</Text>}
</View>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
},
highlight: {
fontWeight: '700',
},
});
export default App;