iamshaunjp / react-native-tutorial

All the course files for the React Tutorial for Beginners playlist on The Ne Ninja Playlist

React Native Tutorial

This repo contains all the course files for the React Tutorial for Beginners playlist on The Net Ninja Playlist

Using the course files

Each lesson in the series has its own branch, so you'll need to select that branch to see the coe for that lesson. E.g. to see the code for lesson 10, you would select the lesson-10 branch.

Installing dependencies

If you download the repo code / clone the repo, you will need to run npm install in the project directory to install any project dependencies first. Without doing this, the code may not work as expected.

react-native-tutorial's Issues

Error when running expo init myproject on Windows machine

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 myproject. 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 .

TypeError: interpolate is not a function :(

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?

Navigation

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';

i have this error when i run my expo app

TouchableWithoutFeedback component breaks FlatList scrolling...

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>

Lesson 13:

AppLoading component needs fixing

react-native-tutorial/gamezone/App.js

Line 4 in 68a2585

import { AppLoading } from 'expo';

https://docs.expo.dev/versions/latest/sdk/app-loading/

this error appear when i run my app: 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.

import error

react-native-tutorial/gamezone/screens/about.js

Line 3 in 990cc74

import { globalStyles } from './styles/global';

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.

this error appear when i run the code

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)

• node_modules/react-native/Libraries/LogBox/LogBox.js:148:8 in registerError
• node_modules/react-native/Libraries/LogBox/LogBox.js:59:8 in errorImpl
• node_modules/react-native/Libraries/LogBox/LogBox.js:33:4 in console.error
• node_modules/expo/build/environment/react-native-logs.fx.js:27:4 in error
• node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
• node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
• node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
• node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:9:32 in ErrorUtils.setGlobalHandler$argument_0
• node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch
• node_modules/regenerator-runtime/runtime.js:293:29 in invoke
• node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch
• node_modules/regenerator-runtime/runtime.js:154:27 in invoke
• node_modules/regenerator-runtime/runtime.js:164:18 in PromiseImpl.resolve.then$argument_0
• node_modules/react-native/node_modules/promise/setimmediate/core.js:37:13 in tryCallOne
• node_modules/react-native/node_modules/promise/setimmediate/core.js:123:24 in setImmediate$argument_0
• node_modules/react-native/Libraries/Core/Timers/JSTimers.js:130:14 in _callTimer
• node_modules/react-native/Libraries/Core/Timers/JSTimers.js:181:14 in _callImmediatesPass
• node_modules/react-native/Libraries/Core/Timers/JSTimers.js:441:30 in callImmediates
• node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:387:6 in __callImmediates
• node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:135:6 in __guard$argument_0
• node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:364:10 in __guard
• node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:134:4 in flushedQueue

• [native code]:null in flushedQueue
• [native code]:null in invokeCallbackAndReturnFlushedQueue

an issue in branches 😅😅😅😅

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 😍😍😍😍

Error: Invariant Violation: requireNativeComponent: "RNGestureHandlerRootView" was not found in the UIManager.

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);

Running the app in the browser

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