Contents
React Native
Mobile apps for iOS and Android with React: components, styles, navigation and Expo.
1.Getting started
- What React Native and Expo areHow React Native turns components into a real iOS and Android interface, and why you need Expo.
- Setup and the first projectWhat to install, how to create an Expo project with create-expo-app and what its folders contain.
- Running on a phone, an emulator and the webHow to start an Expo project with expo start and open it in Expo Go, an emulator or a browser.
2.User interface
- Core components: View, Text, ImageThe three components every screen is made of: the View container, Text and Image.
- Styles and StyleSheetHow to style components: the style prop, StyleSheet.create, size units and combining styles.
- Layout with FlexboxHow to position elements on the screen with Flexbox and how it differs from the web.
- The TextInput fieldHow to take text from the user: TextInput, onChangeText, keyboard type and multiline input.
- Presses: Button and PressableHow to handle a press: the simple Button and the customizable Pressable with press feedback.
- State and eventsA working to-do list: adding, marking and deleting tasks with useState and press handlers.
- Lists with FlatListHow to render a long scrolling list: data, renderItem, keyExtractor and the empty state.
- ScrollView and SectionListWhen to use ScrollView and when FlatList, and how to render a list with sections using SectionList.
3.Navigation with Expo Router
- File-based screens and routesHow Expo Router turns files in the app folder into screens and how to move between them with Link.
- Screen stack and headerHow stack navigation works in Expo Router: the _layout.tsx layout, screen titles and navigating from code.
- Dynamic screens and parametersA post screen at /posts/[id]: passing a parameter with Link and reading it with useLocalSearchParams.
- TabsA bottom tab bar in Expo Router: the (tabs) group, a layout with Tabs and tab icons.
4.Data
- Fetching data from an APIBlog posts from JSONPlaceholder: fetch in an effect, a loading indicator, an error with retry and pull to refresh.
- Storing data: AsyncStorageHow to save the to-do list on the device with AsyncStorage so it survives an app restart.
- Secrets: expo-secure-storeHow to keep a login token in the device's encrypted storage with expo-secure-store.
5.Device features
- Images, assets and iconsHow to include files from assets, show images with expo-image and add vector icons.
- Platform differences: PlatformHow to find out where the app is running and make iOS, Android and the web behave differently.
- The safe area of the screenHow not to end up under the camera notch, the status bar or the gesture bar: SafeAreaView and useSafeAreaInsets.
- Handling the keyboardHow to keep the keyboard from covering an input and how to hide it: KeyboardAvoidingView, Keyboard.dismiss and taps in lists.
- Photos from the gallery and cameraExpo modules through the example of expo-image-picker: picking an avatar from the gallery, taking a photo and permissions.
- LocationHow to get the user's coordinates and city with expo-location and ask for permission properly.
- Animation basicsSmoothly appearing elements: the built-in Animated module and a short look at Reanimated.
6.Debugging and release
- DebuggingWhere to look for errors in an Expo app: console.log in the terminal, the red screen, the developer menu and React Native DevTools.
- App config: app.json, icon and splash screenWhat app.json contains: the name, version, identifiers, the app icon and the splash screen.
- Building and publishing with EASAn overview of EAS: building the app in the cloud, installing it on a phone, submitting to the App Store and Google Play, and updates.