Skip to main content

React Native Full Notes

React Native Full Notes






Device Orientation Like Youtube -

First Go To App.json and set orientation:: "default";
Then go to project folder and run npm i @react-native-community/hooks

import {  } from 'expo-status-bar';
import React from 'react';
import { Dimensions, StyleSheet, SafeAreaView, Text, View, Button, Platform, StatusBar } from 'react-native';
import { useDimensions, useDeviceOrientation } from "@react-native-community/hooks";
 
export default function App() {
  const { landscape } = useDeviceOrientation();
  return (
    <SafeAreaView style={styles.container}>
      <View style={{
        backgroundColor: "dodgerblue",
        width: "100%",
        height: landscape ? "100%" : "30%",
      }}></View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
  },
});


Important: Go to Mosh First app project to see how to organize codes in folder

Comments

Post a Comment

Popular posts from this blog

VERCEL DEPLOYMENT ERROR

 VERCEL DEPLOYMENT ERROR Options | NextAuth.js (next-auth.js.org) Step 1 : cmd $ openssl rand -base64 32 (Copy generated key) Step 2: Go to Project Environment Variables Add NEXTAUTH_SECRET : Key  Step 3: Redeploy
Post a Comment
Read more

Using Same Firebase for Web App as well as Android App

Using Same Firebase for Web App as well as Android App Create Android app in that project go to project setting click on iso or android or web icon.  Go to authentication select Google then enable select email Get client id from web sdk - Create.env.local  GOOGLE_CLIENT_ID=259eklrjelkjr GOOGLE_CLIENT_SECRET=GOlkelkrjer NEXTAUTH_URL=https://localhost:3000 - Restart the server/app - Create folder in pages/auth/signin.js
Post a Comment
Read more

Topic Learned!

 Topic Learned! State : State is updated whenever user want to update it. Example : ToDo List Props:           Props would be whatever the current state is! useEffect:            componentDidMount() {             // Run This code while the app is loading          Example fetchUser();      } Alternative For componentDidMount(): In functional components    //On Every Render   useEffect (() => {     console . log ( "I re-rendered" );   }); Alternative For componentDidMount() but runs only in first Render: //On First Render/Mount - componentDidMount   useEffect (() => {     console . log ( "Component Is Mounted" );   }, []); Alternative for componentDidUpdate(): //On First Render + whenever the component changes   //componentDidUpdate alternative   useEffect (() => {   ...
Post a Comment
Read more