JS Mastery : React Native Tutorial

-

https://www.youtube.com/watch?v=BTfcnxXevm0



https://expo.dev/









  • TypeScript for strongly typed JavaScript , realiable and maintainable code
  • Tailwind CSS 
  • Native Wind
    • Fast Consistent and Reliable UI
  • Google Authentication
  • App Write (Database , filestorage , Real time messaging, Serverless function)






ZusTand : Minimal and Local state management with clean hook based APIs








https://sentry.io/for/react-native/







@06:16







React Native Basics (09:30)

It is no longer slow , there is new JSI Java Script interface

1) JSI (JavaScript Interface) significantly enhances React Native's performance by replacing the traditional "bridge" mechanism with a more direct and efficient communication layer between JavaScript and native code.








2) Turbo Module : Loads native Module only when needed , reducing startup time and memory usage.









3) Fabric : Optimizes UI rendering , making gesture,& updates faster and more efficient









As per reacts getting started guide , expo is the way to go

https://reactnative.dev/docs/environment-setup

You can also use React Native without a Framework, however we’ve found that most developers benefit from using a React Native Framework like Expo. Expo provides features like file-based routing, high-quality universal libraries, and the ability to write plugins that modify native code without having to manage native files.

expo helps with following
  • dev env setup ( no need to install android store & native dependencies ) 
  • pre built components for navigation , gestures, camera, maps + more
  • supports "over the air updates". (app users get latest code without needing app store approval)
  • more than 2K companies using it (like xbox , burger king etc)
There are differences between React (web) and React Native (mobile)












Can i run a react native app on browser ?
seems like yes , using react-native-web details here. example here.

React Native















Compared to React Web















instead of rending HTML components you will be rendering native react components

















note the TEXT tag is not equal to P tag nor H tag






can apply regular CSS





With React Native you can use STYLE SHEETs








  • < View > is a box that contains other elements like < div > , but with added functionality. It is used to create layout structures. 
    • it uses flexbox layout by default (hence can use properties flex-direction  , justify-content, and align-items
Can use following elements to add interactivity to apps 
  • FIRST : Touchable Opacity : it is like a button

it is cousin to react native, but with even more room for customization 


  • SECOND : TouchableHighlight : allows views to response to touch in a unique way, when touched component shows under lying color(reduces opacity) 
  • THIRD : TouchableWithoutFeedback : when clicked no visible change
  • Fourth : ActivityIndicator
  • Fifth : FlatList : perfect to render long list of items that are scrollable. It is like MAP function in react with extra performance like "optimized scroll performance" and "item seperation"





When should you use FlatList vs When to use Map?
  • Flatlist for larger list with smooth scrolling 
  • Smaller list Map will do job

ScrollView
Holds multiple components and views


SafeAreaView


it is not the best option everytime 
author likes to use https://www.npmjs.com/package/react-native-safe-area-context it works for all areas even the bottom area.

To display Images
Use Image component


Both Can handle JPG , Webp , PNG, Gif, but not SVG, because of native rendering limitations

Modal


Switch


StatusBar is defined both in ReactNative and Expo , author prefers the one in expo





Left 22:55













Comments

Post a Comment

Popular posts from this blog

Agentic AI Course : Week 1

-
Image
8 weeks https://edwarddonner.com/2024/11/13/llm-engineering-resources/  6 week Agentic AI Course https://github.com/ed-donner/agents the file .env has all the keys select kernel https://github.com/ed-donner/agents/blob/main/1_foundations/1_lab1.ipynb import os openai_api_key = os.getenv( 'OPENAI_API_KEY' ) from openai import OpenAI openai = OpenAI() messages = [{ "role" : "user" , "content" : "What is 2+2?" }] response = openai.chat.completions.create(      model= "gpt-4.1-nano" ,      messages=messages      ) print (response.choices[ 0 ].message.content) Day 2 : what are AI Agents? 5 different patterns for agentic systems https://lavnish.blogspot.com/2025/05/essential-design-patterns-for-building.html In General Day 3 comparing different models  https://www.vellum.ai/llm-leaderboard syntax to call diff LLMs openAI , anthropic, gemini, deepseek, groq https://github.com/ed-donner/agents/blob/main/1_foundations/2_lab2.ipynb...
Read more

LLM Engineering course : Day 1

-
Image
 Anaconda Power Shell    this will open , way you know if it is a anaconda power shell by seeing "base" Then you can install the full environment    then to activate use command "conda activate llms"     Open Ques "what is environment.yml" Then activate the conda environment and open jupyter lab   you can start with virtualenv as well (all details in readme) Video 11 : Day 1 every AI has 2 types of plan 1) pro plan with UI monthly subscription 2) API pricing , pay per request, for OPEN API need to put in 5$ pre payment (can use gpt4-o-mini for less cost)  (all details in readme)  Video 11:  store keys in .env files (all details in readme)  Video 14 there are two types of prompt   Video 15 OpenAI came up with a standard way of interacting with LLMs which is now standard for many LLMs. It is a list of dictionaries. Use completions API https://platform.openai.com/docs/guides/completions   For websites that use Java...
Read more

LLM Engineering : Week 2

-
Day 2.1 setup  anthropic api key google api key (more complex) update .env file     What is Temperature ?  Pass value between 0 to 1. 1 is most creative , 0 is least There is a slight difference in Claude API and OpenAI  in claude API we pass system message and user message separately in claude we also give context  if you want to stream , in claude there is an extra method , in openAI there is a boolean attribute.    Day 2.2 : Gradio         Day 2.3         Day 2.4 Day 2.5          
Read more