React Native Tutorial for Beginners - Build a React Native App
Why Stack Overflow recommends it
Stack Overflow users link it when they are troubleshooting problems they hit while following along, such as Expo startup errors, Android emulator setup, image display and layout issues.
Recommended by 1 people across 1 different months, 2020 to 2024.
What it is
A two-hour beginner tutorial by Mosh Hamedani that walks through building a React Native app with Expo, from environment setup and running on iOS and Android simulators to layouts, images and styling. It assumes basic React knowledge and is presented as a screen-recorded, step-by-step coding course.
What people said
Recommends DEEPANSHU RAWAT · 2022-01 · Stack Overflow · on “adb command not found in linux environment”
Please try to update your bash profile. For linux users: You need to add your Android SDK location. For MAC users , in addition to the above step one extra change is required: You also need to add your Android Platform Tools location. For more detail you can watch this video for reference: [this video]
Cites tata_nukala · 2020-08 · Stack Overflow · on “expo init not working because of nodejs version”
I was watching [this video] It's a React Native tutorial video. I have installed expo-cli and tried to run expo init projectName But this is failing because of the below issue [LINK] Can anyone help me on this issue. What do I need to do here? I am using Windows 10 laptop and my current node version is v13.12.0 and npm version is 6.14.4
Cites 2s2e · 2020-09 · Stack Overflow · on “React Native Project Won't Start due to Error: EISDIR”
Beginner react native user here. I tried following Mosh's [this video] guide on React Native, but when I run the npm start command, I get this error in the terminal: Opening DevTools in the browser... (press shift-d to disable) error EISDIR: illegal operation on a directory, read. Error: EISDIR: illegal operation on a directory, read Metro Bundler process exited with code 1 Error: Metro Bundler process exited with code 1 at ChildProcess.<anonymous> (C:\@expo\xdl@57.9.35\src\Project.ts:1917:16) at Object.onceWrapper (events.js:422:26) at ChildProcess.emit (events.js:315:20) at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
Cites PeterJoe · 2020-11 · Stack Overflow · on “Images in React Native image component not showing”
don't know if i might have missed the answer somewhere, but i can not figure this out. I have followed this tutorial step by step [this video] I have all the latest versions of everything installed as this video was posed on May 2020. When he gets to adding images at about 56:43 my image does not show up. Here is my code: import { StatusBar } from "expo-status-bar"; import React from "react"; import { StyleSheet, Text, View, Image } from "react-native"; export default function App() { return ( <View style={styles.container}> <Text>Open up App.js to start working on your app!</Text> <Image source={{ width: 200, height: 300, uri: " [LINK] ", }} /> <StatusBar style="auto" /> </View> ); } const style
Cites m_s_a · 2021-03 · Stack Overflow · on “React Native Setup”
I am new to react native and I am trying to set it up using the tutorial from this youtube video: [this video] However, I am getting errors whenever I try to run the program. When I run it using expo start I get this error: Error: EMFILE: too many open files, watch at FSEvent.FSWatcher._handle.onchange (internal/fs/watchers.js:127:28) And when I run it using npm start, i get this: Error: EMFILE: too many open files, watch at FSEvent.FSWatcher._handle.onchange (internal/fs/watchers.js:127:28) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! @ start: `expo start` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the @ start script. npm ERR! This is probably not a problem with npm. There is likel
Cites Vincent · 2021-09 · Stack Overflow · on “Why can't I import this my own React Native file(WelcomeScreen.js) into my App.js file?”
I'm pretty new to React Native so please go easy on me. I'm trying to import my WelocomeScreen.js file into my App.js file. What it's suppose to do is show a background image when WelcomeScreen.js is ran. However, I keep getting this error. [LINK] Here is my WelcomeScreen.js code: import { StyleSheet, } from 'react-native-web'; import { ImageBackground } from 'react-native'; function WelcomeScreen(props) { return ( <ImageBackground styles={styles.background} source={require("../background.jpg")}></ImageBackground> ); } const styles = StyleSheet.create({ background: { flex: 1, } }) export default WelcomeScreen; This is my App.js file: import React from 'react'; import { StyleSheet, Text, View
Cites The_Last_Ruh · 2022-01 · Stack Overflow · on “Windows 10 WSL2 expo cannot find simulated android device from Android Studio”
I am new to android development and am trying to learn react-native by following a tutorial here [this video] . The problem is whenever I try to start my react-native project within my simulated android device, expo cli cannot find it . This step is at the 25 minute mark of the video and my progress can be summarized as follows: I have react-native on my machine and have installed expo cli I've downloaded Android Studio which is located: C:\Users..\AppData\Local\Android\Sdk I have my emulated android device up and running via Virtual Device Manager After typinng "npm start" When I type "a" within the terminal of WSL to run this app on my virtual android device I get the following message when it
Cites izan4mixoxo · 2023-05 · Stack Overflow · on “All my computer files (downloads, Desktop, photos, etc) were imported to VS Code and if I delete something there, it deletes the files in my computer”
I have never used VS Code before. I have taken c++ intro to CS second semester and I recently obtained an internship where I have to develop an app using React Native. I have never used the terminal in my life expect step by step tutorials from my professor to install Clion (the IDE we have used in class). On the first day my professor just sent us some video tutorials on how to create an app with React ( [this video] ) but my Mac is really old so I've been having to download different versions of Xcode and Node.js. I followed the video to download VS Code. Anyway, I got to the point where he says to open the project in VS Code and when I did, it gave me an error message. To be honest, I did so m
Cites Mr. Techie · 2024-04 · Stack Overflow · on “React Native position:"absolute" not working”
I am newbie to react-native, I was learning it from youtube but in there the code block used to align the logo-image on top of the screen works, however for me the code didn't work. The exact timestamp of the video is here [this video] . Following is my code: import React from "react"; import { ImageBackground, StyleSheet, View, Image, Text } from "react-native"; function WelcomeScreen(){ return ( <ImageBackground style={styles.background} > <View styles={styles.logoContainer}> <Image styles={styles.logo} source={require('../assets/favicon.png')} /> <Text>Don't know why isn't it working</Text> </View> <View style={styles.loginButton}></View> <View style={styles.registerButton}></View> </ImageBack