@expo/vector-icons#MaterialCommunityIcons JavaScript Examples
The following examples show how to use
@expo/vector-icons#MaterialCommunityIcons.
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: ListItemDeleteAction.js From Done-With-It with MIT License | 6 votes |
|
function ListItemDeleteAction({ onPress }) {
return (
<TouchableWithoutFeedback onPress={onPress}>
<View style={styles.container}>
<MaterialCommunityIcons
name="trash-can"
size={35}
color={colors.white}
/>
</View>
</TouchableWithoutFeedback>
);
}
Example #2
| Source File: Card.js From Legacy with Mozilla Public License 2.0 | 6 votes |
|
export default function UserActivityDash({ user_id, username, displayUsername }) {
var { t } = useTranslation();
var theme = useSelector(i => i.themes[i.theme])
var nav = useNavigation();
var moment = useMoment();
var date = moment().tz('America/Chicago');
var dateString = `${date.year()}-${(date.month() + 1).toString().padStart(2, '0')}-${(date.date()).toString().padStart(2, '0')}`
const { data, status } = useAPIRequest({
endpoint: 'user/activity',
data: { day: dateString, user_id },
cuppazee: true
}, true)
return (
<Card noPad>
<TouchableRipple onPress={displayUsername ? () => nav.navigate('UserDetails', { username: username }) : () => nav.navigate('UserActivity', { username: username })}>
<View style={{ ...(theme.page_content.border ? { borderBottomWidth: 1, borderBottomColor: theme.page_content.border } : {}), backgroundColor: (theme.clanCardHeader || theme.navigation).bg, padding: 8, borderTopLeftRadius: 8, borderTopRightRadius: 8, flexDirection: "row", alignItems: "center" }}>
{displayUsername ?
<Image style={{ height: 32, width: 32, borderRadius: 16 }} source={{ uri: `https://munzee.global.ssl.fastly.net/images/avatars/ua${Number(user_id).toString(36)}.png` }} /> :
<MaterialCommunityIcons style={{ marginHorizontal: 4 }} name="format-list-bulleted" size={24} color={(theme.clanCardHeader || theme.navigation).fg} />}
<Text allowFontScaling={false} style={{ paddingLeft: 4, ...font("bold"), fontSize: 16, flex: 1, color: (theme.clanCardHeader || theme.navigation).fg }}>{displayUsername ? username : t('user:activity')}</Text>
<MaterialCommunityIcons name="chevron-right" size={24} color={(theme.clanCardHeader || theme.navigation).fg} />
</View>
</TouchableRipple>
{!status ?
<View style={{ paddingBottom: 4 }}><ActivityOverview username={username} user_id={user_id} /></View> :
(status === "loading" ? <View style={{ flex: 1, justifyContent: "center", alignItems: "center", padding: 8 }}>
<ActivityIndicator size="large" color={theme.page_content.fg} />
</View> : <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<MaterialCommunityIcons name="alert" color={theme.page.fg} size={48} />
<Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), textAlign: "center", color: theme.page_content.fg }}>{t('error:' + status)}</Text>
</View>)}
</Card>
);
}
Example #3
| Source File: main-stack.js From astrale with GNU General Public License v3.0 | 6 votes |
|
BarIcon = ({ color, size, name }) => {
return (
<MaterialCommunityIcons
color={color}
size={size}
name={name}
style={{ marginTop: 5 }}
/>
);
}
Example #4
| Source File: OBComplete.js From discovery-mobile-ui with MIT License | 6 votes |
|
OBComplete = ({ handleOnboardingState }) => (
<View style={styles.root}>
<View style={styles.thankYouContainer}>
<Text style={styles.thankYouText}>You are all set </Text>
<Text style={styles.thankYouText}>for the evaluation!</Text>
</View>
<TouchableOpacity onPress={() => handleOnboardingState(true)}>
<View style={styles.logoContainer}>
<LogoBasic height={hp('18%')} width={hp('18%')} />
</View>
<View style={styles.tapToStartContainer}>
<MaterialCommunityIcons name="chevron-double-up" size={60} color={Colors.logoBlue} />
<Text style={[styles.body, styles.tapToStartText]}>Tap to Start</Text>
</View>
</TouchableOpacity>
</View>
)
Example #5
| Source File: ListItem.js From Done-With-It with MIT License | 6 votes |
|
function ListItem({
title,
subTitle,
image,
IconComponent,
onPress,
renderRightActions,
}) {
return (
<Swipeable renderRightActions={renderRightActions}>
<TouchableHighlight underlayColor={colors.light} onPress={onPress}>
<View style={styles.container}>
{IconComponent}
{image && <Image style={styles.image} source={image} />}
<View style={styles.detailsContainer}>
<Text style={styles.title} numberOfLines={1}>
{title}
</Text>
{subTitle && (
<Text style={styles.subTitle} numberOfLines={2}>
{subTitle}
</Text>
)}
</View>
<MaterialCommunityIcons
color={colors.medium}
name="chevron-right"
size={25}
/>
</View>
</TouchableHighlight>
</Swipeable>
);
}
Example #6
| Source File: Stats.js From Legacy with Mozilla Public License 2.0 | 6 votes |
|
function SyncButton ({group, game_id}) {
const [pressed,setPressed] = React.useState(false);
const theme = useSelector(i=>i.themes[i.theme]);
const data = useAPIRequest(pressed?{
cuppazee: true,
endpoint: "clan/shadow/generate/v2",
data: {
game_id,
group
}
}:null);
if(pressed && !data) {
return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", minHeight: 64 }}>
<ActivityIndicator size="large" color={theme.page_content.fg} />
</View>
}
if(pressed) {
return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", minHeight: 64}}>
<MaterialCommunityIcons name="check-bold" size={32} color={theme.page_content.fg} />
</View>
}
return <View style={{padding: 4}}>
<Button color={(theme.clan_header||theme.navigation).bg} mode="contained" onPress={()=>setPressed(true)}>
Sync Shadow Players in {group}
</Button>
</View>
}
Example #7
| Source File: Icon.js From Done-With-It with MIT License | 6 votes |
|
function Icon({
name,
size = 40,
backgroundColor = "#000",
iconColor = "#fff",
}) {
return (
<View
style={{
width: size,
height: size,
borderRadius: size / 2,
backgroundColor,
justifyContent: "center",
alignItems: "center",
}}
>
<MaterialCommunityIcons
name={name}
color={iconColor}
size={size * 0.5}
/>
</View>
);
}
Example #8
| Source File: styles.js From atendimento-e-agilidade-medica-AAMed with MIT License | 5 votes |
|
IconEye = styled(MaterialCommunityIcons)`
font-size: 25px;
color: #00000066;
`
Example #9
| Source File: Leaderboard.js From Legacy with Mozilla Public License 2.0 | 5 votes |
|
UserTile = React.memo(function ({ i, index, week }) {
var theme = useSelector(i => i.themes[i.theme]);
var [open, setOpen] = React.useState(false);
var dark = false;
var route = useRoute();
var level_colors = useLevelColours();
if (theme.dark) {
dark = true;
}
const types = week?.requirements ?? []
var user = useAPIRequest(open ? {
endpoint: `weekly/player/v1`,
data: {
user_id: i.i,
week_id: route.params.week
},
cuppazee: true
} : null)
return <View style={{ padding: 4 }}>
<Card noPad>
<TouchableRipple onPress={() => {
setOpen(!open)
}}>
<View style={{ flexDirection: "row", alignItems: "center" }}>
<View style={{ paddingHorizontal: 8, paddingVertical: 4 }}>
<Image source={getIcon(`https://munzee.global.ssl.fastly.net/images/avatars/ua${i?.i?.toString?.(36)}.png`)} style={{ width: 36, height: 36, borderRadius: 18 }} />
</View>
<View style={{ paddingHorizontal: 8, paddingLeft: 0, flex: 1, flexDirection: "row", alignItems: "center" }}>
<Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), color: theme.page_content.fg }} numberOfLines={1} ellipsizeMode={"tail"}>#{index + 1} - {i.n}</Text>
</View>
<View style={{ alignSelf: "stretch", borderTopRightRadius: 8, borderBottomRightRadius: open ? 0 : 8, borderLeftWidth: dark ? 2 : 0, borderLeftColor: dark ? level_colors[Math.max(0, Math.min(Math.ceil(i.p / 50), 5))].bg : undefined, backgroundColor: dark ? undefined : level_colors[Math.max(0, Math.min(Math.ceil(i.p / 50), 5))].bg, width: 60, flexDirection: "row", alignItems: "center", justifyContent: "center" }}>
<Text allowFontScaling={false} style={{ color: level_colors[Math.max(0, Math.min(Math.ceil(i.p / 50), 5))].fg, fontSize: 16, ...font("bold") }}>{i.p?.toLocaleString?.() || "0"}</Text>
{week && !!i.f && status(week) === "resultssoon" && <MaterialCommunityIcons name="check-bold" color={theme.page_content.fg} style={{ marginLeft: 4 }} size={16} />}
</View>
</View>
</TouchableRipple>
<Portal>
<Dialog
visible={open}
onDismiss={() => { setOpen(false) }}
style={{ maxWidth: 390, alignSelf: "center", borderRadius: 8, backgroundColor: theme.page_content.bg }}>
<View style={{ flexDirection: "row", alignItems: "center" }}>
<View style={{ paddingHorizontal: 8, paddingVertical: 4 }}>
<Image source={getIcon(`https://munzee.global.ssl.fastly.net/images/avatars/ua${i?.i?.toString?.(36)}.png`)} style={{ width: 36, height: 36, borderRadius: 18 }} />
</View>
<View style={{ paddingHorizontal: 8, paddingLeft: 0, flex: 1, justifyContent: "center" }}>
<Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), color: theme.page_content.fg }} numberOfLines={1} ellipsizeMode={"tail"}>#{index + 1} - {i.n}</Text>
</View>
<View style={{ alignSelf: "stretch", borderTopRightRadius: 8, borderBottomRightRadius: open ? 0 : 8, borderLeftWidth: dark ? 2 : 0, borderLeftColor: dark ? level_colors[Math.max(0, Math.min(Math.ceil(i.p / 50), 5))].bg : undefined, backgroundColor: dark ? undefined : level_colors[Math.max(0, Math.min(Math.ceil(i.p / 50), 5))].bg, width: 60, alignItems: "center", justifyContent: "center" }}>
<Text allowFontScaling={false} style={{ color: level_colors[Math.max(0, Math.min(Math.ceil(i.p / 50), 5))].fg, fontSize: 16, ...font("bold") }}>{i.p?.toLocaleString?.() || "0"}</Text>
</View>
</View>
<View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap" }}>
{types.map((x, xi) => <View key={x.id} style={{ padding: 4, width: 80, flexGrow: 1, alignItems: "center", opacity: ((user?.d || [])[xi] ?? 0) > 0 ? 1 : 0.4 }}>
<Image style={{ height: 32, width: 32, marginHorizontal: 8 }} source={getIcon(x.type)} />
<Text allowFontScaling={false} style={{ ...font("bold"), fontSize: 16, color: theme.page_content.fg }}>{(user?.d || [])[xi] ?? '?'}</Text>
</View>)}
</View>
</Dialog>
</Portal>
</Card>
</View>
})
Example #10
| Source File: styles.js From atendimento-e-agilidade-medica-AAMed with MIT License | 5 votes |
|
IconEye = styled(MaterialCommunityIcons)`
font-size: 25px;
color: #00000066;
`
Example #11
| Source File: PlaybookPage.js From UltimateApp with MIT License | 5 votes |
|
PlaybookPage = (props) => {
const isEmpty = props.customPlays.length === 0;
const newPlay = () => {
const defaultTitle = I18n.t('playbookPage.untitledPlay');
let newTitle = defaultTitle;
let counter = 1;
while (props.customPlays.findIndex((item) => item.title === newTitle) !== -1) {
newTitle = defaultTitle + ' (' + counter + ')';
counter += 1;
}
const play = {
uuid: generateUuid(),
animation: new Drill(),
title: newTitle,
};
props.savePlay(play);
return play;
};
const behavior = Platform.select({
ios: 'padding',
android: 'height',
});
return (
<KeyboardAvoidingView style={styles.playbookPage} behavior={behavior}>
{isEmpty ? (
<View style={styles.empty}>
<Text style={styles.emptyText}>{I18n.t('playbookPage.empty')}</Text>
</View>
) : (
<ScrollView>
{props.customPlays.map((play) => (
<PlayTitle
play={play}
key={play.title}
style={styles.customPlay}
onPress={() => {
props.navigation.navigate('PlayEditorPage', { currentPlay: play });
}}
/>
))}
</ScrollView>
)}
<TouchableOpacity
style={styles.footer}
onPress={() => {
props.navigation.navigate('PlayEditorPage', { currentPlay: newPlay() });
}}
>
<View style={styles.createContainer}>
<MaterialCommunityIcons style={styles.createIcon} name="plus" testID="createPlay" />
</View>
</TouchableOpacity>
</KeyboardAvoidingView>
);
}
Example #12
| Source File: Picker.js From Done-With-It with MIT License | 5 votes |
|
function AppPicker({
icon,
items,
numberOfColumns = 1,
onSelectItem,
PickerItemComponent = PickerItem,
placeholder,
selectedItem,
width = "100%",
}) {
const [modalVisible, setModalVisible] = useState(false);
return (
<>
<TouchableWithoutFeedback onPress={() => setModalVisible(true)}>
<View style={[styles.container, { width }]}>
{icon && (
<MaterialCommunityIcons
name={icon}
size={20}
color={defaultStyles.colors.medium}
style={styles.icon}
/>
)}
{selectedItem ? (
<Text style={styles.text}>{selectedItem.label}</Text>
) : (
<Text style={styles.placeholder}>{placeholder}</Text>
)}
<MaterialCommunityIcons
name="chevron-down"
size={20}
color={defaultStyles.colors.medium}
/>
</View>
</TouchableWithoutFeedback>
<Modal visible={modalVisible} animationType="slide">
{/* Wrap Button and FlatList in <Screen> in case of iPhone issues - 'Close' getting hidden behind notch */}
{/* <Screen> */}
<Button title="Close" onPress={() => setModalVisible(false)} />
<FlatList
data={items}
keyExtractor={(item) => item.value.toString()}
numColumns={numberOfColumns}
renderItem={({ item }) => (
<PickerItemComponent
item={item}
label={item.label}
onPress={() => {
setModalVisible(false);
onSelectItem(item);
}}
/>
)}
/>
</Modal>
</>
);
}
Example #13
| Source File: App.js From pandoa with GNU General Public License v3.0 | 5 votes |
|
//import getTheme from "native-base/dist/src/theme/components";
//import material from "native-base/dist/src/theme/variables/material";
export default function App(props) {
const [isLoadingComplete, setLoadingComplete] = React.useState(false);
const [initialNavigationState, setInitialNavigationState] = React.useState();
const containerRef = React.useRef();
const { getInitialState } = useLinking(containerRef);
// Load any resources or data that we need prior to rendering the app
React.useEffect(() => {
async function loadResourcesAndDataAsync() {
try {
SplashScreen.preventAutoHide();
// Load our initial navigation state
setInitialNavigationState(await getInitialState());
// Load fonts
await Font.loadAsync({
...Ionicons.font,
...MaterialCommunityIcons.font,
"space-mono": require("./assets/fonts/SpaceMono-Regular.ttf"),
Roboto: require("native-base/Fonts/Roboto.ttf"),
Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf")
});
} catch (e) {
// We might want to provide this error information to an error reporting service
console.warn(e);
} finally {
setLoadingComplete(true);
SplashScreen.hide();
}
}
loadResourcesAndDataAsync();
}, []);
useEffect(() => {
const config = async () => {
let res = await Permissions.askAsync(Permissions.LOCATION);
if (res.status !== "granted") {
console.log("Permission to access location was denied");
} else {
console.log("Permission to access location granted");
}
};
config();
}, []);
if (!isLoadingComplete && !props.skipLoadingScreen) {
return null;
} else {
return (
<Provider store={Store().store}>
<PersistGate loading={null} persistor={Store().persistor}>
<StyleProvider style={getTheme(material)}>
<View style={styles.container}>
{/* Platform.OS === "ios" && <StatusBar barStyle="default" /> */}
<NavigationContainer
ref={containerRef}
initialState={initialNavigationState}
>
<Stack.Navigator headerMode="none">
<Stack.Screen name="Root" component={BottomTabNavigator} />
</Stack.Navigator>
</NavigationContainer>
</View>
</StyleProvider>
</PersistGate>
</Provider>
);
}
}
Example #14
| Source File: Auth.js From Legacy with Mozilla Public License 2.0 | 5 votes |
|
export default function AuthScreen({route}) {
var { t } = useTranslation();
var theme = useSelector(i => i.themes[i.theme]);
var [status, setStatus] = React.useState(0);
const navigation = useNavigation();
const discovery = {
authorizationEndpoint: 'https://api.munzee.com/oauth',
tokenEndpoint: 'https://api.munzee.com/oauth/login',
};
const data = useAPIRequest({
endpoint: 'competition/join/v1',
cuppazee: true,
data: {
username: route.params.username
}
})
const config = data?.team === "pear" ? config_pear : config_pine;
const [request, response, promptAsync] = AuthSession.useAuthRequest(
{
clientId: config.client_id,
scopes: ['read'],
redirectUri: config.redirect_uri,
state: JSON.stringify({
redirect: Oconfig.redirect_uri,
platform: Platform.OS
})
},
discovery
);
React.useEffect(() => {
if (response) {
(async function () {
if (!response.params || !response.params.teaken) return setStatus("invalid_response");
if(response.params.status) {
setStatus(`success_${response.params.status}`);
} else {
setStatus("success");
}
})()
}
}, [response]);
if (status === "loading") {
return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page_content.bg }}>
<ActivityIndicator size="large" color={theme.page_content.fg} />
</View>
}
if (status === "success" || status === "success_reopt" || status === "success_already") {
return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page_content.bg }}>
{status !== "success_already" && <>
<Image source={data?.team === "pine" ? require('assets/pine.png') : require('assets/pear.png')} style={{ height: 128, width: 128, borderRadius: 8, marginBottom: 16 }} />
<Text allowFontScaling={false} style={{ fontSize: 16, fontWeight: "bold", textAlign: "center", color: theme.page_content.fg }}>{response.params.username} {status === "success" ? "has joined" : "is in"} Team {data?.team.toUpperCase() || '???¿??'}</Text>
</>}
<Button mode="contained" onPress={()=>navigation.replace('CompetitionHome')}>Return to Competition Dashboard</Button>
</View>
}
return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page_content.bg }}>
{!!status && <>
{statusIcons[status]==="loading"?<ActivityIndicator size="large" color={theme.page_content.fg} />:<MaterialCommunityIcons name={statusIcons[status]} color={theme.page.fg} size={48} />}
<Text allowFontScaling={false} style={{ fontSize: 16, fontWeight: "bold", textAlign: "center", color: theme.page_content.fg }}>{statusMessages[status]}</Text>
</>}
<Text allowFontScaling={false} style={{ color: theme.page_content.fg, fontSize: 24 }}>Opt-in to Competition</Text>
<Text allowFontScaling={false} style={{ color: theme.page_content.fg, fontSize: 16 }}>{t('auth:tap')}</Text>
<IconButton
disabled={!data || (status && status !== "invalid_response")}
size={32}
onPress={() => {
setStatus("waiting_for_login");
promptAsync({
useProxy: Oconfig.useProxy,
redirectUri: config.redirect_uri
});
}}
color={theme.page_content.fg}
icon="login-variant"
/>
</View>
}
Example #15
| Source File: MenuItem.js From SocialApp-React-Native with MIT License | 5 votes |
|
MenuItem = () => {
const dispatch = useDispatch();
const navigation = useNavigation();
return(
<Menu renderer={SlideInMenu} >
<MenuTrigger>
<MaterialCommunityIcons
name="dots-vertical"
size={24}
color={Platform.OS === 'android' ? '#fff' : Colors.brightBlue}
style={{ padding: 15, marginRight: 5 }}
/>
</MenuTrigger>
<MenuOptions >
<View style={{ borderTopLeftRadius: 30, borderTopRightRadius: 30, backgroundColor: Colors.brightBlue, overflow: 'hidden' }} >
<MenuOption onSelect={() => navigation.navigate('YourProfile', { screen: 'EditProfile' })}>
<View style={{ flexDirection: 'row', borderBottomColor: '#fff', borderBottomWidth: 1 }} >
<MaterialCommunityIcons name="account-edit" size={24} color="#fff" style={{ alignSelf: 'center', marginLeft: 10 }} />
<Text style={{ padding: 15, fontSize: 16, color: '#fff' }}>Edit Profile</Text>
</View>
</MenuOption>
{/* <MenuOption onSelect={() => alert(`Save`)}>
<View style={{ flexDirection: 'row', borderBottomColor: '#fff', borderBottomWidth: 1 }} >
<MaterialCommunityIcons name="delete-sweep-outline" size={24} color="#fff" style={{ alignSelf: 'center', marginLeft: 10 }} />
<Text style={{ padding: 15, fontSize: 16, color: '#fff' }}>Delete Profile</Text>
</View>
</MenuOption> */}
<MenuOption
onSelect={async () => {
await dispatch(authActions.logout())
showMessage({
message: `You have successfully logged out.`,
type: "success",
duration: 3000,
icon: { icon: "success", position: 'left' }
});
}}
>
<View style={{ flexDirection: 'row' }} >
<MaterialCommunityIcons name="logout" size={24} color="#fff" style={{ alignSelf: 'center', marginLeft: 10 }} />
<Text style={{ padding: 15, fontSize: 16, color: '#fff' }}>Logout</Text>
</View>
</MenuOption>
</View>
</MenuOptions>
</Menu>
)
}
Example #16
| Source File: AppNavigator.js From Done-With-It with MIT License | 5 votes |
|
AppNavigator = () => {
useNotifications();
return (
<Tab.Navigator>
<Tab.Screen
name="Feed"
component={FeedNavigator}
options={{
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="home"
color={color}
size={size}
/>
),
}}
/>
<Tab.Screen
name="ListingEdit"
component={ListingEditScreen}
options={({ navigation }) => ({
tabBarButton: () => (
<NewListingButton
onPress={() =>
navigation.navigate(routes.LISTING_EDIT)
}
/>
),
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="plus-circle"
color={color}
size={size}
/>
),
})}
/>
<Tab.Screen
name="Account"
component={AccountNavigator}
options={{
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="account"
color={color}
size={size}
/>
),
}}
/>
</Tab.Navigator>
);
}
Example #17
| Source File: ListItem.js From Legacy with Mozilla Public License 2.0 | 5 votes |
|
export default function ListItem({ i }) {
var moment = useMoment();
var theme = useSelector(i => i.themes[i.theme]);
return <View style={{ padding: 4, width: 400, flexGrow: 1, maxWidth: "100%" }}>
<Card noPad>
<View style={{ flexDirection: "column", width: "100%", alignItems: "center", paddingLeft: 8, paddingRight: 8, borderRadius: 0 }}>
<View style={{ flexDirection: "row", justifyContent: "center", alignItems: "center" }}>
{i.clan && <MaterialCommunityIcons name="shield-outline" size={24} color={theme.page_content.fg} />}
{i.title.match(/freeze tag store/i) && <MaterialCommunityIcons name="cart-outline" size={24} color={theme.page_content.fg} />}
{i.title.match(/premium/i) && <MaterialCommunityIcons name="star-outline" size={24} color={theme.page_content.fg} />}
{i.title.match(/zeeops/i) && <MaterialCommunityIcons name="briefcase-outline" size={24} color={theme.page_content.fg} />}
{i.title.match(/munzee\s*support/i) && <MaterialCommunityIcons name="heart-outline" size={24} color={theme.page_content.fg} />}
{i.title.match(/\btest\b/i) && <MaterialCommunityIcons name="briefcase-outline" size={24} color={theme.page_content.fg} />}
{i.title.match(/giveaway/i) && <Image style={{ height: 24, width: 24 }} source={getIcon('theunicorn_full')} />}
{i.title.match(/magnetus/i) && <Image style={{ height: 24, width: 24 }} source={getIcon('magnetus')} />}
{i.title.match(/prize\s*wheel/i) && <Image style={{ height: 24, width: 24 }} source={getIcon('prizewheel')} />}
{i.title.match(/pimedus/i) && <Image style={{ height: 24, width: 24 }} source={getIcon('pimedus')} />}
{i.title.match(/space\s*coast/i) && <Image style={{ height: 24, width: 24 }} source={getIcon('https://server.cuppazee.app/spacecoastgeostore.png')} />}
<Text allowFontScaling={false} style={{ color: theme.page_content.fg, fontSize: 20, ...font("bold"), marginLeft: 4 }}>
{i.short_title || i.title}
</Text>
</View>
<View style={{ flexDirection: "row", justifyContent: "center", alignItems: "center" }}>
<Text allowFontScaling={false} style={{ color: theme.page_content.fg, fontSize: 16, fontWeight: "bold", marginLeft: 4 }}>
{moment(i.time).format('L LT')}
</Text>
</View>
{i.short_title && <View style={{ flexDirection: "row", justifyContent: "center", alignItems: "center" }}>
<Text allowFontScaling={false} style={{ color: theme.page_content.fg, fontSize: 16, marginLeft: 4 }}>
{i.title}
</Text>
</View>}
<View style={{ flexWrap: "wrap", flexDirection: "row", justifyContent: "center" }}>
{
i.items?.map(i => <InventoryItem key={i.icon} theme={theme} i={i} />)
}
</View>
</View>
</Card>
</View>
}
Example #18
| Source File: ImageInput.js From Done-With-It with MIT License | 5 votes |
|
function ImageInput({ imageUri, onChangeImage }) {
useEffect(() => {
requestPermission();
}, []);
const requestPermission = async () => {
const {
granted,
} = await ImagePicker.requestCameraRollPermissionsAsync();
if (!granted) {
alert("You need to enable permission to access the library");
}
};
const handlePress = () => {
if (!imageUri) {
selectImage();
} else {
Alert.alert(
"Delete",
"Are you sure you want to delete this image?",
[
{ text: "Yes", onPress: () => onChangeImage(null) },
{ text: "No" },
]
);
}
};
const selectImage = async () => {
try {
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
quality: 0.5,
});
if (!result.cancelled) onChangeImage(result.uri);
} catch (error) {
console.log("Error reading an image", error);
}
};
return (
<TouchableWithoutFeedback onPress={handlePress}>
<View style={styles.container}>
{!imageUri && (
<MaterialCommunityIcons
color={colors.medium}
name="camera"
size={40}
/>
)}
{imageUri && (
<Image source={{ uri: imageUri }} style={styles.image} />
)}
</View>
</TouchableWithoutFeedback>
);
}
Example #19
| Source File: Card.js From SocialApp-React-Native with MIT License | 4 votes |
|
Card = (props) => {
const { post, userId, fromUserProfile } = props;
const navigation = useNavigation();
const dispatch = useDispatch();
// const liked = post.likes.indexOf(userId) !== -1;
const [isImageLoading, setIsImageLoading] = useState(true);
const [imageUri, setImageUri] = useState('')
const [showFullBody, setShowFullBody] = useState(false);
const [imgWidth, setImgWidth] = useState();
const [imgHeight, setImgHeight] = useState();
const onImageErrorHandler = () => {
setImageUri(ENV.defaultImageUri)
}
let TouchableComp = TouchableOpacity;
if(Platform.OS === 'android' && Platform.Version >= 21){
TouchableComp = TouchableNativeFeedback;
}
const deleteHandler = (id) => {
Alert.alert(
'Are you sure?',
'Do you really want to delete this post?',
[
{text: 'No', style: 'default'},
{
text: 'Yes',
style: 'destructive',
onPress: async () => {
await dispatch(postActions.deletePost(id))
showMessage({
message: "Your post was successfully deleted.",
type: "success",
icon: { icon: "success", position: 'left' },
duration: 3000
});
}
}
]
)
};
const checkLike = () => {
let match = post.likes.indexOf(userId) !== -1;
return match;
}
const toggleLike = async () => {
props.toggleLikeHandler(post._id, checkLike());
}
useEffect(() => {
let imageUrl = `${ENV.apiUrl}/post/photo/${post._id}?${new Date(post.updated)}`;
Image.getSize(imageUrl, (width, height) => {
// calculate image width and height
const screenWidth = Dimensions.get('window').width
const scaleFactor = width / screenWidth
const imageHeight = height / scaleFactor
setImgWidth(screenWidth);
setImgHeight(imageHeight);
})
}, [])
return (
<TouchableComp
background={ Platform.OS === 'ios' ? undefined : TouchableNativeFeedback.Ripple('#b3b3b3') }
onPress={() =>
fromUserProfile ?
{}
:
navigation.navigate('UserProfile', { userId: post.postedBy._id, name: post.postedBy.name }) }
>
<View style={styles.card}>
<View style={styles.cardTitleHeader}>
<View style={{ display: 'flex', flex: 1, flexDirection: 'row' }} >
<View style={styles.timeContainer}>
<Image
style={styles.userIcon}
source={{ uri: imageUri || `${ENV.apiUrl}/user/photo/${post.postedBy._id}?${new Date(post.postedBy.updated)}` }}
onError={onImageErrorHandler}
/>
<Text
style={{ fontSize: 15, alignSelf: 'center', paddingHorizontal: 10, paddingVertical: 5 }}
onPress={() => navigation.navigate('UserProfile', { userId: post.postedBy._id, name: post.postedBy.name })}
>
{post.postedBy.name + " "}
{
VerifiedUser.verifiedUsersId.includes(post.postedBy._id) && <Octicons name="verified" size={18} color={Colors.brightBlue} />
}
</Text>
</View>
<View style={{ position: 'absolute', right: 0, display: 'flex', flexDirection: 'row'}}>
<Ionicons
name={ Platform.OS === 'android' ? 'md-time' : 'ios-time' }
size= {14}
style={{ marginTop: 3 }}
/>
<Text> {timeDifference(new Date(), new Date(post.created))} </Text>
</View>
</View>
</View>
<View style={styles.cardImageContainer} >
<Image
style={{...styles.cardImage, height: imgHeight }}
source={{ uri: `${ENV.apiUrl}/post/photo/${post._id}?${new Date(post.updated)}` }}
onLoad={() => setIsImageLoading(false)}
/>
<ActivityIndicator
style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0 }}
animating={isImageLoading}
size='large'
color={Colors.brightBlue}
/>
</View>
<View style={styles.cardHeader}>
<View>
<Text style={styles.title}>{post.title ? post.title : ""}</Text>
{ post.body && post.body.length > 30 ? (
<View>
{ showFullBody ? (
<Text style={styles.description}>
{post.body}
<Text
style={{ color: Colors.brightBlue }}
onPress={() => setShowFullBody((prevState) => !prevState)}
>
Read Less
</Text>
</Text>
) : (
<Text style={styles.description}>
{post.body.substring(0, 30)}
<Text
style={{ color: Colors.brightBlue }}
onPress={() => setShowFullBody((prevState) => !prevState)}
>
...Read More
</Text>
</Text>
) }
</View>
) : (
<Text style={styles.description}> {post.body} </Text>
) }
</View>
</View>
<View style={styles.cardFooter}>
<View style={styles.socialBarContainer}>
<View style={styles.socialBarSection}>
<TouchableOpacity
style={styles.socialBarButton}
onPress={toggleLike}
>
<Ionicons
name="md-thumbs-up"
size={24}
style={{ marginRight: 5 }}
color={checkLike() ? 'blue' : "black"}
/>
<Text style={styles.socialBarLabel}> {post.likes.length} </Text>
</TouchableOpacity>
</View>
<View style={styles.socialBarSection}>
<TouchableOpacity
style={styles.socialBarButton}
onPress={() => navigation.navigate('Comments',{ postId: post._id, userId: userId })}
>
<Ionicons
name="md-chatboxes"
size={24}
style={{ marginRight: 5 }}
/>
<Text style={styles.socialBarLabel}> {post.comments.length} </Text>
</TouchableOpacity>
</View>
</View>
</View>
<TouchableOpacity
onPress={() => navigation.navigate('Comments', { postId: post._id, userId: userId })}
>
{ post.comments.length > 0 ? (
<Text style={{ paddingHorizontal: 16, paddingBottom: 15, paddingTop: 5 }} >View all {post.comments.length} comments </Text>
) : (
<Text style={{ paddingHorizontal: 16, paddingBottom: 15, paddingTop: 5 }} >Comment here </Text>
) }
</TouchableOpacity>
{ post.postedBy._id === userId && (
<View style={styles.postActions} >
<View style={styles.socialBarSection}>
<TouchableOpacity
style={styles.socialBarButton}
onPress={deleteHandler.bind(this, post._id)}
>
<MaterialCommunityIcons
name="delete"
size={20}
style={{ marginRight: 5 }}
color="red"
/>
<Text style={styles.socialBarLabel}>Delete</Text>
</TouchableOpacity>
</View>
<View style={styles.socialBarSection}>
<TouchableOpacity
style={styles.socialBarButton}
onPress={() => navigation.navigate('EditPost', { postId: post._id })}
>
<MaterialCommunityIcons
name="square-edit-outline"
size={20}
style={{ marginRight: 5 }}
color={Colors.lightAccent}
/>
<Text style={styles.socialBarLabel}>Edit</Text>
</TouchableOpacity>
</View>
</View>
)}
</View>
</TouchableComp>
);
}
Example #20
| Source File: astrologers.screen.js From astrale with GNU General Public License v3.0 | 4 votes |
|
/**
* @param navigation
* @returns {*}
* @constructor
*/
function AstrologersScreen({ navigation }) {
const { colors } = useTheme();
const [showAdvice, setShowAdvice] = React.useState(true);
const _handleCloseAdvice = () => setShowAdvice(false);
const astrologist_colors = {
Western: '#0f3e6a',
Vedic: '#3d530d',
Hellenistic: '#735b13',
Oriental: '#62230d',
};
const dummy_astrologist = [
{
id: 1,
name: 'Marisa',
school: 'Hellenistic',
years_exp: 9,
stars: 4,
reviews: 125,
photo: require('./astrologers/marisa.jpg'),
},
{
id: 2,
name: 'Carter',
school: 'Western',
years_exp: 21,
stars: 5,
reviews: 120,
photo: require('./astrologers/carter.jpg'),
},
{
id: 3,
name: 'Samanta',
school: 'Oriental',
years_exp: 12,
stars: 5,
reviews: 321,
photo: require('./astrologers/samanta.jpg'),
},
{
id: 4,
name: 'Bianca',
school: 'Vedic',
years_exp: 45,
stars: 4,
reviews: 69,
photo: require('./astrologers/bianca.jpg'),
},
{
id: 5,
name: 'George',
school: 'Western',
years_exp: 15,
stars: 5,
reviews: 198,
photo: require('./astrologers/george.jpg'),
},
{
id: 6,
name: 'Meowi',
school: 'Oriental',
years_exp: 1,
stars: 5,
reviews: 7,
photo: require('./astrologers/meowi.jpg'),
},
];
return (
<SafeAreaView style={{ flex: 1 }}>
<SpaceSky />
<View style={{ marginBottom: 10 }}>
<MainNav style={{ top: 0 }} />
<View style={styles.headerContainer}>
<ShadowHeadline>{i18n.t('Astrologers')}</ShadowHeadline>
</View>
</View>
<ScrollView>
{showAdvice && (
<View
style={[
styles.adviceContainer,
{ borderColor: colors.primary + 'E6' },
]}
>
<MaterialCommunityIcons
onPress={_handleCloseAdvice}
name="close"
size={20}
style={styles.adviceClose}
color={colors.primary + 'E6'}
/>
<Title style={{ textAlign: 'center' }}>
{i18n.t('How it works')}
</Title>
<View style={{ marginTop: 10 }}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Avatar.Text
size={30}
label="1"
theme={{ colors: { primary: colors.primary + 'E6' } }}
labelStyle={{ fontSize: 22 }}
/>
<Text style={{ marginLeft: 15, fontSize: 12 }}>
{i18n.t('Select an astrologer')}
</Text>
</View>
<View
style={[
styles.listDivider,
{
borderLeftColor: colors.accent + 'E6',
},
]}
/>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Avatar.Text
size={30}
label="2"
theme={{ colors: { primary: colors.primary + 'E6' } }}
labelStyle={{ fontSize: 22 }}
/>
<Text
style={{
marginLeft: 15,
fontSize: 12,
}}
>
{i18n.t('Introduce your email and question')}
</Text>
</View>
<View
style={[
styles.listDivider,
{
borderLeftColor: colors.accent + 'E6',
},
]}
/>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Avatar.Text
size={30}
label="3"
theme={{ colors: { primary: colors.primary + 'E6' } }}
labelStyle={{ fontSize: 22 }}
/>
<Text
style={{
marginLeft: 15,
fontSize: 12,
}}
>
{i18n.t('Wait ~24 hours for the response')}
</Text>
</View>
</View>
</View>
)}
<View style={styles.astrologistContainer}>
{dummy_astrologist.map(
({ id, name, school, years_exp, stars, photo, reviews }, i) => (
<React.Fragment key={id}>
<TouchableRipple
onPress={() =>
navigation.navigate('Question', {
key: 'Profile',
astrologist: dummy_astrologist[i],
})
}
style={styles.astrologistCard}
underlayColor={colors.text + '33'}
borderless
>
<>
<Image
style={styles.astrologistImage}
source={photo}
resizeMethod="resize"
resizeMode="cover"
/>
<LinearGradient
colors={['transparent', 'rgba(0,0,0,0.8)']}
style={styles.astrologistGradient}
>
<Title theme={{ colors: { text: '#FFFFFF' } }}>
{name}
</Title>
</LinearGradient>
<Subheading
theme={{ colors: { text: '#FFFFFF' } }}
style={[
styles.astrologistSubheading,
{ backgroundColor: astrologist_colors[school] },
]}
>
{i18n.t(school, { word: i18n.t('Astrology') })}
</Subheading>
<View
style={[
styles.astrologistDetailsContainer,
{ borderColor: astrologist_colors[school] },
]}
>
<Text style={{ fontSize: 10 }}>
{years_exp} other years experience
</Text>
<View style={styles.astrologistStars}>
<MaterialCommunityIcons name="star" color="gold" />
<MaterialCommunityIcons name="star" color="gold" />
<MaterialCommunityIcons name="star" color="gold" />
<MaterialCommunityIcons name="star" color="gold" />
<MaterialCommunityIcons
name={stars === 5 ? 'star' : 'star-half'}
color="gold"
/>
<Text style={styles.astrologistReview}>{reviews}</Text>
</View>
</View>
</>
</TouchableRipple>
{i + (1 % 2) === 0 ? (
<View style={{ width: '100%', height: 50 }} />
) : null}
</React.Fragment>
)
)}
</View>
</ScrollView>
</SafeAreaView>
);
}
Example #21
| Source File: index.js From ovuli with MIT License | 4 votes |
|
CalendarComponent = props => {
const [calendarState, setCalendarDate] = React.useState(calendarDate.format('YYYY-MM-DD'));
function onPressArrowLeft() {
calendarDate = calendarDate.add(-1, 'month');
updateCalendarDate();
}
function onPressArrowRight() {
calendarDate = calendarDate.add(1, 'month');
updateCalendarDate();
}
function onPressListView() {
//his.setState({ horizontal: true });
}
function onPressGridView() {
//this.setState({ horizontal: false });
}
function onDayPress(date) {
// calendarDate = moment(date.dateString);
// this.updateCalendarDate();
}
function updateCalendarDate() {
setCalendarDate(calendarDate.format('YYYY-MM-DD'));
}
return (
<View style={styles.container}>
<Calendar
current={calendarState}
// dayComponent={CalendarDayComponent}
calendarHeaderComponent={CalendarHeader}
headerData={{
calendarDate: calendarDate.format('MMM, YYYY'),
}}
style={styles.calendarStyle}
theme={{
textDayFontSize: 18,
}}
markingType={'custom'} //{"period"}
markedDates={{
[calendarState]: {
customStyles: {
container: {
backgroundColor: '#e35052',
},
text: {
color: '#eeee',
fontWeight: 'bold',
},
},
},
'2020-04-10': {
customStyles: {
container: {
backgroundColor: '#fab3a0',
},
text: { color: '#635e5d' },
},
},
'2020-04-11': {
customStyles: {
container: {
backgroundColor: '#fab3a0',
},
text: { color: '#635e5d' },
},
},
}}
onDayPress={onDayPress}
onPressArrowLeft={onPressArrowLeft}
onPressArrowRight={onPressArrowRight}
onPressListView={onPressListView}
onPressGridView={onPressGridView}
horizontal={false}
// eslint-disable-next-line react/jsx-no-duplicate-props
onDayPress={onDayPress}
hideExtraDays
/>
<View style={styles.firstHorizontalLine} />
<View style={styles.iconContainer}>
<View style={styles.firstIconContainer}>
<MaterialCommunityIcons name="checkbox-blank-circle" size={32} color="#fbc0b0" />
<Text style={styles.ovulationText}>Ovulation</Text>
</View>
<View style={styles.secondIconContainer}>
<MaterialCommunityIcons name="checkbox-blank-circle" size={32} color="#d2e1fc" />
<Text style={styles.periodsText}>Periods</Text>
</View>
</View>
<View
style={{
borderBottomColor: '#e8f1fb',
borderBottomWidth: 3,
}}
/>
</View>
);
}
Example #22
| Source File: Login.js From juken with MIT License | 4 votes |
|
Login = ({ startDemo }) => {
const [ token, setToken ] = useState('');
const failed = useRef(null);
const empty = useRef(null);
const { showActionSheetWithOptions } = useActionSheet();
const colorScheme = useColorScheme();
const login = useStoreActions(actions => actions.session.login);
const loginLoading = useStoreState(state => state.loadings.login);
return (
<>
<TouchableWithoutFeedback
onPress={() => {
if (device('mobile')) Keyboard.dismiss();
}}
>
<View style={[styles.page, colorScheme === 'light' ? null : styles.page_dark]}>
{/* toasts */}
<Toast ref={failed} type={TYPES.ERROR} />
<Toast ref={empty} type={TYPES.WARNING} />
{/* page */}
<Page style={[styles.page, colorScheme === 'light' ? null : styles.page_dark]}>
<KeyboardAvoidingView
style={styles.container}
behavior={device('ios') ? 'padding' : 'height'}
>
<View style={styles.imageWrapper}>
<Image source={require('./logo.png')} style={styles.imageIcon} />
<Image source={require('./wa2.png')} style={styles.imageText} />
</View>
<TextInput
placeholder="WaniKani Personal Access Token"
value={token}
onChangeText={text => setToken(text)}
/>
{/* login button */}
<Button
style={{ marginTop: 8 }}
textStyle={{ color: colorScheme === "light" ? theme.palette.black: theme.palette_dark.lightGray }}
text={loginLoading ? 'Logging in...' : 'Login'}
iconRight={
loginLoading
? <ActivityIndicator size={24} color={colorScheme === "light" ? theme.palette.black: theme.palette_dark.lightGray} />
: <AntDesign name="arrowright" size={24} color={theme.palette.black} />
}
disabled={loginLoading}
onPress={() => {
if (device('mobile')) Keyboard.dismiss();
if (!token) {
empty.current.show('Please enter your API token');
return;
}
if (token === '1111') {
startDemo();
return;
}
login({
token,
onFail: () => failed.current.show('Invalid token')
});
}}
/>
{/* more button */}
{device('mobile') && (
<Button
textStyle={{ color: theme.palette.white }}
text="More"
style={{ marginTop: 12, backgroundColor: 'transparent' }}
onPress={() => {
showActionSheetWithOptions({
options: [
'Cancel',
'Feedback',
'Report Issues',
'Source Code',
device('ios') ? null : 'Demo',
].filter(Boolean),
}, async buttonIndex => {
if (buttonIndex === 1) {
await WebBrowser.openBrowserAsync('https://github.com/oguzgelal/juken')
} else if (buttonIndex === 2) {
await WebBrowser.openBrowserAsync('https://github.com/oguzgelal/juken')
} else if (buttonIndex === 3) {
await WebBrowser.openBrowserAsync('https://github.com/oguzgelal/juken')
} else if (buttonIndex === 4) {
startDemo()
}
})
}}
/>
)}
{/** do not show this part for iOS */}
{device('web') && (
<>
<View style={styles.or}>
<Text style={styles.orText}>-or-</Text>
</View>
{/* demo button */}
<Button
text="Demo"
iconLeft={<MaterialCommunityIcons name="test-tube" size={24} color={theme.palette.black} />}
onPress={() => startDemo()}
/>
{/* feedback button */}
<Button
style={{ marginTop: 8 }}
text="Feedback & Bug Report"
iconLeft={<MaterialIcons name="email" size={24} color={theme.palette.black} />}
onPress={async () => {
await WebBrowser.openBrowserAsync('https://github.com/oguzgelal/juken')
}}
/>
{/* source code button */}
<Button
style={{
marginTop: 8,
backgroundColor: theme.color.githubBlack
}}
textStyle={{
color: theme.color.githubWhite
}}
text="Source Code"
iconLeft={<AntDesign name="github" size={24} color={theme.color.githubWhite} />}
onPress={async () => {
await WebBrowser.openBrowserAsync('https://github.com/oguzgelal/juken')
}}
/>
</>
)}
</KeyboardAvoidingView>
</Page>
</View>
</TouchableWithoutFeedback>
</>
)
}
Example #23
| Source File: profile.screen.js From astrale with GNU General Public License v3.0 | 4 votes |
|
/**
* @param navigation
* @returns {*}
* @constructor
*/
function ProfileScreen({ navigation }) {
const [{ session }, dispatch] = useGlobals();
const { name, sign, birthDate, number, relationship, sex } = session;
const { colors } = useTheme();
const { setRate } = useRate();
const { setStartShare } = useShare(
i18n.t(
'Try Astrale, the most precise horoscopes app in this existential plain'
),
'https://play.google.com/store/apps/details?id=josep.astrale'
);
const isDark = useIsDark();
const isAndroid = PlatformUtils.isAndroid;
const _handleDarkThemeChange = () => {
dispatch({
type: 'switchTheme',
theme: isDark ? 'light' : 'dark',
});
};
const _handleLogOut = async () => {
await Storer.delete(SESSION_KEY);
dispatch({ type: 'setLogOut' });
};
const _handleRatePress = async () => setRate(true);
const _handleSharePress = async () => setStartShare(true);
return (
<BlurView
style={[StyleSheet.absoluteFill]}
tint={isDark ? 'dark' : 'light'}
intensity={isAndroid ? 150 : 100}
>
<Backgrounds.Telescope color={colors.text} style={styles.telescope} />
<Close position="right" />
<View style={styles.headerContainer}>
<Avatar.Text label={name.substring(0, 1)} />
<View style={{ marginLeft: 25 }}>
<Title>{i18n.t(sign)}</Title>
<Title>{DateUtils.toEuropean(new Date(birthDate))}</Title>
</View>
</View>
<Divider style={{ marginTop: 25 }} />
<View style={styles.detailsContainer}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<MaterialCommunityIcons
name="gender-transgender"
color={colors.text}
size={18}
/>
<Text style={{ marginLeft: 10 }}>{i18n.t(sex)} </Text>
</View>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<MaterialCommunityIcons
name="heart-circle"
color={colors.text}
size={18}
/>
<Text style={{ marginLeft: 10 }}>{i18n.t(relationship)} </Text>
</View>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<MaterialCommunityIcons name="dice-6" color={colors.text} size={18} />
<Text style={{ marginLeft: 10 }}>{number} </Text>
</View>
</View>
<Divider style={{ marginTop: 15 }} />
<View style={styles.buttonsContainer}>
<Button
onPress={_handleSharePress}
icon="account-multiple"
style={{ marginTop: 10 }}
labelStyle={styles.buttonsLabel}
uppercase={false}
contentStyle={{ justifyContent: 'flex-start' }}
>
{i18n.t('Share with your friends')}
</Button>
<Button
onPress={_handleRatePress}
icon="message-draw"
style={{ marginTop: 10 }}
labelStyle={styles.buttonsLabel}
uppercase={false}
contentStyle={{ justifyContent: 'flex-start' }}
>
{i18n.t('Rate the app')}
</Button>
{__DEV__ && (
<Button
onPress={_handleLogOut}
icon="restart"
style={{ marginTop: 10 }}
labelStyle={styles.buttonsLabel}
uppercase={false}
contentStyle={{ justifyContent: 'flex-start' }}
>
{i18n.t('Restart')}
</Button>
)}
</View>
<Divider style={{ marginTop: 10 }} />
<View style={styles.optionsContainer}>
<View style={styles.optionsOption}>
<Button
icon="brightness-6"
style={styles.optionsButton}
labelStyle={styles.optionsLabel}
uppercase={false}
theme={{ colors: { primary: colors.text } }}
>
{i18n.t('Dark theme')}
</Button>
<Switch onChange={_handleDarkThemeChange} value={isDark} />
</View>
</View>
<Divider style={{ marginTop: 10 }} />
<View
style={[
{
position: 'absolute',
bottom: 20,
alignItems: 'center',
justifyContent: 'center',
width: '100%',
},
]}
>
<Text>v{Constants.manifest.version}</Text>
</View>
</BlurView>
);
}
Example #24
| Source File: TrainingPage.js From UltimateApp with MIT License | 4 votes |
|
TrainingPage = (props) => {
const { navigation, route } = props;
const { training, program } = route.params;
const isProgramFrisbee = program.type === DrillTypes.FRISBEE;
const pagerRef = useRef(null);
const initialIndex = program.trainings.findIndex((item) => item.id === training.id);
const programNavigation = (training, index) => {
const isFirstTraining = program ? index === 0 : true;
const isLastTraining = program ? index === program.trainings.length - 1 : true;
const onNextPress = () => {
if (!isLastTraining) {
pagerRef.current.setPage(index + 1);
}
};
const onPrevPress = () => {
if (!isFirstTraining) {
pagerRef.current.setPage(index - 1);
}
};
return (
<View style={styles.programNavigation}>
{!isFirstTraining && (
<TouchableOpacity style={styles.btnPrevNext} onPress={onPrevPress} testID={`goToPrev${index}`}>
<MaterialCommunityIcons name="chevron-left" style={styles.navChevron} />
</TouchableOpacity>
)}
<View style={styles.programInfo}>
<Text numberOfLines={1} style={styles.title}>
{training.title}
</Text>
{program.trainings.length > 1 && (
<Text style={styles.subtitle}>
{' '}
({index + 1}/{program.trainings.length}){' '}
</Text>
)}
</View>
{!isLastTraining && (
<TouchableOpacity
style={[styles.btnPrevNext, styles.btnNext]}
onPress={onNextPress}
testID={`goToNext${index}`}
>
<MaterialCommunityIcons name="chevron-right" style={styles.navChevron} />
</TouchableOpacity>
)}
</View>
);
};
const renderHeader = (training, index) => (
<View style={styles.header}>
{programNavigation(training, index)}
{isProgramFrisbee && (
<View style={styles.infos}>
<View style={styles.info}>
<MaterialCommunityIcons name="account-multiple" color={theme.COLOR_PRIMARY} size={22} />
<Text style={styles.infoValue}>{getTrainingMinimalPlayersNumber(training)}+</Text>
</View>
<View style={styles.info}>
<MaterialCommunityIcons name="clock-outline" color={theme.COLOR_PRIMARY} size={22} />
<Text style={styles.infoValue}>{convertMinsToTime(getTrainingDuration(training))}</Text>
</View>
</View>
)}
<Text style={styles.descriptionText}>{training.description}</Text>
</View>
);
const renderTraining = (training, index) => {
const onDrillPress = (drill) => {
if (isProgramFrisbee) {
navigation.navigate('DrillPageMinimal', { drill, training, program });
} else {
navigation.navigate('DrillPage', { id: drill.id });
}
};
const goToFirstDrill = () =>
navigation.navigate('DrillPageMinimal', { drill: training.drills[0], training, program });
return (
<View key={index}>
<DrillList
ListHeaderComponent={renderHeader(training, index)}
ListFooterComponent={<View style={{ paddingBottom: 30 }} />}
ItemComponentStyle={styles.list}
navigation={navigation}
drillsToDisplay={training.drills}
onDrillPress={onDrillPress}
/>
<View style={styles.footer}>
{isProgramFrisbee && (
<Button onPress={goToFirstDrill} text={I18n.t('trainingPage.start')} testID={`start${index}`} />
)}
</View>
</View>
);
};
return (
<PagerView style={styles.trainingPage} ref={pagerRef} initialPage={initialIndex}>
{program.trainings.map(renderTraining)}
</PagerView>
);
}
Example #25
| Source File: BottomSheetMe.js From pandoa with GNU General Public License v3.0 | 4 votes |
|
function BottomSheetMe(props) {
const bottomSheetRef = useRef();
const [trackingStatus, setTrackingStatus] = useState(false);
const toggleSwitch = e => {
if (e === true) {
startLocationTracking();
setTrackingStatus(true);
} else {
stopLocationTracking();
setTrackingStatus(false);
}
console.log("toggleSwitch", e);
};
const { contentPosition, filteredWarnings, navigation } = props;
const renderInnerDetails = () => {
return (
<View style={styles.panelInner}>
<View style={styles.buttonWrapper}>
<LargeButton>
<View style={styles.switchTracking}>
<View style={styles.description}>
<Text>Enable tracking</Text>
<Text style={styles.subText}>
This will record your movement every 5 min
</Text>
</View>
<Switch onValueChange={toggleSwitch} value={trackingStatus} />
</View>
</LargeButton>
</View>
<View style={styles.buttonWrapper}>
<LargeButton>
<MaterialCommunityIcons
name="file-import"
size={33}
color={commonColor.brandPrimary}
/>
<Text>Import </Text>
</LargeButton>
<Share>
<LargeButton>
<MaterialCommunityIcons
name="database-export"
size={33}
color={commonColor.brandSuccess}
/>
<Text>Export</Text>
</LargeButton>
</Share>
</View>
<View style={styles.buttonWrapper}>
<LargeButton>
<View style={styles.switchTracking}>
<View style={styles.description}>
<Text>Remove points</Text>
<Text style={styles.subText}>
Remove points from your route
</Text>
</View>
<MaterialCommunityIcons
name="chevron-right"
size={33}
color={commonColor.textColorLight}
/>
</View>
</LargeButton>
</View>
</View>
);
};
const renderInnerHeader = () => {
return (
<>
<View style={styles.headerShadow} />
<View style={styles.headerInner}>
<View style={styles.panelHeader}>
<View style={styles.panelHandle} />
</View>
<View style={styles.panelTitleWrapper}>
<Text style={styles.panelTitle}>My tracks</Text>
</View>
</View>
</>
);
};
return (
<BottomSheet
ref={bottomSheetRef}
contentPosition={contentPosition}
snapPoints={[60, 338]}
renderContent={renderInnerDetails}
renderHeader={renderInnerHeader}
/>
);
}
Example #26
| Source File: AnimationBackground.js From UltimateApp with MIT License | 4 votes |
|
AnimationBackground = (props) => {
const topMargin = props.animationHeight * 0.05;
const bottomMargin = props.animationHeight * 0.1;
const leftRightMargin = props.animationWidth * 0.05;
const fieldHeight = props.animationHeight - topMargin - bottomMargin;
const fieldWidth = props.animationWidth - 2 * leftRightMargin;
const linesWidth = Math.min(fieldHeight, fieldWidth) * 0.005;
const zoneLineTop = topMargin + fieldHeight * 0.4;
const threeQuarterLineTop = topMargin + fieldHeight * 0.24;
const brickRadius = linesWidth * 10;
const brickLeft = leftRightMargin + fieldWidth / 2 - brickRadius / 2;
const brickZoneTop = zoneLineTop + fieldHeight * 0.4 - 2 * brickRadius;
const brick34Top = threeQuarterLineTop + fieldHeight * 0.33 - 2 * brickRadius;
const Brick = ({ top }) => (
<MaterialCommunityIcons name="close" style={[styles.brick, { left: brickLeft, top }]} size={brickRadius} />
);
switch (props.background) {
case AnimationBackgrounds.ENDZONE:
return (
<View style={{ height: props.animationHeight, width: props.animationWidth }}>
{/* Right vertical bar */}
<View
style={[
styles.bar,
{
height: fieldHeight,
width: linesWidth,
top: topMargin,
left: leftRightMargin + fieldWidth,
},
]}
/>
{/* Left vertical bar */}
<View
style={[
styles.bar,
{
height: fieldHeight,
width: linesWidth,
top: topMargin,
left: leftRightMargin,
},
]}
/>
{/* Top horizontal bar */}
<View
style={[
styles.bar,
{
height: linesWidth,
width: fieldWidth,
top: topMargin,
left: leftRightMargin,
},
]}
/>
{/* Zone horizontal bar */}
<View
style={[
styles.bar,
{
height: linesWidth,
width: fieldWidth,
top: zoneLineTop,
left: leftRightMargin,
},
]}
/>
<Brick top={brickZoneTop} />
</View>
);
case AnimationBackgrounds.THREE_QUARTERS_FIELD:
return (
<View style={{ height: props.animationHeight, width: props.animationWidth }}>
{/* Right vertical bar */}
<View
style={[
styles.bar,
{
height: fieldHeight,
width: linesWidth,
top: topMargin,
left: leftRightMargin + fieldWidth,
},
]}
/>
{/* Left vertical bar */}
<View
style={[
styles.bar,
{
height: fieldHeight,
width: linesWidth,
top: topMargin,
left: leftRightMargin,
},
]}
/>
{/* Top horizontal bar */}
<View
style={[
styles.bar,
{
height: linesWidth,
width: fieldWidth,
top: topMargin,
left: leftRightMargin,
},
]}
/>
{/* Zone horizontal bar */}
<View
style={[
styles.bar,
{
height: linesWidth,
width: fieldWidth,
top: threeQuarterLineTop,
left: leftRightMargin,
},
]}
/>
<Brick top={brick34Top} />
</View>
);
case AnimationBackgrounds.RECTANGLE:
return (
<View style={{ height: props.animationHeight, width: props.animationWidth }}>
{/* Right vertical bar */}
<View
style={[
styles.bar,
{
height: fieldHeight,
width: linesWidth,
top: topMargin,
left: leftRightMargin + fieldWidth,
},
]}
/>
{/* Left vertical bar */}
<View
style={[
styles.bar,
{
height: fieldHeight,
width: linesWidth,
top: topMargin,
left: leftRightMargin,
},
]}
/>
{/* Top horizontal bar */}
<View
style={[
styles.bar,
{
height: linesWidth,
width: fieldWidth,
top: topMargin,
left: leftRightMargin,
},
]}
/>
{/* Bottom horizontal bar */}
<View
style={[
styles.bar,
{
height: linesWidth,
width: fieldWidth,
top: fieldHeight + topMargin,
left: leftRightMargin,
},
]}
/>
</View>
);
case AnimationBackgrounds.EMPTY:
return null;
default:
return null;
}
}
Example #27
| Source File: Details.js From Legacy with Mozilla Public License 2.0 | 4 votes |
|
export default function DetailsScreen({ route }) {
var moment = useMoment();
var nav = useNavigation();
var theme = useSelector(i => i.themes[i.theme]);
var logins = useSelector(i => i.logins);
var username = route.params.username
var { t } = useTranslation();
var date = moment().tz('America/Chicago');
var dateString = `${date.year()}-${(date.month() + 1).toString().padStart(2, '0')}-${(date.date()).toString().padStart(2, '0')}`
var [size, onLayout] = useComponentSize();
var maxWidth = size?.width > 750 ? "50%" : "100%"
const {data,status} = useAPIRequest({
endpoint: 'user',
data: { username }
}, true);
const {data:zeecretTeam} = useZeecretTeam(data?.username);
let user_id = data?.user_id
useAPIRequest(user_id ? {
endpoint: 'user/activity',
data: { day: dateString, user_id },
cuppazee: true
} : [null])
const [menu, setMenu] = React.useState(null);
if (status || !size?.width) {
if(status === "loading" || !size?.width) {
return <View onLayout={onLayout} style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page.bg }}>
<ActivityIndicator size="large" color={theme.page.fg} />
</View>
} else {
return <View onLayout={onLayout} style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page.bg }}>
<MaterialCommunityIcons name="alert" color={theme.page.fg} size={48} />
<Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), textAlign: "center", color: theme.page_content.fg }}>{t('error:' + status)}</Text>
</View>
}
} else if (data === null) {
return <View onLayout={onLayout} style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page.bg }}>
<MaterialCommunityIcons name="alert" color={theme.page.fg} size={48} />
<Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), textAlign: "center", color: theme.page_content.fg }}>{t('error:missing_data.user')}</Text>
</View>
}
return (
<View style={{ flex: 1 }} onLayout={onLayout}>
<ScrollView
contentContainerStyle={{ padding: 4, paddingBottom: 92 }}
style={{ flex: 1, backgroundColor: theme.page.bg }}>
<View style={{ alignItems: "stretch", alignSelf: "center", flexDirection: "row", flexWrap: "wrap", justifyContent: "center", width: "100%", maxWidth: 1200 }}>
{/* {zeecretTeam && zeecretTeam.endsWith('_false') && <View style={{ padding: 4, width: size?.width > 750 ? 1000 : 500, maxWidth: "100%" }}>
<Card noPad>
<View style={{ flexDirection: "row", alignItems: "center" }}>
<MaterialCommunityIcons name="alert" color={theme.page_content.fg} size={24} style={{ margin: 4 }} />
<Text allowFontScaling={false} style={{ fontSize: 16, ...font(500), color: theme.page_content.fg, opacity: 0.8, flex: 1, margin: 4 }}>Sorry! A small bug in the Zeecret Agents Competition opt-in system caused some people's API Tokens to be invalidated.</Text>
</View>
<TouchableRipple onPress={() => nav.navigate('CompetitionAuth', { username: username })}>
<View style={{ padding: 8, flexDirection: "row", alignItems: "center" }}>
<MaterialCommunityIcons style={{ marginHorizontal: 4 }} name="check-bold" size={24} color={theme.page_content.fg} />
<Text allowFontScaling={false} style={{ paddingLeft: 4, ...font("bold"), fontSize: 16, color: theme.page_content.fg }}>Log In Again</Text>
<MaterialCommunityIcons name="chevron-right" size={24} color={theme.page_content.fg} />
</View>
</TouchableRipple>
</Card>
</View>} */}
<View style={{ padding: 4, width: size?.width > 750 ? 1000 : 500, maxWidth: "100%" }}>
<ActivityCard username={username} user_id={user_id} />
</View>
<View style={{ padding: 4, width: 500, maxWidth }}>
<Card noPad>
<View style={{ flexDirection: "row", alignItems: "center" }}>
<View style={{ padding: 8 }}>
<Image source={{ uri: `https://munzee.global.ssl.fastly.net/images/avatars/ua${(user_id).toString(36)}.png` }} style={{ width: 72, height: 72, borderRadius: 36 }} />
</View>
<View style={{ padding: 8, paddingLeft: 0, flex: 1, justifyContent: "center" }}>
<View style={{ flexDirection: "row", alignItems: "center" }}>
<Text allowFontScaling={false} style={{ fontSize: 20, ...font("bold"), color: theme.page_content.fg }} numberOfLines={1} ellipsizeMode={"tail"}>{data?.username}</Text>
{!!data?.premium && <MaterialCommunityIcons color={theme.page_content.fg} name="star" size={20} />}
{data?.titles.includes('QRew') && <MaterialCommunityIcons color={theme.page_content.fg} name="hammer" size={20} />}
{data?.titles.includes('ZeeQRew') && <MaterialCommunityIcons color={theme.page_content.fg} name="wrench" size={20} />}
</View>
<View style={{ flexDirection: "row", alignItems: "center" }}>
<MaterialCommunityIcons color={theme.page_content.fg} name="arrow-up-bold-hexagon-outline" size={16} style={{marginRight: 4}} />
<Text allowFontScaling={false} style={{ fontSize: 16, ...font(500), color: theme.page_content.fg, opacity: 0.8 }}>{t('user:level_n', { level: data?.level })} - {t('user:points',{count:data?.points,n:data?.points.toLocaleString()})}</Text>
</View>
<View style={{ flexDirection: "row", alignItems: "center" }}>
<MaterialCommunityIcons color={theme.page_content.fg} name="trophy-outline" size={16} style={{marginRight: 4}} />
<Text allowFontScaling={false} style={{ fontSize: 16, ...font(500), color: theme.page_content.fg, opacity: 0.8 }}>{t('user:rank_n', { rank: data?.rank })}</Text>
</View>
{data?.titles?.length > 0 && <View style={{ flexDirection: "row", alignItems: "center" }}>
<MaterialCommunityIcons color={theme.page_content.fg} name="format-list-bulleted" size={16} style={{marginRight: 4}} />
<Text allowFontScaling={false} style={{ fontSize: 16, ...font(500), color: theme.page_content.fg, opacity: 0.8 }}>{data?.titles.join(', ')}</Text>
</View>}
{zeecretTeam && <View style={{ flexDirection: "row", alignItems: "center" }}>
<MaterialCommunityIcons color={theme.page_content.fg} name="briefcase-outline" size={16} style={{marginRight: 4}} />
<Text allowFontScaling={false} style={{ fontSize: 16, ...font(500), color: theme.page_content.fg, opacity: 0.8 }}>Team {zeecretTeam.slice(0,4).toUpperCase()}</Text>
</View>}
</View>
</View>
<TouchableRipple disabled={!logins[user_id]} onPress={() => nav.navigate('UserInventory', { username: username })}>
<View style={{ padding: 8, flexDirection: "row", alignItems: "center" }}>
<MaterialCommunityIcons style={{ marginHorizontal: 4 }} name="package" size={24} color={theme.page_content.fg} />
<Text allowFontScaling={false} style={{ paddingLeft: 4, ...font("bold"), fontSize: 16, flex: 1, color: theme.page_content.fg }}>{t('user:inventory')}</Text>
<MaterialCommunityIcons name={logins[user_id] ? 'chevron-right' : 'lock'} size={24} color={theme.page_content.fg} />
</View>
</TouchableRipple>
<TouchableRipple disabled={!logins[user_id]} onPress={() => nav.navigate('UserZeeOps', { username: username })}>
<View style={{ padding: 8, flexDirection: "row", alignItems: "center" }}>
<MaterialCommunityIcons style={{ marginHorizontal: 4 }} name="briefcase" size={24} color={theme.page_content.fg} />
<Text allowFontScaling={false} style={{ paddingLeft: 4, ...font("bold"), fontSize: 16, flex: 1, color: theme.page_content.fg }}>ZeeOps</Text>
<MaterialCommunityIcons name={logins[user_id] ? 'chevron-right' : 'lock'} size={24} color={theme.page_content.fg} />
</View>
</TouchableRipple>
<TouchableRipple onPress={() => nav.navigate('UserBouncers', { username: username })}>
<View style={{ padding: 8, flexDirection: "row", alignItems: "center" }}>
<MaterialCommunityIcons style={{ marginHorizontal: 4 }} name="star" size={24} color={theme.page_content.fg} />
<Text allowFontScaling={false} style={{ paddingLeft: 4, ...font("bold"), fontSize: 16, flex: 1, color: theme.page_content.fg }}>{t('user:your_bouncers')}</Text>
<MaterialCommunityIcons name="chevron-right" size={24} color={theme.page_content.fg} />
</View>
</TouchableRipple>
<TouchableRipple onPress={() => nav.navigate('UserBlastMap', { username: username })}>
<View style={{ padding: 8, flexDirection: "row", alignItems: "center" }}>
<MaterialCommunityIcons style={{ marginHorizontal: 4 }} name="bomb" size={24} color={theme.page_content.fg} />
<Text allowFontScaling={false} style={{ paddingLeft: 4, ...font("bold"), fontSize: 16, flex: 1, color: theme.page_content.fg }}>{t('user:blast_checker')}</Text>
<MaterialCommunityIcons name="chevron-right" size={24} color={theme.page_content.fg} />
</View>
</TouchableRipple>
<TouchableRipple onPress={() => nav.navigate('UserQRew', { username: username })}>
<View style={{ padding: 8, flexDirection: "row", alignItems: "center" }}>
<MaterialCommunityIcons style={{ marginHorizontal: 4 }} name="hammer" size={24} color={theme.page_content.fg} />
<Text allowFontScaling={false} style={{ paddingLeft: 4, ...font("bold"), fontSize: 16, flex: 1, color: theme.page_content.fg }}>{t('user:qrew_checker')}</Text>
<MaterialCommunityIcons name="chevron-right" size={24} color={theme.page_content.fg} />
</View>
</TouchableRipple>
<TouchableRipple disabled={!logins[user_id]} onPress={() => nav.navigate('UserUniversal', { username: username })}>
<View style={{ padding: 8, flexDirection: "row", alignItems: "center" }}>
<MaterialCommunityIcons style={{ marginHorizontal: 4 }} name="earth" size={24} color={theme.page_content.fg} />
<Text allowFontScaling={false} style={{ paddingLeft: 4, ...font("bold"), fontSize: 16, flex: 1, color: theme.page_content.fg }}>Universal/Social Capper</Text>
<MaterialCommunityIcons name={logins[user_id] ? 'chevron-right' : 'lock'} size={24} color={theme.page_content.fg} />
</View>
</TouchableRipple>
{/* <TouchableRipple onPress={() => nav.navigate('CompetitionHome')}>
<View style={{ padding: 8, flexDirection: "row", alignItems: "center" }}>
<MaterialCommunityIcons style={{ marginHorizontal: 4 }} name="briefcase" size={24} color={theme.page_content.fg} />
<View style={{ flex: 1 }}>
<Text allowFontScaling={false} style={{ paddingLeft: 4, ...font("bold"), fontSize: 16, color: theme.page_content.fg }}>{zeecretTeam ? `Team ${zeecretTeam?.slice(0,4).toUpperCase()}` : 'Not Joined Yet'}</Text>
<Text allowFontScaling={false} style={{ paddingLeft: 4, fontSize: 12, color: theme.page_content.fg }}>Zeecret Agents Competition</Text>
</View>
<View style={{ backgroundColor: theme.navigation.bg, padding: 4, borderRadius: 4 }}>
<Text style={{ color: theme.navigation.fg, fontSize: 16, fontWeight: "500" }}>NEW</Text>
</View>
<MaterialCommunityIcons name="chevron-right" size={24} color={theme.page_content.fg} />
</View>
</TouchableRipple> */}
</Card>
</View>
<View style={{ padding: 4, width: 500, maxWidth }}>
<Card noPad>
<View style={{ flexDirection: "row", alignItems: "center" }}>
<View style={{ padding: 8 }}>
<Image source={{ uri: `https://munzee.global.ssl.fastly.net/images/clan_logos/${data?.clan?.id?.toString?.(36)}.png` }} style={{ width: 48, height: 48, borderRadius: 24 }} />
</View>
<View style={{ padding: 8, paddingLeft: 0, flex: 1, justifyContent: "center" }}>
<Text allowFontScaling={false} style={{ fontSize: 20, ...font("bold"), color: theme.page_content.fg }} numberOfLines={1} ellipsizeMode={"tail"}>{data?.clan?.name ?? t("user:no_clan")}</Text>
<Text allowFontScaling={false} style={{ fontSize: 16, ...font(500), color: theme.page_content.fg, opacity: 0.8 }}><MaterialCommunityIcons name="shield-half-full" size={16} /> {data?.clan ? t('user:your_clan') : t('user:no_clan_desc')}</Text>
{/* <Text allowFontScaling={false} style={{ fontSize: 16, ...font(500), color: theme.page_content.fg, opacity: 0.8 }}><MaterialCommunityIcons name="trophy-outline" size={16} /> Rank #{JSON.stringify(data?.clan)}</Text> */}
</View>
</View>
{data?.clan ? <TouchableRipple onPress={() => nav.navigate('Clan', { clanid: data?.clan?.id })}>
<View style={{ padding: 8, flexDirection: "row", alignItems: "center" }}>
<MaterialCommunityIcons style={{ marginHorizontal: 4 }} name="finance" size={24} color={theme.page_content.fg} />
<Text allowFontScaling={false} style={{ paddingLeft: 4, ...font("bold"), fontSize: 16, flex: 1, color: theme.page_content.fg }}>{t('user:clan_stats')}</Text>
<MaterialCommunityIcons name="chevron-right" size={24} color={theme.page_content.fg} />
</View>
</TouchableRipple> : <>
<TouchableRipple onPress={() => nav.navigate('UserClan', { username: username })}>
<View style={{ padding: 8, flexDirection: "row", alignItems: "center" }}>
<MaterialCommunityIcons style={{ marginHorizontal: 4 }} name="shield-half-full" size={24} color={theme.page_content.fg} />
<View style={{ flex: 1 }}>
<Text allowFontScaling={false} style={{ paddingLeft: 4, ...font("bold"), fontSize: 16, color: theme.page_content.fg }}>{t('user:clan_progress')}</Text>
<Text allowFontScaling={false} style={{ paddingLeft: 4, ...font(), fontSize: 12, color: theme.page_content.fg }}>{t('user:clan_progress_desc')}</Text>
</View>
<MaterialCommunityIcons name="chevron-right" size={24} color={theme.page_content.fg} />
</View>
</TouchableRipple>
<TouchableRipple onPress={() => Linking.openURL('https://www.facebook.com/groups/MunzeeClanWarInformation/')}>
<View style={{ padding: 8, flexDirection: "row", alignItems: "center" }}>
<MaterialCommunityIcons style={{ marginHorizontal: 4 }} name="facebook-box" size={24} color={theme.page_content.fg} />
<View style={{ flex: 1 }}>
<Text allowFontScaling={false} style={{ paddingLeft: 4, ...font("bold"), fontSize: 16, color: theme.page_content.fg }}>{t('user:clan_info')}</Text>
<Text allowFontScaling={false} style={{ paddingLeft: 4, ...font(), fontSize: 12, color: theme.page_content.fg }}>{t('user:clan_info_desc')}</Text>
</View>
{/* */}
<MaterialCommunityIcons name="chevron-right" size={24} color={theme.page_content.fg} />
</View>
</TouchableRipple>
</>}
</Card>
</View>
<View style={{ padding: 4, width: 500, maxWidth }}>
<Card noPad>
<TouchableRipple onPress={() => setMenu(menu === "captures" ? null : "captures")}>
<View style={{ borderRadius: (size?.width > 750 || menu === "captures") ? 0 : 8, ...(theme.page_content.border ? { borderBottomWidth: 1, borderBottomColor: theme.page_content.border } : {}), padding: 8, borderTopLeftRadius: 8, borderTopRightRadius: 8, flexDirection: "row", alignItems: "center", backgroundColor: (theme.clanCardHeader || theme.navigation).bg }}>
<MaterialCommunityIcons style={{ marginHorizontal: 4 }} name="check" size={24} color={(theme.clanCardHeader || theme.navigation).fg} />
<Text allowFontScaling={false} style={{ paddingLeft: 4, ...font("bold"), fontSize: 16, flex: 1, color: (theme.clanCardHeader || theme.navigation).fg }}>{t('user:captured_types')}</Text>
{size?.width <= 750 && <MaterialCommunityIcons name={menu === "captures" ? "chevron-up" : "chevron-down"} size={24} color={(theme.clanCardHeader || theme.navigation).fg} />}
</View>
</TouchableRipple>
{(size?.width > 750 || menu === "captures") && categories.filter(i => i.parents.includes('root') && !i.hidden).map(i => <TouchableRipple key={i.id} onPress={() => nav.navigate('UserCapturesCategory', { username: username, category: i.id })}>
<View style={{ padding: 8, flexDirection: "row", alignItems: "center" }}>
<Image style={{ height: 32, width: 32, marginVertical: -4 }} source={getIcon(i.icon)} />
{/* <MaterialCommunityIcons name="star" size={24} color={theme.page_content.fg} /> */}
<Text allowFontScaling={false} style={{ paddingLeft: 4, ...font("bold"), fontSize: 16, flex: 1, color: theme.page_content.fg }}>{i.name}</Text>
<MaterialCommunityIcons name="chevron-right" size={24} color={theme.page_content.fg} />
</View>
</TouchableRipple>)}
</Card>
</View>
<View style={{ padding: 4, width: 500, maxWidth }}>
<Card noPad>
<TouchableRipple onPress={() => setMenu(menu === "challenge" ? null : "challenge")}>
<View style={{ borderRadius: (size?.width > 750 || menu === "challenge") ? 0 : 8, ...(theme.page_content.border ? { borderBottomWidth: 1, borderBottomColor: theme.page_content.border } : {}), padding: 8, borderTopLeftRadius: 8, borderTopRightRadius: 8, flexDirection: "row", alignItems: "center", backgroundColor: (theme.clanCardHeader || theme.navigation).bg }}>
<MaterialCommunityIcons style={{ marginHorizontal: 4 }} name="trophy-outline" size={24} color={(theme.clanCardHeader || theme.navigation).fg} />
<Text allowFontScaling={false} style={{ paddingLeft: 4, ...font("bold"), fontSize: 16, flex: 1, color: (theme.clanCardHeader || theme.navigation).fg }}>{t('user:challenges')}</Text>
{size?.width <= 750 && <MaterialCommunityIcons name={menu === "challenge" ? "chevron-up" : "chevron-down"} size={24} color={(theme.clanCardHeader || theme.navigation).fg} />}
</View>
</TouchableRipple>
{(size?.width > 750 || menu === "challenge") && <>
<TouchableRipple onPress={() => nav.navigate('UserSHCLite', { username: username })}>
<View style={{ padding: 8, flexDirection: "row", alignItems: "center" }}>
<MaterialCommunityIcons style={{ marginHorizontal: 4 }} name="star-half" size={24} color={theme.page_content.fg} />
<Text allowFontScaling={false} style={{ paddingLeft: 4, ...font("bold"), fontSize: 16, flex: 1, color: theme.page_content.fg }}>{t('user:sh_lite')}</Text>
<MaterialCommunityIcons name="chevron-right" size={24} color={theme.page_content.fg} />
</View>
</TouchableRipple>
<TouchableRipple onPress={() => nav.navigate('UserSHCPro', { username: username })}>
<View style={{ padding: 8, flexDirection: "row", alignItems: "center" }}>
<MaterialCommunityIcons style={{ marginHorizontal: 4 }} name="star" size={24} color={theme.page_content.fg} />
<Text allowFontScaling={false} style={{ paddingLeft: 4, ...font("bold"), fontSize: 16, flex: 1, color: theme.page_content.fg }}>{t('user:sh_pro')}</Text>
<MaterialCommunityIcons name="chevron-right" size={24} color={theme.page_content.fg} />
</View>
</TouchableRipple>
<TouchableRipple onPress={() => nav.navigate('UserPOI', { username: username })}>
<View style={{ padding: 8, flexDirection: "row", alignItems: "center" }}>
<MaterialCommunityIcons style={{ marginHorizontal: 4 }} name="map-marker-check" size={24} color={theme.page_content.fg} />
<Text allowFontScaling={false} style={{ paddingLeft: 4, ...font("bold"), fontSize: 16, flex: 1, color: theme.page_content.fg }}>{t('user:poi_challenge')}</Text>
<MaterialCommunityIcons name="chevron-right" size={24} color={theme.page_content.fg} />
</View>
</TouchableRipple>
<TouchableRipple onPress={() => nav.navigate('UserColour', { username: username })}>
<View style={{ padding: 8, flexDirection: "row", alignItems: "center" }}>
<MaterialCommunityIcons style={{ marginHorizontal: 4 }} name="palette" size={24} color={theme.page_content.fg} />
<Text allowFontScaling={false} style={{ paddingLeft: 4, ...font("bold"), fontSize: 16, flex: 1, color: theme.page_content.fg }}>{t('user:colour_challenge')}</Text>
<MaterialCommunityIcons name="chevron-right" size={24} color={theme.page_content.fg} />
</View>
</TouchableRipple>
{/* <TouchableRipple onPress={() => nav.navigate('UserQuest', { username: username })}> */}
<View style={{ padding: 8, flexDirection: "row", alignItems: "center" }}>
<MaterialCommunityIcons style={{ marginHorizontal: 4 }} name="run" size={24} color={theme.page_content.fg} />
<Text allowFontScaling={false} style={{ paddingLeft: 4, ...font("bold"), fontSize: 16, flex: 1, color: theme.page_content.fg }}>{t('user:quebec_quest_progress')}</Text>
<MaterialCommunityIcons name="chevron-right" size={24} color={theme.page_content.fg} />
</View>
{/* </TouchableRipple> */}
</>}
</Card>
</View>
</View>
</ScrollView>
<UserFAB username={username} user_id={user_id} />
</View>
);
}
Example #28
| Source File: PlayTitle.js From UltimateApp with MIT License | 4 votes |
|
PlayTitle = ({ play, onPress, customPlays, renamePlay, deletePlay, safe, unsavedPlay, style }) => {
const [title, setTitle] = useState(play.title);
const [error, setError] = useState();
const [isEditing, setEdit] = useState(false);
const handleEdit = () => {
if (!error) {
renamePlay(play.uuid, title);
setEdit(false);
}
};
const handleChange = (value) => {
setTitle(value);
if (value.length === 0) {
setError(I18n.t('editor.playTitle.empty'));
} else if (
customPlays.filter((existingPlay) => existingPlay.uuid != play.uuid && existingPlay.title === value).length > 0
) {
setError(I18n.t('editor.playTitle.alreadyExists'));
} else {
setError();
}
};
const deletionConfirmation = (play) => {
Alert.alert(play.title, I18n.t('editor.playTitle.deleteConfirmation'), [
{
text: I18n.t('shared.cancel'),
style: 'cancel',
onPress: () => {},
},
{
text: I18n.t('editor.playTitle.delete'),
style: 'destructive',
onPress: () => {
deletePlay(play.uuid);
showSuccess(I18n.t('editor.playTitle.deleteSuccess', { title: play.title }));
},
},
]);
};
const unsavedAsterisk = unsavedPlay ? '* ' : '';
return (
<View style={[styles.play, style]}>
<TouchableOpacity style={styles.titleContainer} onPress={onPress}>
{isEditing ? (
<>
<TextInput
autoFocus
style={styles.titleInput}
placeholder={I18n.t('editor.playTitle.placeholder')}
value={title}
onChangeText={handleChange}
onSubmitEditing={handleEdit}
onBlur={handleEdit}
/>
{error && <Text style={styles.error}>{error}</Text>}
</>
) : (
<Text numberOfLines={1} style={styles.title}>
{unsavedAsterisk}
{title}
</Text>
)}
</TouchableOpacity>
{isEditing ? (
<TouchableOpacity onPress={handleEdit} style={styles.iconsContainer} testID="update">
<MaterialCommunityIcons style={styles.icon} name="check-bold" />
</TouchableOpacity>
) : (
<TouchableOpacity onPress={() => setEdit(true)} style={styles.iconsContainer} testID="edit">
<MaterialCommunityIcons style={styles.icon} name="pencil" />
</TouchableOpacity>
)}
{!safe && (
<TouchableOpacity
style={styles.iconsContainer}
testID="delete"
onPress={() => {
deletionConfirmation(play);
}}
>
<MaterialCommunityIcons style={styles.icon} name="trash-can" />
</TouchableOpacity>
)}
</View>
);
}
Example #29
| Source File: Page.js From Legacy with Mozilla Public License 2.0 | 4 votes |
|
export default function () {
const [mode, setMode] = useSetting('inventory_group_by','category');
const [zeros, setZeros] = useSetting('inventory_include_zeros','all');
var { t } = useTranslation()
var route = useRoute();
var theme = useSelector(i => i.themes[i.theme]);
var username = route.params.username;
const user_id = useAPIRequest({
endpoint: 'user',
data: { username },
function: i => i?.user_id
})
var {data, status} = useAPIRequest(user_id ? {
endpoint: 'user/inventory',
data: {},
user: user_id,
cuppazee: true,
function: (x) => InventoryConverter(x?.credits, x?.boosters, x?.history, x?.undeployed, mode, zeros),
extraData: [mode, zeros]
} : null, 1);
if (status) {
if(status === "loading") {
return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page.bg }}>
<ActivityIndicator size="large" color={theme.page.fg} />
</View>
} else {
return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page.bg }}>
<MaterialCommunityIcons name="alert" color={theme.page.fg} size={48} />
<Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), textAlign: "center", color: theme.page_content.fg }}>{t('error:' + status)}</Text>
</View>
}
} else if (data === null) {
return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page.bg }}>
<MaterialCommunityIcons name="alert" color={theme.page.fg} size={48} />
<Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), textAlign: "center", color: theme.page_content.fg }}>{t('error:missing_data.locked')}</Text>
</View>
}
return <View style={{ flex: 1 }}>
<ScrollView style={{ flex: 1, backgroundColor: theme.page.bg }} contentContainerStyle={{ padding: 4, paddingBottom: 92 }}>
<View style={{flexDirection:"row",flexWrap:"wrap"}}>
<View style={{flexGrow: 1, width: 400, maxWidth: "100%", padding: 4}}>
<Dropdown dense={true} mode="outlined" selectedValue={mode} onValueChange={setMode}>
{modes.map(i=><DropdownItem label={`Group by ${i.label}`} value={i.value} />)}
</Dropdown>
</View>
<View style={{flexGrow: 1, width: 400, maxWidth: "100%", padding: 4}}>
<Dropdown enabled={mode!=="type"} dense={true} mode="outlined" selectedValue={zeros} onValueChange={setZeros}>
<DropdownItem label={`Include Zeros: Yes`} value="all" />
<DropdownItem label={`Include Zeros: No`} value="none" />
</Dropdown>
</View>
</View>
<View style={{ flexDirection: "row", flexWrap: "wrap", justifyContent: "center" }}>
{Object.entries(data?.types || {}).sort(mode === "category" ? (a, b) => (categories.find(i => i.id == b[0])?.priority || 0) - (categories.find(i => i.id == a[0])?.priority || 0) : (a, b) => b[1].length - a[1].length).map(([label, list]) => <View style={{ padding: 4, width: 400, flexGrow: 1, maxWidth: "100%" }}>
<Card noPad>
<View style={{ flexDirection: "column", width: "100%", alignItems: "center", paddingLeft: 8, paddingRight: 8, borderRadius: 0 }}>
<View>
<Text allowFontScaling={false} style={{ color: theme.page_content.fg, fontSize: 20, ...font("bold") }}>
{categories.find(i => i.id == label)?.name ?? label}
</Text>
</View>
<View style={{ flexWrap: "wrap", flexDirection: "row", justifyContent: "center" }}>
{
list?.map(i => <InventoryItem key={`${i.icon}|${i.c ? "c" : (i.b ? "b" : (i.u ? "u" : "z"))}`} i={i} />)
}
</View>
</View>
</Card>
</View>)}
</View>
<View style={{ flexDirection: "row", flexWrap: "wrap", justifyContent: "center" }}>
<Text allowFontScaling={false} style={{ color: theme.page_content.fg, fontSize: 24, ...font("bold"), marginLeft: 4 }}>
{t('inventory:history')}
</Text>
</View>
<View style={{ flexDirection: "row", flexWrap: "wrap", justifyContent: "center" }}>
{data?.historyBatches.map(i => <ListItem i={i} />)}
</View>
</ScrollView>
<UserFAB username={username} user_id={user_id} />
</View>
}
