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

by React Native Example

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.

Walkthrough

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! ?

Development

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.

Caution

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
}

GitHub