{"id":15463735,"url":"https://github.com/ntamvl/react_native_counter_example","last_synced_at":"2025-08-25T23:07:39.619Z","repository":{"id":83971119,"uuid":"94165850","full_name":"ntamvl/react_native_counter_example","owner":"ntamvl","description":"React Native Counter Example use create-react-native-app ","archived":false,"fork":false,"pushed_at":"2017-06-19T07:36:41.000Z","size":92,"stargazers_count":4,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-10T06:15:42.730Z","etag":null,"topics":["react","react-native","react-native-example","redux"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ntamvl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2017-06-13T03:40:44.000Z","updated_at":"2024-02-21T10:48:23.000Z","dependencies_parsed_at":"2023-06-18T00:06:45.686Z","dependency_job_id":null,"html_url":"https://github.com/ntamvl/react_native_counter_example","commit_stats":{"total_commits":9,"total_committers":1,"mean_commits":9.0,"dds":0.0,"last_synced_commit":"2100ecdc08f7603e5732efdabb9138806d8705ca"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ntamvl/react_native_counter_example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ntamvl%2Freact_native_counter_example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ntamvl%2Freact_native_counter_example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ntamvl%2Freact_native_counter_example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ntamvl%2Freact_native_counter_example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ntamvl","download_url":"https://codeload.github.com/ntamvl/react_native_counter_example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ntamvl%2Freact_native_counter_example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272144649,"owners_count":24881141,"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-08-25T02:00:12.092Z","response_time":1107,"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":["react","react-native","react-native-example","redux"],"created_at":"2024-10-02T00:23:24.429Z","updated_at":"2025-08-25T23:07:39.597Z","avatar_url":"https://github.com/ntamvl.png","language":"JavaScript","readme":"# React Native Counter Example\nUse `create-react-native-app` and `redux`\n\n## Install `create-react-native-app`\nFollowing https://facebook.github.io/react-native/docs/getting-started.html\n\nUse npm to install the create-react-native-app command line utility:\n```\nnpm install -g create-react-native-app\n```\n\n## Create App\n```\ncd \u0026\u0026 mkdir react_native_counter_example \u0026\u0026 cd react_native_counter_example \u0026\u0026 create-react-native-app .\n```\n\n## Create folders\n```\nmkdir -p src/{components,containers,store}\n```\n\n## Add package `react-redux`, `redux`\n```\nyarn add redux react-redux\n```\n\n## Create Counter component\nCreate file `src/components/Counter.js`\n\n```JavaScript\nimport React, { Component } from 'react';\nimport {\n  Button,\n  StyleSheet,\n  Text,\n  View,\n} from 'react-native';\n\nconst propTypes = {};\n\nconst defaultProps = {};\n\nexport default class Counter extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {};\n  }\n\n  render() {\n    return (\n      \u003cView\u003e\n        \u003cButton\n          title=\"Up\"\n          onPress={this.props.increment}/\u003e\n        \u003cText\n          style={styles.counter}\n          onPress={this.props.reset}\u003e\n          {this.props.count}\n        \u003c/Text\u003e\n        \u003cButton\n          title=\"Down\"\n          onPress={this.props.decrement}/\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  counter: {\n    padding: 30,\n    alignSelf: 'center',\n    fontSize: 26,\n    fontWeight: 'bold',\n  },\n});\n```\n\n## Create store\nCreate file `src/store/store.js`\n\n```JavaScript\nimport { createStore } from 'redux'\n\nexport const counter = (state = 0, action) =\u003e {\n  switch (action.type) {\n  case 'INCREMENT':\n    return state + 1;\n  case 'DECREMENT':\n    return state - 1;\n  case 'RESET':\n    return 0;\n  default:\n    return state;\n  }\n}\n\nlet store = createStore(counter);\n\nexport default store;\n```\n\n## Create Counter container\nCreate file `src/containers/CounterContainer.js`\n\n```JavaScript\nimport React, { Component } from 'react';\nimport { bindActionCreators } from 'redux';\nimport { connect } from 'react-redux';\nimport Counter from '../components/Counter';\n\nconst mapStateToProps = state =\u003e ({\n  count: state\n})\n\nconst mapDispatchToProps = (dispatch) =\u003e ({\n  increment: () =\u003e { dispatch({ type: 'INCREMENT' }) },\n  decrement: () =\u003e { dispatch({ type: 'DECREMENT' }) },\n  reset: () =\u003e { dispatch({ type: 'RESET' }) }\n})\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Counter)\n```\n\n## Edit file `App.js`\n\n```JavaScript\nimport React from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\nimport { Provider } from 'react-redux';\nimport store from './src/store/store';\nimport CounterContainer from './src/containers/CounterContainer';\n\nexport default class App extends React.Component {\n  render() {\n    return (\n      \u003cProvider store={store}\u003e\n        \u003cView style={styles.container}\u003e\n          \u003cText style={styles.title}\u003eCounter\u003c/Text\u003e\n          \u003cCounterContainer /\u003e\n        \u003c/View\u003e\n      \u003c/Provider\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#fff',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  title: {\n    fontSize: 30\n  }\n});\n```\n\n## To run App\n```\nyarn start\n```\nOR\n```\nyarn run ios\n```\n\n**NOTE: If you see errors:**\n```\nDuplicate module name: fb-watchman\n```\n\nTo Resolve, run this command:\n```\nyarn cache clean\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fntamvl%2Freact_native_counter_example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fntamvl%2Freact_native_counter_example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fntamvl%2Freact_native_counter_example/lists"}