Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/rakesh01999/reactnative001


https://github.com/rakesh01999/reactnative001

mobile-app-development react-native

Last synced: 3 months ago
JSON representation

Awesome Lists containing this project

README 

          
## Basic Commands

1. 

```

npm install -g npm@10.8.1

```

2. Project creation:

```

npx react-native@latest init reactNative01

```

3. Run Android:

```

npx react-native run-android

```



## Borders at App.tsx

```

const App = () => {

  return (

    

      

        Hello, World

      

    

  )

}

```



## Margins at App.tsx

```



        Hello, World

      

      

        Hello, World

      

```



## padd, pos, abs, rel, z idx code



```

const App = () => {

  return (

    

      

        

          Hello, World 1

        

        

          Hello, World 2

        

      

    

  )

}

```



## Text Styles



```

  return (

    

      

        

          Hello, World !

        

      

    

  )

```



## Component -code

```

// Components>MyText>MyText.js



import React from "react";



import { Text } from "react-native";



const MyText = () => {

    return Hello , React Native World !

}



export default MyText ; 

```



## Stylesheets -code

```

import { StyleSheet } from "react-native";



const style = StyleSheet.create({

    text:{

        color:'red'

    },

    text1:{

        color:'blue'

    }

});



export default style ;



// Components>MyText>MyText.js



import React from "react";

import style from "./style";



import { Text } from "react-native";



const MyText = () => {

    return  Hello , React Native World !

}



export default MyText ; 

```



## View Component -code

```



  return (

    

      

          This is going to be our header container

      

      

        

        

        

      

      

        All Rights Reserved

      

    

  )

```



## Props, prop-types

cmd:

```

npm install prop-types

```

* code *

```

// Components>Item>Item.js



import React from "react";

import {View, Text} from 'react-native'

import PropTypes from 'prop-types';



const Item = ({name, price}) => {

    return (

        

            Name:{name}

            Price:{price}

        

    );

};



Item.propTypes = {

    name: PropTypes.string.isRequired,

    price: PropTypes.number.isRequired,

}



export default Item ;

```



## Event Handling



```

import React from "react";

import style from "./style";



import { Alert, Text } from "react-native";



const MyText = () => {

    const handleTextClick = () => {

        alert('The Text has been clicked')

    }

    return (

         handleTextClick()}>Click Here to see alert message

    )

}



export default MyText ; 



```



## useState -code

```

import React, { useState } from "react";

import MyText from "./Components/MyText/MyText";

import Item from "./Components/Item/Item";



import {

  View,

  Text,

  SafeAreaView

} from 'react-native'



const App = () => {

  const [text, setText] = useState('Hello Wrold !');

  return (

    

      

          React Native by Rakesh

      

      

      

      

      

        

      

      

         setText('Hello World, I learned how to change state !!')}>{text}

      

    

  )

}



export default App;

```



## useEffect -code

```

// Example 1:



const App = () => {

  const [text, setText] = useState('Hello Wrold !');

  const [msg, setMsg] = useState('Welcome to React Native');

  // console.log('Hi !', text)

  useEffect(()=> {

    console.log('The text has changed !')

  }, [msg])

  useEffect(()=> {

    console.log('The component has rendered !')

  }, [])

  return (

    

      

          React Native by Rakesh

      

      

      

      

      

        

      

      

         setText('Hello World, I learned how to change state !!')}>{text}

      

      

         setMsg('Hello World, I just used useEffect Hook !!')}>{msg}

      

    

  )

}



```



```

// Example 2

const App = () => {

  const [text, setText] = useState(0);



  // console.log('Hi !', text)

  useEffect(()=> {

    console.log('The text has changed !')

  }, [text])

  useEffect(()=> {

    console.log('The component has rendered !')

  }, [])

  return (

    

      

      

          React Native by Rakesh

      

      

          useEffect

      

      

      

      

      

      

        

      

      

         setText(text+1)}>{text}

      

    

  )

}



```



## refs and useRef -code

```

const App = () => {

  let array = Array(300).fill(0);

  const ScrollViewRef = useRef(null);



  const handleClick = () => { 

    ScrollViewRef.current.scrollTo({x:0, y:0, animated:true}) ;

  };

  return (

    

      

        

          React Native by Rakesh

        

        

          refs and useRef

        

      



      



      

        {array.map((value, index: number) => {index}  Hello World)}

      

        

    

  )

}



```



## useContext -code

```

import React, { useEffect, useRef, useState } from "react";

import MyText from "./Components/MyText/MyText";

import Item from "./Components/Item/Item";



import {

  View,

  Text,

  SafeAreaView,

  ScrollView,

  Button

} from 'react-native'

import style from "./Components/MyText/style";

import { ThemeProvider } from "./Components/ThemeProvider";

import { ThemeToggle } from "./Components/ThemeToggle";



const App = () => {

  

  return (

    

      

        

          React Native by Rakesh

        

        

          useContext

        

      



      

        

       

        

    

  )

}



export default App;

```



## Custom Hook -code

```

import useToggle from "./customHooks/useToggle";



const App = () => {

  const [isOn, toggleOn]= useToggle(false);

  return (

    

      

        

          React Native by Rakesh

        

        

          Custom Hook

        

      



        {isOn ? 'ON' : 'OFF'}

      

      

    

  )

}



```



