The Book of Spices

An educational app to help you learn about spices, built on top of react-native.

Built With

The project is built on top of react-native using the following major libraries:

  • wix/react-native-navigation - for a purely native navigation system
  • redux - for state management
  • lottie-react-native - for beautiful animations
  • react-native-animatable - for animating text and views
  • react-native-swiper - for swiping through images
  • lodash - for many utility stuffs

Use cases

This app can serve you a base for any educational application. You can easily change contents from very simplified JS object based database. The test module will automatically generate random questionnaire with multiple choice options. Please feel free to make pull requests, issues and improvement suggestions.


Learning Views


In learning view you can review all the spices and can press on them to view the detailed screen. All the data are coming from src/DB/spices.js.

Testing Skill Views


In Test view, there will be multiple choice options with randomly generated questionnaire. The questionnaire and multiple choice options are prepared using some bespoke utility function (available on src/utils/preapreQuestionnaire.js) with help from lodash library. The animations are done using lottie-react-native and react-native-animatable. Also there is a little drama added for calculating the result! ?


Install dependencies with yarn.

yarn install

For starting the project or starting the react native bundler, use the following command:

yarn start

Then you can run the app on ios/android using react-native commands:

react-native run-ios
react-native run-android

Make sure you have nodeJS, yarn, react-native-cli, Xcode, and Android Studio installed on your machine.


Please do not use arrow functions for react's lifecycle functions like componentDidMount, componentWillMount etc. This breaks the hot module patching for regarding screens. It's a bug from wix/react-native-navigation library.

// incorrect
componentDidMount = () => {
  // do something

// correct
componentDidMount() {
  // do something