@expo/vector-icons#Octicons JavaScript Examples
The following examples show how to use
@expo/vector-icons#Octicons.
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: ChatScreen.js From SocialApp-React-Native with MIT License | 6 votes |
|
screenOptions = (navData) => {
const routeParams = navData.route.params;
return {
headerTitle: () => (
<Text
style={{ color: "#fff", fontSize: 20, fontWeight: "600" }}
>
{routeParams.user.name + " "}
{
VerifiedUser.verifiedUsersId.includes(routeParams.user._id) && <Octicons name="verified" size={18} color="#fff" />
}
</Text>
)
}
}
Example #2
| Source File: ChatListItem.js From SocialApp-React-Native with MIT License | 5 votes |
|
ChatListItem = (props) => {
const { user } = props;
const [isLoading, setIsLoading] = useState(false);
const loggedInUserId = useSelector(state => state.auth.user._id);
const allUsers = useSelector(state => state.users.allUsers);
const loggedInUser = allUsers.filter(u => u._id === loggedInUserId)[0];
// currUser following list
const dispatch = useDispatch();
const navigation = useNavigation();
// check user._id is in following list
const [imageUri, setImageUri] = useState(`${ENV.apiUrl}/user/photo/${user._id}`);
const onImageErrorHandler = () => {
setImageUri(ENV.defaultImageUri)
}
return (
<TouchableOpacity
onPress={() => navigation.navigate('Chat', { user: user })}
>
<View style={styles.container}>
<Image
source={{ uri: imageUri }}
onError={onImageErrorHandler}
style={styles.avatar}
/>
<View style={styles.content}>
<View style={styles.mainContent}>
<View style={styles.text}>
<Text
style={styles.name}
>
{user.name + " "}
{
VerifiedUser.verifiedUsersId.includes(user._id) && <Octicons name="verified" size={18} color={Colors.brightBlue} />
}
</Text>
</View>
<Text style={styles.timeAgo}>
{user.email}
</Text>
</View>
</View>
</View>
</TouchableOpacity>
);
}
Example #3
| Source File: Comment.js From SocialApp-React-Native with MIT License | 5 votes |
|
Comment = (props) => {
const { comment, deleteCommentHandler, userId } = props;
const [imageUri, setImageUri] = useState('')
const onImageErrorHandler = () => {
setImageUri(ENV.defaultImageUri)
}
const deleteComment = () => {
deleteCommentHandler(comment);
}
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => { }}>
<Image
style={styles.image}
source={{ uri: imageUri || `${ENV.apiUrl}/user/photo/${comment.postedBy._id}?${new Date(comment.postedBy.updated)}` }}
onError={onImageErrorHandler}
/>
</TouchableOpacity>
<View style={styles.content}>
<View style={styles.contentHeader}>
<Text style={styles.name}>
{comment.postedBy.name + " "}
{
VerifiedUser.verifiedUsersId.includes(comment.postedBy._id) && <Octicons name="verified" size={16} color={Colors.brightBlue} />
}
</Text>
<Text style={styles.time}>
{timeDifference(new Date(), new Date(comment.created))}
</Text>
</View>
<View style={{ display: 'flex', flexDirection: 'row' }} >
<Text rkType='primary3 mediumLine'>{comment.text}</Text>
{ comment.postedBy._id === userId && (
<TouchableOpacity
style={{ position: 'absolute', right: 0 }}
onPress={deleteComment}
>
<MaterialCommunityIcons
name="delete"
size={20}
color='red'
/>
</TouchableOpacity>
) }
</View>
</View>
</View>
);
}
Example #4
| Source File: Card.js From SocialApp-React-Native with MIT License | 4 votes |
|
Card = (props) => {
const { post, userId, fromUserProfile } = props;
const navigation = useNavigation();
const dispatch = useDispatch();
// const liked = post.likes.indexOf(userId) !== -1;
const [isImageLoading, setIsImageLoading] = useState(true);
const [imageUri, setImageUri] = useState('')
const [showFullBody, setShowFullBody] = useState(false);
const [imgWidth, setImgWidth] = useState();
const [imgHeight, setImgHeight] = useState();
const onImageErrorHandler = () => {
setImageUri(ENV.defaultImageUri)
}
let TouchableComp = TouchableOpacity;
if(Platform.OS === 'android' && Platform.Version >= 21){
TouchableComp = TouchableNativeFeedback;
}
const deleteHandler = (id) => {
Alert.alert(
'Are you sure?',
'Do you really want to delete this post?',
[
{text: 'No', style: 'default'},
{
text: 'Yes',
style: 'destructive',
onPress: async () => {
await dispatch(postActions.deletePost(id))
showMessage({
message: "Your post was successfully deleted.",
type: "success",
icon: { icon: "success", position: 'left' },
duration: 3000
});
}
}
]
)
};
const checkLike = () => {
let match = post.likes.indexOf(userId) !== -1;
return match;
}
const toggleLike = async () => {
props.toggleLikeHandler(post._id, checkLike());
}
useEffect(() => {
let imageUrl = `${ENV.apiUrl}/post/photo/${post._id}?${new Date(post.updated)}`;
Image.getSize(imageUrl, (width, height) => {
// calculate image width and height
const screenWidth = Dimensions.get('window').width
const scaleFactor = width / screenWidth
const imageHeight = height / scaleFactor
setImgWidth(screenWidth);
setImgHeight(imageHeight);
})
}, [])
return (
<TouchableComp
background={ Platform.OS === 'ios' ? undefined : TouchableNativeFeedback.Ripple('#b3b3b3') }
onPress={() =>
fromUserProfile ?
{}
:
navigation.navigate('UserProfile', { userId: post.postedBy._id, name: post.postedBy.name }) }
>
<View style={styles.card}>
<View style={styles.cardTitleHeader}>
<View style={{ display: 'flex', flex: 1, flexDirection: 'row' }} >
<View style={styles.timeContainer}>
<Image
style={styles.userIcon}
source={{ uri: imageUri || `${ENV.apiUrl}/user/photo/${post.postedBy._id}?${new Date(post.postedBy.updated)}` }}
onError={onImageErrorHandler}
/>
<Text
style={{ fontSize: 15, alignSelf: 'center', paddingHorizontal: 10, paddingVertical: 5 }}
onPress={() => navigation.navigate('UserProfile', { userId: post.postedBy._id, name: post.postedBy.name })}
>
{post.postedBy.name + " "}
{
VerifiedUser.verifiedUsersId.includes(post.postedBy._id) && <Octicons name="verified" size={18} color={Colors.brightBlue} />
}
</Text>
</View>
<View style={{ position: 'absolute', right: 0, display: 'flex', flexDirection: 'row'}}>
<Ionicons
name={ Platform.OS === 'android' ? 'md-time' : 'ios-time' }
size= {14}
style={{ marginTop: 3 }}
/>
<Text> {timeDifference(new Date(), new Date(post.created))} </Text>
</View>
</View>
</View>
<View style={styles.cardImageContainer} >
<Image
style={{...styles.cardImage, height: imgHeight }}
source={{ uri: `${ENV.apiUrl}/post/photo/${post._id}?${new Date(post.updated)}` }}
onLoad={() => setIsImageLoading(false)}
/>
<ActivityIndicator
style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0 }}
animating={isImageLoading}
size='large'
color={Colors.brightBlue}
/>
</View>
<View style={styles.cardHeader}>
<View>
<Text style={styles.title}>{post.title ? post.title : ""}</Text>
{ post.body && post.body.length > 30 ? (
<View>
{ showFullBody ? (
<Text style={styles.description}>
{post.body}
<Text
style={{ color: Colors.brightBlue }}
onPress={() => setShowFullBody((prevState) => !prevState)}
>
Read Less
</Text>
</Text>
) : (
<Text style={styles.description}>
{post.body.substring(0, 30)}
<Text
style={{ color: Colors.brightBlue }}
onPress={() => setShowFullBody((prevState) => !prevState)}
>
...Read More
</Text>
</Text>
) }
</View>
) : (
<Text style={styles.description}> {post.body} </Text>
) }
</View>
</View>
<View style={styles.cardFooter}>
<View style={styles.socialBarContainer}>
<View style={styles.socialBarSection}>
<TouchableOpacity
style={styles.socialBarButton}
onPress={toggleLike}
>
<Ionicons
name="md-thumbs-up"
size={24}
style={{ marginRight: 5 }}
color={checkLike() ? 'blue' : "black"}
/>
<Text style={styles.socialBarLabel}> {post.likes.length} </Text>
</TouchableOpacity>
</View>
<View style={styles.socialBarSection}>
<TouchableOpacity
style={styles.socialBarButton}
onPress={() => navigation.navigate('Comments',{ postId: post._id, userId: userId })}
>
<Ionicons
name="md-chatboxes"
size={24}
style={{ marginRight: 5 }}
/>
<Text style={styles.socialBarLabel}> {post.comments.length} </Text>
</TouchableOpacity>
</View>
</View>
</View>
<TouchableOpacity
onPress={() => navigation.navigate('Comments', { postId: post._id, userId: userId })}
>
{ post.comments.length > 0 ? (
<Text style={{ paddingHorizontal: 16, paddingBottom: 15, paddingTop: 5 }} >View all {post.comments.length} comments </Text>
) : (
<Text style={{ paddingHorizontal: 16, paddingBottom: 15, paddingTop: 5 }} >Comment here </Text>
) }
</TouchableOpacity>
{ post.postedBy._id === userId && (
<View style={styles.postActions} >
<View style={styles.socialBarSection}>
<TouchableOpacity
style={styles.socialBarButton}
onPress={deleteHandler.bind(this, post._id)}
>
<MaterialCommunityIcons
name="delete"
size={20}
style={{ marginRight: 5 }}
color="red"
/>
<Text style={styles.socialBarLabel}>Delete</Text>
</TouchableOpacity>
</View>
<View style={styles.socialBarSection}>
<TouchableOpacity
style={styles.socialBarButton}
onPress={() => navigation.navigate('EditPost', { postId: post._id })}
>
<MaterialCommunityIcons
name="square-edit-outline"
size={20}
style={{ marginRight: 5 }}
color={Colors.lightAccent}
/>
<Text style={styles.socialBarLabel}>Edit</Text>
</TouchableOpacity>
</View>
</View>
)}
</View>
</TouchableComp>
);
}
Example #5
| Source File: ListItem.js From SocialApp-React-Native with MIT License | 4 votes |
|
ListItem = (props) => {
const { user } = props;
const [isLoading, setIsLoading] = useState(false);
const loggedInUserId = useSelector(state => state.auth.user._id);
const allUsers = useSelector(state => state.users.allUsers);
const loggedInUser = allUsers.filter(u => u._id === loggedInUserId)[0];
// currUser following list
const dispatch = useDispatch();
const navigation = useNavigation();
const checkFollow = (userId) => {
const isFollowed = loggedInUser.following.filter(f => f._id === userId).length !== 0;
return isFollowed;
}
const followUserHandler = async () => {
// setIsLoading(true);
if(checkFollow(user._id)){
showMessage({
message: `Your have unfollowed ${user.name}.`,
type: "warning",
duration: 3000,
icon: { icon: "warning", position: 'left' }
});
await dispatch(usersActions.unfollowUser(user))
} else {
showMessage({
message: `Your are now following ${user.name}.`,
type: "success",
duration: 3000,
icon: { icon: "success", position: 'left' }
});
await dispatch(usersActions.followUser(user))
}
// setIsLoading(false);
}
// check user._id is in following list
const [imageUri, setImageUri] = useState(`${ENV.apiUrl}/user/photo/${user._id}`);
const onImageErrorHandler = () => {
setImageUri(ENV.defaultImageUri)
}
return (
<View style={styles.container}>
<Image
source={{ uri: imageUri }}
onError={onImageErrorHandler}
style={styles.avatar}
/>
<View style={styles.content}>
<View style={styles.mainContent}>
<View style={styles.text}>
<Text
onPress={() => navigation.navigate('Home', { screen: 'UserProfile', params: { userId: user._id, name: user.name }})}
style={styles.name}
>
{ user.name + " " }
{
VerifiedUser.verifiedUsersId.includes(user._id) && <Octicons name="verified" size={18} color={Colors.brightBlue} />
}
</Text>
</View>
<Text style={styles.timeAgo}>
{ user.email }
</Text>
</View>
{ user._id !== loggedInUser._id && (
<View style={{ position: 'absolute', right: 0}} >
{ checkFollow(user._id) ? (
<TouchableOpacity
onPress={followUserHandler}
style={{ backgroundColor: Colors.brightBlue, padding: 10, borderRadius: 15 }}
>
{ isLoading ? (
<ActivityIndicator size="small" color="#fff" />
) : (
<Text style={{ color: '#fff' }} >UnFollow</Text>
) }
</TouchableOpacity>
) : (
<TouchableOpacity
onPress={followUserHandler}
style={{ backgroundColor: Colors.brightBlue, padding: 10, borderRadius: 15 }}
>
{ isLoading ? (
<ActivityIndicator size="small" color="#fff" />
) : (
<Text style={{ color: '#fff' }} >Follow</Text>
)}
</TouchableOpacity>
) }
</View>
) }
</View>
</View>
);
}
Example #6
| Source File: UserList.js From SocialApp-React-Native with MIT License | 4 votes |
|
UserList = (props) => {
const { item, followHandler } = props;
const [imageUri, setImageUri] = useState(`${ENV.apiUrl}/user/photo/${item._id}`)
const loggedInUserId = useSelector(state => state.auth.user._id);
const allUsers = useSelector(state => state.users.allUsers);
const loggedInUser = allUsers.filter(u => u._id === loggedInUserId)[0];
const dispatch = useDispatch();
const navigation = useNavigation();
const onImageErrorHandler = () => {
setImageUri(ENV.defaultImageUri);
}
const checkFollow = (userId) => {
const isFollowed = loggedInUser.following.filter(f => f._id === userId).length !== 0;
return isFollowed;
}
const followUserHandler = async () => {
if(checkFollow(item._id)){
followHandler(item._id);
showMessage({
message: `Your are already following ${item.name}.`,
type: "success",
duration: 3000,
icon: { icon: "success", position: 'left' }
});
} else {
await dispatch(usersActions.followFindPeople(item._id))
followHandler(item._id);
showMessage({
message: `Your are now following ${item.name}.`,
type: "success",
duration: 3000,
icon: { icon: "success", position: 'left' }
});
await dispatch(usersActions.followUser(item))
}
}
return (
<TouchableOpacity
onPress={() => navigation.navigate('UserProfile', {userId: item._id, name: item.name} )}
style={styles.card}
>
<Image
style={styles.userImage}
source={{ uri: imageUri }}
onError={onImageErrorHandler}
/>
<View style={styles.cardFooter}>
<View style={{ alignItems: "center", justifyContent: "center" }}>
<Text
onPress={() => navigation.navigate('UserProfile',{ userId: item._id, name: item.name} )}
style={{...styles.name, marginRight: 10}}
>
{item.name.length > 10 ? (
<>{item.name.substring(0,10)}... </>
) : (
<>{item.name + " "}</>
)}
{
VerifiedUser.verifiedUsersId.includes(item._id) && <Octicons name="verified" size={20} color={Colors.brightBlue} />
}
</Text>
<Text style={styles.position}>
{item.email.length > 15 ? (
<>{item.email.substring(0,15)}...</>
) : (
<>{item.email}</>
)}
</Text>
<TouchableOpacity style={styles.followButton}>
<Text
onPress={followUserHandler}
style={styles.followButtonText}>Follow</Text>
</TouchableOpacity>
</View>
</View>
</TouchableOpacity>
)
}
Example #7
| Source File: UserProfileScreen.js From SocialApp-React-Native with MIT License | 4 votes |
|
UserProfileScreen = (props) => {
const { route } = props;
const loggedInUserId = useSelector(state => state.auth.user._id);
const allUsers = useSelector(state => state.users.allUsers);
const loggedInUser = allUsers.filter(u => u._id === loggedInUserId)[0];
let userId;
if(route.params && route.params.userId){
userId = route.params.userId;
} else {
userId = useSelector(state => state.auth.user._id);
}
const users = useSelector(state => state.users.allUsers);
const posts = useSelector(state => state.posts.allPosts);
const currUser = users.filter(u => u._id === userId)[0];
const currUserPosts = posts.filter(p => p.postedBy._id === userId);
const [isRefreshing,setIsRefreshing] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [isFollowLoading, setIsFollowLoading] = useState(false);
const [imageUri, setImageUri] = useState('');
const dispatch = useDispatch();
const loadUsers = useCallback(async () => {
setIsRefreshing(true);
try {
await dispatch(usersActions.fetchUsers());
await dispatch(postsActions.fetchPosts());
} catch (err) {
console.log(err);
}
setIsRefreshing(false);
}, [dispatch, setIsLoading]);
const onImageErrorHandler = () => {
setImageUri(ENV.defaultImageUri)
}
const checkFollow = (userId) => {
const isFollowed = loggedInUser.following.filter(f => f._id === userId).length !== 0;
return isFollowed;
}
const followUserHandler = async () => {
let user = {...currUser};
delete user.created;
delete user.followers;
delete user.following;
// setIsFollowLoading(true);
if(checkFollow(user._id)){
showMessage({
message: `Your have unfollowed ${user.name}.`,
type: "warning",
duration: 3000,
icon: { icon: "warning", position: 'left' }
});
await dispatch(usersActions.unfollowUser(user))
} else {
showMessage({
message: `Your are now following ${user.name}.`,
type: "success",
duration: 3000,
icon: { icon: "success", position: 'left' }
});
await dispatch(usersActions.followUser(user))
}
// setIsFollowLoading(false);
}
const renderSectionOne = () => {
if(currUserPosts.length === 0 ){
return(
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', borderTopColor: '#c2c2c2', borderTopWidth: 1 }} >
<Text style={{ fontSize: 20, fontWeight: 'bold', marginTop: 25 }} >No Posts</Text>
{ currUser._id === loggedInUserId && (
<Button
style={{ backgroundColor: Colors.brightBlue, padding: 10, borderRadius: 25, marginTop: 15 }}
onPress={() => props.navigation.navigate('AddPost')}
>
<Text style={{ color: '#fff' }} >Create Post</Text>
</Button>
) }
</View>
)
}
return currUserPosts.map((post, index) => {
return (
<TouchableOpacity
key={index}
onPress={() => props.navigation.navigate('UserPosts', { userId: userId, postIndex: index, fromUserProfile: true })}
>
<View style={[{ width: (width) / 3 }, { height: (width) / 3 }, { marginBottom: 2 }, index % 3 !== 0 ? { paddingLeft: 2 } : { paddingLeft: 0 }]}>
<Image
style={{
flex: 1,
alignSelf: 'stretch',
width: undefined,
height: undefined,
backgroundColor: '#c2c2c2'
}}
source={
post.updated ? (
{ uri: `${ENV.apiUrl}/post/photo/${post._id}?${new Date(post.updated)}` }
) : (
{ uri: `${ENV.apiUrl}/post/photo/${post._id}` }
)
}
/>
</View>
</TouchableOpacity>
)
})
}
const renderSection = () => {
return (
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
{renderSectionOne()}
</View>
)
}
if(isLoading){
return (
<View style={styles.centered} >
<ActivityIndicator size='large' color={Colors.primary} />
</View>
);
}
let TouchableComp = TouchableOpacity;
if(Platform.OS === 'android' && Platform.Version >= 21){
TouchableComp = TouchableNativeFeedback;
}
return (
<Container style={styles.container} >
<Content
refreshControl={
<RefreshControl refreshing={isRefreshing} onRefresh={loadUsers} />
}
>
<View style={{ paddingTop: 20 }}>
{/** User Photo Stats**/}
<View style={{ flexDirection: 'row' }}>
{/**User photo takes 1/3rd of view horizontally **/}
<View
style={{ flex: 1, alignItems: 'center', justifyContent: 'flex-start' }}>
<Image
source={{ uri: imageUri || `${ENV.apiUrl}/user/photo/${currUser._id}?${new Date(currUser.updated)}` }}
onError={onImageErrorHandler}
style={{ width: 75, height: 75, borderRadius: 37.5, backgroundColor: "#c2c2c2" }}
/>
</View>
{/**User Stats take 2/3rd of view horizontally **/}
<View style={{ flex: 3 }}>
{/** Stats **/}
<View
style={{
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'flex-end'
}}
>
<View style={{ alignItems: 'center' }}>
<TouchableComp
background={ Platform.OS === 'ios' ? undefined : TouchableNativeFeedback.Ripple('#c2c2c2', true) }
onPress={() => props.navigation.navigate(
'UserPosts',
{ userId: userId, postIndex: 0, fromUserProfile: true }
)}
>
<View style={{ justifyContent: 'center', alignItems: 'center' }} >
<Text style={{ fontSize: 18 }} >{currUserPosts.length}</Text>
<Text style={{ fontSize: 12, color: 'grey' }}>Posts</Text>
</View>
</TouchableComp>
</View>
<View style={{ alignItems: 'center' }}>
<TouchableComp
background={ Platform.OS === 'ios' ? undefined : TouchableNativeFeedback.Ripple('#c2c2c2', true) }
onPress={() => props.navigation.navigate(
'UserStats',
{ activeTab: 0, currUser: currUser }
)}
>
<View style={{ justifyContent: 'center', alignItems: 'center' }} >
<Text style={{ fontSize: 18 }} >{currUser.followers.length}</Text>
<Text style={{ fontSize: 12, color: 'grey' }}>Followers</Text>
</View>
</TouchableComp>
</View>
<View style={{ alignItems: 'center' }}>
<TouchableComp
background={ Platform.OS === 'ios' ? undefined : TouchableNativeFeedback.Ripple('#c2c2c2', true) }
onPress={() => props.navigation.navigate(
'UserStats',
{ activeTab: 1, currUser: currUser }
)}
>
<View style={{ justifyContent: 'center', alignItems: 'center' }} >
<Text style={{ fontSize: 18 }} >{currUser.following.length}</Text>
<Text style={{ fontSize: 12, color: 'grey' }}>Following</Text>
</View>
</TouchableComp>
</View>
</View>
{/**
* Edit profile and Settings Buttons **/}
{ userId === loggedInUserId ? (
<View style={{ alignItems: 'flex-start', paddingTop: 10 }}>
<View
style={{ flexDirection: 'row' }}>
<Button
onPress={() => props.navigation.navigate('EditProfile')}
bordered
dark
style={{ flex: 1, marginLeft: 10, marginRight: 10, justifyContent: 'center', height: 30 }}
>
<Text>Edit Profile</Text>
</Button>
</View>
</View>
) : (
<View style={{ flexDirection: 'row', alignItems: 'flex-start', paddingTop: 10 }}>
<TouchableOpacity
style={{ flexDirection: 'row' }}>
<Button
onPress={followUserHandler}
bordered
dark
style={{ flex: 2, marginLeft: 10, marginRight: 10, justifyContent: 'center', height: 30 }}
>
{ checkFollow(currUser._id) ? (
<>
{ isFollowLoading ? (
<ActivityIndicator size="small" color="#fff" />
) : (
<Text style={{ color: 'black' }} >Unfollow</Text>
) }
</>
) : (
<>
{ isFollowLoading ? (
<ActivityIndicator size="small" color="#fff" />
) : (
<Text style={{ color: 'black' }} >Follow</Text>
) }
</>
) }
</Button>
</TouchableOpacity>
</View>
) }
{/**End edit profile**/}
</View>
</View>
<View style={{ paddingBottom: 10, paddingTop: 10 }}>
<View style={{ paddingHorizontal: 10 }} >
<Text style={{ fontWeight: 'bold', fontSize: 18 }}>
{currUser.name + " "}
{
VerifiedUser.verifiedUsersId.includes(currUser._id) && <Octicons name="verified" size={20} color={Colors.brightBlue} />
}
</Text>
{ currUser.about && (
<Text>{currUser.about} </Text>
) }
<Text>{currUser.email}</Text>
</View>
</View>
</View>
<View>
{renderSection()}
</View>
</Content>
</Container >
);
}
