StoryApps for Android and iOS
Two digital book apps made by similar technology. React Native helped to release for both Android and iOS.
- Miss Moffatt's Ring for iOS: https://apple.co/2Ct61wk
- Miss Moffatt's Ring for Android: https://bit.ly/2FxwFJn
- Helping Lily for iOS: https://apple.co/2HPnuW5
- Helping Lily for Android: https://bit.ly/2U9Laep
The book shows the pages of the story. Navigation can be done by swiping through pages or through the menu. In addition to the text the book plays a narration voice and highlights the word in the text which is pronounced currently. There is also a small game at the end of the story and some utility screens with the information and settings.
The apps were made using React Native to be able to release for both Android and iOS from one codebase. On iOS UIPageController was used from the native side to provide a polished page turn animation. On Android a simple navigation was used. MobX was chosen for its 'magic' to provide a store and React integration with a minimum code. Each different kind of screen was represented by a React component (for ex:
Ending) and each screen could receive a JSON config with some settings for the particular instance. The order of screens in the app was defined by the chain of JSONs:
['logo.json', 'menu.json', 'page-1.json', 'page-2.json'] etc. This chain of screens was defined in the main config file of the app.
Each config JSON could be changed from within the app. An editor could be displayed over the screen component. The editor simply rendered the contents of config JSON and provided a way to change it depending on the type of the parameter. When some parameter was changed the app sent a request to (a bit customized) RN packager to save the changes to the disk. The visual parameters could be tweaked in the app simply by tapping up/down buttons.