{"_id":"@bcms-demo/new-project","_rev":"3-dc1db3227016c6bc1e22471cc2aa9299","name":"@bcms-demo/new-project","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@bcms-demo/new-project","version":"1.0.0","description":"Demo project how to create and publish npm package","main":"index.js","license":"MIT","private":false,"_id":"@bcms-demo/new-project@1.0.0","dist":{"shasum":"1245e2c4d4edd436b820cdccf57f98b3ed02e83d","integrity":"sha512-m3NPejgHOh5dclskSB32NB7a/BD74enYnVSQs2Olhzt3A+4XwU1QgMnarHcZL/5N8RxTCtiI0w0RjGt/7SEgHA==","tarball":"https://registry.npmjs.org/@bcms-demo/new-project/-/new-project-1.0.0.tgz","fileCount":6,"unpackedSize":5742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRDV3CRA9TVsSAnZWagAAk9QP/3Cs3f9Cq/UV3/sxh7Qt\nQrtK6PKqYMKP1z/y8lNXkc60hrMLzANUlQgKgmGcxDuk61gi63+aeBxsC4pY\n1Q3Z2ypJymB9qzwGYRRaLdvLeHdyYnJA6qkKmZTiiblr3SdCne0VQNj4QKod\nFwTsk90tD+WVIUCX6cxjZbFW2K2OkOrjNMV6y+pbGzrNeMKLl4be9u7qcS6F\n0FwSlNMNyVBcA9PE0dfMB4qCvT5qd2on7X0T06cjqhKHDjanw6YEzlhzQXjZ\njm/LCq4wTMu/eeX0JrIw+1ykiOFzmOA25evzQirOPoWIAhWdFYCsQp5dlQ+I\nENcLV7STlXeMYpANBe4VI0294CNsXaGU7vc2t0I+JULwiw6M3gqqeDkqzwxK\nIzoMRP7GI08Ur7LIuyrNoZsa/MAqaf8qUH3Ps9xlrHqi5+vaDfizOPX6tXlZ\nsvXj6dDNJWWtNrrOrRA4mexQm4CacoXZAbaea5zZCXGM/u/Qq/8gWGS9csgc\nSukFr+kKzXzyoS1MZqxZ0zup3yOY9zOQ/RYpvjmz/j62HExM21JHgE9bW1jO\nx01kjfY4hArUsTaXNH/WuVsFEaIKjOgnnn03SIp8mgPL6Gv8kGZpIM7tGJyL\nkLc3b1kSxDExtMv8/+Yw9W+nFTNf5kTkq3n20JYHQ/Rt4yu/7MZn3UMXGNsS\nUI0e\r\n=9xWi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFZ0SMvUtfFezhOcmTAxcgHXy5XFjDdlhNm5a4ofiePAIhAKGB5LEfl5Lq7xvHydpqzmNSGGVQpYaWy8N6JG40CALS"}]},"maintainers":[{"name":"ducnhat","email":"ddnhat@gmail.com"}],"_npmUser":{"name":"ducnhat","email":"ddnhat@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/new-project_1.0.0_1581528439262_0.19074683472630194"},"_hasShrinkwrap":false},"1.0.1":{"name":"@bcms-demo/new-project","version":"1.0.1","description":"Demo project how to create and publish npm package","main":"index.js","license":"MIT","private":false,"_id":"@bcms-demo/new-project@1.0.1","dist":{"shasum":"98d24fa1b265feab424cf7c5cd68b61adc9b4ac1","integrity":"sha512-PLStfwk76pvwHS7vvRie5dEeRMQ4rZ8SiEJshMeP1IZ2NB56KtY+virivRl1JbguVKJSN1pofb/4zThkjwDdyw==","tarball":"https://registry.npmjs.org/@bcms-demo/new-project/-/new-project-1.0.1.tgz","fileCount":6,"unpackedSize":5924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRDY8CRA9TVsSAnZWagAAvQIP/jsAny4wHfNXUfZeHyvZ\nFKEVQ8mvarCuPuzS+JampBKggrKlavS6MTGeyKCv8j1Ra/KqpqS0CkwLhqzW\nCS1aIl3cjsdafdddc6mxmU+sMA/kdD6fT5xUipD8AI6k3skiYvmkXjR6tSpq\nQH3mqXkDJZmbPOWciA6q0w1CR55jFfYtzZxbq5PG9XtEJpTQ0Avnmuekjh3P\nBHEXtjxlUbb66/19U716eEbY4txvFXaOTk+vssZ9FSFYIWFysrozTodqj3TZ\n5+qenJ5XQVbkqaiyA2t9TZPeTEldkzQtNycpBlZNQNkIS/wTQxkb71IyGSD6\neXbvFIF+KtGfzIvX91kpnbUELG8zKtpDTu9WLcu1GhLYV/SHL3UQYhxkIw65\nb9ZtnNs2iA2Pk1L1c9upF3zH8JElkOKNJ4pSEvcTDK2fjYlpNq6L/XH89Gyo\n4wuSHKiAMK6o2wFpIippDOaA9SBsjb2q5sYVUReSLhJxNwKZ6SGSvnZV2Zvo\n5tSD9Ge2o21QuMfK32GbEKFJPO97D8l+8ledG1MOwFj9EesYDgl+6I2f27pl\nUfcTpSbYaHwolxPHRGmPuXwKYZhiAgjbq5lUGQLjFkxbMHFJCt6Xvg5Txh4A\nFGcXVRYZIETpgb/E/16PueYwrW204b0M6lH4d81+iEW8FnGjz0nAXcoPoD6c\nxy6L\r\n=K+iP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE+Gla4Aiztv0U2/mxq64cVSjcpf7GhkEKky9YeZwD5lAiAvl7d87635MVp8TRLCgVT6y9JL6g3hVRRLo+J9++xkpA=="}]},"maintainers":[{"name":"ducnhat","email":"ddnhat@gmail.com"}],"_npmUser":{"name":"ducnhat","email":"ddnhat@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/new-project_1.0.1_1581528635959_0.861309343492445"},"_hasShrinkwrap":false},"1.0.2":{"name":"@bcms-demo/new-project","version":"1.0.2","description":"Demo project how to create and publish npm package","main":"index.js","license":"MIT","private":false,"_id":"@bcms-demo/new-project@1.0.2","dist":{"shasum":"98bca16ce662c92ff174de617925274ca98cc677","integrity":"sha512-c1XADUVJQNTAQaEHmetzIP1kpDimICfMp3iTeW3YbcxvocXHMdV4T8DdvQe2HIL1nRHGUBxyq5kafB8/Q/ZOig==","tarball":"https://registry.npmjs.org/@bcms-demo/new-project/-/new-project-1.0.2.tgz","fileCount":6,"unpackedSize":6100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRDe3CRA9TVsSAnZWagAANeIP/0iI74NlTVKF4qwqUmEk\nbzceOGRMCG+JGgIbKjgGpzi9jw2VmA9wbvgSBD945ggEbveSbvWv+cNOhTc4\n4owz+YgPrjelAbR/2YNJn9SNfevt2TKcFOGFrcBYRqhlwLBQ7lI507ayvhqa\nALL97Qy+bE/4dUfYDufux2BtO0q2gGiiPsxgj+3Fg4GfcG7Ph2TMGp7koqxZ\nncVhC6T88irDSpOsaeaUczSOGpfC25S6p52ti0Gxa2kL48SXCx6t72fYV4LV\nf/tHKRVK3QZ/ilWxY8J1Vkx9VeoNKjpnpZqvuLRFID4udpochS9BAS3vBFZD\ngikwdHg3IJWiPU1uj2GSk+DnZoUNc8sQlDgYd4Nm800QbtfNKO8aydrNYT/j\nATRewT20PzJT29HoaebZ+6A5blzBqLGupT4hYzo6q9pfxU4dEpDHPHv9dsyc\nIcZYlqve30xkRJRBnNVJSJhYMk35Kutr4CZSLelwoHpqE9LoxT4bN4aj/S+9\nzHEQp9dTmONHevwQsihlunQVLSsGXqj20aOI3W4U69C8BEfBbqQedLdJSak1\nqr0EYcdjCQhC9Z/4XsJvJ4I+ES/A1WMp8h1jGS5z9G/Ek+pCQdYiZkFaIzD2\nD894KZN7898BhpexKNq+Q4VAmzg7qDtdiELuYmXPNC1naMcuRxNORRr1nTC2\nDyzM\r\n=oKry\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUlZFk0Nj+lW1Y5Pt03vsDFjuKkNB4vgbHBkC1N393sQIgUUlnoexwtM541b2RF6fytc00kL0g+3b2Dw2iJq6X4Ac="}]},"maintainers":[{"name":"ducnhat","email":"ddnhat@gmail.com"}],"_npmUser":{"name":"ducnhat","email":"ddnhat@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/new-project_1.0.2_1581529015482_0.37635808463196474"},"_hasShrinkwrap":false}},"time":{"created":"2020-02-12T17:27:19.026Z","1.0.0":"2020-02-12T17:27:19.381Z","modified":"2022-04-04T18:02:04.265Z","1.0.1":"2020-02-12T17:30:36.077Z","1.0.2":"2020-02-12T17:36:55.607Z"},"maintainers":[{"name":"ducnhat","email":"ddnhat@gmail.com"}],"description":"Demo project how to create and publish npm package","license":"MIT","readme":"# How to create and publish npm package\n\n### 1. Create npm project\n- Create directory `mkdir new-project`\n- Go to created directory `cd new-project`\n- Init new npm package `npm init` and then answer the questions\n```text\nquestion name (new-project): @bcms-demo/new-project\nquestion version (1.0.0): \nquestion description: Demo project how to create and publish npm package\nquestion entry point (index.js): \nquestion repository url: \nquestion author: \nquestion license (MIT): \nquestion private: false\n```\n- After this step, you will have `package.json` file in your project with content:\n```json\n{\n    \"name\": \"@bcms-demo/new-project\",\n    \"version\": \"1.0.0\",\n    \"description\": \"Demo project how to create and publish npm package\",\n    \"main\": \"index.js\",\n    \"license\": \"MIT\",\n    \"private\": false\n}\n```\n\n### 2. Coding\n- Create `index.js` file in root directory with below content\n```javascript\nmodule.exports = require('./src/ImageViewer');\n```\n- Create `src` directory in root directory\n- Go to `src` directory and create `ImageViewer.js` file\n- Open `ImageViewer.js` file and add this content\n```javascript\n import React, {Component} from 'react';\n import {View, FlatList, Image} from 'react-native';\n \n class ImageViewer extends Component {\n     constructor(props) {\n         super(props);\n         this.state = {\n             images: [\n                 {uri: 'http://i.imgur.com/5nltiUd.jpg'},\n                 {uri: 'http://i.imgur.com/XP2BE7q.jpg'},\n                 {uri: 'http://i.imgur.com/6vOahbP.jpg'},\n                 {uri: 'http://i.imgur.com/kj5VXtG.jpg'}\n             ],\n         }\n     }\n \n     render() {\n         console.log(this.props.style.container, 1);\n         return (\n             <View style={this.props.style.container}>\n                 <FlatList\n                     style={{height: 400}}\n                     data={this.state.images}\n                     horizontal={true}\n                     renderItem={({item}) => {\n                         return (\n                             <Image source={{uri: item.uri}}\n                                    style={{width: 400, height: 400}}/>\n                         )\n                     }}\n                     keyExtractor={item => item.uri}\n                 />\n             </View>\n         )\n     }\n }\n \n export default ImageViewer;\n```\n### 3. Testing\n- Pack your package `npm pack`, after finishing you will have `bcms-demo-new-project-1.0.0.tgz` file in your project\n- Create example react native app to test your package `react-native init examples`\n- Go to `examples` directory, and install your package `npm i ../bcms-demo-new-project-1.0.0.tgz`\n- Open `examples/App.js` file and replace the content by below content\n```javascript\n/**\n * Sample React Native App\n * https://github.com/facebook/react-native\n *\n * @format\n * @flow\n */\n\nimport React from 'react';\nimport {\n  SafeAreaView,\n  StyleSheet,\n  ScrollView,\n  View,\n  Text,\n  StatusBar,\n} from 'react-native';\n\nimport {Colors} from 'react-native/Libraries/NewAppScreen';\n\nimport ImageViewer from '@bcms-demo/new-project';\n\nconst App: () => React$Node = () => {\n  return (\n    <>\n      <StatusBar barStyle=\"dark-content\" />\n      <ImageViewer style={ProductViewerStyles} />\n      <SafeAreaView>\n        <ScrollView\n          style={styles.scrollView}>\n          <View style={styles.body}>\n            <View>\n              <Text style={{fontSize: 28, marginTop: 10}}>Image Viewer</Text>\n              <Text>\n                This is an example that show how to create and publish npm\n                module\n              </Text>\n            </View>\n          </View>\n        </ScrollView>\n      </SafeAreaView>\n    </>\n  );\n};\n\nconst styles = StyleSheet.create({\n  scrollView: {\n    // backgroundColor: Colors.lighter,\n  },\n  body: {\n    backgroundColor: Colors.white,\n  },\n});\n\nconst ProductViewerStyles = StyleSheet.create({\n  container: {\n    // flex: 1,\n    marginTop: 32,\n    height: 400,\n  },\n});\n\nexport default App;\n```\n- Run example app `cd examples && npm run start && npm run ios`\n\n### 4. Create npm scope\n- Go to [https://www.npmjs.com/org/create](https://www.npmjs.com/org/create), login (or create) with your account\n- Create new scope named `bcms-demo`\n\n### 5. Publish your package\n- Login with your [npm account](https://www.npmjs.com/) `yarn login`\n- Publish your package `yarn publish --access public`\n```text\n[1/4] Bumping version...\ninfo Current version: 1.0.0\nquestion New version: -> type your new version or empty to keep current version\n```\n- Go to [npm package](https://www.npmjs.com/package/@bcms-demo/new-project), you will see your package \n- Now you can install your package `npm i @bcms-demo/new-project` in your app\n","readmeFilename":"readme.md"}