iamshaunjp / react-native-tutorial Goto Github PK
View Code? Open in Web Editor NEWAll the course files for the React Tutorial for Beginners playlist on The Ne Ninja Playlist
All the course files for the React Tutorial for Beginners playlist on The Ne Ninja Playlist
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of App
.
This error is located at:
in App (created by ExpoRoot)
in ExpoRoot (at renderApplication.js:45)
in RCTView (at View.js:34)
in View (at AppContainer.js:106)
in DevAppContainer (at AppContainer.js:121)
in RCTView (at View.js:34)
in View (at AppContainer.js:132)
in AppContainer (at renderApplication.js:39)
After installing all the packages of navigation. Still finding issue with navigation
Module not found: Can't resolve 'react-navigation/stack'
1 | import { createStackNavigator } from 'react-navigation/stack';
2 | import { createAppContainer } from 'react-navigation';
3 | import Home from '../screens/home';
4 | import ReviewDetails from '../screens/review';
While i followed the project in lesson 20, i got this error..
Invariant Violation: requireNativeComponent: "RNGestureHandlerRootView" was not found in the UIManager.
All of my file is the same, what did i do wrong?
My App.js file:
import { useState } from 'react';
import * as Font from 'expo-font';
import AppLoading from 'expo-app-loading';
import Navigator from './routes/homeStack';
const getFonts = () => Font.loadAsync({
'eduSABeginner-regular': require('./assets/fonts/EduSABeginner-Regular.ttf'),
'eduSABeginner-bold': require('./assets/fonts/EduSABeginner-Bold.ttf')
});
export default function App() {
const [fontsLoaded, setFontsLoaded] = useState(false);
if (fontsLoaded) {
return (
<Navigator />
);
} else {
return (
<AppLoading
startAsync = {getFonts}
onFinish = {() => setFontsLoaded(true)}
onError={() => console.log('error')} />
)
}
}
My homeStack.js file:
import { createStackNavigator } from "react-navigation-stack";
import {createAppContainer} from "react-navigation";
import HomePage from '../screens/HomePage';
import ReviewDetails from "../screens/ReviewDetails";
const screens = {
HomePage: {
screen: HomePage,
},
ReviewDetails: {
screen: ReviewDetails,
}
};
const HomeStack = createStackNavigator(screens);
export default createAppContainer(HomeStack);
Hi, there is an issue in your branches, I taught each branches related to each video, but when I look for the code I didn't find what I'm looking for because I think your codes weren't push to each branches I guess. thank you for your efforts and your lovely content ๐๐๐๐
after the App.js views are wrapped in the TouchableWithoutFeedback component, if the list becomes longer than the Item container for the FlatList, scrolling breaks...
I fixed it by wrapping the ToDoItem component in another TouchableWithoutFeedback, which makes the items 'touchable' again, allowing them to scroll...
export default function ToDoItem ({ item, pressHandler }) {
return (
**<TouchableWithoutFeedback>**
<View style={styles.item}>
<Text style={styles.desc}>{item.text}</Text>
<View style={styles.marked}>
<TouchableOpacity onPress={() => pressHandler(item.id)}>
<Text>Done</Text>
</TouchableOpacity>
{/* <Button
title="Done"
onPress={()=> pressHandler(item.id)}/> */}
</View>
</View>
**</TouchableWithoutFeedback>**
)
}
However, if a user tries scrolling from the "list" view (pressing 'between' two items to scroll), then scrolling is still disabled. I havent been able to figure out how to fix that, except for minimizing the 'marginTop' style for the items (bringing them closer together)...
Any ideas on how to make any press within the App.js list view?
I tried wrapping it in another Touchable component, as well as adding a 'onStartShouldSetResponder' prop to the 'list' View, both unsuccessfully...
from App.js
<TouchableWithoutFeedback
onPress={()=> {
if (isKeyboardVisible) {
Keyboard.dismiss();
console.log('keyboard dismissed');
}
}}
accessible={false}>
<View
style={styles.container}>
{/* {header} */}
<Header />
<View
style={styles.content}>
{/* {add todo form} */}
<AddToDo
submitHandler={submitHandler}
/>
<TouchableWithoutFeedback
onPress={()=>{}}>
<View
onStartShouldSetResponder={() => true}
style={styles.list}>
{/* {todo list items} */}
<FlatList
data={toDos}
renderItem={( {item} ) => (
<ToDoItem
item={item}
pressHandler={pressHandler}
/>
)}
/>
</View>
</TouchableWithoutFeedback>
</View>
</View>
</TouchableWithoutFeedback>
I found this tutorial helpful if your computer have set up for react.js and needs to be reconfigured for react-native development: https://amanhimself.dev/blog/setup-macbook-m1/
Alright then, Shaun ;) I created a new navigation drawer just like you did, and I followed exactly the same steps you did. But when I run the app on my android device, it's showing TypeError: interpolate is not a function. What should I do?
The globalStyles import in the about screen file has only one period instead of two hence it's accessing the screens folder instead of the root folder to access the styles and then globalStyles.
May you please also include the below information the Readme file.
For those who will encounter an error on a Windows machine when they run expo init myprojec
t. Go to [https:/go.microsoft.com/fwlink/?LinkID=135170](this microsoft website) and read about the script execution policy. I had to run this command on my Powershell before I could run the script. Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
.
Hi Shaun -
Super excellent tutorial. I am able to run a derived app in the mobile no problem. But, this app just don't run on web. The forms show up in the home page itself (without pressing the + button). Have you tried to run this on the web? Any recommendations?
-Abhji
I cloned this repo using git clone https://github.com/iamshaunjp/react-native-tutorial.git
then with cd react-native-tutorial
I went into working folder
then I run npm install
and got an error:
`D:\ReactPrjcts\ReactNative\netNinjaPrj2\react-native-tutorial>npm install
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path D:\ReactPrjcts\ReactNative\netNinjaPrj2\react-native-tutorial\package.json
npm ERR! errno -4058
npm ERR! enoent Could not read package.json: Error: ENOENT: no such file or directory, open 'D:\ReactPrjcts\ReactNative\netNinjaPrj2\react-native-tutorial\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in: C:\Users\simch\AppData\Local\npm-cache_logs\2024-05-03T12_31_52_845Z-debug-0.log`
I checked what files there are inside of react-native-tutorial
folder and found only two files: README
and .git
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.