## Image Component -code

```

const App = () => {

  const [imageSource, setImageSource] = useState({uri:'http://example.com'})

  return (

    

          

        {/* {

            console.log('Error has been detected while loading an image')

            setImageSource(require('./assets/images/cake.png'))

          }}

          />

      

      

        

      

    

  )

}

      

```



## Text Input Component 

```

const App = () => {

  const [textValue, setTextValue] = useState('')

  const [emailValue, setEmailValue] = useState('')

  const [passwordValue, setPasswordValue] = useState('')

  return (

    



       {

          // console.log(value);

          setTextValue(value);

        }}

        autoFocus={true}

        //  autoFocus={false}

        placeholder={'Please Enter Your Name'}

      />



       {

          // console.log(value);

          setEmailValue(value);

        }}

        // returnKeyType={'route'}

        // returnKeyType={'go'}

        // returnKeyType={'next'}

        returnKeyType={'search'}

        keyboardType={'email-address'}

        autoFocus={true}

        //  autoFocus={false}

        placeholder={'Please Enter Your Email'}

      />



       {

          // console.log(value);

          setPasswordValue(value);

        }}

        // keyboardType={'default'}

        // keyboardType={'numeric'}

        keyboardType={'numeric'}

        secureTextEntry={true}

        autoFocus={true}

        placeholder={'Please Enter Your Password'}

      />

    

  )

}



```



## ScrollView Component

```

 {

          console.log('We are now scrolling')

        }}

        contentContainerStyle={{ backgroundColor: "red", height: 600 }}

        showsVerticalScrollIndicator={false}

        horizontal={true}

        showsHorizontalScrollIndicator={false}>

        

        

        

      

```



## Button Component Form Submission

```

      

        

           {

              setEmail(value)

            }}

          />

           {

              setPassword(value)

            }}

          />

           {

              console.log('clicked');

              console.log(email, password);

            }}

          >

            Submit

          

        

      

```



## Switch Component

```

const App = () => {

  const [email, setEmail] = useState('');

  const [password, setPassword] = useState('');

  const [shouldKeepLogin, setShouldKeepLogin] = useState(true);

  return (

    

      

        

          React Native by Rakesh

        

        

          Button Component Form Submission

        

      



      

        

           {

              setEmail(value)

            }}

          />

           {

              setPassword(value)

            }}

          />

          

             {

              setShouldKeepLogin(value);

            }} />

            Keep me logged in

          



           {

              console.log('clicked');

              console.log(email, password, shouldKeepLogin);

            }}

          >

            Submit

          

        

      

    

  )

}

```



This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).



# Getting Started



>**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding.



## Step 1: Start the Metro Server



First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native.



To start Metro, run the following command from the _root_ of your React Native project:



```bash

# using npm

npm start



# OR using Yarn

yarn start

```



## Step 2: Start your Application



Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app:



### For Android



```bash

# using npm

npm run android



# OR using Yarn

yarn android

```



### For iOS



```bash

# using npm

npm run ios



# OR using Yarn

yarn ios

```



If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly.



This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.



## Step 3: Modifying your App



Now that you have successfully run the app, let's modify it.



1. Open `App.tsx` in your text editor of choice and edit some lines.

2. For **Android**: Press the R key twice or select **"Reload"** from the **Developer Menu** (Ctrl + M (on Window and Linux) or Cmd ⌘ + M (on macOS)) to see your changes!



   For **iOS**: Hit Cmd ⌘ + R in your iOS Simulator to reload the app and see your changes!



## Congratulations! :tada:



You've successfully run and modified your React Native App. :partying_face:



### Now what?



- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).

- If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started).



# Troubleshooting



If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.



# Learn More



To learn more about React Native, take a look at the following resources:



- [React Native Website](https://reactnative.dev) - learn more about React Native.

- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.

- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.

- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.

- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.



# Connect React Native App to a "Physical Device" via Wi-Fi



This guide will walk you through setting up an existing React Native project to run on a physical device using Wi-Fi.



## Steps

### **Prepare Your Physical Device**

 Enable Developer Options: Navigate to your phone’s Settings > About phone, and tap on the Build number seven times to unlock Developer Options.

 Activate USB Debugging: Go to Settings > Developer options and enable USB debugging.

 Enable Wireless Debugging: If your device supports it, also activate Wireless debugging.

 



 Verify Device Connection

 Open a terminal and ensure your device is connected by running:



**Go to your pc**



 Go to -> 

 React Native-Project repo\React Native Project\android\app\build\outputs\apk\debug



 *Example:*

 E:\React Native\React Native - Nata Vacheishvili\React Native Mobile App Development\reactNative001\android\app\build\outputs\apk\debug



 -> "app-debug" - send this file to the physical device .



  PC ->cmd -> `ipconfig`

  ```bash

  ipconfig

  ```

  -> copy the `IPv4 Address`.



  **Go to Physical Device**

  install 'app-debug' -apk > open it > shake your device >  settings > click- Debug Server host and port for device > paste the the `IPv4 Address`:8081 > ok



  Now, Go to Metro (Node) > Reload by commanding `r`