{"id":15159527,"url":"https://github.com/rakesh01999/reactnative001","last_synced_at":"2026-02-19T13:02:12.476Z","repository":{"id":255537018,"uuid":"851678002","full_name":"Rakesh01999/reactNative001","owner":"Rakesh01999","description":null,"archived":false,"fork":false,"pushed_at":"2024-09-05T10:43:47.000Z","size":348,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-30T05:56:35.479Z","etag":null,"topics":["mobile-app-development","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Rakesh01999.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-03T14:25:33.000Z","updated_at":"2024-09-05T10:43:49.000Z","dependencies_parsed_at":"2024-09-06T00:37:43.245Z","dependency_job_id":"6c698565-ef82-41ad-859e-bea59fd87fca","html_url":"https://github.com/Rakesh01999/reactNative001","commit_stats":null,"previous_names":["rakesh01999/reactnative001"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Rakesh01999/reactNative001","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rakesh01999%2FreactNative001","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rakesh01999%2FreactNative001/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rakesh01999%2FreactNative001/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rakesh01999%2FreactNative001/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Rakesh01999","download_url":"https://codeload.github.com/Rakesh01999/reactNative001/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rakesh01999%2FreactNative001/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29614591,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-19T10:52:55.328Z","status":"ssl_error","status_checked_at":"2026-02-19T10:52:26.323Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mobile-app-development","react-native"],"created_at":"2024-09-26T21:23:37.746Z","updated_at":"2026-02-19T13:02:12.445Z","avatar_url":"https://github.com/Rakesh01999.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Basic Commands\n1. \n```\nnpm install -g npm@10.8.1\n```\n2. Project creation:\n```\nnpx react-native@latest init reactNative01\n```\n3. Run Android:\n```\nnpx react-native run-android\n```\n\n\n## Borders at App.tsx\n```\nconst App = () =\u003e {\n  return (\n    \u003cSafeAreaView\u003e\n      \u003cView style={{\n        borderWidth: 1,\n        borderTopWidth: 5,\n        borderRightWidth: 10,\n        borderLeftWidth: 10,\n        borderBottomWidth: 10,\n        borderColor: 'green',\n        borderRadius:10,\n        borderBottomRightRadius:50,\n        borderTopLeftRadius:50\n      }}\u003e\n        \u003cText\u003eHello, World\u003c/Text\u003e\n      \u003c/View\u003e\n    \u003c/SafeAreaView\u003e\n  )\n}\n```\n\n\n## Margins at App.tsx\n```\n\u003cView style={{\n        backgroundColor:'yellow', \n        // margin:10,\n        // marginTop:5,\n        // marginLeft:50,\n        // marginRight:50,\n        // marginBottom:50,\n        marginVertical:50,\n        marginHorizontal:50\n      }}\u003e\n        \u003cText\u003eHello, World\u003c/Text\u003e\n      \u003c/View\u003e\n      \u003cView style={{\n        backgroundColor:'orange'\n      }}\u003e\n        \u003cText\u003eHello, World\u003c/Text\u003e\n      \u003c/View\u003e\n```\n\n## padd, pos, abs, rel, z idx code\n\n```\nconst App = () =\u003e {\n  return (\n    \u003cSafeAreaView style={{backgroundColor:'green', height: '100%'}}\u003e\n      \u003cView style={{position:'relative', backgroundColor:'blue', padding: 20}}\u003e\n        \u003cView style={{\n          backgroundColor: 'yellow',\n          // margin:10,\n          // marginTop:5,\n          // marginLeft:50,\n          // marginRight:50,\n          // marginBottom:50,\n          marginVertical: 50,\n          marginHorizontal: 50,\n          padding: 10,\n          // paddingLeft:100,\n          // paddingHorizontal:\"auto\",\n          // paddingVertical:\"auto\",\n          paddingVertical: 50,\n          paddingHorizontal: 50,\n          position: 'relative'\n        }}\u003e\n          \u003cText\u003eHello, World 1\u003c/Text\u003e\n        \u003c/View\u003e\n        \u003cView style={{\n          backgroundColor: 'orange',\n          // backgroundColor: 'green',\n          position: 'relative'\n        }}\u003e\n          \u003cText\u003eHello, World 2\u003c/Text\u003e\n        \u003c/View\u003e\n      \u003c/View\u003e\n    \u003c/SafeAreaView\u003e\n  )\n}\n```\n\n## Text Styles\n\n```\n  return (\n    \u003cSafeAreaView\u003e\n      \u003cView\u003e\n        \u003cView\u003e\n          \u003cText style={{\n            color: 'blue',\n            fontFamily:'Arial',\n            fontSize:30,\n            fontStyle:'italic',\n            fontWeight:'bold', \n            letterSpacing:10,\n            lineHeight:50,\n            // textAlign:'right',\n            textAlign:'center',\n            paddingTop:20\n          }}\u003eHello, World !\u003c/Text\u003e\n        \u003c/View\u003e\n      \u003c/View\u003e\n    \u003c/SafeAreaView\u003e\n  )\n```\n\n## Component -code\n```\n// Components\u003eMyText\u003eMyText.js\n\nimport React from \"react\";\n\nimport { Text } from \"react-native\";\n\nconst MyText = () =\u003e {\n    return \u003cText\u003eHello , React Native World !\u003c/Text\u003e\n}\n\nexport default MyText ; \n```\n\n## Stylesheets -code\n```\nimport { StyleSheet } from \"react-native\";\n\nconst style = StyleSheet.create({\n    text:{\n        color:'red'\n    },\n    text1:{\n        color:'blue'\n    }\n});\n\nexport default style ;\n\n// Components\u003eMyText\u003eMyText.js\n\nimport React from \"react\";\nimport style from \"./style\";\n\nimport { Text } from \"react-native\";\n\nconst MyText = () =\u003e {\n    return \u003cText style={[style.text, style.text1, {color:'green'}]}\u003e Hello , React Native World !\u003c/Text\u003e\n}\n\nexport default MyText ; \n```\n\n## View Component -code\n```\n\n  return (\n    \u003cSafeAreaView\u003e\n      \u003cView style={{backgroundColor: 'blue', height: 100, paddingVertical:25, paddingHorizontal:100}}\u003e\n          \u003cText style={{color:'white', fontSize:20}}\u003eThis is going to be our header container\u003c/Text\u003e\n      \u003c/View\u003e\n      \u003cView style={{backgroundColor:'yellow'}}\u003e\n        \u003cMyText /\u003e\n        \u003cMyText /\u003e\n        \u003cMyText /\u003e\n      \u003c/View\u003e\n      \u003cView\u003e\n        \u003cText\u003eAll Rights Reserved\u003c/Text\u003e\n      \u003c/View\u003e\n    \u003c/SafeAreaView\u003e\n  )\n```\n\n## Props, prop-types\ncmd:\n```\nnpm install prop-types\n```\n* code *\n```\n// Components\u003eItem\u003eItem.js\n\nimport React from \"react\";\nimport {View, Text} from 'react-native'\nimport PropTypes from 'prop-types';\n\nconst Item = ({name, price}) =\u003e {\n    return (\n        \u003cView\u003e\n            \u003cText\u003eName:{name}\u003c/Text\u003e\n            \u003cText\u003ePrice:{price}\u003c/Text\u003e\n        \u003c/View\u003e\n    );\n};\n\nItem.propTypes = {\n    name: PropTypes.string.isRequired,\n    price: PropTypes.number.isRequired,\n}\n\nexport default Item ;\n```\n\n## Event Handling\n\n```\nimport React from \"react\";\nimport style from \"./style\";\n\nimport { Alert, Text } from \"react-native\";\n\nconst MyText = () =\u003e {\n    const handleTextClick = () =\u003e {\n        alert('The Text has been clicked')\n    }\n    return (\n        \u003cText style={[style.text, style.text1, {color:'green'}]} onPress={()=\u003e handleTextClick()}\u003eClick Here to see alert message\u003c/Text\u003e\n    )\n}\n\nexport default MyText ; \n\n```\n\n## useState -code\n```\nimport React, { useState } from \"react\";\nimport MyText from \"./Components/MyText/MyText\";\nimport Item from \"./Components/Item/Item\";\n\nimport {\n  View,\n  Text,\n  SafeAreaView\n} from 'react-native'\n\n\nconst App = () =\u003e {\n  const [text, setText] = useState('Hello Wrold !');\n  return (\n    \u003cSafeAreaView\u003e\n      \u003cView style={{backgroundColor: 'blue', height: 100, paddingVertical:25, paddingHorizontal:120}}\u003e\n          \u003cText style={{color:'white', fontSize:20}}\u003eReact Native by Rakesh\u003c/Text\u003e\n      \u003c/View\u003e\n      \u003cItem name={'Chair'} price={100}\u003e\u003c/Item\u003e\n      \u003cItem name={'Table'} price={340}\u003e\u003c/Item\u003e\n      \u003cItem name={'Desk'} price={210}\u003e\u003c/Item\u003e\n      \u003cView\u003e\n        \u003cMyText/\u003e\n      \u003c/View\u003e\n      \u003cView style={{paddingVertical:30, paddingHorizontal:100}}\u003e\n        \u003cText onPress={()=\u003e setText('Hello World, I learned how to change state !!')}\u003e{text}\u003c/Text\u003e\n      \u003c/View\u003e\n    \u003c/SafeAreaView\u003e\n  )\n}\n\nexport default App;\n```\n\n\n## useEffect -code\n```\n// Example 1:\n\nconst App = () =\u003e {\n  const [text, setText] = useState('Hello Wrold !');\n  const [msg, setMsg] = useState('Welcome to React Native');\n  // console.log('Hi !', text)\n  useEffect(()=\u003e {\n    console.log('The text has changed !')\n  }, [msg])\n  useEffect(()=\u003e {\n    console.log('The component has rendered !')\n  }, [])\n  return (\n    \u003cSafeAreaView\u003e\n      \u003cView style={{backgroundColor: 'blue', height: 100, paddingVertical:25, paddingHorizontal:100}}\u003e\n          \u003cText style={{color:'white', fontSize:20}}\u003eReact Native by Rakesh\u003c/Text\u003e\n      \u003c/View\u003e\n      \u003cItem name={'Chair'} price={100}\u003e\u003c/Item\u003e\n      \u003cItem name={'Table'} price={340}\u003e\u003c/Item\u003e\n      \u003cItem name={'Desk'} price={210}\u003e\u003c/Item\u003e\n      \u003cView\u003e\n        \u003cMyText/\u003e\n      \u003c/View\u003e\n      \u003cView style={{paddingVertical:30, paddingHorizontal:100}}\u003e\n        \u003cText onPress={()=\u003e setText('Hello World, I learned how to change state !!')}\u003e{text}\u003c/Text\u003e\n      \u003c/View\u003e\n      \u003cView style={{paddingVertical:30, paddingHorizontal:100}}\u003e\n        \u003cText onPress={()=\u003e setMsg('Hello World, I just used useEffect Hook !!')}\u003e{msg}\u003c/Text\u003e\n      \u003c/View\u003e\n    \u003c/SafeAreaView\u003e\n  )\n}\n\n```\n\n```\n// Example 2\nconst App = () =\u003e {\n  const [text, setText] = useState(0);\n\n  // console.log('Hi !', text)\n  useEffect(()=\u003e {\n    console.log('The text has changed !')\n  }, [text])\n  useEffect(()=\u003e {\n    console.log('The component has rendered !')\n  }, [])\n  return (\n    \u003cSafeAreaView\u003e\n      \u003cView\u003e\n      \u003cView style={{backgroundColor: 'blue', height: 100,  paddingTop:20, paddingHorizontal:100}}\u003e\n          \u003cText style={{color:'white', fontSize:20}}\u003eReact Native by Rakesh\u003c/Text\u003e\n      \u003c/View\u003e\n      \u003cView style={{backgroundColor: 'green', height: 50, paddingVertical:5, paddingHorizontal:100, alignItems:\"center\"}}\u003e\n          \u003cText style={{color:'yellow', fontSize:20}}\u003euseEffect\u003c/Text\u003e\n      \u003c/View\u003e\n      \u003c/View\u003e\n      \u003cItem name={'Chair'} price={100}\u003e\u003c/Item\u003e\n      \u003cItem name={'Table'} price={340}\u003e\u003c/Item\u003e\n      \u003cItem name={'Desk'} price={210}\u003e\u003c/Item\u003e\n      \u003cView\u003e\n        \u003cMyText/\u003e\n      \u003c/View\u003e\n      \u003cView style={{backgroundColor:'orange', width:100, alignItems:\"center\", marginVertical:20, marginHorizontal:150}}\u003e\n        \u003cText style={{color:'black'}} onPress={()=\u003e setText(text+1)}\u003e{text}\u003c/Text\u003e\n      \u003c/View\u003e\n    \u003c/SafeAreaView\u003e\n  )\n}\n\n```\n\n## refs and useRef -code\n```\nconst App = () =\u003e {\n  let array = Array(300).fill(0);\n  const ScrollViewRef = useRef(null);\n\n  const handleClick = () =\u003e { \n    ScrollViewRef.current.scrollTo({x:0, y:0, animated:true}) ;\n  };\n  return (\n    \u003cSafeAreaView\u003e\n      \u003cView\u003e\n        \u003cView style={{ backgroundColor: 'blue', height: 100, paddingTop: 20, paddingHorizontal: 100 }}\u003e\n          \u003cText style={{ color: 'white', fontSize: 20 }}\u003eReact Native by Rakesh\u003c/Text\u003e\n        \u003c/View\u003e\n        \u003cView style={{ backgroundColor: 'green', height: 50, paddingVertical: 5, paddingHorizontal: 100, alignItems: \"center\" }}\u003e\n          \u003cText style={{ color: 'yellow', fontSize: 20 }}\u003erefs and useRef\u003c/Text\u003e\n        \u003c/View\u003e\n      \u003c/View\u003e\n\n\n\n      \u003cButton onPress={handleClick} title=\"Scroll To Top\"\u003e\u003c/Button\u003e\n\n      \u003cScrollView ref={ScrollViewRef} style={{marginBottom:300}}\u003e\n        {array.map((value, index: number) =\u003e \u003cText key={index} style={{ color: 'black' }}\u003e{index}  Hello World\u003c/Text\u003e)}\n      \u003c/ScrollView\u003e\n        \n    \u003c/SafeAreaView\u003e\n  )\n}\n\n```\n\n## useContext -code\n```\nimport React, { useEffect, useRef, useState } from \"react\";\nimport MyText from \"./Components/MyText/MyText\";\nimport Item from \"./Components/Item/Item\";\n\nimport {\n  View,\n  Text,\n  SafeAreaView,\n  ScrollView,\n  Button\n} from 'react-native'\nimport style from \"./Components/MyText/style\";\nimport { ThemeProvider } from \"./Components/ThemeProvider\";\nimport { ThemeToggle } from \"./Components/ThemeToggle\";\n\n\nconst App = () =\u003e {\n  \n  return (\n    \u003cSafeAreaView\u003e\n      \u003cView\u003e\n        \u003cView style={{ backgroundColor: 'blue', height: 100, paddingTop: 20, paddingHorizontal: 100 }}\u003e\n          \u003cText style={{ color: 'white', fontSize: 20 }}\u003eReact Native by Rakesh\u003c/Text\u003e\n        \u003c/View\u003e\n        \u003cView style={{ backgroundColor: 'green', height: 50, paddingVertical: 5, paddingHorizontal: 100, alignItems: \"center\" }}\u003e\n          \u003cText style={{ color: 'yellow', fontSize: 20 }}\u003euseContext\u003c/Text\u003e\n        \u003c/View\u003e\n      \u003c/View\u003e\n\n      \u003cThemeProvider\u003e\n        \u003cThemeToggle\u003e\u003c/ThemeToggle\u003e\n      \u003c/ThemeProvider\u003e \n        \n    \u003c/SafeAreaView\u003e\n  )\n}\n\nexport default App;\n```\n\n## Custom Hook -code\n```\nimport useToggle from \"./customHooks/useToggle\";\n\nconst App = () =\u003e {\n  const [isOn, toggleOn]= useToggle(false);\n  return (\n    \u003cSafeAreaView\u003e\n      \u003cView\u003e\n        \u003cView style={{ backgroundColor: 'blue', height: 100, paddingTop: 20, paddingHorizontal: 100 }}\u003e\n          \u003cText style={{ color: 'white', fontSize: 20 }}\u003eReact Native by Rakesh\u003c/Text\u003e\n        \u003c/View\u003e\n        \u003cView style={{ backgroundColor: 'green', height: 50, paddingVertical: 5, paddingHorizontal: 100, alignItems: \"center\" }}\u003e\n          \u003cText style={{ color: 'yellow', fontSize: 20 }}\u003eCustom Hook\u003c/Text\u003e\n        \u003c/View\u003e\n      \u003c/View\u003e\n\n        \u003cText\u003e{isOn ? 'ON' : 'OFF'}\u003c/Text\u003e\n      \u003cButton title={\"Toggle\"} onPress={toggleOn}\u003e\u003c/Button\u003e\n      \n    \u003c/SafeAreaView\u003e\n  )\n}\n\n```\n\n## Image Component -code\n```\nconst App = () =\u003e {\n  const [imageSource, setImageSource] = useState({uri:'http://example.com'})\n  return (\n    \u003cSafeAreaView\u003e\n          \u003cView\u003e\n        {/* \u003cImage source={require('./assets/images/cake.png')} */}\n        \u003cImage source={imageSource}\n          // style={{ height: 200, width: 200 , backgroundColor:'red'}}\n          style={{ height: '100%', width: '100%' , backgroundColor:'red'}}\n          // resizeMode={\"contain\"}\n          // resizeMode={\"stretch\"}\n          // resizeMode={\"repeat\"}\n          resizeMode={\"center\"}\n          onError={()=\u003e{\n            console.log('Error has been detected while loading an image')\n            setImageSource(require('./assets/images/cake.png'))\n          }}\n          /\u003e\n      \u003c/View\u003e\n      \u003cView\u003e\n        \u003cImage source={{ uri: \"https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-4.0.3\u0026ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8\u0026auto=format\u0026fit=crop\u0026w=1089\u0026q=80\" }}\n          style={{ height: 300, width: 300 }} /\u003e\n      \u003c/View\u003e\n    \u003c/SafeAreaView\u003e\n  )\n}\n      \n```\n\n## Text Input Component \n```\nconst App = () =\u003e {\n  const [textValue, setTextValue] = useState('')\n  const [emailValue, setEmailValue] = useState('')\n  const [passwordValue, setPasswordValue] = useState('')\n  return (\n    \u003cSafeAreaView\u003e\n\n      \u003cTextInput style={{ borderWidth: 1, borderRadius: 10, marginTop: 20 }}\n        value={textValue}\n        onChangeText={value =\u003e {\n          // console.log(value);\n          setTextValue(value);\n        }}\n        autoFocus={true}\n        //  autoFocus={false}\n        placeholder={'Please Enter Your Name'}\n      /\u003e\n\n      \u003cTextInput style={{ borderWidth: 1, borderRadius: 10, marginTop: 20 }}\n        value={emailValue}\n        onChangeText={value =\u003e {\n          // console.log(value);\n          setEmailValue(value);\n        }}\n        // returnKeyType={'route'}\n        // returnKeyType={'go'}\n        // returnKeyType={'next'}\n        returnKeyType={'search'}\n        keyboardType={'email-address'}\n        autoFocus={true}\n        //  autoFocus={false}\n        placeholder={'Please Enter Your Email'}\n      /\u003e\n\n      \u003cTextInput style={{ borderWidth: 1, borderRadius: 10, marginTop: 20 }}\n        value={passwordValue}\n        onChangeText={value =\u003e {\n          // console.log(value);\n          setPasswordValue(value);\n        }}\n        // keyboardType={'default'}\n        // keyboardType={'numeric'}\n        keyboardType={'numeric'}\n        secureTextEntry={true}\n        autoFocus={true}\n        placeholder={'Please Enter Your Password'}\n      /\u003e\n    \u003c/SafeAreaView\u003e\n  )\n}\n\n```\n\n## ScrollView Component\n```\n\u003cScrollView\n        onScroll={() =\u003e {\n          console.log('We are now scrolling')\n        }}\n        contentContainerStyle={{ backgroundColor: \"red\", height: 600 }}\n        showsVerticalScrollIndicator={false}\n        horizontal={true}\n        showsHorizontalScrollIndicator={false}\u003e\n        \u003cImage source={require('./assets/images/cake.png')}\n          style={{ height: 500, width: 500 }}\n        /\u003e\n        \u003cImage source={require('./assets/images/cake.png')}\n          style={{ height: 500, width: 500 }}\n        /\u003e\n        \u003cImage source={require('./assets/images/cake.png')}\n          style={{ height: 500, width: 500 }}\n        /\u003e\n      \u003c/ScrollView\u003e\n```\n\n## Button Component Form Submission\n```\n      \u003cView\u003e\n        \u003cScrollView\u003e\n          \u003cTextInput\n            value={email}\n            keyboardType={'email-address'}\n            style={{ borderWidth: 1, borderRadius: 7, marginHorizontal: 8, marginTop: 10 }}\n            placeholder={'Please enter your email here'}\n            onChangeText={value =\u003e {\n              setEmail(value)\n            }}\n          /\u003e\n          \u003cTextInput\n            value={password}\n            secureTextEntry={true}\n            style={{ borderWidth: 1, borderRadius: 7, marginHorizontal: 8, marginTop: 10 }}\n            placeholder={'Please enter your password here'}\n            onChangeText={value =\u003e {\n              setPassword(value)\n            }}\n          /\u003e\n          \u003cPressable\n            style={[{ backgroundColor: 'black', margin: 10, borderRadius: 20 },\n            email.length === 0 || password.length \u003c 8 \u0026\u0026 { opacity: 0.5 }]}\n            disabled={email.length === 0 || password.length \u003c 8}\n            onPress={() =\u003e {\n              console.log('clicked');\n              console.log(email, password);\n            }}\n          \u003e\n            \u003cText style={{ color: 'white', textAlign: 'center', padding: 10 }}\u003eSubmit\u003c/Text\u003e\n          \u003c/Pressable\u003e\n        \u003c/ScrollView\u003e\n      \u003c/View\u003e\n```\n\n## Switch Component\n```\nconst App = () =\u003e {\n  const [email, setEmail] = useState('');\n  const [password, setPassword] = useState('');\n  const [shouldKeepLogin, setShouldKeepLogin] = useState(true);\n  return (\n    \u003cSafeAreaView\u003e\n      \u003cView\u003e\n        \u003cView style={{ backgroundColor: 'blue', height: 100, paddingTop: 20, paddingHorizontal: 100 }}\u003e\n          \u003cText style={{ color: 'white', fontSize: 20 }}\u003eReact Native by Rakesh\u003c/Text\u003e\n        \u003c/View\u003e\n        \u003cView style={{ backgroundColor: 'green', height: 70, paddingVertical: 5, paddingHorizontal: 100, alignItems: \"center\" }}\u003e\n          \u003cText style={{ color: 'yellow', fontSize: 20 }}\u003eButton Component Form Submission\u003c/Text\u003e\n        \u003c/View\u003e\n      \u003c/View\u003e\n\n      \u003cView\u003e\n        \u003cScrollView\u003e\n          \u003cTextInput\n            value={email}\n            keyboardType={'email-address'}\n            style={{ borderWidth: 1, borderRadius: 7, marginHorizontal: 8, marginTop: 10 }}\n            placeholder={'Please enter your email here'}\n            onChangeText={value =\u003e {\n              setEmail(value)\n            }}\n          /\u003e\n          \u003cTextInput\n            value={password}\n            secureTextEntry={true}\n            style={{ borderWidth: 1, borderRadius: 7, marginHorizontal: 8, marginTop: 10 }}\n            placeholder={'Please enter your password here'}\n            onChangeText={value =\u003e {\n              setPassword(value)\n            }}\n          /\u003e\n          \u003cView style={{flex:1, flexDirection:'row', alignItems:'center'}}\u003e\n            \u003cSwitch value={shouldKeepLogin} onValueChange={(value) =\u003e {\n              setShouldKeepLogin(value);\n            }} /\u003e\n            \u003cText\u003eKeep me logged in\u003c/Text\u003e\n          \u003c/View\u003e\n\n          \u003cTouchableOpacity\n            style={[{ backgroundColor: 'black', margin: 10, borderRadius: 20 },\n            email.length === 0 || password.length \u003c 8 \u0026\u0026 { opacity: 0.5 }]}\n            disabled={email.length === 0 || password.length \u003c 8}\n            onPress={() =\u003e {\n              console.log('clicked');\n              console.log(email, password, shouldKeepLogin);\n            }}\n          \u003e\n            \u003cText style={{ color: 'white', textAlign: 'center', padding: 10 }}\u003eSubmit\u003c/Text\u003e\n          \u003c/TouchableOpacity\u003e\n        \u003c/ScrollView\u003e\n      \u003c/View\u003e\n    \u003c/SafeAreaView\u003e\n  )\n}\n```\n\n\nThis is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).\n\n# Getting Started\n\n\u003e**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.\n\n## Step 1: Start the Metro Server\n\nFirst, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native.\n\nTo start Metro, run the following command from the _root_ of your React Native project:\n\n```bash\n# using npm\nnpm start\n\n# OR using Yarn\nyarn start\n```\n\n## Step 2: Start your Application\n\nLet 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:\n\n### For Android\n\n```bash\n# using npm\nnpm run android\n\n# OR using Yarn\nyarn android\n```\n\n### For iOS\n\n```bash\n# using npm\nnpm run ios\n\n# OR using Yarn\nyarn ios\n```\n\nIf 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.\n\nThis is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.\n\n## Step 3: Modifying your App\n\nNow that you have successfully run the app, let's modify it.\n\n1. Open `App.tsx` in your text editor of choice and edit some lines.\n2. For **Android**: Press the \u003ckbd\u003eR\u003c/kbd\u003e key twice or select **\"Reload\"** from the **Developer Menu** (\u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003eM\u003c/kbd\u003e (on Window and Linux) or \u003ckbd\u003eCmd ⌘\u003c/kbd\u003e + \u003ckbd\u003eM\u003c/kbd\u003e (on macOS)) to see your changes!\n\n   For **iOS**: Hit \u003ckbd\u003eCmd ⌘\u003c/kbd\u003e + \u003ckbd\u003eR\u003c/kbd\u003e in your iOS Simulator to reload the app and see your changes!\n\n## Congratulations! :tada:\n\nYou've successfully run and modified your React Native App. :partying_face:\n\n### Now what?\n\n- 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).\n- If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started).\n\n# Troubleshooting\n\nIf you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.\n\n# Learn More\n\nTo learn more about React Native, take a look at the following resources:\n\n- [React Native Website](https://reactnative.dev) - learn more about React Native.\n- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.\n- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.\n- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.\n- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.\n\n\n\n# Connect React Native App to a \"Physical Device\" via Wi-Fi\n\nThis guide will walk you through setting up an existing React Native project to run on a physical device using Wi-Fi.\n\n## Steps\n### **Prepare Your Physical Device**\n Enable Developer Options: Navigate to your phone’s Settings \u003e About phone, and tap on the Build number seven times to unlock Developer Options.\n Activate USB Debugging: Go to Settings \u003e Developer options and enable USB debugging.\n Enable Wireless Debugging: If your device supports it, also activate Wireless debugging.\n \n\n Verify Device Connection\n Open a terminal and ensure your device is connected by running:\n\n**Go to your pc**\n\n Go to -\u003e \n React Native-Project repo\\React Native Project\\android\\app\\build\\outputs\\apk\\debug\n\n *Example:*\n E:\\React Native\\React Native - Nata Vacheishvili\\React Native Mobile App Development\\reactNative001\\android\\app\\build\\outputs\\apk\\debug\n\n -\u003e \"app-debug\" - send this file to the physical device .\n\n  PC -\u003ecmd -\u003e `ipconfig`\n  ```bash\n  ipconfig\n  ```\n  -\u003e copy the `IPv4 Address`.\n\n  **Go to Physical Device**\n  install 'app-debug' -apk \u003e open it \u003e shake your device \u003e  settings \u003e click- Debug Server host and port for device \u003e paste the the `IPv4 Address`:8081 \u003e ok\n\n  Now, Go to Metro (Node) \u003e Reload by commanding `r`\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frakesh01999%2Freactnative001","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frakesh01999%2Freactnative001","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frakesh01999%2Freactnative001/lists"}