Creating a React Native UI component Library

Abstract

Opinnäytetyön tarkoituksena oli luoda yksityinen React Native UI-komponenttikirjasto käyttäen jo julkaistun mobiilisovelluksen komponentteja. Toimeksiantajalla oli tarve luoda uusia mobiilisovelluksia samankaltaisilla ominaisuuksilla, joten jo kehitettyjen komponenttien tuominen kirjastoon uudelleen käyttöä varten nähtiin hyödylliseksi.

Kirjaston kehittämiseen käytetyt pääteknologiat oli jo määritelty julkaistussa mobiilisovelluksessa. Näitä olivat TypeScript, React Native ja Expo. Sen lisäksi keskeinen työkalu oli Storybook, jota tarvittiin komponenttien renderöintiin kehityksen aikana. Komponentit testattiin käyttäen Jestiä. Kirjaston valmistuttua se julkaistiin yksityisenä pakettina GitLabissa.

Opinnäytetyön tuloksena oli julkaistu kirjasto, jossa oli 16 komponenttia. Kaikki tärkeimmät vaatimukset täytettiin, sisältäen kontrolloidun pääsyn kirjastoon sekä komponenttien tyylien muokattavuuden. Dokumentaatio luotiin sekä kirjaston käyttäjille että mahdollisille tuleville kirjaston kehittäjille, mahdollistaen kirjaston laajentamisen uusilla komponenteilla tulevaisuudessa.

The goal of the thesis was to create a private React Native UI component library using the components from an already-published mobile application. The commissioner had a need to create new applications with similar features, so it was seen beneficial to create a library so that the existing components could easily be reused.

The main technologies used to develop the library were already defined in the mobile application, including TypeScript, React Native, and Expo. An important addition was Storybook that was needed to render the components in isolation during the development. The components were tested using Jest. After the library was ready, it was published as a private package in GitLab.

As a result, a library with 16 components was published. The main requirements, including controlled access to the library and customizable styles, were achieved. Documentation was written for the users of the library as well as for possible future developers, enabling the possibility of adding more components in the future.