How To Code Your First Mobile App Using React Native

Today we start off with the basics of React Native, a javascript native mobile app compiler. We look into components, events, props and passing them and more.
Day 63 #100DaysOfCode
// JOIN THE DISCORD
/ discord
// MY GEAR FOR CODING AND KZbin
Blue Yeti Microphone: amzn.to/3jr3l7T
Microphone Stand: amzn.to/35B9LMN
Chair: amzn.to/3dWds3F
Thunderbolt Dock: amzn.to/3osBF6u
Monitor: amzn.to/37I8KoR
All of these products I own and have tested!
Patreon: / tyler_potts_
Important Links
Github Repository: github.com/TylerPottsDev/reac...
Twitter: / tyler_potts_
We cover:
React Native
Components
Native Components
Input (TextInput)
Lists (FlatList)
If you read down here then HELLO! :)
#appdev #reactnative #javascript

[@wheniamnotworking9221]

My first time build apps with react native using your tutorial. It's a bit different in my laptop but the logic is still same. Thank you very much.

[@TylerPotts]

Awesome news!

[@Monster33336]

I'm moving on from native apps to React. So far it's been a good experience.

[@rgenericson5361]

Two years with Swift and iOS, I'm ready to test drive RN. I like React for web anyway

[@krishnaraghav392]

thank you so much Tyler! loved it completely!

[@ileaderx]

Great job i've learned a Lot THANK YOU

[@Emily-fm7pt]

super applies the constructor from the base class (the one your extending)

[@mattb1498]

learning a lot from this video, thanks; how do you display the console log view?

[@rgenericson5361]

Cool! I'm going to give it a whirl for the 1st time!

[@TylerPotts]

GO FOR IT!

[@Unitedclipsofficial]

I tried downloading the code and importing, whenever I go to open the code on simulator it says the app is expo outdated, how can i fix this

[@monishn2928]

hi is is possible to use sqlite by initiating the react native project with EXPO

[@abhijithcs3196]

help.... error undefined unable to resolve module./components/header' from 'app.js:' (np :i'm a beginner)

[@vivekshah2867]

Thanks for this video

[@TylerPotts]

Most welcome

[@axesspwns]

33:17 Can someone clarify how function works particular especially passing it to a component such as textChange in App.js to onChangeText in InputBar.js? Why those two lines of code in the two files?

[@Patrick-hx9es]

wHy NoT?

[@SquashedBugGames]

the super() in your constructor, calls functions on a parent object.

[@izharhussain8034]

Which color theme you are using for visual studio code??

[@setupdoantunes]

what your walppaper ?

[@con_boy]

12:04 super is simply a call to the parent constructor class, which is mandated by the logic parent class, (if I've not been run bomb me) because you overloaded it but you still need to "construct" the actual App() class not just override it

[@adiitibaev8055]

what programming language is used to create an e-wallet?

[@kshitijvengurlekar1192]

After a long time

[@TylerPotts]

Yes I have returned and I have videos lined up!!! :D

[@islam6916]

thank you .

[@TylerPotts]

No, thank you.

[@peterkim9696]

How much time do I need to master react native?

[@samanthang5258]

love that mid sentence yawn 7:57

[@TylerPotts]

Whoops new baby = Yawning Mid Video 😂

[@myth1126]

Just do type: _sudo npm install -g expo-cli_ if it doesn't install and says *ERROR*

[@hassanzafar3159]

39:53 can anyone tell me why my vs code not giving me hints ie autofill like keyextractor

[@odhynthooc648]

install js/ts extention

[@hardikdesai9211]

Hello Tyler Potts, is there any way to update existing todo item ?

[@TylerPotts]

Yes, but that is quite difficult to explain over comment system! 😁 Maybe I will cover it in a different video

[@hardikdesai9211]

@@TylerPotts Looking forward to your video.

[@hrd7787]

Do you have any app written in Javascript? I am ready to purchase

[@deadbeef6657]

Im just trying to find out the steps to make an app for mobile and have it on my phone

[@TheGamerzXChannel]

Do you have a solution for shadows not showing up on android?

[@TylerPotts]

Sorry, unfortunately not.

[@jasonbourne8566]

I believe that super() calls the parent constructor.. don't know who's the parent but actually the basic functionality of super is to call the parent!

[@TylerPotts]

Nice one! 😁

[@thesavagesalmon9464]

@@TylerPotts It calls the React.Component Ctor

[@RAJesh-yx6ye]

i want to declare if the inputfield is empty(blank) means no title then dont' addTodo so can u help me

[@RAJesh-yx6ye]

i got it by doing if (this.state.todoInput != '') { //code }

[@meowish952]

Can you also make a video that starts with react native cli? Not expo?

[@TylerPotts]

I will look into it for you. :D

[@meowish952]

@@TylerPotts Woah. Thank you very much!

[@papayaspice1155]

@@TylerPotts Please do!

[@eliezaraket5235]

Isn't the same code that u did in expo for react native cli...? If I wanna walk on same steps but with react native cli with Android emulator doesn't work?

[@sensej20000]

Can you also do the with android Phone, seeing instant result?

[@TylerPotts]

Yes if you setup your environment to use Android

[@sensej20000]

Thank you

[@lexussedan5341]

khi tôi chạy " react-native run-android" thì nó báo "comand "run-android" unrecognized . Bạn có thể giúp tôi sửa được không?

[@DC224gb64]

Firstly you have to be in your project's folder. Secondly, run npm install -g react-native-cli. After that you go react-native init [name of your test app, eg. test]. Then, react-native run-android. You should have an emulator or your phone connected to your pc.

[@rkleib]

in android, button color change the background color, not the text. been trying to make both in ios and android looks exactly the same but it's a pain in the ass

[@rkleib]

nevermind. fixed it with touchable opacity instead.

[@BeardedSmith]

"Every time you update the state, it'll call componentDidMount again and that is your cycle", well no. ComponentDidMount is only called once after the initial render. In it, we often do data-calls and set data in the state. If what you were saying was true, it would endlessly re-render. Good tutorial overall!

[@apost9019]

I can't get expo to install on my Ubuntu.. any help?

[@TylerPotts]

Sorry, in not very good with Linux OS but if you Google your error or issue I hope there will be something to help you out. Sorry I couldn't help.

[@samueldantas6817]

The problem that I had was NPM global ownership issues. Idk if you already solve it but if not we are here to help ;)

[@apost9019]

@@samueldantas6817 still haven't fixed it and since I can't install expo I gave up on react native but if I manage to install expo I'll give it a try again

[@dennisidowu9059]

@@samueldantas6817 Im having issues with the expo installation, it keeps installing the older version 2.20.3 instead of 2.21.2 Ive tried uninstalling and reinstalling as well as brew updating, upgrading and checking for outdated packages

[@TheLocedo]

Hi, im new in react native and i got an error i cant fix. When i try to add a new todo, it gives me this error. " todos.unshift is not a function. (In 'todos.unshift( { id: todos.length +1, title: this.state.todoInput, done: false })', 'todos.unshift' is undefined) " Please help me !!

[@TylerPotts]

Hmm, I'd have to see source code to help.

[@I_Unintentionally_Morph]

Can I make a mobile wallet with this

[@filiphajduk4025]

36:49 xDDDD

[@DJgetarealjob]

this guy needs a nap

[@TylerPotts]

Please, I really need one

[@NewToneMusicOfficial]

This is not beginner friendly