A React Native mobile app for IDA Radio written in TypeScript. This is an unofficial, fan-made project, with the goal of teaching myself React Native and hopefully making a nice mobile app for IDA Radio in the process. IDA is an online community radio based in Tallinn & Helsinki, and they would appreciate any support.
- Prerequisites
- Getting Started
- Testing, Development And Deployment
- Issues & Contributing
- Usage & Design
- Data Fetching
- Live Stream & On-Demand
- Follow the React Native CLI quickstart instructions on setting up the development environment relevant to your development OS and target OS.
- Clone the repository
- Run
npm installto install dependencies - For OSX/IOS version,
cd iosinto the ios folder and runpod install - In the root folder run
npx react-native startto start the develoment server - Run
npx react-native run-iosto run the app in an iOS simulator - Run
npx react-native run-androidto run the app in an Android simulator - To run the app in a physical device, follow the instructions in React Native documentation relevant to your Development OS and mobile device.
- Run
npm run testto run tests. Tests written using Jest and React Native Testing Library. - The project uses Eslint and Prettier to maintain code quality. Pre-commit hook using Husky runs Eslint before commits.
- Github Actions run tests on pull requests to
developandmainbranches - For now there is no deployment pipeline in place. In the future Github Actions will be used to
- Deploy the app to beta environment whenever a feature branch is merged to
developbranch. - Deploy the app to production environment whenever
developbranch is merged tomainbranch.
- Deploy the app to beta environment whenever a feature branch is merged to
Some known issues are listed in the repo's Issues section. If you'd like to contribute, please fork the repository and create a feature branch based on develop branch. Pull requests are warmly welcome!
The app aims to mimic the design of the mobile version of the Ida Radio website. Other features are heavily inspired by the excellent NTS Live application.
The live view shows the currently airing shows in Tallinn and Helsinki. If the studios are offline, the next program is shown. Pressing the play icon starts the audio streams and displays the now playing bar at the bottom of the view, above the navigation bar.
The schedule view displays the current week's program schedule. Pressing on a shows name takes the user to the shows own view, where a description and latest episodes are listed.
A view to explore shows and episodes. By default, the latest shows are displayed and shows are listed alphabetically. The user may filter shows by a search query, by genres or by channel (all/tallinn/helsinki). Pressing the play icon on an episode's card view opens the Mixcloud iframe player for on-demand listening.
My Ida view will host the user's favorite shows, episodes and play history. Saved items are stored in AsyncStorage. Pressing the User icon in the top right corner navigates to Account view.
In Account view user may log in, create an account, change settings and view About Ida and About App sections.
The app fetches the data on Ida Radio's programming schedule, shows and episodes from Ida Radio's website's API. Now playing and programming schedule data are fetched hourly using Fetch API. Lists of shows and episodes are fetched using React Query. Applying search filters alters the fetch query's endpoint accordingly.
React Native Track Player is used to play the live broadcasts from Tallin and Helsinki. On-Demand shows are hosted in Mixcloud and played using an iframe in React Native Webview.