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
}
