{"id":15827248,"url":"https://github.com/victor-lis/message-app-ui","last_synced_at":"2026-04-15T06:32:58.540Z","repository":{"id":219201192,"uuid":"748426009","full_name":"Victor-Lis/Message-App-UI","owner":"Victor-Lis","description":null,"archived":false,"fork":false,"pushed_at":"2024-01-27T22:17:52.000Z","size":233,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-12T10:12:03.025Z","etag":null,"topics":["react-native","tsx","ui"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Victor-Lis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-25T23:58:46.000Z","updated_at":"2024-04-04T19:41:00.000Z","dependencies_parsed_at":"2024-01-26T02:27:42.725Z","dependency_job_id":"9c46a1a3-7bda-4c73-a9c9-1b1b416a8b86","html_url":"https://github.com/Victor-Lis/Message-App-UI","commit_stats":{"total_commits":8,"total_committers":2,"mean_commits":4.0,"dds":0.5,"last_synced_commit":"fc366638dbc55b078a186ecabb73a022a9360c96"},"previous_names":["victor-lis/message-app-ui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Victor-Lis/Message-App-UI","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Victor-Lis%2FMessage-App-UI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Victor-Lis%2FMessage-App-UI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Victor-Lis%2FMessage-App-UI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Victor-Lis%2FMessage-App-UI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Victor-Lis","download_url":"https://codeload.github.com/Victor-Lis/Message-App-UI/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Victor-Lis%2FMessage-App-UI/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31829960,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T18:05:02.291Z","status":"online","status_checked_at":"2026-04-15T02:00:06.175Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-native","tsx","ui"],"created_at":"2024-10-05T10:02:32.141Z","updated_at":"2026-04-15T06:32:58.517Z","avatar_url":"https://github.com/Victor-Lis.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Message App UI \n\nHonestamente minha ideia inicial nem era postar esse \"projeto\" ou dar esse nome, acabei apenas vendo o vídeo [Flatlist com Scroll Inverso no React Native](https://www.youtube.com/watch?v=fpAlf1vPCE4\u0026t=60s) do [Rodrigo Gonçalves](https://www.youtube.com/@orodrigogo) e como migrei do JS para o TS recemente achei que seria um projeto simples e bacana para fazer essa \"passada\" em React Native.\n\nDe fato consigo ver muitas vantagens em trabalhar com TS/TSX desde a facilidade na hora de entender a arquitetura do projeto, segurança, entender melhor a função de cada variável, entre outras utilizadades... \n\n## Aprendizados\n- Trabalhar com TS em React Native;\n\n\n## Message Component\nEmbora esse trecho não tenha sido falado no vídeo, eu acabei construindo esse componente para ir testando o TS/TSX e já vinha criando essa opnião. \n\nAgora consolidei, realmente o TS facilita bastante nesse trabalho com arrays e objetos, sendo mais fácil acessar os elementos dentro deles, nesse caso passei via props um elemento de um array e TS facilitou acessar suas propriedades.\n\n```javascript\nimport { View, Text, StyleSheet, StyleProp, TextStyle } from \"react-native\";\nimport { MessageProps } from \"../../@types/message\";\n\nexport default function Message(\n{\n    item, \n    messageStyle\n}:{\n    item: MessageProps,\n    messageStyle: StyleProp\u003cTextStyle\u003e,\n}) {\n\n  return (\n    \u003cText\n      style={[\n        styles.message,\n        messageStyle,\n      ]}\n    \u003e\n      {item.message}\n    \u003c/Text\u003e\n  );\n}\n\nconst styles = StyleSheet.create({\n})\n```\n\n\n## Screenshots\n\n### Enviando mensagem\n\u003cdiv align=\"center\"\u003e\n    \u003cimg height=\"50%\" src=\"https://github.com/Victor-Lis/Message-App-UI/blob/master/project-images/UI1.jpg\" alt=\"Enviando Mensagem\"\u003e\n\u003c/div\u003e\n\n### Recebendo mensagem\n\u003cdiv align=\"center\"\u003e\n    \u003cimg height=\"50%\" src=\"https://github.com/Victor-Lis/Message-App-UI/blob/master/project-images/UI2.jpg\" alt=\"Recebendo Mensagem\"\u003e\n\u003c/div\u003e\n\n## Autores\n\n- [@Victor-Lis](https://www.github.com/Victor-Lis)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvictor-lis%2Fmessage-app-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvictor-lis%2Fmessage-app-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvictor-lis%2Fmessage-app-ui/lists"}