Discussions of Social Media template created in React Native framework by Murali Web World – Muralidharan
Social Media Android app template using react-native
- This topic has 5 replies, 1 voice, and was last updated 2 weeks ago by Murali.
-
AuthorPosts
-
December 16, 2021 at 6:04 pm #88MuraliKeymaster
Social Media template with live chat using react-native, react-navigation, AWS appsync client (offline and online modes), APOLLO client, Amplify, Cognito, graphql, NodeJS, javascript
This app allows user to publish social media like activities, upload images, live chat for every activity with live graphql subscription, offline content storage using AWS appsync. It uses react context provider instead of redux store to pass credentials to child elements. It also uses withApollo to pass AWSappsync client downstream to all child elements
To install, it requires AWS Amplify CLI to create required AWS appsync setup with authorization using cognito and other dynamodb tables. Please refer schema.graphql to create required dynamodb table and modify as per your requirement. Some of details sensitive credentials are removed in amplify folder, it must be setup as per your AWS credentials using Amplify CLI
Demo Download this app
https://play.google.com/store/apps/details?id=com.indiacities.chennaicommunityforumBefore proceeding with below build app procedure, please refer react native documents to install react native app and replace/modify src and android folder by copying files from this repository
#Procedure to build appInstall Amplify CLI and configure
npm install -g @aws-amplify
amplify configureInstalling this repository
please refer react native documents to install react native app and replace/modify src and android folder by copying files from this repository
Install dependencies
npm installDelete the amplify folder
Initialize a new Amplify project
amplify initAdd Authentication
amplify add auth
(Configure using cognito with username as email address and also third party logins like faceboook)Add API
amplify add api(Choose Cognito User Pools as the authentication type(read write update delete) and also API for read only)
(When prompted for the GraphQL schema, use the following schema:)
type Usermadras @aws_api_key @aws_cognito_user_pools
@model
@auth(rules: [{ allow: owner, operations: [create, update, delete] },{allow:private, operations:[read]},{allow:public, operations:[read]}]) {
id: ID!
username: String!
useravatar: String
bio: String
website: String
location: String
activityidlikes: [String]
chatrooms: [RoomLinkmadras] @connection(name: “UserLinksmadras”)
messages: [Messagemadras] @connection(name: “UserMessagesmadras”)
createdAt: String
updatedAt: String
comments: [Commentmadras] @connection(keyName: “byUsermadras”, fields: [“id”])
}type PushNotificationsubscribersmadras @aws_cognito_user_pools
@model
@auth(rules: [{ allow: owner, operations: [create, update, delete]},{allow:private, operations:[read, create]},{allow:public, operations:[read, create]}]) {
id: ID!
subscription: String
tempfield: String
createdAt: String
updatedAt: String
}type UserNotificationsmadras @aws_cognito_user_pools
@model
@auth(rules: [{ allow: owner, ownerField: “userID”, operations: [create, update, delete] }]) {
id: ID!
userID: ID!
messages: String
readstatus: Boolean
createdAt: String
updatedAt: String
}type Chatroommadras @aws_cognito_user_pools
@model(
mutations: { create: “createRoommadras”, update: “updateRoommadras”, delete: “deleteRoommadras” }
queries: { get: “getRoommadras”, list: “listRoomsmadras” }
subscriptions: null
)
@auth(rules: [{ allow: owner, ownerField: “memberids” , operations: [create, update, delete, read]}]) {
id: ID!
messages: [Messagemadras] @connection(name: “RoomMsgsmadras”, sortField: “createdAt”)
associated: [RoomLinkmadras] @connection(name: “AssociatedLinksmadras”)
name: String!
members: [String!]!
memberids: [String!]!
ownerId: String
Moderators: [String]
createdAt: String
updatedAt: String
}type Messagemadras @aws_cognito_user_pools
@model(subscriptions: null, queries: null)
@auth(rules: [{ allow: owner, ownerField: “authorId”, operations: [create, update, delete] }]) {
id: ID!
author: Usermadras @connection(name: “UserMessagesmadras”, keyField: “authorId”)
authorId: String
authorName: String!
authorImage: String!
content: String!
chatroom: Chatroommadras! @connection(name: “RoomMsgsmadras”)
messageRoomId: ID!
messageChatroomId: ID!
createdAt: String
updatedAt: String
}type RoomLinkmadras @aws_cognito_user_pools
@model(
mutations: { create: “createRoomLinkmadras”, update: “updateRoomLinkmadras”, delete: “deleteRoomLinkmadras” }
queries: { get: “getRoomlinkmadras”, list: “listRoomlinkmadras” }
subscriptions: null
)
@auth(rules: [{ allow: owner, ownerField: “members”, operations: [create, update, delete] }]) {
id: ID!
user: Usermadras! @connection(name: “UserLinksmadras”)
roomLinkUserId: ID
chatroom: Chatroommadras! @connection(name: “AssociatedLinksmadras”)
roomLinkChatroomId: ID!
chatroomName: String
createdAt: String
updatedAt: String
}type Blogmadras @aws_api_key @aws_cognito_user_pools @model
@auth(rules: [{ allow: owner, operations: [create, update, delete] },{allow:private, operations:[read]},{allow:public, operations:[read]}]) {
id: ID!
name: String!
posts: [Postmadras] @connection(keyName: “byBlogmadras”, fields: [“id”])
}type Postmadras @aws_api_key @aws_cognito_user_pools @model @key(name: “byBlogmadras”, fields: [“blogID”], queryField: “byBlogmadras”)
@auth(rules: [{ allow: owner, operations: [create, update, delete] },{allow:private, operations:[read]},{allow:public, operations:[read]}]) {
id: ID!
title: String!
content: String
blogID: ID!
blog: Blogmadras @connection(fields: [“blogID”])
comments: [Commentmadras] @connection(keyName: “byPostmadras”, fields: [“id”])
}type Groupmadras @aws_api_key @aws_cognito_user_pools @model
@auth(rules: [{ allow: owner, operations: [create, update, delete] },{allow:private, operations:[read]},{allow:public, operations:[read]}]) {
id: ID!
name: String
groupslug: String
content: String
description: String
groupImage: String
activities: [Activitymadras] @connection(keyName: “byGroupmadras”, fields: [“id”])
}type Activitymadras @aws_api_key @aws_cognito_user_pools @model
@key(name: “orderbyupdatedIDmadras”, fields: [“sorTid”, “updatedAt”], queryField: “orderbyupdatedIDmadras”)
@auth(rules: [{ allow: owner, operations: [create, update, delete] },{allow:private, operations:[read,update]},{allow:public, operations:[read]}]) {
id: ID!
sorTid: ID!
title: String
slug: String
content: String
contentLowercase: String
groupID: ID!
likeids: [Int]
group: Groupmadras @connection(fields: [“groupID”])
authorId: ID!
authorName: String
userdetails: Usermadras @connection(fields:[“authorId”])
authorImage: String
activityImage: String
createdAt: AWSDateTime
updatedAt: AWSDateTime
}type Commentmadras @aws_api_key @aws_cognito_user_pools @model(subscriptions: null)
@key(name: “byPostmadras”, fields: [“postID”, “content”], queryField: “byPostmadras”)
@key(name: “byUsermadras”, fields: [“authorId”], queryField: “byUsermadras”)
@auth(rules: [{ allow: owner, operations: [create, update, delete] },{allow:private, operations:[read]},{allow:public, operations:[read]}]){
id: ID
postID: ID!
post: Postmadras @connection(fields: [“postID”])
content: String!
authorId: ID!
authorName: String!
userdetails: Usermadras @connection(fields:[“authorId”])
authorImage: String!
createdAt: String
updatedAt: String
}type Subscription @aws_api_key @aws_cognito_user_pools {
onCreateRoomLinkmadras(roomLinkUserId: ID!): RoomLinkmadras
@aws_subscribe(mutations: [“createRoomLinkmadras”])
onDeleteRoomLinkmadras(roomLinkUserId: ID!): RoomLinkmadras
@aws_subscribe(mutations: [“deleteRoomLinkmadras”])
onCreateUsernotificationmadras(userID: ID!): UserNotificationsmadras
@aws_subscribe(mutations: [“createUserNotificationsmadras”])
onDeleteUserNotificationmadras(userID: ID!): UserNotificationsmadras
@aws_subscribe(mutations: [“deleteUserNotificationsmadras”])
onCreateMessagemadras(messageRoomId: ID!,messageChatroomId: ID!): Messagemadras
@aws_subscribe(mutations: [“createMessagemadras”])
onDeleteMessagemadras(messageRoomId: ID!,messageChatroomId: ID!): Messagemadras
@aws_subscribe(mutations: [“deleteMessagemadras”])
onCreateCommentmadras(postID: ID): Commentmadras
@aws_subscribe(mutations: [“createCommentmadras”])
onDeleteCommentmadras(postID: ID): Commentmadras
@aws_subscribe(mutations: [“deleteCommentmadras”])
}
8.Run the push command to create the resources in your account:
amplify push9. Run the project as per react native cli instructions standalone using
npx react-native start and npx react-native run-android simultaneously in two terminals.November 26, 2024 at 6:46 pm #911MuraliKeymastertest 2.04 version PNFPB reply forum topic test
November 26, 2024 at 6:46 pm #912November 26, 2024 at 6:47 pm #914November 26, 2024 at 6:47 pm #916MuraliKeymastertest678
-
AuthorPosts
- You must be logged in to reply to this topic.