{"id":15840266,"url":"https://github.com/davealdon/beginner-react-native-template","last_synced_at":"2025-10-13T11:37:53.756Z","repository":{"id":105658472,"uuid":"547661881","full_name":"DaveAldon/Beginner-React-Native-Template","owner":"DaveAldon","description":"A React Native project built for beginners, emphasizing the best practices of atomic structure","archived":false,"fork":false,"pushed_at":"2022-10-08T04:11:02.000Z","size":223,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-07T05:52:07.516Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Java","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/DaveAldon.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":"2022-10-08T03:55:02.000Z","updated_at":"2022-10-08T04:11:07.000Z","dependencies_parsed_at":"2023-06-12T15:45:22.241Z","dependency_job_id":null,"html_url":"https://github.com/DaveAldon/Beginner-React-Native-Template","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DaveAldon/Beginner-React-Native-Template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaveAldon%2FBeginner-React-Native-Template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaveAldon%2FBeginner-React-Native-Template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaveAldon%2FBeginner-React-Native-Template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaveAldon%2FBeginner-React-Native-Template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DaveAldon","download_url":"https://codeload.github.com/DaveAldon/Beginner-React-Native-Template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaveAldon%2FBeginner-React-Native-Template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279014803,"owners_count":26085594,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2024-10-05T16:42:31.219Z","updated_at":"2025-10-13T11:37:53.737Z","avatar_url":"https://github.com/DaveAldon.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"### Beginner React Native Template\n\nThis is a work-in-progress template for React Native projects. The documentation here is for beginners to understand how to get into React Native mobile development at a basic level. This template is also intended to showcase the atomic structure of a React Native project.\n\n##### Important commands to use in terminal\n\n- `npm install`: installs all dependencies\n- `npm run start`: starts the app, then when you see the QR code you can load it directly to your android simulator by pressing \"a\"\n\n  ###### GitHub commands\n\n  Create a new branch first:\n  `git checkout -b my-new-branch-name`\n  Make sure you're in the right branch:\n  `git switch my-new-branch-name` to switch to it, or `git branch` to see what branch you're on\n\n  Then do your work. Then when you're ready to submit some changes:\n\n  - `git add .`: adds all files to the staging area\n  - `git commit -m \"message\"`: commits the changes to the staging area\n  - `git push`: pushes the changes to the remote repository\n\n##### Where important things are located\n\n- [Navigation](navigation/index.tsx): controls the tabs on the bottom of the screen. You can add a new tab by adding a component to the `BottomTabNavigator` section of the `index.tsx`\n- [Home](screens/Home/Home.tsx): the main screen for the app that people will see immediately. There is a `components` folder which should contain any components used by the Home screen\n- [components](components): A folder to contain any components that are shared by multiple screens\n\nYou should go through this tutorial that will help demonstrate some of the fundamentals: https://reactnative.dev/docs/tutorial\n\nWhen the tutorial talks about `State`, this is a more advanced topic that defines how things can change and update live. We'll get more into this later, you can play around with it if you'd like to try.\n\n##### How to make a component\n\n1. Create a file in the appropriate components folder called `ComponentName.tsx`\n2. Add the following starter code to the file:\n\n```typescript\nexport const ComponentName = () =\u003e {\n  return \u003cView\u003e{/* your code here */}\u003c/View\u003e;\n};\n```\n\n3. If the file takes in parameters, create an `interface` that defines the rules, and add the `prop` object to the component\n\n```typescript\ninterface PropsDefinition {\n  someParameter: string;\n  anotherParameter: number;\n}\nexport const ComponentName = (props: PropsDefinition) =\u003e {\n  // Access `someParameter` like this:\n  const {someParameter, anotherParameter} = props;\n  return (\n    \u003cView\u003e\n      {/* Use it like this */}\n      \u003cText\u003eMy parameter: {someParameter}\u003c/Text\u003e\n    \u003c/View\u003e\n  );\n};\n```\n\n4. Then import the component into the appropriate screen file:\n\n```typescript\nimport {ComponentName} from './components/ComponentName';\n\nexport const HomeScreen = () =\u003e {\n  return (\n    \u003cView\u003e\n      \u003cComponentName someParameter=\"Hello\" anotherParameter={42} /\u003e\n    \u003c/View\u003e\n  );\n};\n```\n\n##### How to style a component\n\nYou'll need to read up on how styling works. There are several core concepts that you'll need to understand:\n\n1. Basic styling: https://reactnative.dev/docs/style\n2. Height \u0026 width: https://reactnative.dev/docs/height-and-width\n3. Layout \u0026 Flexbox: https://reactnative.dev/docs/flexbox\n4. Images: https://reactnative.dev/docs/images\n5. Colors: https://reactnative.dev/docs/colors for this, it's simply referencing color codes and saying `color: 'red'` or `color: '#ff0000'` or `backgroundColor: '#ff0000'` or something similar.\n\nEach screen already has a stylesheet ready to go as an example, you just have to create new StylesSheets and then reference them in components.\n\n```typescript\n\u003cText style={styles.title}\u003eHome\u003c/Text\u003e\n```\n\nThis is referencing the style from the StyleSheet defined in the same file:\n\n```typescript\nconst styles = StyleSheet.create({\n  title: {\n    fontSize: 20,\n    fontWeight: 'bold',\n  },\n});\n```\n\n##### How to make a button\n\nButtons are very easy to make. You can use the `TouchableOpacity` component to make a button.\n\n```typescript\nimport {StyleSheet, Text, View, TouchableOpacity} from 'react-native';\n\nexport const HomeScreen = () =\u003e {\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cTouchableOpacity\n        onPress={() =\u003e {\n          // You can put any logic in here\n          console.log('Button pressed!');\n        }}\u003e\n        \u003cText\u003ePress me!\u003c/Text\u003e\n      \u003c/TouchableOpacity\u003e\n    \u003c/View\u003e\n  );\n};\n```\n\nSomething more interesting would be to have a button that navigates to a new screen (this gets into state usage. We use the \"useNavigation\" hook to access our navigation stack). The name we use must correspond to the name of the screen we want to navigate to, which is defined in the `navigation` folder.\n\n```typescript\nimport {StyleSheet, Text, View, TouchableOpacity} from 'react-native';\nimport {useNavigation} from '@react-navigation/native';\nimport {NativeStackNavigationProp} from '@react-navigation/native-stack';\n\nexport const HomeScreen = () =\u003e {\n  const navigation = useNavigation\u003cNativeStackNavigationProp\u003cany, any\u003e\u003e();\n\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cTouchableOpacity\n        onPress={() =\u003e {\n          navigation.navigate('Search');\n        }}\u003e\n        \u003cText\u003ePress me!\u003c/Text\u003e\n      \u003c/TouchableOpacity\u003e\n    \u003c/View\u003e\n  );\n};\n```\n\n##### How to make a scrollable list\n\nScrollView: https://reactnative.dev/docs/scrollview\nFlatList: https://reactnative.dev/docs/flatlist (more advanced, but far more powerful)\n\n##### How to add photos\n\nImage: https://reactnative.dev/docs/image\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavealdon%2Fbeginner-react-native-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavealdon%2Fbeginner-react-native-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavealdon%2Fbeginner-react-native-template/lists"}