内容简介:Covid-19 changed our way of life since the start of 2020 — a year some of us want to fast forward like a button on that TV remote. That said, self-isolating seems to be the best thing you can do right now, and thus, in isolation ourselves, we came up with
Covid-19 changed our way of life since the start of 2020 — a year some of us want to fast forward like a button on that TV remote. That said, self-isolating seems to be the best thing you can do right now, and thus, in isolation ourselves, we came up with a fun, simple React Native app idea.
The app is all about how long you have been quarantining. As a user, you input the date when you started isolating and the app is going to display a fun message to tell you how far you have come in the quarantine “game”.
That said, apart from being fun, this tutorial is going to show you how to use the latest SDK version 37.x.x.
of Expo to build a demo app. So, you will learn:
- How to use Expo font hook ;
- How to use a date time picker modal to select a date;
- Use Moment.js to convert the data input provided by the user and calculate the difference between the current date.
Here is a sneak peek of what we intend to build in this tutorial:
You can find the complete code for this tutorial at this GitHub repo .
Create a New Expo App
Start by creating a new Expo app at your favorite side-projects location in your local development environment. Run the following command from a new terminal window to generate a new React Native app using expo-cli
.
npx expo-cli init DaVinciOfIsolation
When asked to select a template, choose the template blank
from Managed workflow
.
After that, press enter and let expo-cli install the dependencies required to start this project.
Once the project has initialized generating, go to the project directory from the terminal window and start the Expo bundler service.
expo start
This will start the Expo app in a simulator or device of your choice where the Expo client is installed. For more information on how to install an Expo client, please visit the official documentation .
Once the app is running in the Expo client, you are going to be welcomed by the following default screen:
Let us install the npm dependencies we are going to need to build this project by executing the following command:
expo install expo-font @use-expo/font @react-native-community/datetimepicker
The expo install
adds dependencies using a specific version that is compatible with the Expo SDK.
Also, install the following npm packages either using npm install
or using yarn
:
yarn add react-native-modal-datetime-picker moment
With that, we have installed the required set of npm dependencies. Let us move further and start building the app.
How To Use Custom Fonts In An Expo App
Install a New Font
In this app, we are going to use a specific custom font that is free to download from Google Fonts — Press Start 2P
. It is available to download here .
To use this font or any other custom font, create a new directory called fonts
inside the assets/
folder. Then place the font file(s) you have just downloaded. The path to the fonts directory ./assets/fonts
is a convention that Expo developers recommend using when placing custom fonts in your app.
After placing the file inside the newly created directory, the file structure will look like below.
When you are downloading a font to use in an Expo React Native app, make sure you download either a font in either .otf
or .ttf
format. Those are the two formats that work across all Expo platforms such as web, iOS, and Android.
Use The useFonts
Hook
To use anyhook in a React or React Native app, you have to use functional components. To set up a new font, start by importing the following statements.
import React from 'react'; import { View, Text } from 'react-native'; import { useFonts } from '@use-expo/font'; import { AppLoading } from 'expo';
The useFonts
hook takes one argument as a JavaScript object and returns a single item list containing a value telling you whether the font is loaded or not. This eliminates the need for a lot of boilerplate code to make this check.
After you have imported the statements, create a new object called customFont
. It will have a key — the name of the font itself — and the value of this key — the path to the font file in assets/fonts/
directory.
const customFont = { 'Press-Start2p': require('./assets/fonts/PressStart2P-Regular.ttf') };
Next, inside the function component, define the isLoaded
variable from the useFonts
hook and pass the customFont
object as its argument.
Also, when the font is in the loading state or has not loaded yet, it is a good practice to make use of the AppLoading
component from Expo and render nothing on the screen. Once the font has loaded, the screen will display the content of the functional component.
Here is the complete code of the App
component. Right now, we are displaying the title of the app using the new font we have just installed.
export default function App() { const [isLoaded] = useFonts(customFont); if (!isLoaded) { return <AppLoading />; } return ( <View style={{ flex: 1, alignItems: 'center', backgroundColor: '#ffbd12' }} > <Text style={{ fontFamily: 'Press-Start2p', fontSize: 24, marginTop: 80, paddingHorizontal: 20 }} > {`Are You a Quarantine Pro?`} </Text> </View> ); }
From the above snippet, make sure you describe the fontFamily
property on the Text
component. This is the only way the font is going to be used for a specific text component.
Go back to the Expo client and you are going to see the following result.
That's it! You have completed the first step of loading fonts and using them in a React Native app. Thanks to Cedric van Putten who has made the process of loading and mapping fonts easier for us. For more information check out Cedric's collection of hooks that you can use in an Expo app here .
Create a Button To Use The Datetime Picker Modal
Since we have already installed the required npm dependencies to show a date picker modal (that uses the native date picker module), let us add a button to the current App.js
file in order to display this modal.
Start by modifying the import statements as stated below and add the new ones.
import React, { useState } from 'react'; import { View, Text, StyleSheet, Dimensions, TouchableWithoutFeedback } from 'react-native'; import { Fontisto, MaterialCommunityIcons, FontAwesome } from '@expo/vector-icons'; import DateTimePickerModal from 'react-native-modal-datetime-picker';
To set the width and the height of the button, we are going to use the Dimensions
API from the react-native
core. The width and height of the button are going to be calculated based on the width of the current window.
Define a variable W
that is going to represent the width of the window before the App
functional component.
const W = Dimensions.get('window').width;
Next, after the app's title text, define another container View
component for the button. We are going to wrap the contents of the TouchableWithoutFeedback
button inside a separate View
component since this touchable component from React Native is only allowed to have a child component. However, we are going to have two child components: the icon of the button and the text. Modify the return statement of the App
component as per the code snippet below.
return ( <View style={styles.container}> <Text style={styles.title}>{`Are You a Quarantine Pro?`}</Text> <TouchableWithoutFeedback> <View style={styles.pickerContainer}> <Fontisto style={styles.icon} name="calendar" size={48} /> <Text style={styles.pickerText}>{`Tap here to\nselect a date`}</Text> </View> </TouchableWithoutFeedback> </View> );
Add the following styles for the above code snippet. Let's make use of the StyleSheet
object to manage styles in the current component file.
const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', backgroundColor: '#ffbd12' }, title: { fontFamily: 'Press-Start2p', fontSize: 24, marginTop: 80, paddingHorizontal: 20, lineHeight: 30 }, pickerContainer: { marginTop: 20, backgroundColor: '#00c6ae', width: W / 1.2, height: W / 4, borderRadius: 10, borderWidth: 1, borderColor: '#000', borderBottomWidth: 5, borderBottomColor: '#000', justifyContent: 'center', alignItems: 'center', flexDirection: 'row' }, pickerText: { fontFamily: 'Press-Start2p', fontSize: 14, paddingHorizontal: 10, lineHeight: 20 }, icon: { color: '#000' } });
Refresh the Expo client to get the following result.
Now, let us bind the date picker modal to this button. We already imported the npm package react-native-modal-datetime-picker
we need for this step. We are using this library over the default @react-community/react-native-datetimepicker
because this special library exposes a cross-platform interface for showing the native date-picker and time-picker inside a modal.
For our app, we are also going to evaluate the number of days the user has already spent in quarantine based on the date they choose as the input. Let us define a few state variables using the useState
hook from React for the following reasons:
pickedDate isDatePickerVisible
We have to define three helper functions along with these state variables. The first two will handle the visibility of the date picker modal. The third one will handle the confirm button from the date picker modal — as to what action to take when the user has to choose a date. The action we have to take here is to hide the date picker modal as well as store the value of the date in the state variable pickedDate
.
export default function App() { // ... rest of the component remains same const [pickedDate, setPickedDate] = useState(null); const [isDatePickerVisible, setDatePickerVisibility] = useState(false); function showDatePicker() { setDatePickerVisibility(true); } function hideDatePicker() { setDatePickerVisibility(false); } function handleConfirm(date) { console.log('A date has been picked: ', date); hideDatePicker(); setPickedDate(date); } return ( <View style={styles.container}> <Text style={styles.title}>{`Are You a Quarantine Pro?`}</Text> <TouchableWithoutFeedback onPress={showDatePicker}> <View style={styles.pickerContainer}> <Fontisto style={styles.icon} name="calendar" size={48} /> <Text style={styles.pickerText}>{`Tap here to\nselect a date`}</Text> </View> </TouchableWithoutFeedback> <DateTimePickerModal isVisible={isDatePickerVisible} mode="date",. onConfirm={handleConfirm} onCancel={hideDatePicker} headerTextIOS="When did you start isolating?" /> </View> }
Reading the data
The showDatePicker
method is going to be triggered every time a user taps the button to display the picker modal. The component will only render on the device's screen when this method triggers.
When the user taps anywhere outside the modal or taps on the Cancel
button, the modal is hidden again and nothing happens.
However, when a date is selected and the user taps Confirm
, further actions can be taken. For now, let us show the date picked by the user in a console statement.
The output is shown in the Expo server that is running in the terminal window.
This means that the user input is now stored in the state variable pickedDate
.
Also, you can apply other props available in @react-community/react-native-datetimepicker
. In the date picker modal we are implementing, there is small customization using the prop headerTextIOS
. This prop allows changing the title of the picker modal for iOS devices.
Evaluate The “Quarantine Score”
The second missing piece of the puzzle in our current app is to have a button to calculate the day(s) difference between the user's input and the current date (we will use this as our “quarantine score”).
We are going to follow the same strategy design-wise as in the previous section. Display a button that users can tap to see their score.
Start by importing the moment
library in the App.js
file after the rest of the import statements. It is going to handle the calculation between the user's input and the current date.
// rest of the import statements import moment from 'moment';
This library is also going to help us format the input from the date picker modal and display only the date (and not time) from the user's input in the format YYYY-MM-DD
.
Modify the return statement by adding a new View
container that consists of a text message and the button to calculate the difference between the days.
Also, before modifying the return
statement of the functional component, add a helper method called daysRemaining()
that is going to calculate the difference. We are going to store this difference in a state variable called days
. This state variable is going to be used in the next section to display the correct result on the screen.
The difference is going to be calculated between the pickedDate
(which is the user's input) and the todaysDate
(which is the current date).
export default function App() { const [days, setDays] = useState(''); function daysRemaining() { // user's input let eventdate = moment(pickedDate); // getting current date let todaysdate = moment(); let remainingDays = todaysdate.diff(eventdate, 'days'); setDays(remainingDays); return remainingDays; } return ( <View style={styles.container}> <Text style={styles.title}>{`Are You a Quarantine Pro?`}</Text> <TouchableWithoutFeedback onPress={showDatePicker}> <View style={styles.pickerContainer}> <Fontisto style={styles.icon} name="calendar" size={48} /> <Text style={styles.pickerText}>{`Tap here to\nselect a date`}</Text> </View> </TouchableWithoutFeedback> <DateTimePickerModal isVisible={isDatePickerVisible} mode="date" onConfirm={handleConfirm} onCancel={hideDatePicker} headerTextIOS="When did you start isolating?" /> {/* ADD BELOW */} <View style={styles.showDateContainer}> <Text style={styles.showDateText}> You started isolating on{' '} {pickedDate && ( <Text style={styles.showDateText}> {moment(pickedDate).format('YYYY-MM-DD')}. </Text> )} </Text> <TouchableWithoutFeedback onPress={daysRemaining}> <View style={styles.evaluateButtonContainer}> <Text style={styles.evaluateButtonText}>Check your level</Text> </View> </TouchableWithoutFeedback> </View> </View> }
The picked date is displayed in the desired format using moment().format()
functions. The pickedDate
will only show once the user has provided input by selecting the date from the date picker modal.
Here are the corresponding styles for the above snippet.
const styles = StyleSheet.create({ // rest of the styles remain same showDateContainer: { marginTop: 20, backgroundColor: '#F95A2C', width: W / 1.2, height: W / 2, borderRadius: 10, borderWidth: 1, borderColor: '#000', alignItems: 'center' }, showDateText: { fontFamily: 'Press-Start2p', fontSize: 14, padding: 10, marginTop: 20, lineHeight: 20 }, evaluateButtonContainer: { marginTop: 20, backgroundColor: '#1947E5', width: W / 1.4, height: W / 6, borderRadius: 10, borderWidth: 1, borderColor: '#000', borderBottomWidth: 5, borderBottomColor: '#000', justifyContent: 'center', alignItems: 'center', flexDirection: 'row' }, evaluateButtonText: { color: '#fff', fontFamily: 'Press-Start2p', fontSize: 14, paddingHorizontal: 10, lineHeight: 20 }, }
Here is the initial result you are going to get in the Expo client.
Select the date from the picker modal. After the date has been picked, it will be shown as below.
Rendering The “Quarantine Level”
The last piece of this current app is to display the result when the user presses the button that says Check your level
.
Modify the return statement of the App
component. When the result is available, we are going to show the user's quarantine level — but, when it’s not available, this UI box will display a default message. Just after the previous section's snippet, add another View
container component.
When the evaluation is done, renderAchievements()
is going to return only the icon and the text message that is based on the score (difference between the current date and the user's input date). Since we are using a state variable called days
to store this difference, it becomes easy to conditionally render the message.
export default function App() { // rest of the code remains the same function renderAchievements() { if (days > 1 && days < 5) { return ( <> <MaterialCommunityIcons name="guy-fawkes-mask" color="#000" size={54} /> <Text style={styles.resultText}> Quarantine Noob. Don't forget to wear a mask. Keep self-isolating. </Text> </> ); } else if (days >= 5 && days <= 7) { return ( <> <MaterialCommunityIcons name="glass-wine" color="#000" size={54} /> <Text style={styles.resultText}>Quarantine Connoisseur. Welcome to the (literal) dark side!</Text> </> ); } else if (days >= 8 && days <= 15) { return ( <> <MaterialCommunityIcons name="seat-legroom-reduced" color="#000" size={54} /> <Text style={styles.resultText}>Quarantine Proficient. AKA “What is pants?”</Text> </> ); } else if (days >= 16 && days <= 22) { return ( <> <MaterialCommunityIcons name="star-circle-outline" color="#000" size={54} /> <Text style={styles.resultText}>Quarantine Veteran. #StayHome became your life motto.</Text> </> ); } else if (days >= 23) { return ( <> <FontAwesome name="paint-brush" color="#000" size={54} /> <Text style={styles.resultText}>THE ULTIMATE QUARANTINE PRO! You are part of the solution - thank you!</Text> </> ); } else return ( <Text style={styles.resultText}>Your level will be shown here.</Text> ); } return ( <View style={styles.container}> <Text style={styles.title}>{`Are You a Quarantine Pro?`}</Text> <TouchableWithoutFeedback onPress={showDatePicker}> <View style={styles.pickerContainer}> <Fontisto style={styles.icon} name="calendar" size={48} /> <Text style={styles.pickerText}>{`Tap here to\nselect a date`}</Text> </View> </TouchableWithoutFeedback> <DateTimePickerModal isVisible={isDatePickerVisible} mode="date" onConfirm={handleConfirm} onCancel={hideDatePicker} headerTextIOS="When did you start isolating?" /> <View style={styles.showDateContainer}> <Text style={styles.showDateText}> You started isolating on{' '} {pickedDate && ( <Text style={styles.showDateText}> {moment(pickedDate).format('YYYY-MM-DD')}. </Text> )} </Text> <TouchableWithoutFeedback onPress={daysRemaining}> <View style={styles.evaluateButtonContainer}> <Text style={styles.evaluateButtonText}>Check your level</Text> </View> </TouchableWithoutFeedback> </View> {/* ADD BELOW */} <View style={styles.resultContainer}>{renderAchievements()}</View> </View> }
Here are styles for the renderAchievements()
.
const styles = StyleSheet.create({ // rest of the styles remain same resultContainer: { marginTop: 20, backgroundColor: '#FF89BB', width: W / 1.2, height: W / 2, borderRadius: 10, borderWidth: 1, borderColor: '#000', justifyContent: 'center', alignItems: 'center' }, resultText: { color: '#fff', fontFamily: 'Press-Start2p', fontSize: 16, padding: 15, lineHeight: 20 } });
Now, go back to the Expo client and you will be welcomed by our final app! Try to run the app and select different dates to see different results as shown below.
Conclusion
We hope you had fun building this app and learning as well. The main objectives of this tutorial are complete now and summarized for better understanding as below.
- How to use Expo font hook ;
- How to use the datetime picker modal to select a date;
- Use Moment.js to convert the date input provided by the user and calculate the difference between the current date (“quarantine score”).
Check out @react-native-community/datetimepicker for more information on how to customize the date picker modal or try to use a time picker. The Moment.js library is full of functions to help you manage date and time in JavaScript apps (another tutorialhere).
The app is available at Expo here , you just need to scan the QR code with the Expo client app ( iOS | Android ) on your device.
So, what kind of score did you get? Feel free to tweet us a screenshot @Jscrambler — we’re going to send a Jscrambler t-shirt to one lucky self-isolated dev!
以上所述就是小编给大家介绍的《Creating “Quarantine Pro” — A Fun Learning Experiment in React Native》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
C Primer Plus(第6版)中文版
普拉达 (Stephen Prata) / 姜佑 / 人民邮电出版社 / 2016-4-1 / CNY 89.00
《C Primer Plus(第6版)中文版》详细讲解了C语言的基本概念和编程技巧。 《C Primer Plus(第6版)中文版》共17章。第1、2章介绍了C语言编程的预备知识。第3~15章详细讲解了C语言的相关知识,包括数据类型、格式化输入/输出、运算符、表达式、语句、循环、字符输入和输出、函数、数组和指针、字符和字符串函数、内存管理、文件输入输出、结构、位操作等。第16章、17章介绍C......一起来看看 《C Primer Plus(第6版)中文版》 这本书的介绍吧!