Clone
React Native & Expo tutorial
Signal Series: Fullstack tutorial
Today
Signal UI
React Native
Signal Series: Fullstack tutorial
Next week
Today 20 Aug
Signal UI Signal Backend
React Native AWS Amplify
Signal Series: Fullstack tutorial
Next week
Today 20 Aug 27 Aug
Signal UI Signal Backend
Advanced features
React Native AWS Amplify
We are going to build
We are going to build
You will learn
- Setup a project using Expo
You will learn
- Setup a project using React Native CLI
- Render built-in elements/components
You will learn
- Setup a project using React Native CLI
- Render built-in elements/components
- Create your own components
You will learn
- Setup a project using React Native CLI
- Render built-in elements/components
- Create your own components
- Functional components & Hooks
You will learn
- Setup a project using React Native CLI
- Render built-in elements/components
- Create your own components
- Functional components & Hooks
- Props & State
You will learn
- Setup a project using React Native CLI
- Render built-in elements/components
- Create your own components
- Functional components & Hooks
- Props & State
- RN Styling for creating beautiful UI
You will learn
- Setup a project using React Native CLI
- Render built-in elements/components
- Create your own components
- Functional components & Hooks
- Props & State
- RN Styling for creating beautiful UI
- Navigation
Thanks Expo for sponsoring this video
Install expo to follow along: [Link]
Hi 👋
- Full stack developer for >7yrs
- Founder and CTO
- ex Amazon SDE
- Passionate about coding and building
impactful startups.
I AM
@VadimNotJustDev
New channel members
I AM
New channel members
I AM
Prerequisites
1. Asset Bundle (dummy data, images, icons, PDF presentation, unlimited karma):
[Link]
2. Expo environment setup
[Link]
Let’s get started
🚀🚀🚀
Home Screen
Home Screen
1. Chat Room List item
Home Screen
1. Chat Room List item
Home Screen
1. Chat Room List item
Home Screen
1. Chat Room List item
Home Screen
1. Chat Room List item
2. List of chat rooms
Chat Room Screen
1. Message Component
2. List of messages
3. New Message Input
Navigation
1. Navigate between screens
2. Navigation Headers
Q&A
Thanks Expo for sponsoring this video
Install expo to follow along: [Link]
What’s next?
Next week
20 Aug
Signal Backend
AWS Amplify
What’s next?
Monday, 16th August 2 pm GMT Next week
20 Aug
Signal Backend
AWS Amplify
[Link]
- The roadmap to becoming a 6-figure full-stack mobile
developer in 2021.
- The roadmap to becoming a 6-figure full-stack mobile
developer in 2021.
- Master the tech stack of the future: React Native and
AWS Amplify
- The roadmap to becoming a 6-figure full-stack mobile
developer in 2021.
- Master the tech stack of the future: React Native and
AWS Amplify
- Add to calendar not to miss it out
Monday, 16th August at 2 pm GMT
Backend
AWS Amplify & Admin UI
Admin UI
Authentication
Data Layer
Datastore
1. Query library
2. On-device caching
3. Data sync
Hi 👋
- Full stack developer for >7yrs
- Founder and CTO
- ex Amazon SDE
- Passionate about coding and building
impactful startups.
I AM
@VadimNotJustDev
[Link]
[Link]
Doors closing on 23rd August
Prerequisites
1. Asset Bundle (dummy data, images, icons, PDF presentation, unlimited karma):
[Link]
2. AWS account and amplify cli installed
[Link]
[Link]
Starting point
1. Part 1
[Link]
Starting point
1. Part 1
Didn’t follow part 1, but want to follow along now?
2. Clone the repo (UI branch): [Link]
3. Install dependencies (npm install, npx pod-install)
4. Run the project (npm start)
Let’s get started
🚀🚀🚀
Create Amplify Project
- Navigate to Amplify page (search on
AWS Console)
- New app -> Create app backend
- Open Admin UI
Setup Authentication
Data Modeling
Pull the changes
Install Amplify CLI (if you don’t have it):
$ curl -sL [Link] | bash && $SHELL
Pull the backend into React Native app:
$ amplify pull --appId APP_ID --envName staging
Configure Amplify
In [Link]:
import Amplify from "aws-amplify";
import config from "./src/aws-exports";
[Link](config);
Configure Auth
In [Link]:
import { withAuthenticator } from "aws-amplify-react-native";
. . .
export default withAuthenticator(App);
Save authenticated user in Database
1. Add a post confirmation function
2. Save the user in database
3. Push the changes
4. Setup the env variables and permissions
5. Test
Integrate Datastore
- Fetch Users
- Fetch ChatRooms
- Create ChatRooms
- Send & Receive messages (in real time)
Q&A
Signal Series: Fullstack tutorial
Today
Signal UI Signal Backend
React Native AWS Amplify
Signal Series: Fullstack tutorial
Today
27 Aug
Signal UI Signal Backend
Advanced features
React Native AWS Amplify
New channel members
I AM
New channel members
I AM
[Link]
[Link]
Doors closing on 23rd August
Bonus features
Hi 👋
- Full stack developer for >7yrs
- Founder and CTO
- ex Amazon SDE
- Passionate about coding and building
impactful startups.
I AM
@VadimNotJustDev
Prerequisites
1. Asset Bundle (dummy data, images, icons, PDF presentation, unlimited karma):
[Link]
2. AWS account and amplify cli installed
[Link]
[Link]
Starting point
1. Part 1 & 2
[Link]
Starting point
1. Part 1 & 2
Didn’t follow part 1 & 2, but want to follow along now?
2. Clone the repo (UI branch): [Link]
3. Install dependencies (npm install, npx pod-install)
4. Run the project (npm start)
Let’s get started
🚀🚀🚀
Set the name and the image of the user
in header of the ChatRoom
• remove setOptions from ChatRoomScreen
• extract ChatRoomHeader in another file
• transform options into a function, and pass down
the route props to the header component
• Based on chatRoomId, fetch chat room users, and
set the data (name, image) about the other user in
header
Emojis
npm install --save react-native-emoji-selector
Send Images
1. Install image picker library
2. Request access to library and camera
3. Pick an image from gallery
4. Take a photo
5. Upload the photo to S3 Storage
6. Save Message to database
7. Display the image message
Audio messages
1. Install expo av
2. Record audio
3. Play Audio
4. Send audio message
Q&A
