1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 | import React from 'react';
|
10 | import {
|
11 | SafeAreaView,
|
12 | StyleSheet,
|
13 | ScrollView,
|
14 | View,
|
15 | Text,
|
16 | StatusBar,
|
17 | Button,
|
18 | } from 'react-native';
|
19 |
|
20 | import {
|
21 | Header,
|
22 | LearnMoreLinks,
|
23 | Colors,
|
24 | DebugInstructions,
|
25 | ReloadInstructions,
|
26 | } from 'react-native/Libraries/NewAppScreen';
|
27 |
|
28 | import Auth from 'react-native-firebaseui-auth';
|
29 |
|
30 | const App: () => React$Node = () => {
|
31 | return (
|
32 | <>
|
33 | <StatusBar barStyle="dark-content" />
|
34 | <SafeAreaView>
|
35 | <ScrollView
|
36 | contentInsetAdjustmentBehavior="automatic"
|
37 | style={styles.scrollView}>
|
38 | <Header />
|
39 |
|
40 | <View style={{alignItems: 'center'}}>
|
41 | <Text style={{fontWeight: 'bold', fontSize: 24}}>Firebase UI Auth Example</Text>
|
42 | <View style={{flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center', padding: 5}}>
|
43 | <Button
|
44 | onPress={() => {
|
45 | const config = {
|
46 | providers: ['email'],
|
47 | tosUrl: 'https://example.com/tos.htm',
|
48 | privacyPolicyUrl: 'https://example.com/privacypolicy.htm',
|
49 | };
|
50 | Auth.signIn(config)
|
51 | .then(user => console.log(user))
|
52 | .catch(err => console.log(err));
|
53 | }}
|
54 | title="SignIn"
|
55 | />
|
56 | <Text> / </Text>
|
57 | <Button
|
58 | onPress={() => {
|
59 | Auth.getCurrentUser().then(user => console.log(user));
|
60 | }}
|
61 | title="CurrentUser"
|
62 | />
|
63 | <Text> / </Text>
|
64 | <Button
|
65 | onPress={() => {
|
66 | Auth.signOut().then(res => console.log(res));
|
67 | }}
|
68 | title="SignOut"
|
69 | />
|
70 | </View>
|
71 | <View style={{flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center', padding: 5}}>
|
72 | <Button
|
73 | onPress={() => {
|
74 | Auth.delete().then(res => console.log(res));
|
75 | }}
|
76 | title="Delete"
|
77 | />
|
78 | </View>
|
79 | <Text>Check console log</Text>
|
80 | </View>
|
81 |
|
82 | {global.HermesInternal == null ? null : (
|
83 | <View style={styles.engine}>
|
84 | <Text style={styles.footer}>Engine: Hermes</Text>
|
85 | </View>
|
86 | )}
|
87 | <View style={styles.body}>
|
88 | <View style={styles.sectionContainer}>
|
89 | <Text style={styles.sectionTitle}>Step One</Text>
|
90 | <Text style={styles.sectionDescription}>
|
91 | Edit <Text style={styles.highlight}>App.js</Text> to change this
|
92 | screen and then come back to see your edits.
|
93 | </Text>
|
94 | </View>
|
95 | <View style={styles.sectionContainer}>
|
96 | <Text style={styles.sectionTitle}>See Your Changes</Text>
|
97 | <Text style={styles.sectionDescription}>
|
98 | <ReloadInstructions />
|
99 | </Text>
|
100 | </View>
|
101 | <View style={styles.sectionContainer}>
|
102 | <Text style={styles.sectionTitle}>Debug</Text>
|
103 | <Text style={styles.sectionDescription}>
|
104 | <DebugInstructions />
|
105 | </Text>
|
106 | </View>
|
107 | <View style={styles.sectionContainer}>
|
108 | <Text style={styles.sectionTitle}>Learn More</Text>
|
109 | <Text style={styles.sectionDescription}>
|
110 | Read the docs to discover what to do next:
|
111 | </Text>
|
112 | </View>
|
113 | <LearnMoreLinks />
|
114 | </View>
|
115 | </ScrollView>
|
116 | </SafeAreaView>
|
117 | </>
|
118 | );
|
119 | };
|
120 |
|
121 | const styles = StyleSheet.create({
|
122 | scrollView: {
|
123 | backgroundColor: Colors.lighter,
|
124 | },
|
125 | engine: {
|
126 | position: 'absolute',
|
127 | right: 0,
|
128 | },
|
129 | body: {
|
130 | backgroundColor: Colors.white,
|
131 | },
|
132 | sectionContainer: {
|
133 | marginTop: 32,
|
134 | paddingHorizontal: 24,
|
135 | },
|
136 | sectionTitle: {
|
137 | fontSize: 24,
|
138 | fontWeight: '600',
|
139 | color: Colors.black,
|
140 | },
|
141 | sectionDescription: {
|
142 | marginTop: 8,
|
143 | fontSize: 18,
|
144 | fontWeight: '400',
|
145 | color: Colors.dark,
|
146 | },
|
147 | highlight: {
|
148 | fontWeight: '700',
|
149 | },
|
150 | footer: {
|
151 | color: Colors.dark,
|
152 | fontSize: 12,
|
153 | fontWeight: '600',
|
154 | padding: 4,
|
155 | paddingRight: 12,
|
156 | textAlign: 'right',
|
157 | },
|
158 | });
|
159 |
|
160 | export default App;
|