@expo/vector-icons#FontAwesome5 JavaScript Examples
The following examples show how to use
@expo/vector-icons#FontAwesome5.
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: Header.js From salyd with GNU General Public License v3.0 | 6 votes |
|
Header = ({ children, myStyle, navigation, isBack, isUser }) => {
return (
<View style={{ ...styles.container, ...myStyle }}>
{
(navigation.canGoBack() && isBack) ?
<TouchableOpacity style={{
paddingRight: 40
}}
onPress={() => navigation.goBack()}>
<Ionicons name="ios-arrow-back" size={28} />
</TouchableOpacity>
: <View />
}
<Text style={{ ...styles.heading, paddingLeft: !(isBack && navigation.canGoBack()) ? 50 : 0, paddingRight: !isUser ? 50 : 0 }}>{children}</Text>
{
isUser ?
<TouchableOpacity style={{
paddingLeft: 40
}}
onPress={() => navigation.push("Profile")}
>
<FontAwesome5 name="user-circle" size={28} color="black" />
</TouchableOpacity>
: <View />
}
</View>
)
}
Example #2
| Source File: index.js From instagram-clone with MIT License | 6 votes |
|
Header = () => {
return (
<Container>
<BtnAction>
<FontAwesome5 name="camera" size={26} />
</BtnAction>
<Logo source={logo} />
<BtnAction>
<FontAwesome5 name="paper-plane" size={26} />
</BtnAction>
</Container>
);
}
Example #3
| Source File: index.js From instagram-clone with MIT License | 6 votes |
|
Stories = () => {
return (
<Container>
<ContainerHeader>
<Label>Stories</Label>
<GroupLabel>
<FontAwesome5 name="caret-right" size={20} />
<Label>Watch All</Label>
</GroupLabel>
</ContainerHeader>
<ContainerScrollStory>
{stories && stories.map((story, index) => (
<ContainerItemStory key={index}>
<ContainerPhoto>
<Photo source={story.photo} />
</ContainerPhoto>
<Name>{story.name}</Name>
</ContainerItemStory>
))}
</ContainerScrollStory>
</Container>
);
}
Example #4
| Source File: index.js From instagram-clone with MIT License | 6 votes |
|
Tabbar = () => {
const [iconConfigure] = useState({
color: '#333',
size: 22
})
return (
<Container>
<SubContainer>
<FontAwesome5 name="home" { ...iconConfigure } />
<FontAwesome5 name="search" { ...iconConfigure } />
<FontAwesome5 name="instagram" { ...iconConfigure } />
<FontAwesome5 name="heart" { ...iconConfigure } />
<FontAwesome5 name="user" { ...iconConfigure } />
</SubContainer>
</Container>
)
}
Example #5
| Source File: Search.js From InstagramClone with Apache License 2.0 | 5 votes |
|
function Search(props) {
const [users, setUsers] = useState([])
return (
<View style={[utils.backgroundWhite, container.container]}>
<View style={{ marginVertical: 30, paddingHorizontal: 20 }}>
<TextInput
style={utils.searchBar}
placeholder="Type Here..."
onChangeText={(search) => props.queryUsersByUsername(search).then(setUsers)} />
</View>
<FlatList
numColumns={1}
horizontal={false}
data={users}
renderItem={({ item }) => (
<TouchableOpacity
style={[container.horizontal, utils.padding10Sides, utils.padding10Top]}
onPress={() => props.navigation.navigate("Profile", { uid: item.id, username: undefined })}>
{item.image == 'default' ?
(
<FontAwesome5
style={[utils.profileImage, utils.marginBottomSmall]}
name="user-circle" size={50} color="black" />
)
:
(
<Image
style={[utils.profileImage, utils.marginBottomSmall]}
source={{
uri: item.image
}}
/>
)
}
<View style={utils.justifyCenter}>
<Text style={text.username}>{item.username}</Text>
<Text style={text.name} >{item.name}</Text>
</View>
</TouchableOpacity>
)}
/>
</View>
)
}
Example #6
| Source File: index.js From instagram-clone with MIT License | 5 votes |
|
Posts = () => {
const [iconsConfigure] = useState({
color: '#333',
size: 20,
style: {
paddingRight: 15
}
});
return (
<ContainerScroll>
{ posts && posts.map((post, index) => (
<Container key={index}>
<ContainerHeader>
<ContainerItemStory>
<ContainerPhoto>
<Photo source={{ uri: post.profile.photo }} />
</ContainerPhoto>
<Name>{post.profile.name}</Name>
</ContainerItemStory>
<FontAwesome5 name="ellipsis-h" size={14} color="#888" />
</ContainerHeader>
<PostPhoto source={{ uri: post.postPhoto }} />
<ContainerActions>
<ContainerActionsIcons>
<GroupIcons>
<FontAwesome5 name="heart" {...iconsConfigure} />
<FontAwesome5 name="circle" {...iconsConfigure} />
<FontAwesome5 name="paper-plane" {...iconsConfigure} />
</GroupIcons>
<FontAwesome5 name="bookmark" {...iconsConfigure} />
</ContainerActionsIcons>
<Label>2.850 Likes</Label>
<Label>marinaii Hi !! #life</Label>
</ContainerActions>
</Container>
)) }
</ContainerScroll>
);
}
Example #7
| Source File: Chat.js From InstagramClone with Apache License 2.0 | 4 votes |
|
function Chat(props) {
const [user, setUser] = useState(null)
const [chat, setChat] = useState(null)
const [messages, setMessages] = useState([])
const [input, setInput] = useState("")
const [textInput, setTextInput] = useState(null)
const [flatList, setFlatList] = useState(null)
const [initialFetch, setInitialFetch] = useState(false)
useEffect(() => {
if (props.route.params.notification) {
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)
}
})
}
else {
setUser(props.route.params.user)
}
}, [props.route.params.notification, props.route.params.user])
useEffect(() => {
if (user == null) {
return;
}
if (initialFetch) {
return;
}
const chat = props.chats.find(el => el.users.includes(user.uid));
setChat(chat)
props.navigation.setOptions({
headerTitle: () => (
<View style={[container.horizontal, utils.alignItemsCenter, { overflow: 'hidden' }]}>
{
user.image == 'default' ?
(
<FontAwesome5
style={[utils.profileImageSmall]}
name="user-circle" size={35} color="black" />
)
:
(
<Image
style={[utils.profileImageSmall]}
source={{
uri: user.image
}}
/>
)
}
<Text style={[text.bold, text.large, { flex: 1 }]} numberOfLines={1} ellipsizeMode='tail'>{props.route.params.user.username}</Text>
</View>
),
});
if (chat !== undefined) {
firebase.firestore()
.collection("chats")
.doc(chat.id)
.collection("messages")
.orderBy("creation", "asc")
.onSnapshot((snapshot) => {
let messages = snapshot.docs.map(doc => {
const data = doc.data();
const id = doc.id;
return { id, ...data }
})
setMessages(messages)
})
firebase.firestore()
.collection('chats')
.doc(chat.id)
.update({
[firebase.auth().currentUser.uid]: true,
})
setInitialFetch(true)
} else {
createChat()
}
}, [user, props.chats])
const createChat = () => {
firebase.firestore()
.collection("chats")
.add({
users: [firebase.auth().currentUser.uid, user.uid],
lastMessage: 'Send the first message',
lastMessageTimestamp: firebase.firestore.FieldValue.serverTimestamp()
}).then(() => {
props.fetchUserChats()
})
}
const onSend = () => {
const textToSend = input;
if (chat == undefined) {
return;
}
if (input.length == 0) {
return;
}
setInput("")
textInput.clear()
firebase.firestore()
.collection('chats')
.doc(chat.id)
.collection('messages')
.add({
creator: firebase.auth().currentUser.uid,
text: textToSend,
creation: firebase.firestore.FieldValue.serverTimestamp()
})
firebase.firestore()
.collection('chats')
.doc(chat.id)
.update({
lastMessage: textToSend,
lastMessageTimestamp: firebase.firestore.FieldValue.serverTimestamp(),
[chat.users[0]]: false,
[chat.users[1]]: false
})
props.sendNotification(user.notificationToken, "New Message", textToSend, { type: "chat", user: firebase.auth().currentUser.uid })
}
return (
<View style={[container.container, container.alignItemsCenter, utils.backgroundWhite]}>
<Provider>
<FlatList
numColumns={1}
horizontal={false}
data={messages}
ref={setFlatList}
onContentSizeChange={() => { if (flatList != null) flatList.scrollToEnd({ animated: true }) }}
renderItem={({ item }) => (
<View style={[utils.padding10, container.container, item.creator == firebase.auth().currentUser.uid ? container.chatRight : container.chatLeft]}>
{item.creator !== undefined && item.creation !== null ?
<View style={container.horizontal}>
<View>
<Text style={[utils.margin5Bottom, text.white]}>
{item.text}
</Text>
{item.post != null ?
<TouchableOpacity style={{ marginBottom: 20, marginTop: 10 }} onPress={() => { props.navigation.navigate("Post", { item: item.post, user: item.post.user }) }}>
{item.post.type == 0 ?
<CachedImage
cacheKey={item.id}
style={{ aspectRatio: 1 / 1, width: 200 }}
source={{ uri: item.post.downloadURLStill }}
/>
:
<CachedImage
cacheKey={item.id}
style={{ aspectRatio: 1 / 1, width: 200 }}
source={{ uri: item.post.downloadURL }}
/>
}
</TouchableOpacity>
: null}
<Text
style={[text.grey, text.small, utils.margin5Bottom, text.whitesmoke]}>
{timeDifference(new Date(), item.creation.toDate())}
</Text>
</View>
</View>
: null}
</View>
)
}
/>
< View style={[container.horizontal, utils.padding10, utils.alignItemsCenter, utils.backgroundWhite, utils.borderTopGray]} >
{
props.currentUser.image == 'default' ?
(
<FontAwesome5
style={[utils.profileImageSmall]}
name="user-circle" size={35} color="black" />
)
:
(
<Image
style={[utils.profileImageSmall]}
source={{
uri: props.currentUser.image
}}
/>
)
}
<View style={[container.horizontal, utils.justifyCenter, utils.alignItemsCenter]}>
< TextInput
ref={input => { setTextInput(input) }}
value={input}
multiline={true}
style={[container.fillHorizontal, container.input, container.container]}
placeholder='message...'
onChangeText={(input) => setInput(input)} />
< TouchableOpacity
onPress={() => onSend()}
style={{ width: 100, alignSelf: 'center' }}>
<Text style={[text.bold, text.medium, text.deepskyblue]} >Send</Text>
</TouchableOpacity >
</View>
</View >
</Provider>
</View >
)
}
Example #8
| 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 #9
| Source File: Comment.js From InstagramClone with Apache License 2.0 | 4 votes |
|
function Comment(props) {
const [comments, setComments] = useState([])
const [postId, setPostId] = useState("")
const [input, setInput] = useState("")
const [refresh, setRefresh] = useState(false)
const [textInput, setTextInput] = useState(null)
useEffect(() => {
getComments();
}, [props.route.params.postId, props.users, refresh])
const matchUserToComment = (comments) => {
for (let i = 0; i < comments.length; i++) {
if (comments[i].hasOwnProperty('user')) {
continue;
}
const user = props.users.find(x => x.uid === comments[i].creator)
if (user == undefined) {
props.fetchUsersData(comments[i].creator, false)
} else {
comments[i].user = user
}
}
setComments(comments)
setRefresh(false)
}
const getComments = () => {
if (props.route.params.postId !== postId || refresh) {
firebase.firestore()
.collection('posts')
.doc(props.route.params.uid)
.collection('userPosts')
.doc(props.route.params.postId)
.collection('comments')
.orderBy('creation', 'desc')
.get()
.then((snapshot) => {
let comments = snapshot.docs.map(doc => {
const data = doc.data();
const id = doc.id;
return { id, ...data }
})
matchUserToComment(comments)
})
setPostId(props.route.params.postId)
} else {
matchUserToComment(comments)
}
}
const onCommentSend = () => {
const textToSend = input;
if (input.length == 0) {
return;
}
setInput("")
textInput.clear()
firebase.firestore()
.collection('posts')
.doc(props.route.params.uid)
.collection('userPosts')
.doc(props.route.params.postId)
.collection('comments')
.add({
creator: firebase.auth().currentUser.uid,
text: textToSend,
creation: firebase.firestore.FieldValue.serverTimestamp()
}).then(() => {
setRefresh(true)
})
firebase.firestore()
.collection("users")
.doc(props.route.params.uid)
.get()
.then((snapshot) => {
props.sendNotification(snapshot.data().notificationToken, "New Comment", `${props.currentUser.name} Commented on your post`, { type: 0, user: firebase.auth().currentUser.uid })
})
}
return (
<View style={[container.container, container.alignItemsCenter, utils.backgroundWhite]}>
<FlatList
numColumns={1}
horizontal={false}
data={comments}
renderItem={({ item }) => (
<View style={utils.padding10}>
{item.user !== undefined ?
<View style={container.horizontal}>
{item.user.image == 'default' ?
(
<FontAwesome5
style={[utils.profileImageSmall]}
name="user-circle" size={35} color="black"
onPress={() => props.navigation.navigate("Profile", { uid: item.user.uid, username: undefined })} />
)
:
(
<Image
style={[utils.profileImageSmall]}
source={{
uri: item.user.image
}}
onPress={() => props.navigation.navigate("Profile", { uid: item.user.uid, username: undefined })} />
)
}
<View style={{ marginRight: 30 }}>
<Text style={[utils.margin15Right, utils.margin5Bottom, { flexWrap: 'wrap' }]}>
<Text style={[text.bold]}
onPress={() => props.navigation.navigate("Profile", { uid: item.user.uid, username: undefined })}>
{item.user.name}
</Text>
{" "} {item.text}
</Text>
<Text
style={[text.grey, text.small, utils.margin5Bottom]}>
{timeDifference(new Date(), item.creation.toDate())}
</Text>
</View>
</View>
: null}
</View>
)
}
/>
<View style={[utils.borderTopGray]}>
< View style={[container.horizontal, utils.padding10, utils.alignItemsCenter, utils.backgroundWhite]} >
{
props.currentUser.image == 'default' ?
(
<FontAwesome5
style={[utils.profileImageSmall]}
name="user-circle" size={35} color="black" />
)
:
(
<Image
style={[utils.profileImageSmall]}
source={{
uri: props.currentUser.image
}}
/>
)
}
<View style={[container.horizontal, utils.justifyCenter, utils.alignItemsCenter]}>
< TextInput
ref={input => { setTextInput(input) }}
value={input}
multiline={true}
style={[container.fillHorizontal, container.input, container.container]}
placeholder='comment...'
onChangeText={(input) => setInput(input)} />
< TouchableOpacity
onPress={() => onCommentSend()}
style={{ width: 100, alignSelf: 'center' }}>
<Text style={[text.bold, text.medium, text.deepskyblue]} >Post</Text>
</TouchableOpacity >
</View>
</View >
</View>
</View >
)
}
Example #10
| 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 #11
| Source File: Edit.js From InstagramClone with Apache License 2.0 | 4 votes |
|
function Edit(props) {
const [name, setName] = useState(props.currentUser.name);
const [description, setDescription] = useState("");
const [image, setImage] = useState(props.currentUser.image);
const [imageChanged, setImageChanged] = useState(false);
const [hasGalleryPermission, setHasGalleryPermission] = useState(null);
const onLogout = async () => {
firebase.auth().signOut();
Updates.reloadAsync()
}
useEffect(() => {
(async () => {
if (props.currentUser.description !== undefined) {
setDescription(props.currentUser.description)
}
})();
}, []);
useLayoutEffect(() => {
props.navigation.setOptions({
headerRight: () => (
<Feather style={navbar.image} name="check" size={24} color="green" onPress={() => { console.log({ name, description }); Save() }} />
),
});
}, [props.navigation, name, description, image, imageChanged]);
const pickImage = async () => {
if (true) {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [1, 1],
quality: 1,
});
if (!result.cancelled) {
setImage(result.uri);
setImageChanged(true);
}
}
};
const Save = async () => {
if (imageChanged) {
const uri = image;
const childPath = `profile/${firebase.auth().currentUser.uid}`;
const response = await fetch(uri);
const blob = await response.blob();
const task = firebase
.storage()
.ref()
.child(childPath)
.put(blob);
const taskProgress = snapshot => {
console.log(`transferred: ${snapshot.bytesTransferred}`)
}
const taskCompleted = () => {
task.snapshot.ref.getDownloadURL().then((snapshot) => {
firebase.firestore().collection("users")
.doc(firebase.auth().currentUser.uid)
.update({
name,
description,
image: snapshot,
}).then(() => {
props.updateUserFeedPosts();
props.navigation.goBack()
})
})
}
const taskError = snapshot => {
console.log(snapshot)
}
task.on("state_changed", taskProgress, taskError, taskCompleted);
} else {
saveData({
name,
description,
})
}
}
const saveData = (data) => {
firebase.firestore().collection("users")
.doc(firebase.auth().currentUser.uid)
.update(data).then(() => {
props.updateUserFeedPosts();
props.navigation.goBack()
})
}
return (
<View style={container.form}>
<TouchableOpacity style={[utils.centerHorizontal, utils.marginBottom]} onPress={() => pickImage()} >
{image == 'default' ?
(
<FontAwesome5
style={[utils.profileImageBig, utils.marginBottomSmall]}
name="user-circle" size={80} color="black" />
)
:
(
<Image
style={[utils.profileImageBig, utils.marginBottomSmall]}
source={{
uri: image
}}
/>
)
}
<Text style={text.changePhoto}>Change Profile Photo</Text>
</TouchableOpacity>
<TextInput
value={name}
style={form.textInput}
placeholder="Name"
onChangeText={(name) => setName(name)}
/>
<TextInput
value={description}
style={[form.textInput]}
placeholderTextColor={"#e8e8e8"}
placeholder="Description"
onChangeText={(description) => { setDescription(description); }}
/>
<Button
title="Logout"
onPress={() => onLogout()} />
</View>
)
}
Example #12
| Source File: Profile.js From InstagramClone with Apache License 2.0 | 4 votes |
|
function Profile(props) {
const [userPosts, setUserPosts] = useState([]);
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
const [following, setFollowing] = useState(false)
useEffect(() => {
const { currentUser, posts } = props;
if (props.route.params.uid === firebase.auth().currentUser.uid) {
setUser(currentUser)
setUserPosts(posts)
setLoading(false)
}
else {
firebase.firestore()
.collection("users")
.doc(props.route.params.uid)
.get()
.then((snapshot) => {
if (snapshot.exists) {
props.navigation.setOptions({
title: snapshot.data().username,
})
setUser({ uid: props.route.params.uid, ...snapshot.data() });
}
setLoading(false)
})
firebase.firestore()
.collection("posts")
.doc(props.route.params.uid)
.collection("userPosts")
.orderBy("creation", "desc")
.get()
.then((snapshot) => {
let posts = snapshot.docs.map(doc => {
const data = doc.data();
const id = doc.id;
return { id, ...data }
})
setUserPosts(posts)
})
}
if (props.following.indexOf(props.route.params.uid) > -1) {
setFollowing(true);
} else {
setFollowing(false);
}
}, [props.route.params.uid, props.following, props.currentUser, props.posts])
const onFollow = () => {
firebase.firestore()
.collection("following")
.doc(firebase.auth().currentUser.uid)
.collection("userFollowing")
.doc(props.route.params.uid)
.set({})
props.sendNotification(user.notificationToken, "New Follower", `${props.currentUser.name} Started following you`, { type: 'profile', user: firebase.auth().currentUser.uid })
}
const onUnfollow = () => {
firebase.firestore()
.collection("following")
.doc(firebase.auth().currentUser.uid)
.collection("userFollowing")
.doc(props.route.params.uid)
.delete()
}
if (loading) {
return (
<View style={{ height: '100%', justifyContent: 'center', margin: 'auto' }}>
<ActivityIndicator style={{ alignSelf: 'center', marginBottom: 20 }} size="large" color="#00ff00" />
<Text style={[text.notAvailable]}>Loading</Text>
</View>
)
}
if (user === null) {
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]}>User Not Found</Text>
</View>
)
}
return (
<ScrollView style={[container.container, utils.backgroundWhite]}>
<View style={[container.profileInfo]}>
<View style={[utils.noPadding, container.row]}>
{user.image == 'default' ?
(
<FontAwesome5
style={[utils.profileImageBig, utils.marginBottomSmall]}
name="user-circle" size={80} color="black" />
)
:
(
<Image
style={[utils.profileImageBig, utils.marginBottomSmall]}
source={{
uri: user.image
}}
/>
)
}
<View style={[container.container, container.horizontal, utils.justifyCenter, utils.padding10Sides]}>
<View style={[utils.justifyCenter, text.center, container.containerImage]}>
<Text style={[text.bold, text.large, text.center]}>{userPosts.length}</Text>
<Text style={[text.center]}>Posts</Text>
</View>
<View style={[utils.justifyCenter, text.center, container.containerImage]}>
<Text style={[text.bold, text.large, text.center]}>{user.followersCount}</Text>
<Text style={[text.center]}>Followers</Text>
</View>
<View style={[utils.justifyCenter, text.center, container.containerImage]}>
<Text style={[text.bold, text.large, text.center]}>{user.followingCount}</Text>
<Text style={[text.center]}>Following</Text>
</View>
</View>
</View>
<View>
<Text style={text.bold}>{user.name}</Text>
<Text style={[text.profileDescription, utils.marginBottom]}>{user.description}</Text>
{props.route.params.uid !== firebase.auth().currentUser.uid ? (
<View style={[container.horizontal]}>
{following ? (
<TouchableOpacity
style={[utils.buttonOutlined, container.container, utils.margin15Right]}
title="Following"
onPress={() => onUnfollow()}>
<Text style={[text.bold, text.center, text.green]}>Following</Text>
</TouchableOpacity>
)
:
(
<TouchableOpacity
style={[utils.buttonOutlined, container.container, utils.margin15Right]}
title="Follow"
onPress={() => onFollow()}>
<Text style={[text.bold, text.center, { color: '#2196F3' }]}>Follow</Text>
</TouchableOpacity>
)}
<TouchableOpacity
style={[utils.buttonOutlined, container.container]}
title="Follow"
onPress={() => props.navigation.navigate('Chat', { user })}>
<Text style={[text.bold, text.center]}>Message</Text>
</TouchableOpacity>
</View>
) :
<TouchableOpacity
style={utils.buttonOutlined}
onPress={() => props.navigation.navigate('Edit')}>
<Text style={[text.bold, text.center]}>Edit Profile</Text>
</TouchableOpacity>}
</View>
</View>
<View style={[utils.borderTopGray]}>
<FlatList
numColumns={3}
horizontal={false}
data={userPosts}
style={{}}
renderItem={({ item }) => (
<TouchableOpacity
style={[container.containerImage, utils.borderWhite]}
onPress={() => props.navigation.navigate("Post", { item, user })}>
{item.type == 0 ?
<CachedImage
cacheKey={item.id}
style={container.image}
source={{ uri: item.downloadURLStill }}
/>
:
<CachedImage
cacheKey={item.id}
style={container.image}
source={{ uri: item.downloadURL }}
/>
}
</TouchableOpacity>
)}
/>
</View>
</ScrollView >
)
}
Example #13
| Source File: JoinTable.js From salyd with GNU General Public License v3.0 | 4 votes |
|
JoinTable = (props) => {
const [localRoomId, setLocalRoomID] = useState(null);
const [name, setName] = useState(null);
const { token, updateRoom } = useContext(GlobalContext)
const enterId = async () => {
//If user has token(logged in) then let him/her enter only the roomId
if (token) {
fetch(`${apiUrl}/addmember`, {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer " + token
},
body: JSON.stringify({
"roomId": localRoomId
})
}).then((res) => res.json())
.then(async (data) => {
if (data.error) {
Alert.alert("Wrong roomId");
}
else {
//Storing the roomId
updateRoom(data.roomId)
Alert.alert("Successfully added to the table");
props.navigation.dispatch(
CommonActions.reset({
index: 0,
routes: [
{
name: 'Menu',
},
],
})
);
}
})
}
else {
//If user not logged in then make him/her enter the roomId and name(for unique identity)
fetch(`${apiUrl}/registerandaddmember`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
"name": name,
"roomId": localRoomId
})
}).then((res) => res.json())
.then(async (data) => {
console.log(data.id);
if (data.error) {
Alert.alert("Wrong roomId");
}
else {
updateRoom(data.result.roomId)
await AsyncStorage.setItem("userId", (data.id).toString());
Alert.alert("Successfully added to the table");
props.navigation.dispatch(
CommonActions.reset({
index: 0,
routes: [
{
name: 'Menu',
},
],
})
);
}
})
}
}
return (
<View>
<Header navigation={props.navigation} isBack >Join Table</Header>
{token ? (
<View style={styles.container}>
<View style={{
margin: 40, alignItems: "center"
}}>
<Image source={require("../../../assets/code.png")} />
</View>
{/* SHARE ID */}
<View style={{
flexDirection: "row",
backgroundColor: "#d8ffcf",
borderRadius: 10,
padding: 20,
alignItems: "center",
marginBottom: 20
}}>
<FontAwesome5 style={{
marginRight: 20
}} name="lightbulb" size={24} color="black" />
<Text style={{
fontFamily: "ProductSans",
marginRight: 30
}}>Enter the Room Id you got from your colleagues to join the table</Text>
</View>
<TextInput
label="Room Id"
value={localRoomId}
keyboardType="number-pad"
underlineColor="transparent"
theme={{ roundness: 20, colors: { primary: colors.accentPrimary } }}
style={styles.inputbox}
onChangeText={(text) => setLocalRoomID(text)}
/>
<View style={{
marginTop: 20,
alignItems: "center"
}}>
<Button onPressFunction={() => enterId()}>Join Room</Button>
</View>
</View>)
:
(<View style={styles.container}>
<View style={{
margin: 40, alignItems: "center"
}}>
<Image source={require("../../../assets/code.png")} />
</View>
{/* SHARE ID */}
<View style={{
flexDirection: "row",
backgroundColor: "#d8ffcf",
borderRadius: 10,
padding: 20,
alignItems: "center",
marginBottom: 20
}}>
<FontAwesome5 style={{
marginRight: 20
}} name="lightbulb" size={24} color="black" />
<Text style={{
fontFamily: "ProductSans",
marginRight: 30
}}>Enter the Room Id you got from your colleagues to join the table</Text>
</View>
<TextInput
label="Room Id"
value={localRoomId}
keyboardType="number-pad"
underlineColor="transparent"
theme={{ roundness: 20, colors: { primary: colors.accentPrimary } }}
style={styles.inputbox}
onChangeText={(text) => setLocalRoomID(text)}
/>
<TextInput
label="Name"
value={name}
underlineColor="transparent"
theme={{ roundness: 20, colors: { primary: colors.accentPrimary } }}
style={{ ...styles.inputbox, marginTop: 20 }}
onChangeText={(text) => setName(text)}
/>
<View style={{
marginTop: 20,
alignItems: "center"
}}>
<Button onPressFunction={() => enterId()}>Join Room</Button>
</View>
</View>)
}
</View>
)
}
Example #14
| Source File: Table.js From salyd with GNU General Public License v3.0 | 4 votes |
|
Table = ({ navigation }) => {
const [selectedValue, setSelectedValue] = useState("view");
const [restro, setRestro] = useState({});
const [submitting, isSubmitting] = useState(false);
const { token, globalRoomId, updateTable, updateRoom, globalTableId, updateRestro } = useContext(GlobalContext);
useEffect(() => {
Axios({
url: `${apiUrl}/getrestro`,
method: 'post',
headers: {
"Content-Type": "application/json"
},
data: { "tableId": globalTableId }
}).then((res) => {
console.log(res.data);
setRestro(res.data.tableOf);
//Updating the restro in global state
updateRestro(res.data.tableOf);
}).catch((err) => {
res.status(422).json(err);
})
}, [])
const onSubmit = () => {
isSubmitting(true)
Axios({
url: `${apiUrl}/permission/grant`,
method: 'post',
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${token}`
},
data: { "permission": selectedValue }
})
.then((res) => {
console.log(res.data)
isSubmitting(false)
navigation.dispatch(
CommonActions.reset({
index: 0,
routes: [
{
name: 'Menu',
},
],
})
);
}).catch((err) => {
isSubmitting(false)
console.log(err);
})
}
const exitTable = async () => {
updateRoom(null)
updateTable(null)
const tableid = await AsyncStorage.removeItem('tableId')
navigation.navigate('HomeMain')
}
console.log()
return (
<View>
<Header navigation={navigation} isBack>Your Table</Header>
<View style={styles.container}>
<View style={{
marginTop: 30,
marginBottom: 50,
flexDirection: "row",
justifyContent: "space-around",
alignItems: "center"
}}>
<View style={{
flex: 2,
alignItems: "center"
}}>
<Text style={{
color: "black",
fontSize: 50,
textAlign: "center",
color: colors.accentPrimary,
fontFamily: "ProductSansBold",
}}>{globalRoomId}</Text>
<View style={{
alignItems: "center",
flexDirection: "row"
}} >
<View style={{
backgroundColor: colors.accentPrimary,
height: 3,
width: 100,
borderRadius: 20
}} />
<View style={{
backgroundColor: colors.accentPrimary,
height: 3,
marginLeft: 5,
width: 15,
borderRadius: 20
}} />
</View>
</View>
<View style={{
flex: 3,
}}>
<Image style={{
marginLeft: 40,
width: 152,
height: 174
}} source={require("../../../assets/share_Image.png")} />
</View>
</View>
{/* SHARE ID */}
<View style={{
flexDirection: "row",
backgroundColor: "#d8ffcf",
borderRadius: 10,
padding: 20,
alignItems: "center"
}}>
<FontAwesome5 style={{
marginRight: 20
}} name="lightbulb" size={24} color="black" />
<Text style={{
fontFamily: "ProductSans",
marginRight: 30
}}>Share this Room Id with your colleagues to let them join the table</Text>
</View>
{/* GRANT PERMISSION */}
<View style={{
marginTop: 40
}}>
<Text style={{
fontSize: 20,
textAlign: "center",
fontFamily: "ProductSans"
}}> Grant permission to the members</Text>
<View style={{
margin: 0,
padding: 0,
height: 70,
alignItems: "center",
flexDirection: 'row',
justifyContent: "center"
}}>
<Button
colorBack={selectedValue === "view" ? colors.accentPrimary : "#d8ffcf"}
colorText={selectedValue === "view" ? colors.back : colors.accentPrimary}
mystyle={{
borderTopRightRadius: 0,
borderBottomRightRadius: 0
}}
onPressFunction={() => setSelectedValue("view")}
>
View
</Button>
<Button
colorBack={selectedValue === "edit" ? colors.accentPrimary : "#d8ffcf"}
colorText={selectedValue === "edit" ? colors.back : colors.accentPrimary}
mystyle={{
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0
}}
onPressFunction={() => setSelectedValue("edit")}
>
Edit
</Button>
</View>
<View style={{
alignItems: "center",
}}>
{
submitting ?
<View style={{
marginTop: 15
}}>
<ActivityIndicator color={colors.accentPrimary} />
</View> :
<Button
mode="contained"
onPressFunction={() => onSubmit()}
>Proceed</Button>
}
</View>
</View>
{/* EXIT TABLE */}
<View style={{
marginTop: 40
}}>
<Text style={{
fontSize: 20,
textAlign: "center",
fontFamily: "ProductSans"
}}> Exit Table</Text>
<View style={{
alignItems: "center",
marginTop: 15
}}>
<Button
colorBack="#ff6257"
onPressFunction={() => exitTable()}
>
Exit Table
</Button>
</View>
</View>
</View>
</View>
)
}
Example #15
| Source File: Contact.js From salyd with GNU General Public License v3.0 | 4 votes |
|
Contact = ({ navigation }) => {
const details = {
phone: "8077XXXXXX",
email: "[email protected]",
address: "Esteria Towers\n Times Square Callison Lane\n Portland, DE 97205",
};
const openDial = () => {
if (Platform.OS === "android") {
Linking.openURL(`tel:${phone}`)
}
else {
Linking.openURL(`telprompt:${phone}`)
}
}
return (
<React.Fragment>
<Header navigation={navigation} isBack>Contact Us</Header>
<View style={styles.container}>
{/* TOP SECTION */}
<View style={{
margin: 50,
flexDirection: "column",
alignItems: "center"
}}>
<Image style={{
height: 150, width: 150
}} source={require('../../../assets/logo_col.png')} />
<Text style={{
fontFamily: "ProductSansBold",
fontSize: 32,
marginTop: 15,
color: colors.accentPrimary
}}>Salyd</Text>
</View >
{/* MIDDLE SECTION */}
<View style={{
margin: 30,
padding: 20,
borderRadius: 20,
flexDirection: "column",
backgroundColor: "white",
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 5
}}>
<Text style={{
fontFamily: "ProductSansBold",
fontSize: 22,
textAlign: "center"
}}> Details </Text>
<View style={{ flexDirection: "row", marginTop: 15, alignItems: "center" }}>
<FontAwesome5 name="phone" size={24} color="#54cfff" />
<Text style={{
fontFamily: "ProductSansBold",
marginLeft: 10
}}> {details.phone} </Text>
</View>
<View style={{ flexDirection: "row", marginTop: 15, alignItems: "center" }}>
<FontAwesome5 name="at" size={24} color="#ffaa54" />
<Text style={{
fontFamily: "ProductSansBold",
marginLeft: 10
}}> {details.email} </Text>
</View>
<View style={{ flexDirection: "row", marginTop: 15, alignItems: "flex-start" }}>
<FontAwesome5 name="home" size={24} color="#ff707e" />
<Text style={{
fontFamily: "ProductSansBold",
marginLeft: 10
}}> {details.address} </Text>
</View>
</View >
{/* BITTOM SECTION */}
<View style={{
width: "100%",
alignItems: "center",
position: "absolute",
bottom: 30
}}>
<Text style={{
fontSize: 18,
fontFamily: "ProductSans"
}}>Made with <FontAwesome5 name="heart" size={18} color="red" /> by Salyd Team</Text>
</View>
</View >
</React.Fragment >
)
}
