Make a simple math learning app with React Native
- Tram Ho
Hi guys, perhaps the fastest way to learn something new, is nothing more than starting to do it right away. For react native too, after 1-2 days spent reading its docs, I created a simple app to help elementary school kids learn math in a less boring way. The app is still quite sketchy, but using it to access React native isn’t too bad. So today I will write a tutorial to help you create your first app
1) Setting
First, to start with React native, you must install it, follow the instructions of the following link is ok: https://reactnative.dev/docs/environment-setup, with test device, I choose the simulator so must install Android Studio (or you can use Genymotion -> not recommended), if you choose the real machine, the test will be much more intuitive (this way is recommended)
Install command npx react-native init <Tên app của bạn>, simple is not it. Now it starts, let’s get here
2) Create an interface
My App will have only 1 screen only, so the interface will also be extremely simple
As you can observe, I divide the layout into 3 parts: Header, Body and Footer, so my code will be arranged like this.
1 2 3 4 5 6 7 8 | return ( <View style={styles.container}> <Header /> <Body /> <Footer /> </View> ); |
With each Component, I will code separately, so that later if I want to develop more, it is also more comfortable
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | const Header = () => { return ( <View style={styles.header}> <Text style={styles.point}>{point} Điểm</Text> </View> ); }; const Body = () => { return ( <View style={styles.body}> {statusQuiz.isStart ? ( <Text style={styles.content}> {a} + {b} = {result} ? </Text> ) : ( <TouchableHighlight style={styles.buttonStart} onPress={() => pressStart()}> <Text style={styles.textButton}>{statusQuiz.content}</Text> </TouchableHighlight> )} </View> ); }; const Footer = () => { return ( <View style={styles.footer}> <TouchableHighlight style={[styles.buttonLeft, styles.buttonFooter]} onPress={() => pressAnswer('right')}> <Text style={styles.textButton}>ĐÚNG</Text> </TouchableHighlight> <TouchableHighlight style={[styles.buttonRight, styles.buttonFooter]} onPress={() => pressAnswer('wrong')}> <Text style={styles.textButton}>SAI</Text> </TouchableHighlight> </View> ); }; |
If you’ve read this (and have done React), then recognize it and say: “Oh, it’s like Reactjs, it’s not that different”. That’s right, it’s not that different from React in terms of syntax and Component usage. However, it still has its characteristics.
Example: Card View in RN will be seen as div tag in React, tag Text is the p tag (it generally contains letters), Tag TouchableHighlight like div tag combined with button (ie clickable and style it).
In RN there is no className or class, but instead we have styles to customize the look of the app. Compared to React, the style of RN used is quite similar to styled-components in React. However, there is still more or less obvious difference, you can feel directly through the code below
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | const windowWidth = Dimensions.get('window').width; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#0099ff', }, header: { flex: 1, alignItems: 'center', paddingTop: 20, }, point: { color: '#fff', fontSize: 40, fontWeight: 'bold', }, body: { width: windowWidth, flex: 1, justifyContent: 'center', alignItems: 'center', }, content: { color: '#fff', fontSize: 50, fontWeight: 'bold', }, buttonStart: { color: '#FFF', backgroundColor: '#f50093', alignItems: 'center', justifyContent: 'center', paddingHorizontal: 30, marginVertical: 20, borderRadius: 10, }, footer: { width: windowWidth, flex: 1, flexDirection: 'row', alignItems: 'flex-end', paddingBottom: 20, }, buttonFooter: { height: 50, width: windowWidth / 2 - 15, alignItems: 'center', justifyContent: 'center', borderRadius: 10, paddingVertical: 30, }, buttonLeft: { marginLeft: 10, backgroundColor: '#029911', }, buttonRight: { marginHorizontal: 10, backgroundColor: '#d90804', }, textButton: { fontWeight: 'bold', fontSize: 30, color: '#FFF', }, }); |
Ingredients like StyleSheet, View good Text We will import directly from the RN
1 2 3 4 5 6 7 8 | import { StyleSheet, View, Text, Dimensions, TouchableHighlight, } from 'react-native'; |
It’s simple to do the interface right.
3) Function
In this app, I will use React Hook for the convenience, I will declare the score, the algorithm to randomize the calculation and the results.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | const [statusQuiz, setStatusQuiz] = useState({ isStart: false, content: 'BẮT ĐẦU', }); const [point, setPoint] = useState(0); const [a, setA] = useState(randomNumber(0, 10)); const [b, setB] = useState(randomNumber(0, 10)); const [result, setResult] = useState(calculateResult()); function calculateResult() { const isTrue = Math.floor(Math.random() * 2); if (isTrue === 0) { return a + b; } const isBigger = Math.floor(Math.random() * 2); let resultFalse = 0; if (isBigger === 0) { resultFalse = a + b + Math.floor(Math.random() * 5); } else { resultFalse = a + b - Math.floor(Math.random() * 5); } return resultFalse < 0 ? 0 : resultFalse; } function randomNumber(to, from) { return Math.floor(Math.random() * from) + to; } useEffect(() => { setA(randomNumber(1, 9)); setB(randomNumber(1, 9)); setResult(calculateResult()); }, [point]); function pressAnswer(type) { const isTrue = a + b === result; if ((type === 'wrong' && isTrue) || (type === 'right' && !isTrue)) { setPoint(0); setStatusQuiz({ isStart: false, content: 'SAI RỒI! BẠN CÓ MUỐN LÀM LẠI KHÔNG?', }); return; } if ((type === 'wrong' && !isTrue) || (type === 'right' && isTrue)) { return setPoint(point + 1); } } function pressStart() { setStatusQuiz({ isStart: true, content: '', }); } |
The algorithm and ideas are quite easy to understand and simple, right. Just reassemble and we have a complete app to dabble on.
4) Demo When entering the app it will look like this
Click “Start” to get started
If you answer correctly, your score will go up
One sentence incorrect, the score will return to 0 and the message will appear
App is just that, but it’s enough for my nephew to learn math all afternoon (yaoming)
Thank you for watching my post. If there is something wrong and you would like to add additional comments, please leave a comment below to let me know, thank you: 3