react-native-paper#Divider JavaScript Examples
The following examples show how to use
react-native-paper#Divider.
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: index.js From MediBuddy with MIT License | 6 votes |
|
Footer = () => (
<SafeAreaView>
<Divider />
<View style={styles.footer}>
<View style={{ flex: 1 }}>
<Button
style={styles.btn}
labelStyle={styles.cancel}
mode="text"
onPress={() => console.log('Pressed')}>
Cancel
</Button>
</View>
<View style={{ flex: 1 }}>
<Button
style={styles.btn}
labelStyle={styles.ok}
mode="text"
onPress={() => console.log('Pressed')}>
Reschedule
</Button>
</View>
</View>
</SafeAreaView>
)
Example #2
| 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 #3
| Source File: index.js From Cosmos with MIT License | 5 votes |
|
render() {
const {state} = this.context;
const {enrolledBoxes, newBoxName, btnLoading} = this.state;
return (
<View style={styles.listCircleContainer}>
<Text style={[Styles.fontSmall, styles.helpText]}>
Boxes are your personal Friend/Family/Work groups where you share
relevant posts which interest a perticular group. You can either join
an existing group or create a new group.
</Text>
<View style={styles.addPartConatiner}>
<Text style={Styles.fontSmall}>Create New Box</Text>
<TextInput
style={[Styles.fontMedium, styles.textInput]}
mode="outlined"
placeholder="Box Name"
maxLength={30}
dense={true}
value={newBoxName}
onChangeText={(nb) => this.setNewBoxName(nb)}
/>
<Button
labelStyle={Styles.fontSmall}
loading={btnLoading}
icon="plus"
onPress={() => this.handleCreateBox()}>
Create Box
</Button>
</View>
<Divider />
<FlatList
ListHeaderComponent={() => {
return <Text style={Styles.fontSmall}>Enrolled Boxes</Text>;
}}
ListHeaderComponentStyle={{margin: 10}}
ListEmptyComponent={() => {
return (
<View style={styles.emptyComponentContainer}>
<Planet
size={width / 2.5}
mood={newBoxName.length !== 0 ? 'lovestruck' : 'blissful'}
color="#FCCB7E"
/>
<Headline style={[Styles.fontMedium, styles.noBoxesYet]}>
Here you create new Boxes and see what boxes you are enrolled
in. To switch boxes you just tap on them from the given list.
To get started create a New Box, don't forget to give it
exciting name.
</Headline>
</View>
);
}}
data={enrolledBoxes}
keyExtractor={(item) => item}
renderItem={({item}) => {
return (
<Card
onPress={() => this.handleSelectBox(item)}
style={styles.card}>
<Card.Content style={styles.cardContent}>
<Subheading styles={Styles.fontMedium}>{item}</Subheading>
{state.box === item ? (
<Icons
name="check"
size={20}
color={DarkTheme.colors.primary}
/>
) : null}
</Card.Content>
</Card>
);
}}
ItemSeparatorComponent={() => <Divider style={styles.Divider} />}
/>
</View>
);
}
Example #4
| Source File: item.js From MediBuddy with MIT License | 5 votes |
|
Item = ({ item }) => {
const { id, name, startTime, endTime, tags, avatar } = item;
const navigation = useNavigation();
const isTablet = DeviceInfo.isTablet();
const dispatch = useDispatch();
const onSelected = () => {
dispatch(appointmentActions.appointmentSelected(id));
if (!isTablet) {
navigation.navigate('AppointmentDetail');
}
};
return (
<Card style={styles.card}>
<ProfileCard name={name} avatar={avatar} onSelected={onSelected} />
<Card.Content>
<Divider />
<Text style={styles.duration}>
{startTime} - {endTime}
</Text>
<View style={styles.tags}>
{tags.map((itx, i) => {
const { labelColor, buttonColor } = random_rgba();
return (
<Button
key={i}
mode="contained"
disabled
compact
uppercase={false}
style={[styles.tag, { backgroundColor: buttonColor }]}
labelStyle={[styles.tagLabel, { color: labelColor }]}>
{itx}
</Button>
);
})}
</View>
</Card.Content>
</Card>
);
}
Example #5
| Source File: Drawer.js From Legacy with Mozilla Public License 2.0 | 4 votes |
|
export default function CustomDrawerContent(props) {
var [helpOpen, setHelpOpen] = React.useState(false);
var [donateOpen, setDonateOpen] = React.useState(false);
var [paypalOpen, setPaypalOpen] = React.useState(false);
var mini = props.mini;
var { t } = useTranslation();
var theme = useSelector(i => i.themes[i.theme]);
var clanBookmarks = useSelector(i => i.clanBookmarks);
var userBookmarks = useSelector(i => i.userBookmarks);
// const { data: zeecretTeams } = useZeecretTeam(null, true);
var route = useSelector(i => i.route);
var nav = props.navigation;
var [showMoreClan, setShowMoreClan] = React.useState(false);
var [showMoreUser, setShowMoreUser] = React.useState(false);
var [now, setNow] = React.useState(Date.now());
React.useEffect(() => {
var x = setInterval(() => {
setNow(Date.now());
}, 1000);
return () => clearInterval(x);
})
var top = [
// { title: "Camps Leaderboard", icon: "flag", page: "AllCampWeeks" },
].filter(i => !i.hide)
var pages = [
// { title: t(`common:maps`), icon: "map", page: "Map" },
{ title: t(`common:bouncers`), icon: "map-marker", page: "Bouncers" },
{ title: t(`common:munzee_types`), icon: "database", page: "DBSearch" },
{ title: t(`common:calendar`), icon: "calendar", page: "Calendar" },
{ title: t(`common:evo_planner`), icon: "dna", page: "EvoPlanner" },
// { title: t(`common:scanner`), icon: "qrcode", page: "Scanner", hide: Platform.OS === "web" },
{ title: t(`common:weekly_challenge`), icon: "calendar", page: "WeeklyWeeks" },
{ title: "Zeecret Agents Competition", icon: "briefcase", page: "CompetitionHome" },
{ title: "Bookmark Manager", icon:"bookmark", page:"Bookmarks" },
].filter(i => !i.hide)
var more = [
{ title: t(`common:notifications`), icon: "bell", page: "Notifications", hide: Platform.OS === "web" },
{ title: t(`common:settings`), icon: "settings", page: "Settings" },
{ title: t(`common:app_info`), icon: "information", page: "Info" },
{ title: `GitHub`, icon: "github-circle", page: "https://github.com/CuppaZee/CuppaZee", link: true }
].filter(i => !i.hide)
var itemProps = {
side: props.side,
mini: mini,
activeBackgroundColor: theme.navigation_selected?.bg ?? theme.navigation.fg,
activeTintColor: theme.navigation_selected?.fg ?? theme.navigation.bg,
inactiveTintColor: theme.navigation.fg
}
return (
<DrawerContentScrollView style={{ backgroundColor: theme.navigation.bg, ...(theme.page_content.border ? { borderRightWidth: 1, borderRightColor: "white" } : {}) }} {...props}>
{/* <View style={{ paddingTop: 8, paddingBottom: 4, paddingLeft: 16 }}>
<Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), color: theme.navigation.fg, opacity: 0.8 }}>Remember this is a{Platform.OS == "android" ? 'n Early Access' : ' Beta'} build</Text>
<Text allowFontScaling={false} style={{ fontSize: 12, ...font("bold"), color: theme.navigation.fg, opacity: 0.8 }}>Feedback is welcome via Messenger or Email</Text>
</View> */}
{Platform.OS == "web" && globalThis?.navigator?.userAgent?.match?.(/Android/) && <View style={{ paddingTop: 8, paddingBottom: 4, paddingLeft: 8 }}>
<Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), color: theme.navigation.fg, opacity: 0.8 }}>The CuppaZee App is now on Google Play</Text>
<Text allowFontScaling={false} style={{ fontSize: 12, ...font("bold"), color: theme.navigation.fg, opacity: 0.8 }}>Download it now!</Text>
</View>}
{Platform.OS == "web" && globalThis?.navigator?.userAgent?.match?.(/iPhone|iPad|iPod/) && <View style={{ paddingTop: 8, paddingBottom: 4, paddingLeft: 8 }}>
<Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), color: theme.navigation.fg, opacity: 0.8 }}>The CuppaZee App is now on the App Store</Text>
<Text allowFontScaling={false} style={{ fontSize: 12, ...font("bold"), color: theme.navigation.fg, opacity: 0.8 }}>Download it now!</Text>
</View>}
{top.map?.(i => <DrawerItem
key={i.title}
{...itemProps}
style={{ marginVertical: 0, opacity: i.disabled ? 0.6 : 1 }}
focused={route.name == i.page}
icon={({ focused, color, size }) => <MaterialCommunityIcons name={i.icon} color={color} size={24} style={{ margin: 4 }} />}
label={i.title}
onPress={i.disabled ? null : (i.link ? () => Linking.openURL(i.page) : () => nav.reset({
index: 1,
routes: [
{ name: '__primary', params: { screen: i.page } },
],
}))
}
/>)}
<View style={{ paddingLeft: 8 }}>
<Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), color: theme.navigation.fg, opacity: 0.8 }}>{t(`common:users`)}</Text>
</View>
<View style={{ paddingHorizontal: 4, flexDirection: "row", justifyContent: "space-between" }}>
<IconButton
style={{
backgroundColor: route.name == "AllUsers" ? itemProps.activeBackgroundColor : null
}}
icon="format-list-bulleted"
color={itemProps.inactiveTintColor}
onPress={() => nav.reset({
index: 1,
routes: [
{ name: '__primary', params: { screen: "AllUsers" } },
],
})}
/>
<IconButton
style={{
backgroundColor: route.name == "UserSearch" ? itemProps.activeBackgroundColor : null
}}
icon="magnify"
color={itemProps.inactiveTintColor}
onPress={() => nav.reset({
index: 1,
routes: [
{ name: '__primary', params: { screen: "UserSearch" } },
],
})}
/>
<IconButton
disabled={true}
style={{
backgroundColor: route.name == "UserRankings" ? itemProps.activeBackgroundColor : null
}}
icon="trophy-outline"
color={itemProps.inactiveTintColor}
onPress={() => nav.reset({
index: 1,
routes: [
{ name: '__primary', params: { screen: "UserRankings" } },
],
})}
/>
{/* <IconButton
disabled={true}
style={{
backgroundColor: route.name == "UserBookmarks" ? itemProps.activeBackgroundColor : null
}}
icon="bookmark-outline"
color={itemProps.inactiveTintColor}
onPress={() => nav.reset({
index: 1,
routes: [
{ name: '__primary', params: { screen: "UserBookmarks" } },
],
})
}
/> */}
</View>
{userBookmarks?.slice?.(0, showMoreUser ? Infinity : userBookmarks.length > 6 ? 5 : 6)?.filter?.(i => i)?.map?.(i => <DrawerItem
key={`user_${i.user_id}`}
{...itemProps}
style={{ marginVertical: 0 }}
focused={route.name?.startsWith?.('User') && route.params?.username == i.username}
icon={({ focused, color, size }) => <Image style={{ height: 32, width: 32, borderRadius: 16 }} source={{ uri: i.logo ?? `https://munzee.global.ssl.fastly.net/images/avatars/ua${Number(i.user_id || 0).toString(36)}.png` }} />}
label={i.username}
onPress={() => nav.reset({
index: 1,
routes: [
{ name: '__primary', params: { screen: "UserDetails", params: { username: i.username } } },
],
})
}
// right={zeecretTeams?.[i.username] ? ({ focused, color, size }) => <MaterialCommunityIcons name={zeecretTeams[i.username].startsWith("pine") ? "pine-tree" : "bomb"} color={zeecretTeams[i.username].endsWith('_false') ? "#ff0000" : color} size={24} style={{ margin: 4 }} /> : null}
/>)}
{userBookmarks.length > 6 && <DrawerItem
{...itemProps}
style={{ marginVertical: 0 }}
focused={false}
icon={({ focused, color, size }) => <MaterialCommunityIcons name={showMoreUser ? "chevron-up" : "chevron-down"} color={color} size={24} style={{ margin: 4 }} />}
label={showMoreUser ? t(`common:show_less`) : t(`common:show_more`)}
onPress={() => setShowMoreUser(!showMoreUser)}
/>}
{/* <DrawerItem
{...itemProps}
style={{ marginVertical: 0 }}
focused={route.name == "UserSearch"}
icon={({ focused, color, size }) => <MaterialCommunityIcons name="magnify" color={color} size={24} style={{ margin: 4 }} />}
label={t(`common:find_user`)}
onPress={() => nav.reset({
index: 1,
routes: [
{ name: '__primary', params: { screen: "UserSearch" } },
],
})
}
/> */}
<Divider theme={{ dark: theme.id !== "white" }} />
<View style={{ paddingTop: 8, paddingLeft: 8 }}>
<Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), color: theme.navigation.fg, opacity: 0.8 }}>{t('common:clan', { count: 2 })}</Text>
</View>
<View style={{ paddingHorizontal: 4, flexDirection: "row", justifyContent: "space-between" }}>
<IconButton
style={{
backgroundColor: route.name == "AllClans" ? itemProps.activeBackgroundColor : null
}}
icon="format-list-bulleted"
color={itemProps.inactiveTintColor}
onPress={() => nav.reset({
index: 1,
routes: [
{ name: '__primary', params: { screen: "AllClans" } },
],
})}
/>
<IconButton
style={{
backgroundColor: route.name == "ClanSearch" ? itemProps.activeBackgroundColor : null
}}
icon="magnify"
color={itemProps.inactiveTintColor}
onPress={() => nav.reset({
index: 1,
routes: [
{ name: '__primary', params: { screen: "ClanSearch" } },
],
})}
/>
{/* <IconButton
disabled={true}
style={{
backgroundColor: route.name == "ClanRequirements" && route.params.gameid < 87 ? itemProps.activeBackgroundColor : null
}}
icon="history"
color={itemProps.inactiveTintColor}
onPress={() => nav.reset({
index: 1,
routes: [
{ name: '__primary', params: { screen: "ClanRequirements", params: { gameid: 87 } } },
],
})
}
/> */}
<IconButton
style={{
backgroundColor: route.name == "ClanRequirements" && route.params.year == 2020 && route.params.month == 11 ? itemProps.activeBackgroundColor : null
}}
icon="playlist-check"
color={itemProps.inactiveTintColor}
onPress={() => nav.reset({
index: 1,
routes: [
{ name: '__primary', params: { screen: "ClanRequirements", params: { year: 2020, month: 11 } } },
],
})
}
/>
<IconButton
style={{
backgroundColor: route.name == "ClanRequirements" && route.params.year == 2020 && route.params.month == 12 ? itemProps.activeBackgroundColor : null,
borderWidth: 1,
borderColor: theme.navigation.fg
}}
icon="star"
color={itemProps.inactiveTintColor}
onPress={() => nav.reset({
index: 1,
routes: [
{ name: '__primary', params: { screen: "ClanRequirements", params: { year: 2020, month: 12 } } },
],
})
}
/>
{/* <IconButton
style={{
backgroundColor: route.name == "ClanRequirements" && route.params.gameid == 89 ? itemProps.activeBackgroundColor : null
}}
icon="new-box"
color={itemProps.inactiveTintColor}
onPress={() => nav.reset({
index: 1,
routes: [
{ name: '__primary', params: { screen: "ClanRequirements", params: { gameid: 89 } } },
],
})
}
/> */}
{/* <IconButton
disabled={true}
style={{
backgroundColor: route.name == "ClanBookmarks" ? itemProps.activeBackgroundColor : null
}}
icon="bookmark-outline"
color={itemProps.inactiveTintColor}
onPress={() => nav.reset({
index: 1,
routes: [
{ name: '__primary', params: { screen: "ClanBookmarks" } },
],
})
}
/> */}
</View>
{clanBookmarks?.slice?.(0, showMoreClan ? Infinity : clanBookmarks.length > 6 ? 5 : 6)?.filter?.(i => i)?.map?.(i => <DrawerItem
key={`clan_${i.clan_id}`}
{...itemProps}
style={{ marginVertical: 0 }}
focused={route.name == "Clan" && route.params?.clanid == Number(i.clan_id)}
icon={({ focused, color, size }) => <Image style={{ height: 32, width: 32, borderRadius: 16 }} source={{ uri: i.logo ?? `https://munzee.global.ssl.fastly.net/images/clan_logos/${(i.clan_id || 0).toString(36)}.png` }} />}
label={i.name}
onPress={() => nav.reset({
index: 1,
routes: [
{ name: '__primary', params: { screen: "Clan", params: { clanid: Number(i.clan_id) } } },
],
})
}
/>)}
{clanBookmarks.length > 6 && <DrawerItem
{...itemProps}
style={{ marginVertical: 0 }}
focused={false}
icon={({ focused, color, size }) => <MaterialCommunityIcons name={showMoreClan ? "chevron-up" : "chevron-down"} color={color} size={24} style={{ margin: 4 }} />}
label={showMoreClan ? t(`common:show_less`) : t(`common:show_more`)}
onPress={() => setShowMoreClan(!showMoreClan)}
/>}
<Divider theme={{ dark: theme.id !== "white" }} />
<View style={{ paddingTop: 8, paddingBottom: 4, paddingLeft: 8 }}>
<Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), color: theme.navigation.fg, opacity: 0.8 }}>{t('common:tools')}</Text>
</View>
{pages.map?.(i => <DrawerItem
key={i.title}
{...itemProps}
style={{ marginVertical: 0 }}
focused={route.name == i.page}
icon={({ focused, color, size }) => <MaterialCommunityIcons name={i.icon} color={color} size={24} style={{ margin: 4 }} />}
label={i.title}
onPress={() => nav.reset({
index: 1,
routes: [
{ name: '__primary', params: { screen: i.page } },
],
})
}
/>)}
<Divider theme={{ dark: theme.id !== "white" }} />
<View style={{ paddingTop: 8, paddingBottom: 4, paddingLeft: 8 }}>
<Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), color: theme.navigation.fg, opacity: 0.8 }}>{t('common:more')}</Text>
</View>
{more.map?.(i => <DrawerItem
key={i.title}
{...itemProps}
style={{ marginVertical: 0, opacity: i.disabled ? 0.6 : 1 }}
focused={route.name == i.page}
icon={({ focused, color, size }) => <MaterialCommunityIcons name={i.icon} color={color} size={24} style={{ margin: 4 }} />}
label={i.title}
onPress={i.disabled ? null : (i.link ? () => Linking.openURL(i.page) : () => nav.reset({
index: 1,
routes: [
{ name: '__primary', params: { screen: i.page } },
],
}))
}
/>)}
<Menu
visible={donateOpen}
onDismiss={() => setDonateOpen(false)}
anchor={
<DrawerItem
{...itemProps}
style={{ marginVertical: 0 }}
icon={({ focused, color, size }) => <MaterialCommunityIcons name="coin" color={color} size={24} style={{ margin: 4 }} />}
label={t('common:donate')}
onPress={() => setDonateOpen(true)}
/>
}
contentStyle={{ backgroundColor: theme.page_content.bg, borderWidth: theme.page_content.border ? 1 : 0, borderColor: theme.page_content.border }}
>
<View style={{ paddingHorizontal: 4, alignItems: "stretch" }}>
<Button style={{ marginHorizontal: 4 }} color="#F96854" mode="contained" onPress={() => Linking.openURL('https://patreon.com/CuppaZee')} icon="patreon">{t('app_info:patreon_donate')}</Button>
<Button style={{ marginHorizontal: 4, marginTop: 4 }} color="#29abe0" mode="contained" onPress={() => Linking.openURL('https://ko-fi.com/sohcah')} icon="coffee">{t('app_info:kofi_donate')}</Button>
<Menu
visible={paypalOpen}
onDismiss={() => setPaypalOpen(false)}
anchor={
<Button style={{ marginHorizontal: 4, marginTop: 4 }} color="#009CDE" mode="contained" onPress={() => setPaypalOpen(true)} icon="paypal">{t('app_info:paypal_donate')}</Button>
}
>
<View style={{ paddingHorizontal: 8 }}>
<Text>{t('app_info:paypal_donate_desc')}</Text>
</View>
</Menu>
</View>
</Menu>
<Menu
visible={helpOpen}
onDismiss={() => setHelpOpen(false)}
anchor={
<DrawerItem
{...itemProps}
style={{ marginVertical: 0 }}
icon={({ focused, color, size }) => <MaterialCommunityIcons name="help-circle" color={color} size={24} style={{ margin: 4 }} />}
label={t('common:help')}
onPress={() => setHelpOpen(true)}
/>
}
contentStyle={{ backgroundColor: theme.page_content.bg, borderWidth: theme.page_content.border ? 1 : 0, borderColor: theme.page_content.border }}
>
<View style={{ paddingHorizontal: 4, alignItems: "center" }}>
<View style={{ flexDirection: "row" }}>
<Text allowFontScaling={false} style={{ color: theme.page_content.fg, fontSize: 16, ...font("bold") }}>{t('common:contact.facebook')} </Text>
<TouchableRipple onPress={() => Linking.openURL('https://m.me/CuppaZee')}><Text allowFontScaling={false} style={{ color: theme.page_content.fg == "#000000" ? 'blue' : 'lightblue', fontSize: 16, ...font("bold") }}>@CuppaZee</Text></TouchableRipple>
</View>
<Text allowFontScaling={false} style={{ color: theme.page_content.fg, fontSize: 16 }}>{t('common:contact.email')}</Text>
</View>
</Menu>
</DrawerContentScrollView>
);
}
Example #6
| Source File: List.js From InstagramClone with Apache License 2.0 | 4 votes |
|
function Chat(props) {
const [chats, setChats] = useState([])
const [reload, setReload] = useState(false)
const [input, setInput] = useState("")
const [caption, setCaption] = useState("")
const [textInput, setTextInput] = useState(null)
useEffect(() => {
for (let i = 0; i < props.chats.length; i++) {
if (props.chats[i].hasOwnProperty('otherUser')) {
continue;
}
let otherUserId;
if (props.chats[i].users[0] == firebase.auth().currentUser.uid) {
otherUserId = props.chats[i].users[1];
} else {
otherUserId = props.chats[i].users[0];
}
const user = props.users.find(x => x.uid === otherUserId)
if (user == undefined) {
props.fetchUsersData(otherUserId, false)
} else {
props.chats[i].otherUser = user
}
}
setChats(props.chats)
}, [props.chats, props.users])
const sendPost = (item) => {
if (item.sent != undefined) {
return;
}
const textToSend = input;
setInput("")
textInput.clear()
let post = props.route.params.post
delete post.doc
firebase.firestore()
.collection('chats')
.doc(item.id)
.collection('messages')
.add({
creator: firebase.auth().currentUser.uid,
text: textToSend,
post: post,
creation: firebase.firestore.FieldValue.serverTimestamp()
})
firebase.firestore()
.collection('chats')
.doc(item.id)
.update({
lastMessage: "post sent",
lastMessageTimestamp: firebase.firestore.FieldValue.serverTimestamp()
})
firebase.firestore()
.collection('chats')
.doc(item.id)
.update({
lastMessage: textToSend,
lastMessageTimestamp: firebase.firestore.FieldValue.serverTimestamp(),
[item.users[0]]: false,
[item.users[1]]: false
})
props.navigation.popToTop()
}
let share = false;
let item = null;
if (props.route.params !== undefined) {
share = props.route.params.share
item = props.route.params.post
}
if (chats.length === 0) {
return (
<View style={{ height: '100%', justifyContent: 'center', margin: 'auto' }}>
<FontAwesome5 style={{ alignSelf: 'center', marginBottom: 20 }} name="comments" size={40} color="black" />
<Text style={[text.notAvailable]}>No chats notAvailable</Text>
</View>
)
}
return (
<View style={[container.container, container.alignItemsCenter, utils.backgroundWhite]}>
{item != null ?
<View style={{ flexDirection: 'row', padding: 20 }}>
<TextInput
style={[container.fillHorizontal, container.input, container.container]}
multiline={true}
ref={setTextInput}
placeholder="Write a message . . ."
onChangeText={(caption) => setInput(caption)}
/>
{item.type == 1 ?
<Image
style={utils.profileImageSmall}
source={{ uri: props.route.params.post.downloadURL }}
style={{ aspectRatio: 1 / 1, backgroundColor: 'black', height: 80 }}
/>
:
<CachedImage
cacheKey={item.id}
style={{ aspectRatio: 1 / 1, height: 80 }}
source={{ uri: props.route.params.post.downloadURLStill }}
/>
}
</View>
: null}
<Divider />
{chats.length !== 0 ?
<FlatList
numColumns={1}
horizontal={false}
data={chats}
keyExtractor={(item, index) => item.id}
renderItem={({ item }) => (
<View style={!item[firebase.auth().currentUser.uid] ? { backgroundColor: '#d2eeff' } : null}>
{item.otherUser == null ? (
<FontAwesome5
style={[utils.profileImageSmall]}
name="user-circle" size={35} color="black" />
)
:
(
<TouchableOpacity style={[utils.padding15, container.horizontal]}
activeOpacity={share ? 1 : 0}
onPress={() => {
if (!share) {
props.navigation.navigate("Chat", { user: item.otherUser })
}
}}>
<View style={container.horizontal}>
{item.otherUser.image == 'default' ? (
<FontAwesome5
style={[utils.profileImageSmall]}
name="user-circle" size={35} color="black" />
)
:
(
<Image
style={[utils.profileImageSmall]}
source={{
uri: item.otherUser.image
}} />
)}
</View>
<View>
<Text style={[text.bold]}>{item.otherUser.name}</Text>
<Text numberOfLines={1} ellipsizeMode='tail' style={[utils.margin15Right, utils.margin5Bottom, { paddingBottom: 10 }]}>
{item.lastMessage} {" "}
{item.lastMessageTimestamp == null ? (
<Text style={[text.grey, text.small, utils.margin5Bottom]}>Now</Text>
) : (
<Text
style={[text.grey, text.small, utils.margin5Bottom]}>
{timeDifference(new Date(), item.lastMessageTimestamp.toDate())}
</Text>
)}
</Text>
</View>
{share ? <TouchableOpacity
style={[utils.buttonOutlined, utils.margin15Right, { backgroundColor: '#0095ff', marginLeft: 'auto', justifyContent: 'center' }]}
onPress={() => sendPost(item)}>
<Text style={[text.bold, { color: 'white', textAlign: 'center', textAlignVertical: 'center' }]}>Send</Text>
</TouchableOpacity> :
null}
</TouchableOpacity>
)}
</View>
)
}
/>
:
<View style={{ height: '100%', justifyContent: 'center', margin: 'auto' }}>
<FontAwesome5 style={{ alignSelf: 'center', marginBottom: 20 }} name="comments" size={40} color="black" />
<Text style={[text.notAvailable]}>No chats available</Text>
</View>
}
</View >
)
}
Example #7
| Source File: Feed.js From InstagramClone with Apache License 2.0 | 4 votes |
|
function Feed(props) {
const [posts, setPosts] = useState([]);
const [refreshing, setRefreshing] = useState(false)
const [unmutted, setUnmutted] = useState(null)
const [inViewPort, setInViewPort] = useState(0)
const [sheetRef, setSheetRef] = useState(useRef(null))
const [modalShow, setModalShow] = useState({ visible: false, item: null })
const [isValid, setIsValid] = useState(true);
useEffect(() => {
if (props.usersFollowingLoaded == props.following.length && props.following.length !== 0) {
props.feed.sort(function (x, y) {
return y.creation.toDate() - x.creation.toDate();
})
setPosts(props.feed);
setRefreshing(false)
for (let i = 0; i < props.feed.length; i++) {
if (props.feed[i].type == 0) {
setUnmutted(i)
return;
}
}
}
props.navigation.setParams({ param: "value" })
}, [props.usersFollowingLoaded, props.feed])
const onViewableItemsChanged = useRef(({ viewableItems, changed }) => {
if (changed && changed.length > 0) {
setInViewPort(changed[0].index);
}
})
if (posts.length == 0) {
return (<View />)
}
if (sheetRef.current !== null) {
if (modalShow.visible) {
sheetRef.snapTo(0)
} else {
sheetRef.snapTo(1)
}
}
return (
<View style={[container.container, utils.backgroundWhite]}>
<FlatList
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={() => {
setRefreshing(true);
props.reload()
}}
/>
}
onViewableItemsChanged={onViewableItemsChanged.current}
viewabilityConfig={{
waitForInteraction: false,
viewAreaCoveragePercentThreshold: 70
}}
numColumns={1}
horizontal={false}
data={posts}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => (
<View key={index}>
<Post route={{ params: { user: item.user, item, index, unmutted, inViewPort, setUnmuttedMain: setUnmutted, setModalShow, feed: true } }} navigation={props.navigation} />
</View>
)}
/>
<BottomSheet
bottomSheerColor="#FFFFFF"
ref={setSheetRef}
initialPosition={0} //200, 300
snapPoints={[300, 0]}
isBackDrop={true}
isBackDropDismissByPress={true}
isRoundBorderWithTipHeader={true}
backDropColor="black"
isModal
containerStyle={{ backgroundColor: "white" }}
tipStyle={{ backgroundColor: "white" }}
headerStyle={{ backgroundColor: "white", flex: 1 }}
bodyStyle={{ backgroundColor: "white", flex: 1, borderRadius: 20 }}
body={
<View>
{modalShow.item != null ?
<View>
<TouchableOpacity style={{ padding: 20 }}
onPress={() => {
props.navigation.navigate("ProfileOther", { uid: modalShow.item.user.uid, username: undefined });
setModalShow({ visible: false, item: null });
}}>
<Text >Profile</Text>
</TouchableOpacity>
<Divider />
{modalShow.item.creator == firebase.auth().currentUser.uid ?
<TouchableOpacity style={{ padding: 20 }}
onPress={() => {
props.deletePost(modalShow.item).then(() => {
setRefreshing(true);
props.reload()
})
setModalShow({ visible: false, item: null });
}}>
<Text >Delete</Text>
</TouchableOpacity>
: null}
<Divider />
<TouchableOpacity style={{ padding: 20 }} onPress={() => setModalShow({ visible: false, item: null })}>
<Text >Cancel</Text>
</TouchableOpacity>
</View>
: null}
</View>
}
/>
<Snackbar
visible={isValid.boolSnack}
duration={2000}
onDismiss={() => { setIsValid({ boolSnack: false }) }}>
{isValid.message}
</Snackbar>
</View>
)
}
Example #8
| Source File: Post.js From InstagramClone with Apache License 2.0 | 4 votes |
|
function Post(props) {
const [item, setItem] = useState(props.route.params.item)
const [user, setUser] = useState(props.route.params.user)
const [currentUserLike, setCurrentUserLike] = useState(false)
const [unmutted, setUnmutted] = useState(true)
const [videoref, setvideoref] = useState(null)
const [sheetRef, setSheetRef] = useState(useRef(null))
const [modalShow, setModalShow] = useState({ visible: false, item: null })
const [isValid, setIsValid] = useState(true);
const [exists, setExists] = useState(false);
const [loaded, setLoaded] = useState(false);
const isFocused = useIsFocused();
useEffect(() => {
if (props.route.params.notification != undefined) {
firebase.firestore()
.collection("users")
.doc(props.route.params.user)
.get()
.then((snapshot) => {
if (snapshot.exists) {
let user = snapshot.data();
user.uid = snapshot.id;
setUser(user)
}
})
firebase.firestore()
.collection("posts")
.doc(props.route.params.user)
.collection("userPosts")
.doc(props.route.params.item)
.get()
.then((snapshot) => {
if (snapshot.exists) {
let post = snapshot.data();
post.id = snapshot.id;
setItem(post)
setLoaded(true)
setExists(true)
}
})
firebase.firestore()
.collection("posts")
.doc(props.route.params.user)
.collection("userPosts")
.doc(props.route.params.item)
.collection("likes")
.doc(firebase.auth().currentUser.uid)
.onSnapshot((snapshot) => {
let currentUserLike = false;
if (snapshot.exists) {
currentUserLike = true;
}
setCurrentUserLike(currentUserLike)
})
}
else {
firebase.firestore()
.collection("posts")
.doc(props.route.params.user.uid)
.collection("userPosts")
.doc(props.route.params.item.id)
.collection("likes")
.doc(firebase.auth().currentUser.uid)
.onSnapshot((snapshot) => {
let currentUserLike = false;
if (snapshot.exists) {
currentUserLike = true;
}
setCurrentUserLike(currentUserLike)
})
setItem(props.route.params.item)
setUser(props.route.params.user)
setLoaded(true)
setExists(true)
}
}, [props.route.params.notification, props.route.params.item])
useEffect(() => {
if (videoref !== null) {
videoref.setIsMutedAsync(props.route.params.unmutted)
}
setUnmutted(props.route.params.unmutted)
}, [props.route.params.unmutted])
useEffect(() => {
if (videoref !== null) {
if (isFocused) {
videoref.playAsync()
} else {
videoref.stopAsync()
}
}
}, [props.route.params.index, props.route.params.inViewPort])
const onUsernamePress = (username, matchIndex) => {
props.navigation.navigate("ProfileOther", { username, uid: undefined })
}
const onLikePress = (userId, postId, item) => {
item.likesCount += 1;
setCurrentUserLike(true)
firebase.firestore()
.collection("posts")
.doc(userId)
.collection("userPosts")
.doc(postId)
.collection("likes")
.doc(firebase.auth().currentUser.uid)
.set({})
.then()
props.sendNotification(user.notificationToken, "New Like", `${props.currentUser.name} liked your post`, { type: 0, postId, user: firebase.auth().currentUser.uid })
}
const onDislikePress = (userId, postId, item) => {
item.likesCount -= 1;
setCurrentUserLike(false)
firebase.firestore()
.collection("posts")
.doc(userId)
.collection("userPosts")
.doc(postId)
.collection("likes")
.doc(firebase.auth().currentUser.uid)
.delete()
}
if (!exists && loaded) {
return (
<View style={{ height: '100%', justifyContent: 'center', margin: 'auto' }}>
<FontAwesome5 style={{ alignSelf: 'center', marginBottom: 20 }} name="dizzy" size={40} color="black" />
<Text style={[text.notAvailable]}>Post does not exist</Text>
</View>
)
}
if (!loaded) {
return (<View></View>)
}
if (user == undefined) {
return (<View></View>)
}
if (item == null) {
return (<View />)
}
const _handleVideoRef = (component) => {
setvideoref(component);
if (component !== null) {
component.setIsMutedAsync(props.route.params.unmutted)
}
}
if (videoref !== null) {
videoref.setIsMutedAsync(unmutted)
if (isFocused && props.route.params.index == props.route.params.inViewPort) {
videoref.playAsync()
} else {
videoref.stopAsync()
}
}
if (sheetRef.current !== null && !props.route.params.feed) {
if (modalShow.visible) {
sheetRef.snapTo(0)
} else {
sheetRef.snapTo(1)
}
}
return (
<View style={[container.container, utils.backgroundWhite]}>
<View>
<View style={[container.horizontal, { alignItems: 'center', padding: 10 }]}>
<TouchableOpacity
style={[container.horizontal, { alignItems: 'center' }]}
onPress={() => props.navigation.navigate("ProfileOther", { uid: user.uid, username: undefined })}>
{user.image == 'default' ?
(
<FontAwesome5
style={[utils.profileImageSmall]}
name="user-circle" size={35} color="black" />
)
:
(
<Image
style={[utils.profileImageSmall]}
source={{
uri: user.image
}}
/>
)
}
<View style={{ alignSelf: 'center' }}>
<Text style={[text.bold, text.medium, { marginBottom: 0 }]} >{user.name}</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
style={[{ marginLeft: 'auto' }]}
onPress={() => {
if (props.route.params.feed) {
props.route.params.setModalShow({ visible: true, item })
} else {
setModalShow({ visible: true, item })
}
}}>
<Feather
name="more-vertical" size={20} color="black" />
</TouchableOpacity>
</View>
{item.type == 0 ?
<View>
{props.route.params.index == props.route.params.inViewPort && isFocused ?
<View>
<VideoPlayer
videoProps={{
isLooping: true,
shouldPlay: true,
resizeMode: Video.RESIZE_MODE_COVER,
source: {
uri: item.downloadURL,
},
videoRef: _handleVideoRef,
}}
inFullscreen={false}
showControlsOnLoad={true}
showFullscreenButton={false}
height={WINDOW_WIDTH}
width={WINDOW_WIDTH}
shouldPlay={true}
isLooping={true}
style={{
aspectRatio: 1 / 1, height: WINDOW_WIDTH,
width: WINDOW_WIDTH, backgroundColor: 'black'
}}
/>
<TouchableOpacity
style={{ position: 'absolute', borderRadius: 500, backgroundColor: 'black', width: 40, height: 40, alignItems: 'center', justifyContent: 'center', margin: 10, right: 0 }}
activeOpacity={1}
onPress={() => {
if (videoref == null) {
return;
}
if (unmutted) {
if (props.route.params.setUnmuttedMain == undefined) {
setUnmutted(false)
} else {
props.route.params.setUnmuttedMain(false)
}
} else {
if (props.route.params.setUnmuttedMain == undefined) {
setUnmutted(true)
} else {
props.route.params.setUnmuttedMain(true)
}
}
}}>
{!unmutted ?
<Feather name="volume-2" size={20} color="white" />
:
<Feather name="volume-x" size={20} color="white" />
}
</TouchableOpacity>
</View>
:
<View style={{ marginTop: 4 }}>
<CachedImage
cacheKey={item.id}
style={[container.image]}
source={{ uri: item.downloadURLStill }}
/>
</View>
}
</View>
:
<CachedImage
cacheKey={item.id}
style={container.image}
source={{ uri: item.downloadURL }}
/>
}
<View style={[utils.padding10, container.horizontal]}>
{currentUserLike ?
(
<Entypo name="heart" size={30} color="red" onPress={() => onDislikePress(user.uid, item.id, item)} />
)
:
(
<Feather name="heart" size={30} color="black" onPress={() => onLikePress(user.uid, item.id, item)} />
)
}
<Feather style={utils.margin15Left} name="message-square" size={30} color="black" onPress={() => props.navigation.navigate('Comment', { postId: item.id, uid: user.uid, user })} />
<Feather style={utils.margin15Left} name="share" size={26} color="black" onPress={() => props.navigation.navigate('ChatList', { postId: item.id, post: { ...item, user: user }, share: true })} />
</View>
<View style={[container.container, utils.padding10Sides]}>
<Text style={[text.bold, text.medium]}>
{item.likesCount} likes
</Text>
<Text style={[utils.margin15Right, utils.margin5Bottom]}>
<Text style={[text.bold]}
onPress={() => props.navigation.navigate("ProfileOther", { uid: user.uid, username: undefined })}>
{user.name}
</Text>
<Text> </Text>
<ParsedText
parse={
[
{ pattern: /@(\w+)/, style: { color: 'green', fontWeight: 'bold' }, onPress: onUsernamePress },
]
}
>{item.caption}</ParsedText>
</Text>
<Text
style={[text.grey, utils.margin5Bottom]} onPress={() => props.navigation.navigate('Comment', { postId: item.id, uid: user.uid, user })}>
View all {item.commentsCount} Comments
</Text>
<Text
style={[text.grey, text.small, utils.margin5Bottom]}>
{timeDifference(new Date(), item.creation.toDate())}
</Text>
</View>
</View>
<BottomSheet
bottomSheerColor="#FFFFFF"
ref={setSheetRef}
initialPosition={0} //200, 300
snapPoints={[300, 0]}
isBackDrop={true}
isBackDropDismissByPress={true}
isRoundBorderWithTipHeader={true}
backDropColor="black"
isModal
containerStyle={{ backgroundColor: "white" }}
tipStyle={{ backgroundColor: "white" }}
headerStyle={{ backgroundColor: "white", flex: 1 }}
bodyStyle={{ backgroundColor: "white", flex: 1, borderRadius: 20 }}
body={
<View>
{modalShow.item != null ?
<View>
<TouchableOpacity style={{ padding: 20 }}
onPress={() => {
props.navigation.navigate("ProfileOther", { uid: modalShow.item.user.uid, username: undefined });
setModalShow({ visible: false, item: null });
}}>
<Text >Profile</Text>
</TouchableOpacity>
<Divider />
{props.route.params.user.uid == firebase.auth().currentUser.uid ?
<TouchableOpacity style={{ padding: 20 }}
onPress={() => {
props.deletePost(modalShow.item).then(() => {
props.fetchUserPosts()
props.navigation.popToTop()
})
setModalShow({ visible: false, item: null });
}}>
<Text >Delete</Text>
</TouchableOpacity>
: null}
<Divider />
<TouchableOpacity style={{ padding: 20 }} onPress={() => setModalShow({ visible: false, item: null })}>
<Text >Cancel</Text>
</TouchableOpacity>
</View>
: null}
</View>
}
/>
<Snackbar
visible={isValid.boolSnack}
duration={2000}
onDismiss={() => { setIsValid({ boolSnack: false }) }}>
{isValid.message}
</Snackbar>
</View>
)
}
Example #9
| 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 #10
| Source File: astrologuers-question.screen.js From astrale with GNU General Public License v3.0 | 4 votes |
|
/**
* @param route
* @param navigation
* @returns {*}
* @constructor
*/
function AstrologerQuestionScreen({ route, navigation }) {
const dispatch = useGlobals()[1];
const astrologist = route.params.astrologist;
const setData = React.useState({
message: null,
email: null,
astrologer: astrologist.name,
})[1];
const isDark = useIsDark();
const isAndroid = PlatformUtils.isAndroid;
const handleProceed = () => {
try {
dispatch({ type: 'toggleLoader' });
} catch {
} finally {
dispatch({ type: 'toggleLoader' });
navigation.pop();
}
};
return (
<BlurView
style={[StyleSheet.absoluteFill, { flex: 1 }]}
tint={isDark ? 'dark' : 'light'}
intensity={isAndroid ? 150 : 100}
>
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
<ScrollView style={{ paddingBottom: 200 }}>
<Close position="right" />
<View style={{ margin: 20, alignItems: 'center' }}>
<Headline>{astrologist.name}</Headline>
<Subheading>
{i18n.t(astrologist.school, { word: i18n.t('Astrology') })}
</Subheading>
<Image source={astrologist.photo} style={styles.image} />
</View>
<Divider />
<View style={{ margin: 20 }}>
<View style={{ height: 5 }} />
<TextInput
label={i18n.t('Your question')}
multiline
style={{ height: 150 }}
maxLength={250}
onChangeText={(text) =>
setData((data) => ({ ...data, message: text }))
}
/>
<View style={{ height: 5 }} />
<TextInput
label={i18n.t('Your email')}
keyboardType="email-address"
onChangeText={(text) =>
setData((data) => ({ ...data, email: text }))
}
/>
</View>
<View style={{ marginHorizontal: 20, marginBottom: 20 }}>
<Button
onPress={handleProceed}
mode="contained"
style={{ borderRadius: 20 }}
icon="send"
>
{i18n.t('Proceed')}
</Button>
<Text style={styles.advice}>
*
{i18n.t(
"You'll need to see an ad before you can send the question"
)}
</Text>
</View>
<Divider />
</ScrollView>
</TouchableWithoutFeedback>
</BlurView>
);
}
Example #11
| Source File: compatibility.screen.js From astrale with GNU General Public License v3.0 | 4 votes |
|
/**
* @param navigation
* @returns {*}
* @constructor
*/
function CompatibilityScreen({ navigation }) {
const { colors } = useTheme();
const [scRef, setScRef] = React.useState();
const [selectedSigns, setSelectedSigns] = React.useState([]);
const [compDetailsShow, setCompDetailsShow] = React.useState(false);
const handleSignPress = (sign) => {
setSelectedSigns((selectedSigns) => [...selectedSigns, sign]);
};
const handleSignTopPress = () =>
setSelectedSigns([]) || setCompDetailsShow(false);
React.useEffect(() => {
if (selectedSigns.length === 2) {
setCompDetailsShow(true);
scRef.scrollTo({ y: 0 });
}
}, [selectedSigns]);
return (
<SafeAreaView style={{ flex: 1 }}>
<SpaceSky />
<View style={{ marginBottom: 10 }}>
<MainNav />
<View style={styles.headerContainer}>
<ShadowHeadline>{i18n.t('Compatibility')}</ShadowHeadline>
</View>
</View>
<View style={styles.matchCirclesContainer}>
{selectedSigns[0] ? (
<Sign
sign={selectedSigns[0]}
onPress={handleSignTopPress}
showTitle={false}
signHeight={100}
signWidth={100}
/>
) : (
<View
style={[
styles.matchCircle,
{
shadowColor: '#000000',
backgroundColor: colors.surface,
borderColor: colors.text,
},
]}
>
<Text style={{ textAlign: 'center', fontSize: 10 }}>
{i18n.t('Your sign')}
</Text>
</View>
)}
<View style={styles.matchSeparator}>
<Text style={{ fontSize: 22 }}>?</Text>
</View>
{selectedSigns[1] ? (
<Sign
onPress={handleSignTopPress}
sign={selectedSigns[1]}
showTitle={false}
signHeight={100}
signWidth={100}
/>
) : (
<View
style={[
styles.matchCircle,
{
shadowColor: '#000000',
backgroundColor: colors.surface,
borderColor: colors.text,
},
]}
>
<Text style={{ textAlign: 'center', fontSize: 10 }}>
{i18n.t('Partner sign')}
</Text>
</View>
)}
</View>
<Divider />
<ScrollView ref={(scrollRef) => setScRef(scrollRef)}>
<View style={{ height: 20 }} />
{compDetailsShow ? (
<MatchContent sign1={selectedSigns[0]} sign2={selectedSigns[1]} />
) : (
<SignsContent onPress={handleSignPress} />
)}
</ScrollView>
</SafeAreaView>
);
}
Example #12
| Source File: daily.screen.js From astrale with GNU General Public License v3.0 | 4 votes |
|
/**
* @param navigation {object}
* @returns {*}
* @constructor
*/
function DailyScreen({ navigation }) {
const [{ session }, dispatch] = useGlobals();
const { colors } = useTheme();
const dataIndex = daily.findIndex(
(item) =>
item.day.split('-')[2].toString() === new Date().getDate().toString() &&
item.sign === session.sign
);
const data = daily[dataIndex !== -1 ? dataIndex : 0];
const d = new Date();
React.useLayoutEffect(() => {
if (!session?.sign) {
Storer.delete(SESSION_KEY).then(() => dispatch({ type: 'setLogOut' }));
}
}, [dispatch, session?.sign]);
const Header = (
<View>
<MainNav
rightButton={
<MaterialCommunityIcons
onPress={() => navigation.navigate('Signs', { key: 'Sign' })}
name="swap-horizontal"
color={colors.text}
size={30}
style={{ opacity: 0.5 }}
/>
}
/>
<View style={[styles.headerContainer]}>
<Sign
sign={session.sign}
showTitle={false}
signWidth={70}
signHeight={70}
/>
<ShadowHeadline style={styles.headerHeadline}>
{i18n.t(session.sign)}
</ShadowHeadline>
<Subheading>
{i18n.t('date_daily', {
day: d.getDate(),
month: months[session.language][d.getMonth()],
year: d.getFullYear(),
})}
</Subheading>
</View>
<Divider />
</View>
);
return (
<>
<SpaceSky />
<SafeAreaView>
<ScrollViewFadeFirst element={Header} height={200}>
<View style={{ height: 20 }} />
<ShowFromTop>
<View
style={[
styles.defaultContainer,
{
flexDirection: 'row',
alignItems: 'center',
marginTop: 10,
},
]}
>
<TextBold style={styles.textTitles}>
{i18n.t('Focus of the day')}:
</TextBold>
<TextBold
style={{ fontSize: 16, marginLeft: 5, color: colors.primary }}
>
{i18n.t(data.contents.focus)}
</TextBold>
</View>
<View
style={[
styles.defaultContainer,
{
marginTop: 25,
marginBottom: 5,
flexDirection: 'row',
justifyContent: 'space-around',
},
]}
>
<ProgressItem
text={i18n.t('Love')}
percent={data.contents.percents.love}
/>
<ProgressItem
text={i18n.t('Career')}
percent={data.contents.percents.work}
style={{ marginHorizontal: 5 }}
/>
<ProgressItem
text={i18n.t('Health')}
percent={data.contents.percents.health}
/>
</View>
<View style={[styles.defaultContainer]}>
<View style={styles.horoscopeTodayContainer}>
<TextBold style={styles.textTitles}>
{i18n.t('Your horoscope for today')}:
</TextBold>
<View style={styles.iconsHoroscopeToday}>
<MaterialCommunityIcons
name="heart"
size={16}
color={colors.text}
style={{ marginLeft: 5 }}
/>
<MaterialCommunityIcons
name="briefcase"
size={16}
color={colors.text}
style={{ marginLeft: 5 }}
/>
<MaterialCommunityIcons
name="food-apple"
size={16}
color={colors.text}
style={{ marginLeft: 5 }}
/>
</View>
</View>
<Text style={{ marginTop: 15 }}>
{data.contents.text[Language.filteredLocale()]}
</Text>
</View>
<View style={styles.defaultContainer}>
<TextBold style={styles.textTitles}>
{i18n.t('Today you love')}
</TextBold>
</View>
<View
style={[
styles.loveContainer,
{
borderColor: colors.text + '0D',
},
]}
>
<View
style={[
styles.heartLoveContainer,
{
backgroundColor: colors.text + '0D',
},
]}
>
<MaterialCommunityIcons
name="heart"
size={30}
color={colors.accent}
/>
</View>
<View style={[styles.loveSignsContainer]}>
{data.contents.compatibility.map((sign, i) => (
<Sign
key={i}
sign={sign}
signHeight={40}
signWidth={50}
styleTitle={{ fontSize: 12 }}
/>
))}
</View>
</View>
<Divider style={{ marginTop: 20 }} />
<View style={styles.defaultContainer}>
<TextBold style={styles.textTitles}>
{i18n.t('Lucky numbers')}
</TextBold>
</View>
<View
style={[
styles.defaultContainer,
{
flexDirection: 'row',
justifyContent: 'space-evenly',
},
]}
>
{data.contents.numbers.map((number, i) => (
<LuckyNumber key={i} number={number} />
))}
</View>
<View style={{ paddingVertical: 10 }} />
</ShowFromTop>
</ScrollViewFadeFirst>
</SafeAreaView>
</>
);
}
Example #13
| 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 #14
| Source File: tab-bar.js From MediBuddy with MIT License | 4 votes |
|
function TabBar({
state,
descriptors,
navigation,
navigationState,
position,
theme,
}) {
const { colors } = theme;
const [visible, setvisible] = React.useState(false);
/** Indicator transition */
const indicatorTranslateX = Animated.interpolate(position, {
inputRange: [0, 1, 2, 3],
outputRange: [110, 2 * width + 24, 3 * width + 24, 4 * width + 48],
});
const indicatorWidth = Animated.interpolate(position, {
inputRange: [0, 1, 2, 3],
outputRange: [140, 100, 140, 100],
});
const TabIcon = ({ route, index }) => {
const { options } = descriptors[route.key];
const label =
options.tabBarLabel !== undefined
? options.tabBarLabel
: options.title !== undefined
? options.title
: route.name;
const isFocused = state.index === index;
const onPress = () => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
canPreventDefault: true,
});
if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name);
}
};
return (
<TouchableOpacity key={index} style={styles.tab} onPress={onPress}>
<Text
style={
(styles.tabTxt,
{
color:
index === navigationState.index ? colors.accent : '#bdc3c7',
})
}>
{label}
</Text>
</TouchableOpacity>
);
};
return (
<View>
<GeneralStatusBar backgroundColor="#ffff" />
<View style={styles.tabView}>
<Avatar.Image
size={50}
style={styles.icon}
source={{
uri: 'https://i.ya-webdesign.com/images/male-avatar-icon-png-7.png',
}}
/>
{state.routes.map((route, index) => {
return <TabIcon route={route} index={index} />;
})}
<View style={styles.sideMenu}>
<Menu
visible={visible}
onDismiss={() => setvisible(false)}
anchor={
<TouchableOpacity onPress={() => setvisible(true)}>
<View style={styles.dropView}>
<Text style={styles.name}>Dr. Christian Wade</Text>
<Icon name="keyboard-arrow-down" size={24} color="#bdc3c7" />
</View>
</TouchableOpacity>
}>
<Menu.Item onPress={() => {}} title="Request Leave" />
<Menu.Item onPress={() => {}} title="Provide Feeback" />
<Divider />
<Menu.Item onPress={() => {}} title="Check for Updates" />
<Menu.Item onPress={() => {}} title="Logout " />
</Menu>
<Avatar.Image
size={50}
style={styles.avatar}
source={{
uri:
'https://i.ya-webdesign.com/images/male-avatar-icon-png-7.png',
}}
/>
<CustomIcon name="bell" />
<CustomIcon name="settings" />
<CustomIcon name="magnify" />
</View>
</View>
<Animated.View
style={[
styles.indicator,
{
left: indicatorTranslateX,
backgroundColor: colors.accent,
width: indicatorWidth,
},
]}
/>
</View>
);
}
