{"id":25827552,"url":"https://github.com/hanse/react-native-fagkveld","last_synced_at":"2026-05-11T13:11:22.665Z","repository":{"id":77572532,"uuid":"134590384","full_name":"hanse/react-native-fagkveld","owner":"hanse","description":"Intern fagkveld Itera","archived":false,"fork":false,"pushed_at":"2018-06-05T13:55:18.000Z","size":1078,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-28T20:49:50.039Z","etag":null,"topics":["javascript","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/hanse.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":"2018-05-23T15:32:26.000Z","updated_at":"2023-03-08T04:01:55.000Z","dependencies_parsed_at":"2023-05-28T07:45:43.727Z","dependency_job_id":null,"html_url":"https://github.com/hanse/react-native-fagkveld","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hanse/react-native-fagkveld","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hanse%2Freact-native-fagkveld","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hanse%2Freact-native-fagkveld/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hanse%2Freact-native-fagkveld/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hanse%2Freact-native-fagkveld/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hanse","download_url":"https://codeload.github.com/hanse/react-native-fagkveld/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hanse%2Freact-native-fagkveld/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32896069,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-10T13:40:02.631Z","status":"online","status_checked_at":"2026-05-11T02:00:05.975Z","response_time":120,"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":["javascript","react-native"],"created_at":"2025-02-28T16:34:41.308Z","updated_at":"2026-05-11T13:11:22.653Z","avatar_url":"https://github.com/hanse.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-fagkveld\n\nMake a difference making a different application\n\n## Get started\n\n- Be on [`node`](https://nodejs.org/en/) \u003e version 8 and have [`yarn`](https://yarnpkg.com/lang/en/) installed\n- Follow the Getting Started guide in the React Native [documentation](https://facebook.github.io/react-native/docs/getting-started.html)\n  - Click on \"Building Projects with Native Code\"\n  - Choose the correct \"Development OS\" and \"Target OS\"\n  - Follow the steps you need to follow until you get to \"Creating a new application\"\n\n## Get the code and run the app\n\n- Clone this repository\n- Run `yarn` from your command line and then run `yarn start`\n  - `yarn start` will start the Metro bundler that bundles the JavaScript\n- Run `yarn ios` for iOS or run `yarn android` for Android in a new shell\n\nYou can change iOS Simulator by adding the flag `--simulator \"iPhone X\"`.\n\nIf you want to run the application on your own phone, follow the directions [here](https://facebook.github.io/react-native/docs/running-on-device.html)\n\nTo debug your application do the Shake Gesture (\u003ckbd\u003e^⌘Z\u003c/kbd\u003e on iOS Simulator) and press `Debug JS Remotely`. This will open the Chrome DevTools.\n\n## Make a difference making a different MAD application\n\nWe have a simple skeleton for something that could be very cool. We have two screens driven\nby tab-based navigation ([react-navigation](https://reactnavigation.org/)),\nnamely an events screen and a profile screen. We also have an underlying auth and events implementation against the MAD API.\n\nWe can log in to the application in the profile screen with our mad.itera.no user.\nThere, we can see the department we belong to in the company, and we can log out again.\n\nThe events screen show all the events we have. You need to log in to see more events.\nWhen you click on an event, you are taken to the JSON payload of that event.\n\n\u003cimg src=\"https://github.com/Hanse/react-native-fagkveld/blob/master/docs/screenshot-1.png\" width=\"200\"\u003e \u003cimg src=\"https://github.com/Hanse/react-native-fagkveld/blob/master/docs/screenshot-2.png\" width=\"200\"\u003e \u003cimg src=\"https://github.com/Hanse/react-native-fagkveld/blob/master/docs/screenshot-3.png\" width=\"200\"\u003e\n\n## Tasks\n\nThe tasks are listed below in random order. You can start wherever you want. Some tasks are easier than others.\n\n### Sorting events on date\n\nCurrently, events are not sorted on date. The upcoming event is shown at the bottom of the list. Sort events in a\nsuitable place in `Events.js`.\n\n### Improve the event list\n\nThe list of events is not really that interesting. It only shows the title of the event. Can you make it more interesting?\nSome suggestions are:\n\n- Show date in the event cell\n- Show event type in the event cell\n- Style it differently. Be creative!\n\nA bit more advanced\n\n- Filter the list on event type (MEETUP or CONFERENCE)\n- Add a search bar\n\nDo you have any other suggestions for that page? Implement them!\n\n### Add icons to the tab bar\n\nThe tab bar is missing icons. Can you add some relevant icons? Hint: Look [here](https://reactnavigation.org/docs/en/tab-based-navigation.html)\nfor more information about changing the appearance of the tab bar. [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) contains many icons, and you'll also learn to link native libraries.\n\n### Add an image to the profile\n\nUse [Adorable.io](http://avatars.adorable.io/#demo) to add a cute image to the profile screen. `\u003cImage /\u003e` supports external URIs through the `source` prop!\n\n![Avatar](https://api.adorable.io/avatars/285/Mad@adorable.png)\n\n### Implement the event detail screen\n\nThe event detail screen is a JSON dump of the event. We have a lot of information we can use here. We have a description\nof the event, a date, event type, public or not, speakers, open for registration etc. Use this information and present it in\na clean way to the end user.\n\n```javascript\n{\n  \"id\": 21,\n  \"name\": \"Fagkveld: React Native\",\n  \"date\": \"2018-06-05\",\n  \"description\": \"**Kursbeskrivelse**\\r\\n\\r\\nKurset vil starte med en kort introduksjon til React Native. Hva er det, hvorfor bør man bruke det og hvor passer det i React-landskapet? Deretter vil vi se på hvordan man praktisk kan komme i gang ved å titte på en eksempelapplikasjon. Til slutt skal vi dykke litt dypere ned i React Native-arkitekturen og se litt på hvordan det henger sammen.\\r\\n\\r\\nNår vi er ferdige med å snakke er det fritt fram for å lage sin egen app basert på et lite skjelett og et enkelt API. \\r\\n\\r\\n**Hva bør gjøres før du kommer:**\\r\\n\\r\\nGå til [facebook.github.io/react-native/docs/getting-started.html](https://facebook.github.io/react-native/docs/getting-started.html) og trykk på “Building Projects with Native Code”. Følg de ulike stegene for ditt operativsystem og de plattformene du ønsker å nå (iOS og/eller Android). Ta med egen mobil + kabel om du vil kjøre på din egen enhet!\",\n  \"eventType\": \"MEETUP\",\n  \"foodChoices\": [],\n  \"beverageChoices\": [],\n  \"isPublic\": false,\n  \"isPublished\": true,\n  \"speakers\": [\n    {\n      \"id\": 49,\n      \"firstName\": \"Sindre\",\n      \"lastName\": \"Magnussen\",\n      \"department\": \"TCC_TECHNOLOGY\",\n      \"dateJoined\": \"2017-02-06T08:26:54.052102Z\"\n    },\n    {\n      \"id\": 155,\n      \"firstName\": \"Hans-Kristian\",\n      \"lastName\": \"Koren\",\n      \"department\": \"TCC_TECHNOLOGY\",\n      \"dateJoined\": \"2017-03-07T07:17:54.399539Z\"\n    },\n    {\n      \"id\": 204,\n      \"firstName\": \"Andreas\",\n      \"lastName\": \"Drivenes\",\n      \"department\": \"TCC_TECHNOLOGY\",\n      \"dateJoined\": \"2018-02-12T08:07:28.163120Z\"\n    }\n  ],\n  \"talks\": [],\n  \"timeslots\": [],\n  \"startTime\": null,\n  \"endTime\": null,\n  \"registrationDeadline\": null,\n  \"isRegistrationOpen\": true\n}\n```\n\nExperiment with the [style](https://facebook.github.io/react-native/docs/style.html) and [layout](https://facebook.github.io/react-native/docs/flexbox.html) properties and maybe some of the native components included in React Native listed in the sidebar of [the docs](https://facebook.github.io/react-native/docs/getting-started.html) if it makes sense.\n\n- Show the event title and description\n- Add a `\u003cButton /\u003e` to register for the event\n- Maybe you can show the speakers in a list and open their profiles in a new screen when tapping on them?\n  - Use a `\u003cFlatList /\u003e` or just use a list of `\u003cView /\u003e`s: `speakers.map(speaker =\u003e \u003cView /\u003e)`.\n  - Use `navigation.navigate()` to enter the new screen (remember to define the screen in `screens/index.js`!)\n- [Add some buttons](https://reactnavigation.org/docs/en/header-buttons.html) to the navigation header?\n\n### Change profile\n\nImplement a \"Change Profile Screen\" where the users can update their profiles.\n\n- Create a new Edit Profile View or change the Profile screen (screens defined in `screens/index.js`)\n- Add a couple of [`\u003cTextInput /\u003es`](https://facebook.github.io/react-native/docs/textinput.html) and maybe a [`\u003cPicker /\u003e`](https://facebook.github.io/react-native/docs/picker.html) for the department.\n- Add a function for dealing with the update profile endpoint in `services/mad.js`.\n  - Can be found by inspecting network traffic on [mad.itera.no](https://mad.itera.no) 😃\n\n### Add event to the native calendar\n\nUse [react-native-calendar-events](https://github.com/wmcmahan/react-native-calendar-events) to add events from the MAD\napplication to your native calendar on the OS.\n\n### Play with the Animated API\n\nThere is a \u003cFade /\u003e component in the components folder that provides a basic fade animation to its children. It is used on the Profile screen. Try changing the animations or add new ones. The [documentation](https://facebook.github.io/react-native/docs/animations.html) covers the Animated API pretty good.\nIn the [animated-event](https://github.com/Hanse/react-native-fagkveld/tree/animated-event) branch there is an example of using `Animated.event` to animate based on scroll position.\n\n![](http://g.recordit.co/TOnmjXoo1G.gif)\n\nThe possibilities are endless. Implement and do whatever you want!\n\n## Other Resources\n\n[awesome-react-native](https://github.com/jondot/awesome-react-native) provides a comprehensive list of React Native resources.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhanse%2Freact-native-fagkveld","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhanse%2Freact-native-fagkveld","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhanse%2Freact-native-fagkveld/lists"}