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

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

React Native Notes

React Native Notes Flatlist Vs ScrollView:     Flatlist when you have infinite data then it will boost your apps performance.     ScrollView when you have 20 or less items to display Why we use key in array render? - Let's take an ex you have to render posts on ig if key is not present then every time the new post is added to array js will rerender all the posts  - But if we use key={id}then js will only render the newest post - And save juicy computational power
Post a Comment
Read more