react-native-paper#ActivityIndicator JavaScript Examples
The following examples show how to use
react-native-paper#ActivityIndicator.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Page.js From Legacy with Mozilla Public License 2.0 | 5 votes |
|
function UserActivityPage({ toggleDrawer, filters }) {
var moment = useMoment();
var theme = useSelector(i => i.themes[i.theme]);
var date = moment().tz('America/Chicago');
var dateString = `${date.year()}-${(date.month() + 1).toString().padStart(2, '0')}-${(date.date()).toString().padStart(2, '0')}`
var route = useRoute();
if (route.params.date) {
dateString = route.params.date;
}
var username = route.params.username
var userdata = useAPIRequest({
endpoint: 'user',
data: { username }
})
let user_id = userdata?.user_id
var dataraw = useAPIRequest(user_id ? {
endpoint: 'user/activity',
data: { day: dateString, user_id },
cuppazee: true
} : null)
if (!dataraw) return (
<View style={{ flex: 1, alignContent: "center", justifyContent: "center", backgroundColor: theme.page.bg }}>
<ActivityIndicator size="large" color={theme.page.fg} />
</View>
)
var activityList = ActivityConverter(dataraw, filters, userdata);
return <View style={{ flex: 1 }}>
<FlatList
contentContainerStyle={{ width: 500, maxWidth: "100%", alignItems: "stretch", flexDirection: "column", alignSelf: "center", paddingBottom: 88 }}
style={{ flex: 1, backgroundColor: theme.page.bg }}
extraData={[userdata?.username]}
ListHeaderComponent={<View>
<View style={{ padding: 4 }}>
<Card noPad>
<DateSwitcher dateString={dateString} toggleDrawer={toggleDrawer} />
<ActivityOverview date={dateString} user_id={user_id} filters={filters} />
</Card>
</View>
</View>}
// getItemLayout={(data, index) => (
// { length: data.height||0, offset: data.offset||0, index }
// )}
data={activityList.sort((a, b) => new Date(b.time) - new Date(a.time))}
renderItem={({ item: act }) => <ListItem act={act} userdata={userdata} />}
keyExtractor={(item, index) => item.key}
/>
<UserFAB username={username} user_id={user_id} />
</View>
}
Example #2
| Source File: main-stack.js From astrale with GNU General Public License v3.0 | 5 votes |
|
function MainStackNavigation() {
const [{ showLoader }] = useGlobals();
const { colors } = useTheme();
return (
<>
<Sta.Navigator screenOptions={{ headerShown: false }} mode="modal">
<Sta.Screen name="Home" component={BottomBarNavigation} />
<Sta.Screen
name="Profile"
component={ProfileScreen}
options={{
cardStyle: {
backgroundColor: 'transparent',
marginTop: 50,
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
},
}}
/>
<Sta.Screen
name="Signs"
component={ZodiacScreen}
options={{
cardStyle: {
backgroundColor: 'transparent',
marginTop: 50,
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
},
}}
/>
<Sta.Screen
name="Question"
component={AstrologerQuestionScreen}
options={{
cardStyle: {
backgroundColor: 'transparent',
marginTop: 100,
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
},
}}
/>
</Sta.Navigator>
{showLoader && (
<Portal>
<BlurView
intensity={70}
style={[
StyleSheet.absoluteFill,
{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
zIndex: 50,
},
]}
>
<View
style={{
backgroundColor: colors.background,
padding: 20,
borderRadius: 15,
}}
>
<ActivityIndicator size={50} />
</View>
</BlurView>
</Portal>
)}
</>
);
}
Example #3
| Source File: index.js From Cosmos with MIT License | 5 votes |
|
render() {
const {enrolledBy, btnLoading, isBottomSheetOpen} = this.state;
return (
<View style={styles.boxScreenContainer}>
<View style={styles.authorContainer}>
<Headline style={Styles.fontMedium}>
Author: {this.state.auth[0]}
</Headline>
</View>
<View style={styles.addPartConatiner}>
<Text style={Styles.fontSmall}>Add Participant</Text>
<TextInput
style={[Styles.fontMedium, styles.textInput]}
mode="outlined"
placeholder="Email"
maxLength={50}
value={this.state.email}
dense={true}
onChangeText={(email) => this.setAddParticipant(email)}
/>
<Button
labelStyle={Styles.fontSmall}
loading={btnLoading}
icon="plus"
onPress={() => this.handleAddUser()}>
Add Member
</Button>
</View>
<FlatList
ListHeaderComponent={() => {
return (
<Text style={Styles.fontSmall}>
Enrolled Users: {enrolledBy.length}
</Text>
);
}}
ListHeaderComponentStyle={{margin: 10}}
ListEmptyComponent={() => {
return <ActivityIndicator />;
}}
data={enrolledBy}
keyExtractor={(item) => item.uid}
renderItem={({item, index}) => {
return (
<Card
style={styles.card}
onPress={() => this.handleOptions(index)}>
<Card.Content>
<Subheading style={Styles.fontMedium}>{item.name}</Subheading>
</Card.Content>
</Card>
);
}}
ItemSeparatorComponent={() => <Divider style={styles.Divider} />}
/>
<BottomSheet
isOpen={isBottomSheetOpen}
closeBottomSheet={() => this.setBottomSheet(false)}
options={[{text: 'Remove User', onPress: this.handleRemoveUser}]}
/>
</View>
);
}
Example #4
| Source File: Colour.js From Legacy with Mozilla Public License 2.0 | 4 votes |
|
export default function UserSHCScreen() {
var moment = useMoment();
var { t } = useTranslation();
var theme = useSelector(i => i.themes[i.theme]);
var date = moment().tz('America/Chicago');
var dateString = `${date.year()}-${(date.month() + 1).toString().padStart(2, '0')}-${(date.date()).toString().padStart(2, '0')}`
var theme = useSelector(i => i.themes[i.theme]);
var dark = false;
var level_colors = {
ind: "#ffe97f",
bot: "#dff77e",
gro: "#b0fc8d",
0: "#eb0000",
1: "#ef6500",
2: "#fa9102",
3: "#fcd302",
4: "#bfe913",
5: "#55f40b",
null: "#e3e3e3",
border: '#000a'
}
if (theme.dark) {
dark = true;
level_colors.border = "#fffa"
}
var route = useRoute();
if (route.params.date) {
dateString = route.params.date;
}
var username = route.params.username;
const user_id = useAPIRequest({
endpoint: 'user',
data: { username },
function: i=>i?.user_id
})
var categories = types.filter(i=>i.category==="virtual"&&!i.credit).map(i=>({
icon: i.icon,
name: i.name.replace('Virtual ',''),
function: c => c.icon === i.icon
}))
const category_data = useAPIRequest(user_id?{
endpoint: 'user/activity',
data: { day: dateString, user_id },
cuppazee: true,
function: data=>{
if(!data) return data;
if(!data.captures) return null;
var category_data = {};
for (let category of categories) {
category_data[category.name] = [];
}
for (let x of data.captures) {
var y = g(x);
if(y?.category!=="virtual") continue;
for (let category of categories) {
if(category.icon===y?.icon) {
category_data[category.name].push({
i: x
})
break;
};
}
}
return category_data;
}
}:null)
if (!category_data) {
if(category_data===undefined) {
return <View style={{flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page.bg}}>
<ActivityIndicator size="large" color={theme.page_content.fg} />
</View>
} else {
return <View style={{flex: 1, justifyContent: "center", alignItems: "center", backgroundColor:'#ffaaaa'}}>
<MaterialCommunityIcons name="alert" size={48} color="#d00" />
</View>;
}
}
return <View style={{ flex: 1, backgroundColor: theme.page.bg }}>
<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 8 }}>
<DateSwitcher dateString={dateString} />
<View style={{ flexDirection: "row", flexWrap: "wrap", justifyContent: "center" }}>
{categories.map(i => <View style={{ padding: 4, width: 100, flexGrow: 1, maxWidth: "100%" }}>
<Card noPad>
<View style={{ alignItems: "center" }}>
<View style={{ paddingTop: 8 }}>
<Image source={getIcon(i?.icon,128)} style={{ width: 36, height: 36 }} />
</View>
<Text allowFontScaling={false} style={{ fontSize: 12, marginBottom: 4, ...font("bold"), textAlign: "center", color: theme.page_content.fg }} numberOfLines={1} ellipsizeMode={"tail"}>{i?.name}</Text>
<View style={{ height: 24, alignSelf: "stretch", borderBottomLeftRadius: 8, borderBottomRightRadius: 8, borderTopWidth: dark ? 2 : 0, borderTopColor: dark ? level_colors[category_data[i.name].length > 0 ? 5 : 0] : undefined, backgroundColor: dark ? undefined : level_colors[category_data[i.name].length > 0 ? 5 : 0], alignItems: "center", justifyContent: "center" }}>
<Text allowFontScaling={false} style={{ color: theme.page_content.fg, fontSize: 16, ...font("bold") }}>{category_data[i.name].length||''}</Text>
</View>
</View>
</Card>
</View>)}
</View>
</ScrollView>
<UserFAB username={username} user_id={user_id} />
</View>
}
Example #5
| Source File: POI.js From Legacy with Mozilla Public License 2.0 | 4 votes |
|
export default function UserSHCScreen() {
var moment = useMoment();
var { t } = useTranslation();
var theme = useSelector(i => i.themes[i.theme]);
var date = moment().tz('America/Chicago');
var dateString = `${date.year()}-${(date.month() + 1).toString().padStart(2, '0')}-${(date.date()).toString().padStart(2, '0')}`
var theme = useSelector(i => i.themes[i.theme]);
var dark = false;
var level_colors = {
ind: "#ffe97f",
bot: "#dff77e",
gro: "#b0fc8d",
0: "#eb0000",
1: "#ef6500",
2: "#fa9102",
3: "#fcd302",
4: "#bfe913",
5: "#55f40b",
null: "#e3e3e3",
border: '#000a'
}
if (theme.dark) {
dark = true;
level_colors.border = "#fffa"
}
var route = useRoute();
if (route.params.date) {
dateString = route.params.date;
}
var username = route.params.username;
const user_id = useAPIRequest({
endpoint: 'user',
data: { username },
function: i=>i?.user_id
})
var categories = types.filter(i=>i.category==="poi").map(i=>({
icon: i.icon,
name: i.name.replace('POI ',''),
function: c => c.icon === i.icon
}))
const category_data = useAPIRequest(user_id?{
endpoint: 'user/activity',
data: { day: dateString, user_id },
cuppazee: true,
function: data=>{
if(!data) return data;
if(!data.captures) return null;
var category_data = {};
for (let category of categories) {
category_data[category.name] = [];
}
for (let x of data.captures) {
var y = g(x);
if(y?.category!=="poi") continue;
for (let category of categories) {
if(category.function(y)) {
category_data[category.name].push({
i: x
})
break;
};
}
}
return category_data;
}
}:null)
if (!category_data) {
if(category_data===undefined) {
return <View style={{flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page.bg}}>
<ActivityIndicator size="large" color={theme.page_content.fg} />
</View>
} else {
return <View style={{flex: 1, justifyContent: "center", alignItems: "center", backgroundColor:'#ffaaaa'}}>
<MaterialCommunityIcons name="alert" size={48} color="#d00" />
</View>;
}
}
return <View style={{ flex: 1, backgroundColor: theme.page.bg }}>
<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 8 }}>
<DateSwitcher dateString={dateString} />
<View style={{ flexDirection: "row", flexWrap: "wrap", justifyContent: "center" }}>
{categories.map(i => <View style={{ padding: 4, width: 300, flexGrow: 1, maxWidth: "100%" }}>
<Card noPad>
<View style={{ flexDirection: "row", alignItems: "center", flex: 1 }}>
<View style={{ padding: 8 }}>
<Image source={getIcon(i?.icon,128)} style={{ width: 36, height: 36 }} />
</View>
<View style={{ paddingRight: 8, paddingLeft: 0, flex: 1, justifyContent: "center" }}>
<Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), color: theme.page_content.fg }} numberOfLines={1} ellipsizeMode={"tail"}>{category_data[i.name].length}x {i?.name}</Text>
<View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap" }}>
{category_data[i.name].map(x => <SHCItem i={x.i} m={x.m} />)}
</View>
</View>
<View style={{ alignSelf: "stretch", borderTopRightRadius: 8, borderBottomRightRadius: 8, borderLeftWidth: dark ? 2 : 0, borderLeftColor: dark ? level_colors[category_data[i.name].length > 0 ? 5 : 0] : undefined, backgroundColor: dark ? undefined : level_colors[category_data[i.name].length > 0 ? 5 : 0], width: 50, alignItems: "center", justifyContent: "center" }}>
<Text allowFontScaling={false} style={{ color: theme.page_content.fg, fontSize: 24, ...font("bold") }}>{category_data[i.name].length > 0 ? '✔' : ''}</Text>
</View>
</View>
</Card>
</View>)}
</View>
</ScrollView>
<UserFAB username={username} user_id={user_id} />
</View>
}
Example #6
| Source File: SHCLite.js From Legacy with Mozilla Public License 2.0 | 4 votes |
|
export default function UserSHCScreen() {
var moment = useMoment();
var { t } = useTranslation();
var theme = useSelector(i => i.themes[i.theme]);
var date = moment().tz('America/Chicago');
var dateString = `${date.year()}-${(date.month() + 1).toString().padStart(2, '0')}-${(date.date()).toString().padStart(2, '0')}`
var theme = useSelector(i => i.themes[i.theme]);
var dark = false;
var level_colors = {
ind: "#ffe97f",
bot: "#dff77e",
gro: "#b0fc8d",
0: "#eb0000",
1: "#ef6500",
2: "#fa9102",
3: "#fcd302",
4: "#bfe913",
5: "#55f40b",
null: "#e3e3e3",
border: '#000a'
}
if (theme.dark) {
dark = true;
level_colors.border = "#fffa"
}
var route = useRoute();
if (route.params.date) {
dateString = route.params.date;
}
var username = route.params.username;
const user_id = useAPIRequest({
endpoint: 'user',
data: { username },
function: i=>i?.user_id
})
var categories = [
{ icon: 'rainbowunicorn', name: t('shc:lite.tob'), function: i => i?.bouncer?.type == "tob" },
{ icon: 'nomad', name: t('shc:lite.nomad'), function: i => i?.bouncer?.type == "nomad" || i?.bouncer?.type == "retiremyth" || i?.bouncer?.type == "zombiepouch" },
{ icon: 'yeti', name: t('shc:lite.myth_1'), function: i => i?.myth_set == "original" || i?.myth_set == "classical" },
{ icon: 'mermaid', name: t('shc:lite.myth_2'), function: i => i?.myth_set == "mirror" || i?.myth_set == "modern" },
{ icon: 'tuli', name: t('shc:lite.pc_1'), function: i => i?.category == "pouch_season_1" },
{ icon: 'oniks', name: t('shc:lite.pc_2'), function: i => i?.category == "pouch_season_2" || i?.category == "pouch_funfinity" },
{ icon: 'tuxflatrob', name: t('shc:lite.flat'), function: i => i?.bouncer?.type == "flat" },
{ icon: 'morphobutterfly', name: t('shc:lite.temp'), function: i => i?.bouncer?.type == "temppob" },
{ icon: 'scattered', name: t('shc:lite.scatter'), function: i => i?.scatter },
]
const category_data = useAPIRequest(user_id?{
endpoint: 'user/activity',
data: { day: dateString, user_id },
cuppazee: true,
function: data=>{
if(!data) return data;
if(!data.captures) return null;
var destinations = data.captures.filter(z => g(z)?.destination?.type == "bouncer")
var category_data = {};
for (let category of categories) {
category_data[category.name] = [];
}
for (let x of data.captures) {
var y = g(x);
if(!y?.bouncer && !y?.scatter) continue;
for (let category of categories) {
if(category.function(y)) {
category_data[category.name].push({
i: x,
m: destinations.find(z => z.captured_at == x.captured_at)
})
break;
};
}
}
return category_data;
}
}:null)
if (!category_data) {
if(category_data===undefined) {
return <View style={{flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page.bg}}>
<ActivityIndicator size="large" color={theme.page_content.fg} />
</View>
} else {
return <View style={{flex: 1, justifyContent: "center", alignItems: "center", backgroundColor:'#ffaaaa'}}>
<MaterialCommunityIcons name="alert" size={48} color="#d00" />
</View>;
}
}
return <View style={{ flex: 1, backgroundColor: theme.page.bg }}>
<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 8 }}>
<DateSwitcher dateString={dateString} />
<View style={{ flexDirection: "row", flexWrap: "wrap", justifyContent: "center" }}>
{categories.map(i => <View style={{ padding: 4, width: 400, flexGrow: 1, maxWidth: "100%" }}>
<Card noPad>
<View style={{ flexDirection: "row", alignItems: "center", flex: 1 }}>
<View style={{ padding: 8 }}>
<Image source={getIcon(i?.icon,128)} style={{ width: 36, height: 36 }} />
</View>
<View style={{ paddingRight: 8, paddingLeft: 0, flex: 1, justifyContent: "center" }}>
<Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), color: theme.page_content.fg }} numberOfLines={1} ellipsizeMode={"tail"}>{category_data[i.name].length}x {i?.name}</Text>
<View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap" }}>
{category_data[i.name].map(x => <SHCItem i={x.i} m={x.m} />)}
</View>
</View>
<View style={{ alignSelf: "stretch", borderTopRightRadius: 8, borderBottomRightRadius: 8, borderLeftWidth: dark ? 2 : 0, borderLeftColor: dark ? level_colors[category_data[i.name].length > 0 ? 5 : 0] : undefined, backgroundColor: dark ? undefined : level_colors[category_data[i.name].length > 0 ? 5 : 0], width: 50, alignItems: "center", justifyContent: "center" }}>
<Text allowFontScaling={false} style={{ color: theme.page_content.fg, fontSize: 24, ...font("bold") }}>{category_data[i.name].length > 0 ? '✔' : ''}</Text>
</View>
</View>
</Card>
</View>)}
</View>
</ScrollView>
<UserFAB username={username} user_id={user_id} />
</View>
}
Example #7
| Source File: SHCPro.js From Legacy with Mozilla Public License 2.0 | 4 votes |
|
export default function UserSHCScreen() {
var moment = useMoment();
var { t } = useTranslation();
var theme = useSelector(i => i.themes[i.theme]);
var date = moment().tz('America/Chicago');
var dateString = `${date.year()}-${(date.month() + 1).toString().padStart(2, '0')}-${(date.date()).toString().padStart(2, '0')}`
var theme = useSelector(i => i.themes[i.theme]);
var dark = false;
var level_colors = {
ind: "#ffe97f",
bot: "#dff77e",
gro: "#b0fc8d",
0: "#eb0000",
1: "#ef6500",
2: "#fa9102",
3: "#fcd302",
4: "#bfe913",
5: "#55f40b",
null: "#e3e3e3",
border: '#000a'
}
if (theme.dark) {
dark = true;
level_colors.border = "#fffa"
}
var route = useRoute();
if (route.params.date) {
dateString = route.params.date;
}
var username = route.params.username;
const user_id = useAPIRequest({
endpoint: 'user',
data: { username },
function: i=>i?.user_id
})
var categories = [
{ icon: 'rainbowunicorn', name: t('shc:pro.tob'), function: i => i?.bouncer?.type == "tob" },
{ icon: 'nomad', name: t('shc:pro.nomad'), function: i => i?.bouncer?.type == "nomad" },
{ icon: 'retiredunicorn', name: t('shc:pro.retire'), function: i => i?.bouncer?.type == "retiremyth" || i?.bouncer?.type == "zombiepouch" },
{ icon: 'yeti', name: t('shc:pro.myth_1'), function: i => i?.myth_set == "original" },
{ icon: 'cyclops', name: t('shc:pro.myth_2'), function: i => i?.myth_set == "classical" },
{ icon: 'mermaid', name: t('shc:pro.myth_3'), function: i => i?.myth_set == "mirror" },
{ icon: 'poseidon', name: t('shc:pro.myth_4'), function: i => i?.myth_set == "modern" },
{ icon: 'tuli', name: t('shc:pro.pc_1'), function: i => i?.category == "pouch_season_1" },
{ icon: 'magnetus', name: t('shc:pro.pc_2'), function: i => i?.category == "pouch_season_2" },
{ icon: 'oniks', name: t('shc:pro.pc_fun'), function: i => i?.category == "pouch_funfinity" },
{ icon: 'tuxflatrob', name: t('shc:pro.flat'), function: i => i?.bouncer?.type == "flat" },
{ icon: 'morphobutterfly', name: t('shc:pro.temp'), function: i => i?.bouncer?.type == "temppob" },
{ icon: 'scattered', name: t('shc:pro.pscatter'), function: i => i?.scatter && i.state == "physical" },
{ icon: 'feather', name: t('shc:pro.vscatter'), function: i => i?.scatter && i.state == "virtual" },
]
const category_data = useAPIRequest(user_id?{
endpoint: 'user/activity',
data: { day: dateString, user_id },
cuppazee: true,
function: data=>{
if(!data) return data;
if(!data.captures) return null;
var destinations = data.captures.filter(z => g(z)?.destination?.type == "bouncer")
var category_data = {};
for (let category of categories) {
category_data[category.name] = [];
}
for (let x of data.captures) {
var y = g(x);
if(!y?.bouncer && !y?.scatter) continue;
for (let category of categories) {
if(category.function(y)) {
category_data[category.name].push({
i: x,
m: destinations.find(z => z.captured_at == x.captured_at)
})
break;
};
}
}
return category_data;
}
}:null)
if (!category_data) {
if(category_data===undefined) {
return <View style={{flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page.bg}}>
<ActivityIndicator size="large" color={theme.page_content.fg} />
</View>
} else {
return <View style={{flex: 1, justifyContent: "center", alignItems: "center", backgroundColor:'#ffaaaa'}}>
<MaterialCommunityIcons name="alert" size={48} color="#d00" />
</View>;
}
}
return <View style={{ flex: 1, backgroundColor: theme.page.bg }}>
<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 8 }}>
<DateSwitcher dateString={dateString} />
<View style={{ flexDirection: "row", flexWrap: "wrap", justifyContent: "center" }}>
{categories.map(i => <View style={{ padding: 4, width: 400, flexGrow: 1, maxWidth: "100%" }}>
<Card noPad>
<View style={{ flexDirection: "row", alignItems: "center", flex: 1 }}>
<View style={{ padding: 8 }}>
<Image source={getIcon(i?.icon,128)} style={{ width: 36, height: 36 }} />
</View>
<View style={{ paddingRight: 8, paddingLeft: 0, flex: 1, justifyContent: "center" }}>
<Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), color: theme.page_content.fg }} numberOfLines={1} ellipsizeMode={"tail"}>{category_data[i.name].length}x {i?.name}</Text>
<View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap" }}>
{category_data[i.name].map(x => <SHCItem i={x.i} m={x.m} />)}
</View>
</View>
<View style={{ alignSelf: "stretch", borderTopRightRadius: 8, borderBottomRightRadius: 8, borderLeftWidth: dark ? 2 : 0, borderLeftColor: dark ? level_colors[category_data[i.name].length > 0 ? 5 : 0] : undefined, backgroundColor: dark ? undefined : level_colors[category_data[i.name].length > 0 ? 5 : 0], width: 50, alignItems: "center", justifyContent: "center" }}>
<Text allowFontScaling={false} style={{ color: theme.page_content.fg, fontSize: 24, ...font("bold") }}>{category_data[i.name].length > 0 ? '✔' : ''}</Text>
</View>
</View>
</Card>
</View>)}
</View>
</ScrollView>
<UserFAB username={username} user_id={user_id} />
</View>
}
Example #8
| Source File: main.js From Reminder-App with MIT License | 4 votes |
|
function main() {
const { init_data, snooze } = useContext(ReminderContext);
const { init_data_Birthday } = useContext(BirthdayContext);
const { state, init_data_Settings } = useContext(SettingsContext);
var currentTheme = state.Theme ? lighttheme : darktheme;
const { colors } = currentTheme;
const [loading, setLoading] = useState(true);
useEffect(() => {
const subscription = Notifications.addNotificationResponseReceivedListener(
async (response) => {
if (response.actionIdentifier === "snooze") {
if (
response.notification.request.content.categoryIdentifier ==
"reminder"
) {
snooze({
text: response.notification.request.content.body,
val: response.notification.request.identifier,
snoozetime: 30,
});
}
}
await Notifications.dismissNotificationAsync(
response.notification.request.identifier
);
}
);
return () => subscription.remove();
}, []);
useEffect(() => {
init_data();
init_data_Birthday();
init_data_Settings();
setTimeout(() => {
setLoading(false);
}, 500);
}, []);
if (loading) {
return (
<View
style={{ flex: 1, justifyContent: "center", alignContent: "center" }}
>
<ActivityIndicator color="#7f2ee1" animating={true} size={40} />
</View>
);
} else
return (
<PaperProvider theme={currentTheme}>
<NavigationContainer>
<Tab.Navigator
sceneContainerStyle={{ backgroundColor: colors.background }}
tabBarOptions={{
showLabel: false,
activeBackgroundColor: colors.tab,
inactiveBackgroundColor: colors.tab,
activeTintColor: colors.accent,
inactiveTintColor: colors.primary,
}}
>
<Tab.Screen
name="Reminder"
component={Reminder_Screen}
options={{
tabBarIcon: ({ size, color }) => (
<AntDesign name="clockcircleo" size={size} color={color} />
),
}}
/>
<Tab.Screen
name="Birthday"
component={Birthday_Screen}
options={{
tabBarIcon: ({ size, color }) => (
<AntDesign name="gift" size={size} color={color} />
),
}}
/>
<Tab.Screen
name="Settings"
component={Settings_Screen}
options={{
tabBarIcon: ({ size, color }) => (
<AntDesign name="setting" size={size} color={color} />
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
</PaperProvider>
);
}
Example #9
| Source File: Login.js From salyd with GNU General Public License v3.0 | 4 votes |
|
Login = ({ navigation }) => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [submitting, isSubmitting] = useState(false);
const { updateUser, user, token, updateToken } = useContext(GlobalContext);
const signin = () => {
isSubmitting(true)
Axios.post(`${apiUrl}/signin`, {
"email": email,
"password": password
})
.then(async (res) => {
updateToken(res.data.token)
updateUser(res.data.user)
//Updating asyncstorage for persistence
await AsyncStorage.setItem('token', res.data.token);
await AsyncStorage.setItem('user', JSON.stringify(res.data.user));
isSubmitting(false)
navigation.dispatch(
CommonActions.reset({
index: 0,
routes: [
{
name: 'MainApp',
},
],
})
);
})
.catch(err => { isSubmitting(false); console.log(err) })
}
const signUpRedirect = () => {
navigation.navigate("SignUp");
}
const forgotPass = () => {
navigation.navigate("ForgotPassword")
}
return (
<View style={{ ...styles.container, height: Dimensions.get("screen").height }}>
<KeyboardAvoidingView behavior="position">
<Header isBack navigation={navigation}>Sign In</Header>
<TextInput
label="Email"
value={email}
underlineColor="transparent"
theme={{ roundness: 20, colors: { primary: colors.accentPrimary } }}
style={styles.inputbox}
onChangeText={(text) => setEmail(text)}
/>
<TextInput
label="Password"
value={password}
secureTextEntry={true}
underlineColor="transparent"
theme={{ roundness: 20, colors: { primary: colors.accentPrimary } }}
style={styles.inputbox}
onChangeText={(text) => setPassword(text)}
/>
<View style={{
alignItems: "center",
marginTop: 20,
}}>
{
submitting ? < ActivityIndicator color={colors.accentPrimary} /> : (
<Button onPressFunction={() => signin()}>Logout</Button>
)
}
</View>
<TouchableOpacity onPress={() => signUpRedirect()}>
<Text style={{
marginHorizontal: 25,
marginTop: 25,
fontSize: 16,
paddingLeft: 10,
borderRadius: 20,
fontFamily: "ProductSans"
}} >
Dont Have an account ? SignUp
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => forgotPass()}>
<Text style={{
marginHorizontal: 25,
marginTop: 25,
fontSize: 16,
paddingLeft: 10,
borderRadius: 20,
color: colors.accentPrimary,
fontFamily: "ProductSans"
}} >
Forgot Password
</Text>
</TouchableOpacity>
</KeyboardAvoidingView>
</View>
)
}
Example #10
| Source File: Checkout.js From salyd with GNU General Public License v3.0 | 4 votes |
|
Checkout = ({ navigation }) => {
const [visible, setVisible] = React.useState(false);
const [orderId, setOrderId] = React.useState(Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5));
const [content, setContent] = React.useState(true)
const [processing, setProcessing] = React.useState(false)
const { order, globalTableId, user, restro, token } = React.useContext(GlobalContext)
const OfflineContent = {
title: "Offline",
content: ['Step 1 : Lorem ipsum dolor sit amet ', 'Step 2 : Lorem ipsum dolor sit amet ', 'Step 3 : Lorem ipsum dolor sit amet ']
}
const OnlineContent = {
title: "Online",
content: ['Step 1 : Lorem ipsum dolor sit amet ', 'Step 2 : Lorem ipsum dolor sit amet ', 'Step 3 : Lorem ipsum dolor sit amet ']
}
const checkIfPaid = () => {
setProcessing(true)
const newDate = new Date();
fetch(`${apiUrl}/orderplace`, {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer " + token
},
body: JSON.stringify({
"tableId": globalTableId,
"orderId": orderId,
"menu": order.menu,
"name": restro.name,
"address": restro.address,
"date": newDate
})
}).then((res) => res.json())
.then((data) => {
if (data.error) {
Alert.alert("Sorry, something went wrong");
}
else {
socket.emit("orderPlaced", { globalTableId, "menu": order.menu, "username": user.name, orderId, "restroId": restro._id });
socket.on("paid", (oID) => {
if (oID === orderId) {
navigation.dispatch(
CommonActions.reset({
index: 0,
routes: [
{
name: 'OrderConfirmed',
},
],
})
);
}
})
}
})
}
return (
<View style={styles.container}>
<Modal
animationType="fade"
transparent
statusBarTranslucent
visible={visible}
onRequestClose={() => setVisible(!visible)}
>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<Text style={{
fontSize: 20
}}>Instuctions for {content ? OfflineContent.title : OnlineContent.title} Payment</Text>
<View style={{
margin: 10
}}>
<Text style={{ margin: 5, fontSize: 15 }}>Step 2 : Lorem ipsum dolor sit amet </Text>
<Divider />
<Text style={{ margin: 5, fontSize: 15 }}>Step 3 : Lorem ipsum dolor sit amet </Text>
<Divider />
</View>
<Button
onPressFunction={() => {
setVisible(!visible);
}}
>
Close
</Button>
</View>
</View>
</Modal>
<Header navigation={navigation} isBack>Checkout</Header>
<View style={{ margin: 20, marginTop: 15 }}>
<View style={{
backgroundColor: "white",
borderRadius: 20,
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 5
}}>
<View style={{ padding: 20, paddingBottom: 15 }}>
<Text style={{
fontSize: 20,
marginBottom: 10,
fontFamily: "ProductSansBold",
}}>Order</Text>
<View style={{
maxHeight: 300,
}}>
<View style={{ marginVertical: 10, flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
<Text style={{ flex: 1, color: "#00821a", fontFamily: "ProductSansBold" }}>Name</Text>
<Text style={{ flex: 1, color: "#00821a", fontFamily: "ProductSansBold" }}>Quantity</Text>
<Text style={{ flex: 1, color: "#00821a", fontFamily: "ProductSansBold" }}>Price</Text>
<Text style={{ flex: 1, color: "#00821a", fontFamily: "ProductSansBold" }}>Total Price</Text>
</View>
<FlatList
data={order.menu}
renderItem={({ item }) => (
item.count ?
<View style={{ marginVertical: 10, flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
<Text style={{ flex: 1, fontFamily: "ProductSans" }}>{item.item}</Text>
<Text style={{ flex: 1, fontFamily: "ProductSans" }}>{item.count}</Text>
<Text style={{ flex: 1, fontFamily: "ProductSans" }}>₹{item.price}</Text>
<Text style={{ flex: 1, fontFamily: "ProductSans" }}>₹{item.price * item.count}</Text>
</View> : null
)}
/>
</View>
</View>
<View style={{
height: 50,
borderBottomEndRadius: 20,
borderBottomLeftRadius: 20,
backgroundColor: "#2ce66d",
alignItems: "center",
flexDirection: "row",
justifyContent: "space-around"
}}>
<Text style={{
fontFamily: "ProductSansBold",
color: "#fff",
fontSize: 22
}}>Total</Text>
<Text style={{
fontSize: 22,
textAlign: "right",
color: "#fff",
marginLeft: 10,
fontFamily: "ProductSansBold"
}}>₹ 300</Text>
</View>
</View>
<View style={{
backgroundColor: "white",
padding: 20,
borderRadius: 20,
marginTop: 20,
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 5
}}>
<Text style={{ fontSize: 20, fontFamily: "ProductSansBold", marginBottom: 15 }}>Pay for your Order</Text>
<Text style={{ color: "#555", fontFamily: "ProductSans" }}>Pay your Bill using one of the preffered methods</Text>
<View style={{
marginTop: 10, flexDirection: "row", justifyContent: "space-around", alignItems: "center"
}}>
<Button colorBack="#54cfff" onPressFunction={() => { setContent(true); setVisible(true) }}> Pay Offline</Button>
<Button colorBack="#ffaa54" onPressFunction={() => { setContent(false); setVisible(true) }}> Pay Online</Button>
</View>
</View>
<View style={{
backgroundColor: "white",
padding: 20,
marginTop: 20,
borderRadius: 20,
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 5
}}>
<Text style={{ fontSize: 20, fontFamily: "ProductSansBold", marginBottom: 15 }}>Confirm Order</Text>
<Text style={{ color: "#555", fontFamily: "ProductSans", marginBottom: 10 }}>Pay your Bill using one of the preffered methods</Text>
{
processing ?
<View style={{ marginTop: 15, flexDirection: "row", alignItems: "center", justifyContent: "center" }}>
<Text style={{ color: colors.accentPrimary, marginRight: 10, fontFamily: "ProductSans" }} >Processing</Text>
<ActivityIndicator animating={true} color={colors.accentPrimary} />
</View> :
<Button
onPressFunction={() => checkIfPaid()}
>
Confirm
</Button>
}
</View>
</View>
</View >
)
}
Example #11
| Source File: HomeMain.js From salyd with GNU General Public License v3.0 | 4 votes |
|
HomeMain = (props) => {
const [tableId, setTableId] = useState(null);
const [localRoomId, setLocalRoomID] = useState(null);
const [submitting, isSubmitting] = useState(false);
const { user, token, globalTableId, updateTable, updateRoom } = useContext(GlobalContext);
const [hasPermission, setHasPermission] = useState(null);
const [scanned, setScanned] = useState(true);
useEffect(() => {
(async () => {
const { status } = await BarCodeScanner.requestPermissionsAsync();
setHasPermission(status === 'granted');
})();
}, []);
const handleBarCodeScanned = ({ data }) => {
console.log("SCANEED : >>>>>> ", scanned)
setScanned(true);
console.log("SCANEED : >>>>>> ", scanned)
setTableId(data.toString());
// newTable()
};
useEffect(() => {
if (globalTableId)
props.navigation.dispatch(
CommonActions.reset({
index: 0,
routes: [
{
name: 'Table'
},
],
})
);
}, [globalTableId])
const newTable = async () => {
isSubmitting(true)
Axios({
url: `${apiUrl}/newtable`,
method: 'post',
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${token}`
},
data: { tableId }
})
.then(async res => {
if (res.data.error) {
Alert.alert("Sorry, Incorrect Table Id");
}
else {
updateTable(res.data._id);
updateRoom(res.data.roomId);
console.log(res.data.roomId)
await AsyncStorage.setItem('tableId', res.data._id.toString());
await AsyncStorage.setItem('roomId', res.data.roomId.toString());
isSubmitting(false)
props.navigation.dispatch(
CommonActions.reset({
index: 0,
routes: [
{
name: 'Table',
//TODO: remove this
params: { roomId: res.data.roomId }
},
],
})
);
}
}).catch(err => {
isSubmitting(false);
console.log(err)
})
}
if (hasPermission === null) {
return <Text>Requesting for camera permission</Text>;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}
return (
<React.Fragment>
<Header isUser navigation={props.navigation}>Home</Header>
<View style={styles.container}>
<ScrollView>
<KeyboardAvoidingView
behavior={Platform.OS == "ios" ? "padding" : "position"}
>
{/* <MaskedView
style={{ height: 100, backgroundColor: "#eee" }}
maskElement={
<Image source={require('../../../assets/Untitled.png')} style={{ height: 100, width: 100 }} />
}
>
<View style={{ flex: 1 ,backgroundColor: "cyan"}}>
<BarCodeScanner
onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
style={{ height: 340, width: 340 }}
>
</BarCodeScanner>
</View>
</MaskedView> */}
{/* <View style={styles.qrBox} />
{scanned && <Button color={colors.accentPrimary} onPress={() => setScanned(false)}>Tap to Scan Again</Button>}
<Text style={{
textAlign: "center",
fontWeight: "bold",
margin: 10
}}> OR</Text> */}
<View style={{
marginBottom: 10
}}>
<Text style={{
fontFamily: "ProductSansBold",
fontSize: 20
}}> Hi {user && user.name && user.name}</Text>
<Text style={{
color: "#333",
fontFamily: "ProductSans"
}}> Welcome Back</Text>
</View>
<Text style={{
fontFamily: "ProductSansBold",
fontSize: 20,
color: "#009c0a"
}}> Scan QR Code on Table</Text>
<View style={{
marginTop: 0,
margin: 20
}}>
<View style={{
alignItems: "center",
marginTop: 20,
justifyContent: "center"
}}>
<View style={{
height: 330,
width: 330,
borderRadius: 20,
backgroundColor: "#5effa7"
}} />
</View>
<TextInput
label="Table ID"
value={tableId}
underlineColor="transparent"
theme={{ roundness: 20, colors: { primary: colors.accentPrimary } }}
style={styles.inputbox}
onChangeText={(text) => setTableId(text)}
/>
{
submitting ?
<View style={{
marginTop : 20,alignItems: "flex-start",marginLeft: 10,marginBottom: 15
}}>
<ActivityIndicator color={colors.accentPrimary} />
</View> :
<Button mystyle={{ marginTop: 20 }} onPressFunction={newTable} >Proceed </Button>
}
</View>
<Text style={{
fontFamily: "ProductSansBold",
fontSize: 20,
color: "#009c0a"
}}> Join a Table</Text>
<Text style={{
fontFamily: "ProductSans",
marginLeft: 20,
marginTop: 20,
}}> You can just enter a code generated by someone else</Text>
<Button mystyle={{ marginLeft: 20, marginTop: 10 }} onPressFunction={() => props.navigation.navigate('JoinTable')}>Join Table</Button>
</KeyboardAvoidingView >
</ScrollView>
</View>
</React.Fragment>
)
}
Example #12
| Source File: Table.js From salyd with GNU General Public License v3.0 | 4 votes |
|
Table = ({ navigation }) => {
const [selectedValue, setSelectedValue] = useState("view");
const [restro, setRestro] = useState({});
const [submitting, isSubmitting] = useState(false);
const { token, globalRoomId, updateTable, updateRoom, globalTableId, updateRestro } = useContext(GlobalContext);
useEffect(() => {
Axios({
url: `${apiUrl}/getrestro`,
method: 'post',
headers: {
"Content-Type": "application/json"
},
data: { "tableId": globalTableId }
}).then((res) => {
console.log(res.data);
setRestro(res.data.tableOf);
//Updating the restro in global state
updateRestro(res.data.tableOf);
}).catch((err) => {
res.status(422).json(err);
})
}, [])
const onSubmit = () => {
isSubmitting(true)
Axios({
url: `${apiUrl}/permission/grant`,
method: 'post',
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${token}`
},
data: { "permission": selectedValue }
})
.then((res) => {
console.log(res.data)
isSubmitting(false)
navigation.dispatch(
CommonActions.reset({
index: 0,
routes: [
{
name: 'Menu',
},
],
})
);
}).catch((err) => {
isSubmitting(false)
console.log(err);
})
}
const exitTable = async () => {
updateRoom(null)
updateTable(null)
const tableid = await AsyncStorage.removeItem('tableId')
navigation.navigate('HomeMain')
}
console.log()
return (
<View>
<Header navigation={navigation} isBack>Your Table</Header>
<View style={styles.container}>
<View style={{
marginTop: 30,
marginBottom: 50,
flexDirection: "row",
justifyContent: "space-around",
alignItems: "center"
}}>
<View style={{
flex: 2,
alignItems: "center"
}}>
<Text style={{
color: "black",
fontSize: 50,
textAlign: "center",
color: colors.accentPrimary,
fontFamily: "ProductSansBold",
}}>{globalRoomId}</Text>
<View style={{
alignItems: "center",
flexDirection: "row"
}} >
<View style={{
backgroundColor: colors.accentPrimary,
height: 3,
width: 100,
borderRadius: 20
}} />
<View style={{
backgroundColor: colors.accentPrimary,
height: 3,
marginLeft: 5,
width: 15,
borderRadius: 20
}} />
</View>
</View>
<View style={{
flex: 3,
}}>
<Image style={{
marginLeft: 40,
width: 152,
height: 174
}} source={require("../../../assets/share_Image.png")} />
</View>
</View>
{/* SHARE ID */}
<View style={{
flexDirection: "row",
backgroundColor: "#d8ffcf",
borderRadius: 10,
padding: 20,
alignItems: "center"
}}>
<FontAwesome5 style={{
marginRight: 20
}} name="lightbulb" size={24} color="black" />
<Text style={{
fontFamily: "ProductSans",
marginRight: 30
}}>Share this Room Id with your colleagues to let them join the table</Text>
</View>
{/* GRANT PERMISSION */}
<View style={{
marginTop: 40
}}>
<Text style={{
fontSize: 20,
textAlign: "center",
fontFamily: "ProductSans"
}}> Grant permission to the members</Text>
<View style={{
margin: 0,
padding: 0,
height: 70,
alignItems: "center",
flexDirection: 'row',
justifyContent: "center"
}}>
<Button
colorBack={selectedValue === "view" ? colors.accentPrimary : "#d8ffcf"}
colorText={selectedValue === "view" ? colors.back : colors.accentPrimary}
mystyle={{
borderTopRightRadius: 0,
borderBottomRightRadius: 0
}}
onPressFunction={() => setSelectedValue("view")}
>
View
</Button>
<Button
colorBack={selectedValue === "edit" ? colors.accentPrimary : "#d8ffcf"}
colorText={selectedValue === "edit" ? colors.back : colors.accentPrimary}
mystyle={{
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0
}}
onPressFunction={() => setSelectedValue("edit")}
>
Edit
</Button>
</View>
<View style={{
alignItems: "center",
}}>
{
submitting ?
<View style={{
marginTop: 15
}}>
<ActivityIndicator color={colors.accentPrimary} />
</View> :
<Button
mode="contained"
onPressFunction={() => onSubmit()}
>Proceed</Button>
}
</View>
</View>
{/* EXIT TABLE */}
<View style={{
marginTop: 40
}}>
<Text style={{
fontSize: 20,
textAlign: "center",
fontFamily: "ProductSans"
}}> Exit Table</Text>
<View style={{
alignItems: "center",
marginTop: 15
}}>
<Button
colorBack="#ff6257"
onPressFunction={() => exitTable()}
>
Exit Table
</Button>
</View>
</View>
</View>
</View>
)
}
Example #13
| Source File: SignUp.js From salyd with GNU General Public License v3.0 | 4 votes |
|
SignUp = ({ navigation }) => {
const [name, setName] = useState("");
const [phone, setPhone] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [submitting, isSubmitting] = useState(false);
//O-Auth
const [submittingGoogle, isSubmittingGoogle] = useState(false);
const [usedGoogle, setUsedGoogle] = useState(false);
const [code, setCode] = useState("");
const [verificationId, setVerificationId] = useState(null);
const recaptchaVerifier = useRef(null);
// Function to be called when requesting for a verification code
const sendVerification = () => {
const phoneProvider = new firebase.auth.PhoneAuthProvider();
phoneProvider
.verifyPhoneNumber(phone, recaptchaVerifier.current)
.then(setVerificationId);
};
// Function to be called when confirming the verification code that we received
// from Firebase via SMS
const confirmCode = () => {
const credential = firebase.auth.PhoneAuthProvider.credential(
verificationId,
code
);
firebase
.auth()
.signInWithCredential(credential)
.then((result) => {
Axios.post(`${apiUrl}/signup`, {
name,
phone,
email,
password,
})
.then((res) => {
console.log(res.data);
if (res.data.error) {
Alert.alert(res.data.error);
} else {
isSubmitting(false);
navigation.replace("Login");
}
})
.catch((err) => {
isSubmitting(false);
console.log(err);
});
console.log(result);
});
};
const submitForm = () => {
isSubmitting(true);
sendVerification();
isSubmitting(false);
};
const loginRedirect = () => {
navigation.push("Login");
};
const signinwithgoogle = async () => {
isSubmittingGoogle(true);
try {
const result = await Google.logInAsync({
androidClientId:
"660122221015-ij45d8cg82f0b1kl68c09kq9o72t4eaj.apps.googleusercontent.com",
scopes: ["profile", "email"],
});
if (result.type === "success") {
setName(result.user.name);
setEmail(result.user.email);
setUsedGoogle(true);
isSubmittingGoogle(false);
} else {
console.log("Cancelled");
isSubmittingGoogle(false);
}
} catch (e) {
console.log("error", e);
isSubmittingGoogle(false);
}
};
return (
<View
style={{
backgroundColor: colors.back,
height: Dimensions.get("screen").height,
}}
>
<KeyboardAvoidingView behavior="position">
<Header isBack navigation={navigation}>
Sign Up
</Header>
<FirebaseRecaptchaVerifierModal
ref={recaptchaVerifier}
firebaseConfig={firebase.app().options}
/>
<TextInput
label="Full name"
value={name}
underlineColor="transparent"
theme={{ roundness: 20, colors: { primary: colors.accentPrimary } }}
style={styles.inputbox}
onChangeText={(text) => setName(text)}
/>
<TextInput
label="Phone Number"
value={phone}
keyboardType="phone-pad"
underlineColor="transparent"
theme={{ roundness: 20, colors: { primary: colors.accentPrimary } }}
style={styles.inputbox}
onChangeText={(text) => setPhone(text)}
/>
<TextInput
label="Email"
value={email}
disabled={usedGoogle}
underlineColor="transparent"
theme={{ roundness: 20, colors: { primary: colors.accentPrimary } }}
style={styles.inputbox}
onChangeText={(text) => setEmail(text)}
/>
<TextInput
label="Password"
value={password}
secureTextEntry={true}
underlineColor="transparent"
theme={{ roundness: 20, colors: { primary: colors.accentPrimary } }}
style={styles.inputbox}
onChangeText={(text) => setPassword(text)}
/>
<View
style={{
alignItems: "center",
marginTop: 20,
}}
>
{usedGoogle && (
<Text
style={{
marginBottom: 20,
marginHorizontal: 30,
color: colors.accentPrimary,
textAlign: "center",
}}
>
Fill the Phone Number and password, then register
</Text>
)}
{submitting ? (
<ActivityIndicator color={colors.accentPrimary} />
) : (
<Button onPressFunction={() => submitForm()}>Logout</Button>
)}
</View>
<View
style={{
alignItems: "center",
marginTop: 20,
}}
>
<Text style={{ fontFamily: "ProductSans", marginBottom: 20 }}>
OR
</Text>
{submittingGoogle ? (
<ActivityIndicator color="#4291ff" />
) : (
<TouchableOpacity
disabled={usedGoogle}
onPress={() => signinwithgoogle()}
>
<View
style={{
flexDirection: "row",
alignItems: "center",
width: 200,
padding: 25,
backgroundColor: "#fafafa",
height: 40,
justifyContent: "space-around",
borderRadius: 10,
}}
>
<Image
style={{
height: 21,
width: 20,
marginRight: 40,
}}
source={require("../assets/vectors/google.png")}
/>
<Text
style={{
fontSize: 16,
fontFamily: "ProductSans",
color: usedGoogle ? "#d6d6d6" : "black",
}}
>
Sign Up With Google
</Text>
</View>
</TouchableOpacity>
)}
</View>
{verificationId && (
<>
<TextInput
label="Confirmation Code"
onChangeText={setCode}
keyboardType="number-pad"
value={code}
underlineColor="transparent"
theme={{
roundness: 20,
colors: { primary: colors.accentPrimary },
}}
style={styles.inputbox}
/>
<View
style={{
marginTop: 10,
alignItems: "center",
}}
>
<TouchableOpacity onPress={confirmCode}>
<View
style={{
alignItems: "center",
backgroundColor: colors.accentPrimary,
width: 100,
height: 40,
justifyContent: "space-around",
borderRadius: 10,
}}
>
<Text
style={{
color: "white",
fontSize: 16,
fontFamily: "ProductSans",
}}
>
Confirm
</Text>
</View>
</TouchableOpacity>
</View>
</>
)}
<TouchableOpacity onPress={() => loginRedirect()}>
<Text
style={{
marginHorizontal: 25,
marginTop: 25,
fontSize: 16,
paddingLeft: 10,
borderRadius: 20,
fontFamily: "ProductSans",
}}
>
Already Have an account ? SignIn
</Text>
</TouchableOpacity>
</KeyboardAvoidingView>
</View>
);
}
