- Weather App
- Code examples
- JavaScript
- Starting the project
- Node.js
- yarn
- Watchman
- Expo
- Previewing with the Expo client
- Android
- iOS
- Using a supported version
- Preparing the app with the CLI
- package.json
- The utils/ directory
- Components
- App
- Kinds of Components
- JSX
- Props
- Adding styles
- Platform specific properties
- Separate files
- Text input
- Custom components
- Custom props
- Importing components
- Background image
- Try it out
- Modifying location
- Storing local data
- Tracking changes to input
- Notifying the parent component
- Try it out
- Architecting state
- Lifecycle methods
- Networking
- PropTypes
- Class properties
- Summary
- Getting started
- Previewing the app
- Breaking the app into components
- 7 step process
- Step 2: Build a static version of the app
- Prepare the app
- App
- EditableTimer
- Benefits of functional components
- TimerForm
- TimerButton
- ToggleableTimerForm
- Timer
- Try it out
- Step 3: Determine what should be stateful
- State criteria
- Applying the criteria
- Step 4: Determine in which component each piece of state should live
- The list of timers and attributes of each timer
- Whether or not the edit form of a timer is open
- Visibility of the create form
- Step 5: Hardcode initial states
- Adding state to App
- Props vs. state
- Adding state to EditableTimer
- Timer remains stateless
- Adding state to ToggleableTimerForm
- Adding state to TimerForm
- Try it out
- Step 6: Add inverse data flow
- TimerForm
- ToggleableTimerForm
- App
- Handling creates
- Try it out
- Updating timers
- Adding editability to Timer
- Updating EditableTimer
- Defining handleFormSubmit() in App
- Try it out
- Deleting timers
- Adding the event handler to Timer
- Routing through EditableTimer
- Implementing the remove function in App
- Try it out
- Adding timing functionality
- Add start and stop functionality
- Add timer action events to Timer
- Run the events through EditableTimer
- Try it out
- Wrapping App in KeyboardAvoidingView
- PropTypes
- Methodology review
- Up next
- What are components?
- UI abstraction
- Building an Instagram clone
- Project setup
- How we'll work
- Breaking down the feed screen
- Top-down vs. bottom-up
- Avatar
- View
- Avatar background
- Try it out
- Dimensions
- Flex
- Layout
- flexDirection
- justifyContent
- alignItems
- Flex and the primary axis
- StyleSheet
- Text
- Text dimensions
- Common Text props and styles
- Adding Text to Avatar
- AuthorRow
- TouchableOpacity
- Adding TouchableOpacity to AuthorRow
- Try it out
- Padding, margin, borders, and the box model
- Card
- Image
- Bundling image assets
- Remote image assets
- Common image styles
- Adding Image to Card
- Try it out
- Loading status
- ActivityIndicator
- Position
- relative
- absolute
- Adding ActivityIndicator to Card
- CardList
- FlatList
- Adding FlatList to CardList
- Try it out
- Adding a screen
- The Feed screen
- Adding Feed to App
- What we've built so far
- Picking up where we left off
- Comments
- Breaking down the comments screen
- CommentInput
- TextInput
- Common TextInput props and styles
- Adding TextInput to CommentList
- CommentList
- ScrollView
- ScrollView dimensions and layout
- Adding ScrollView to CommentList
- NavigationBar
- Comments screen
- Putting it all together
- Modal
- Adding Modal to App
- Updating CardList with comments
- Updating Feed with comments
- Updating App with comments
- Adding new comments
- Bonus: Persisting comments to device storage
- Wrapping up
- Building a messaging app
- Initializing the project
- The app
- The app's skeleton
- Network connectivity indicator
- StatusBar
- Status styles
- Using StatusBar
- Message bubble
- NetInfo
- Wrapping up StatusBar and NetInfo
- The message list
- MessageUtils
- MessageList
- inverted
- keyboardShouldPersistTaps
- Rendering messages
- Adding MessageList to App
- Alert
- Fullscreen image
- BackHandler
- Toolbar
- Building the Toolbar
- Refs
- Storing a ref
- Adding Toolbar to App
- Geolocation
- Input Method Editor (IME)
- Image picker
- Building a grid
- On generic vs. specific components
- Adding images to the grid
- On separating components
- Loading images from the camera roll
- Sending images from ImageGrid
- What we've built
- Navigation in React Native
- Native navigation
- Pros
- Cons
- Navigation with JavaScript
- Pros
- Cons
- Third-party libraries
- Navigation alternatives
- In this chapter
- Contact List
- Previewing the app
- Starting the project
- Container and Presentational components
- Contacts
- Try it out
- Profile
- Try it out
- React Navigation
- Stack navigation
- Navigation parameters
- Navigation screen options
- Tab navigation
- Favorites
- Try it out
- User screen
- Try it out
- Nested navigators
- Try it out
- Modal navigation
- Try it out
- Drawer navigation
- Try it out
- Sharing state between screens
- State containers
- Third-party libraries
- Custom state container
- Try it out
- Deep Linking
- Try it out
- Summary
- Animation challenges
- Performance challenges
- Complex control flow challenges
- Building a puzzle game
- Project setup
- Project Structure
- App
- App state
- App screens
- Start screen
- Game screen
- Building the Start screen
- Initial layout
- LayoutAnimation
- Animating the logo
- Awaiting LayoutAnimation
- Animating buttons
- Animated
- Running animations
- Try it out
- Animated value performance
- Advanced Animated.Value
- Updating our buttons
- Rendering with Animated.Value
- Try it out
- Starting the game
- Try it out
- Wrapping up the Start screen
- Building the Game screen
- Game lifecycle
- The "transition in" phase
- The "transition out" phase
- Transitioning in and out
- Try it out
- Transitioning in and out, continued
- Try it out
- Summary
- Picking up where we left off
- Building the board
- Transition states
- Board props
- Initializing the board
- Rendering the board
- Try it out!
- Making pieces draggable
- Gesture Responder System
- Responder lifecycle
- Capture phase
- Diagram
- Touch event object
- PanResponder
- Draggable component
- Creating a PanResponder
- PanResponder functions
- Rendering draggable pieces
- Handling touch events
- Try it out!
- Wrapping up gesture handling
- Using PureComponent
- Finishing the game
- Animating all pieces
- Try it out!
- We're Done!
- What are native modules?
- Common use cases
- When to use native modules
- Native modules on npm
- react-native-link
- Manual setup
- Building a native module
- Native development is challenging!
- Development environment
- Initializing the project
- Project structure
- How native modules work
- Prop types
- iOS
- Swift or Objective-C?
- Exporting the native view
- Creating files
- Bridging header
- PieChartView
- PieChartManager
- Export macros
- Try building!
- Wrapping up iOS
- Android
- Java or Kotlin
- Exporting the native view
- Exporting the native view
- PieChartView
- PieChartManager
- Exporting the package
- Try building!
- JavaScript
- Using the native view from JS
- requireNativeComponent
- Rendering
- App
- Try it out!
- Wrapping up
- How to read this chapter
- Building
- Building with Expo
- Pros and cons of building with Expo
- Pros and cons of building manually
- Reference Guide
- iOS
- Creating an iOS build with Expo
- Creating an iOS build with Xcode
- Automatic Code Signing
- Manual Code Signing
- Creating a build archive
- Testing the final build
- Publishing to the iOS App Store
- Android
- Creating an Android build with Expo
- Testing the final build after automatic signing
- Creating an Android build manually
- Testing the final build after manually signing
- Publishing to the Play Store
- Handling Updates
- Summary
Fullstack React Native
Chapter 2:
Getting Started with React Native
Chapter 3:
React Fundamentals
Chapter 4:
Core Components, Part 1
Chapter 5:
Core Components, Part 2
Chapter 6:
Core APIs, Part 1
Chapter 8:
Navigation
Chapter 9:
Animation
Chapter 10:
Gestures
Chapter 11:
Native Modules
Chapter 12:
Building and publishing
This page is a preview of Fullstack React Native