Simple app that tracks your New Year's Goals, made using React Native.
- Getting Started
- Setting up a local development environment
- Running the Project
- Project Structure
- Demo
- Debugging React Native Apps
- Frequently Asked Questions (FAQ)
- Bonus
- References
- You can build native apps (iOS and Android), using React.js and distribute them on the official stores;
React.js
is a library that is independent fromReact Native
though;
- A JS library for building user interfaces;
- Typically used for web development;
- But it's actually the
react-dom
that adds web support to it! - React itself without
react-dom
is platform-agnostic - which means that you can useReact.js
in conjunction withreact-dom
to build web apps, butReact.js
library actually does not care about the underlying platform; - React just give you tools for managing state, for building virtual component trees, and then you need an extra library like
react-dom
for translating the result that React produced to an actual platform - like the browser;
- It's basically an alternative to
react-dom
, therefore; React Native
gives you a collection of "special" React components - which you can use in your JSX code;React Native
ships with built-in components that you can use, and those components are then compiled to native UI elements for the iOS and Android platforms;React Native
will also take care about this compilation step;- In addiation,
React Native
also exposes certain native platform APIs (like using the device camera), so that you can use such features in your JS code, even though you need to tap into native device APIs for that; - In the end,
React Native
is likereact-dom
, it just does not target the web (the browser as platform) - but instead: iOS and Android; React Native
gives you all the components and the APIs that you need to interact with those platforms and to build apps for those platforms;- We will write our code in
React.js
and then just use these extraReact Native
components;
Web Browser (react-dom ) |
Native Component (Android) | Native Component (iOS) | React Native JSX |
---|---|---|---|
<div> |
android.View |
UIView |
<View> |
<input> |
EditText |
UITextField |
<TextInput> |
... | ... | ... | ... |
- Unlike the UI elements, the logic is not compile like the native components, but instead it's running on a JS thread (that's hosted by
React Native
in the native app that was built); React Native
basically spins up a simple JS process and manages this process for you and allow this process to talk to the underlying platform, which would be iOS and Android - through a basic translation bridge;
Before you get started, ensure you have the following installed:
-
You have 2 choices for the CLI:
- Expo CLI | Default and recommended;
- React Native CLI | Alternative option;
- Both approaches will give you a development env where you can build your apps;
- Download and install the official Android Studio for your OS;
- Open the installed Android Studio app;
- Click on
More Options
>>Virtual Device Manager
; - You will see a default device, but you can create new ones You should pick a device that has an icon of the "Play Store" column, so it will be able to download Expo from the Play Store;
- Hit
Next
; - Select the system image (
API 32
for example - which it's the latest one right now); - Hit
Next
; - Keep all the
Default settings
; - Trigger
Finish
; - Now you'll have a new device emulator ready to be used;
- You can click the
Play
button, to launch this device emulator;
- Download and Install the Xcode tool for Mac OS; Important note: if you're not using a Mac OS, you can't run the emulator on Windows or Linux devices. This is a limitation applied by Apple.
- If it's the first time running the XCode, it will ask you to select the platforms that you want to develop for;
- Select iOs, macOs and so on - wait until the installation, it will take some time;
- After installed, open MacOS
Finder
>>Application
; - Click with the right button on
XCode
>>Show Packages Contents
>>Contents
>>Developer
>>Applications
>>Simulator App
; - Open it;
- To change device version:
File
>>Simulator
>> Pick the version you want;
Clone the repository and install the dependencies:
git clone https://github.com/joaolessab/new-years-goals--react-native.git
cd app
yarn install
- Run
yarn start
; - Press
a
or runyarn android
;- Android Studio Emulator needs to be running before executing command;
- Press
i
or runyarn ios
;- If iOs Simulator does not work, run:
sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
in your terminal;
- If iOs Simulator does not work, run:
- Press
w
or runyarn web
; - You might need to unlock the Emulator;
- You can serve on both simulators at the same time, yes!
- The reload process is automatically, but you can force it manually pressin
r
in the terminal;
- For iOS, visit the App Store and download the Expo app;
- Open the terminal and run:
yarn start
; - Get the QR Code on the terminal and scan it with your phone;
- Give phone permissions and wait it until gets loaded;
- Watch terminal for possible errors;
.
├── ...
├── docs # Documentation files (alternatively `doc`)
├── app # App main folder
│ |── components/ # Components broken into small pieces
│ |── assets/ # Images, fonts and icons for the app
│ ├── App.js # Main file of the project
│ ├── app.json # Basic settings of the app
│ ├── package.json # Libraries and dependencies of the project
│ └── ... # etc.
└── ...
demo.mp4
- Force the VS Code or any other text editor to log the issues in the console;
- Press
?
in the terminal to see a ful list of commands; - Press
m
to toogle a menu; - Press
Enter
to open a menu; - Press
Open JS debugger
;
- A new tab on Chrome will pop-up and you can view the
Network
tab; - Press
r
so your app wil reload with the assets and the services used to load data;
- Install it using
npm install -g react-devtools
; - Run it using
react-devtools
; - Restart the app pressing
r
;
- Because they don't the the
dom
setup; - Native devices are not browsers. Check the full list of React Native components;
- Besides that, it works normally as an usual React app. You can combine those Native components to build your own customized components, for example:
const MyTitle = props => {
return (
<View>
<Text>{props.title}</Text>
</View>
)
};
- There's no CSS in React Native apps. Why? Because again, it's not a browser;
- The CSS language does not exist here;
- Instead, you can either use Inline Styles or StyleSheet objects (styles written in JS);
- Pretty much, yes! But made for mobile Native apps;
- You can use a
<View>
inside another<View>
and control the styles in the StyleSheets;
- No! You need to create a separated style object;
- There's not inheritance as well;
- If you want to scroll views in React Native, you have to explictly tell it;
- You can use the component
<ScrollView>
; - Keep in mind that if you want to setup a height limitation, you have to setup a parent
<View>
for it; - Keep in mind that this component has different effects for each mobile system;
- But, we have a downside here:
<ScrollView>
is great if you want to add scroll around some content. If you want to render a very long list,<ScrollView>
will render it all behind the scenes and this can be a performance issue; <FlatList>
is the component indicated to render bigger lists, so the user will only see the data as it gets closer to it and its a way more performatic;- By default,
<FlatList>
looks for the key object in the array. Otherwise, you can use thekeyExtractor
prop to indicate thekey
field that you want to use;
- Yes, it should. They are old React Native way;
- Because with
.bind()
is a standard JavaScript function, which basically allows us to pre-configure a function for future execution;
- For Android, you can use props like:
android_ripple={{ color: '#210644' }}
; - For iOs, you may want to add a function inside the style prop when an event is pressed, for example:
style={({ pressed }) => pressed && styles.pressedItem }
;
- With expo, you can import
import { StatusBar } from 'expo-status-bar'
and set its style as "auto", "light", "dark", etc; - The example would be like:
<StatusBar style="light" />
;
- Expo is in the end a third-party service (free) that you can use. You don't have to sign-up or pay anything;
- Expo also have some extra features that you can pay and needed to sign-up, but to build the apps, you don't actually need those;
- When using Expo CLI and other couple of tools provided by Expo, writing native apps with React Native is more convenient than with just the React Native CLI and has less friction;
- You can still leave this Expo approach ecosystem anytime, if you need to - you can switch ˜eject" anytime;
- Expo is a way easier than React Native CLI;
-
Because it existed before Expo and it's the tool provided by the React Native team and the community around React Native;
-
It gives you a bare-bone React Native development setup (you need to set up way more);
-
Less convinience features, and if you need to tap into certain native device features, such as device camera or something, it's going to requires extra work when not having the Expo around it;
-
The good thing of React Native CLI is that's easier to integrate with native source code written in Java or Objectivce-C, SWIFT or Kotlin, so if you must mix JS code and native device source code, then using just their React Native CLI could be beneficial (the idea behing React Native it's that you don't have to mix code or do this kind of thing too often);
-
Expo is not just about the tool that creates the projects, but it will also give us helpful packages and tools that we can use when writing the code;
- Install latest
Node.js LTS
package; - Run
npm install -g expo-cli
; - In your repo directory, run:
npx create-expo-app ProjectName
; cd ProjectName
;yarn install
;npx expo start
;
- In the
App.js
file,import { useFonts } from 'expo-font'
; - Load the fonts right after declaring the page component:
const [fontsLoaded] = useFonts({
'Merriweather-Regular': require('./assets/fonts/Merriweather-Regular.ttf'),
'Merriweather-Black': require('./assets/fonts/Merriweather-Black.ttf'),
});
if (!fontsLoaded) {
return null;
}
-
Create the file
react-native.config.js
in the root folder of the project; -
Run in your terminal:
npx react-native-asset
; -
Call the
fontFamily
in your stylesheet; -
Restart the App + Emulators;
-
Call the
fontFamily
in your stylesheet;