{"_id":"@dfmanosalva/react-native-beauty-webview","_rev":"7-728745304989b1ed149824c71c6ebe59","name":"@dfmanosalva/react-native-beauty-webview","dist-tags":{"latest":"3.0.7"},"versions":{"3.0.0":{"name":"@dfmanosalva/react-native-beauty-webview","version":"3.0.0","keywords":["webview","react-native-webview","webview like Instagram","react-native instagram","react-native copy link"],"author":{"url":"https://github.com/ilkerkesici","name":"İlker Kesici","email":"ilkerrkesici@gmail.com"},"license":"MIT","_id":"@dfmanosalva/react-native-beauty-webview@3.0.0","maintainers":[{"name":"dfmanosalva","email":"df.manosalva@uniandes.edu.co"}],"dist":{"shasum":"5ed1624a7ab9e03436a413b74cc4f87102e184a4","tarball":"https://registry.npmjs.org/@dfmanosalva/react-native-beauty-webview/-/react-native-beauty-webview-3.0.0.tgz","fileCount":31,"integrity":"sha512-XlDjD1znbreh1NvWfnkpVqbBQ/oZwy8d/fpVKxiqARVKg0px9j5CGyXOX0RN7yCkzP2d/exyZdSJCrX/0RiXzg==","signatures":[{"sig":"MEUCIQCEstmsZKhTz8YUQuQQtRiZkgCiz1N+Fkuonz96unfVRQIgbKIETL8Z215D8J07RyHj6mYy8F4v/R6ey2KF8i6QMGc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3246638},"main":"index.js","github":"https://github.com/dmanosalva/react-native-beauty-webview","engines":{"node":">=18"},"gitHead":"c22350eac87802b57b5b8c994bbe4fc0aea12eb0","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"dfmanosalva","email":"df.manosalva@uniandes.edu.co"},"_npmVersion":"10.8.2","description":"React-Native Beatuy Web View with different functionalty, and beauty ui","directories":{},"_nodeVersion":"20.17.0","_hasShrinkwrap":false,"devDependencies":{"prettier":"2.8.8","typescript":"5.0.4","@types/react":"^18.3.12","@react-native/typescript-config":"0.75.1"},"peerDependencies":{"react":"*","react-native":"^0.75.0","react-native-webview":"^13.12.3","@react-native-community/clipboard":"^1.5.1"},"_npmOperationalInternal":{"tmp":"tmp/react-native-beauty-webview_3.0.0_1731456356218_0.5739730317895717","host":"s3://npm-registry-packages"}},"3.0.1":{"name":"@dfmanosalva/react-native-beauty-webview","version":"3.0.1","keywords":["webview","react-native-webview","webview like Instagram","react-native instagram","react-native copy link"],"author":{"url":"https://github.com/ilkerkesici","name":"İlker Kesici","email":"ilkerrkesici@gmail.com"},"license":"MIT","_id":"@dfmanosalva/react-native-beauty-webview@3.0.1","maintainers":[{"name":"dfmanosalva","email":"df.manosalva@uniandes.edu.co"}],"dist":{"shasum":"222f618a1392ccdeaf1567b51c7e2c51425372f0","tarball":"https://registry.npmjs.org/@dfmanosalva/react-native-beauty-webview/-/react-native-beauty-webview-3.0.1.tgz","fileCount":31,"integrity":"sha512-L302hxKknY9eYvgrRJrYzkaRVGykyOLz4elq0JqbxR197XfssJ4YeZCSWWw6Cs8MynXK6N6J3Jce7fQgXn+oJQ==","signatures":[{"sig":"MEYCIQDg0cMI5HEAKOFTS3cawH/FWkQ/B6Ou4fVcHt4b5Nin+gIhAJhgexy6a2wPbcYhdHZ340xBlwUy96WKHy5IoRUhVZ2u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3246639},"main":"index.js","github":"https://github.com/dmanosalva/react-native-beauty-webview","engines":{"node":">=18"},"gitHead":"c22350eac87802b57b5b8c994bbe4fc0aea12eb0","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"dfmanosalva","email":"df.manosalva@uniandes.edu.co"},"_npmVersion":"10.8.2","description":"React-Native Beatuy Web View with different functionalty, and beauty ui","directories":{},"_nodeVersion":"20.17.0","_hasShrinkwrap":false,"devDependencies":{"prettier":"2.8.8","typescript":"5.0.4","@types/react":"^18.3.12","@react-native/typescript-config":"0.75.1"},"peerDependencies":{"react":"*","react-native":"^0.75.0","react-native-webview":"^13.12.3","@react-native-clipboard/clipboard":"^1.15.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-beauty-webview_3.0.1_1731457299184_0.6086937402232258","host":"s3://npm-registry-packages"}},"3.0.2":{"name":"@dfmanosalva/react-native-beauty-webview","version":"3.0.2","keywords":["webview","react-native-webview","webview like Instagram","react-native instagram","react-native copy link"],"author":{"url":"https://github.com/ilkerkesici","name":"İlker Kesici","email":"ilkerrkesici@gmail.com"},"license":"MIT","_id":"@dfmanosalva/react-native-beauty-webview@3.0.2","maintainers":[{"name":"dfmanosalva","email":"df.manosalva@uniandes.edu.co"}],"dist":{"shasum":"68f024e7c920f5b69663b8cb23440e329bd0998e","tarball":"https://registry.npmjs.org/@dfmanosalva/react-native-beauty-webview/-/react-native-beauty-webview-3.0.2.tgz","fileCount":31,"integrity":"sha512-kCur9gU0Q1rBhlazyTDv9CuZnnbPVv/Zi+pZxaUU1L//QS/GD8h/gVmRKdgSqyooKQm3Z9qZce4djZMgRDJEbg==","signatures":[{"sig":"MEYCIQCdgD4MNYqXSJYYRB1WgDFCze5159v2h/MyPO3A07AoNgIhAMqTadxlz7wlnN5p4UquHRIrqTCxNrScVDanIQw7u2vT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3246640},"main":"index.tsx","github":"https://github.com/dmanosalva/react-native-beauty-webview","engines":{"node":">=18"},"gitHead":"6fa64c36960fc06a180a4e20e2f5ee94aa81c272","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"dfmanosalva","email":"df.manosalva@uniandes.edu.co"},"_npmVersion":"10.8.2","description":"React-Native Beatuy Web View with different functionalty, and beauty ui","directories":{},"_nodeVersion":"20.17.0","_hasShrinkwrap":false,"devDependencies":{"prettier":"2.8.8","typescript":"5.0.4","@types/react":"^18.3.12","@react-native/typescript-config":"0.75.1"},"peerDependencies":{"react":"*","react-native":"^0.75.0","react-native-webview":"^13.12.3","@react-native-clipboard/clipboard":"^1.15.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-beauty-webview_3.0.2_1731457452154_0.8864477726548785","host":"s3://npm-registry-packages"}},"3.0.3":{"name":"@dfmanosalva/react-native-beauty-webview","version":"3.0.3","keywords":["webview","react-native-webview","webview like Instagram","react-native instagram","react-native copy link"],"author":{"url":"https://github.com/ilkerkesici","name":"İlker Kesici","email":"ilkerrkesici@gmail.com"},"license":"MIT","_id":"@dfmanosalva/react-native-beauty-webview@3.0.3","maintainers":[{"name":"dfmanosalva","email":"df.manosalva@uniandes.edu.co"}],"dist":{"shasum":"f3a96ad8d4a79f5c54e310f3ef9677cb18ff99ff","tarball":"https://registry.npmjs.org/@dfmanosalva/react-native-beauty-webview/-/react-native-beauty-webview-3.0.3.tgz","fileCount":31,"integrity":"sha512-UZIVQSVXQ2cVDtz7iqj9ra6y8tV3SHMs+1NZvvvohDGU+979N8UrMh2UmBgLI42o8kndTAFgkeBghId/Q4bC5Q==","signatures":[{"sig":"MEUCIGUyoNAxc+9wy8zCoM8E4ARQ4efg/8s4IuLgsOiAhszpAiEAupYTpYI9HfAsYjIXFPnBXgatLuz3Qi9BNhBIybDpBSI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3247274},"main":"index.tsx","github":"https://github.com/dmanosalva/react-native-beauty-webview","engines":{"node":">=18"},"gitHead":"a1ff995e38feeee0a6585af44e715c34dd663582","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"dfmanosalva","email":"df.manosalva@uniandes.edu.co"},"_npmVersion":"10.8.2","description":"React-Native Beatuy Web View with different functionalty, and beauty ui","directories":{},"_nodeVersion":"20.17.0","_hasShrinkwrap":false,"devDependencies":{"prettier":"2.8.8","typescript":"5.0.4","@types/react":"^18.3.12","@react-native/typescript-config":"0.75.1"},"peerDependencies":{"react":"*","react-native":"^0.75.0","react-native-webview":"^13.12.3","@react-native-clipboard/clipboard":"^1.15.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-beauty-webview_3.0.3_1731460531851_0.21016500987685593","host":"s3://npm-registry-packages"}},"3.0.4":{"name":"@dfmanosalva/react-native-beauty-webview","version":"3.0.4","keywords":["webview","react-native-webview","webview like Instagram","react-native instagram","react-native copy link"],"author":{"url":"https://github.com/ilkerkesici","name":"İlker Kesici","email":"ilkerrkesici@gmail.com"},"license":"MIT","_id":"@dfmanosalva/react-native-beauty-webview@3.0.4","maintainers":[{"name":"dfmanosalva","email":"df.manosalva@uniandes.edu.co"}],"dist":{"shasum":"8842da196e33537dd6f692a32d228da63dd25d7d","tarball":"https://registry.npmjs.org/@dfmanosalva/react-native-beauty-webview/-/react-native-beauty-webview-3.0.4.tgz","fileCount":31,"integrity":"sha512-Mw1eYlDzaNcpztTXkO3b/huYzL8JbLX8ePlo7qWuWjDhcZWHSiC0Nry2mI87D1Ak12dGeEYf8s5glqP/ilvKpQ==","signatures":[{"sig":"MEQCIBt5YuVFU3P44PA+WlvVvkM9UGhEcYnvVXPJQ2HYiymlAiBv7z9TzqNj4SVq+WXH7GrrFnLpSdNDrk+oXJUdNYnpow==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3247277},"main":"index.tsx","github":"https://github.com/dmanosalva/react-native-beauty-webview","engines":{"node":">=18"},"gitHead":"a1ff995e38feeee0a6585af44e715c34dd663582","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"dfmanosalva","email":"df.manosalva@uniandes.edu.co"},"_npmVersion":"10.9.2","description":"React-Native Beatuy Web View with different functionalty, and beauty ui","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"devDependencies":{"prettier":"2.8.8","typescript":"5.0.4","@types/react":"^18.3.12","@react-native/typescript-config":"0.75.1"},"peerDependencies":{"react":"*","react-native":">=0.75.0","react-native-webview":">=13.12.3","@react-native-clipboard/clipboard":">=1.15.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-beauty-webview_3.0.4_1741787048679_0.8449785226779871","host":"s3://npm-registry-packages-npm-production"}},"3.0.5":{"name":"@dfmanosalva/react-native-beauty-webview","version":"3.0.5","keywords":["webview","react-native-webview","webview like Instagram","react-native instagram","react-native copy link"],"author":{"url":"https://github.com/ilkerkesici","name":"İlker Kesici","email":"ilkerrkesici@gmail.com"},"license":"MIT","_id":"@dfmanosalva/react-native-beauty-webview@3.0.5","maintainers":[{"name":"dfmanosalva","email":"df.manosalva@uniandes.edu.co"}],"dist":{"shasum":"90b794c291e45ca54c9aa03cd02307fbf7d19fa4","tarball":"https://registry.npmjs.org/@dfmanosalva/react-native-beauty-webview/-/react-native-beauty-webview-3.0.5.tgz","fileCount":31,"integrity":"sha512-KVPebHo5fjosDbCoiOSv/BzbVN11hIrtHOwMWuh5SSTlr2KOb+nk5rMqAgi+kBWzSvJP2bgszfCFGbptJagzTA==","signatures":[{"sig":"MEUCIQD7kAox6HGMyO2Tj6tIn3oZiZcVCC7ig3r+Zb08bgecygIgLgMPjnNd6nQeVC10syZqQYKjz3jo1u/x2d2Fs5f92C4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3247342},"main":"index.tsx","github":"https://github.com/dmanosalva/react-native-beauty-webview","engines":{"node":">= 22.11.0"},"gitHead":"e589f44af308711e70c2308f31199d4f5a58cd36","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"dfmanosalva","email":"df.manosalva@uniandes.edu.co"},"_npmVersion":"10.8.2","description":"React-Native Beatuy Web View with different functionalty, and beauty ui","directories":{},"_nodeVersion":"20.19.2","_hasShrinkwrap":false,"devDependencies":{"prettier":"2.8.8","typescript":"^6.0.3","@types/react":"^19.2.0","@react-native/typescript-config":"0.87.0"},"peerDependencies":{"react":"*","react-native":"*","react-native-webview":"^14.0.1","@react-native-clipboard/clipboard":"^1.16.3"},"_npmOperationalInternal":{"tmp":"tmp/react-native-beauty-webview_3.0.5_1786746528816_0.07814806528902185","host":"s3://npm-registry-packages-npm-production"}},"3.0.7":{"name":"@dfmanosalva/react-native-beauty-webview","version":"3.0.7","description":"React-Native Beatuy Web View with different functionalty, and beauty ui","main":"index.tsx","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"github":"https://github.com/dmanosalva/react-native-beauty-webview","keywords":["webview","react-native-webview","webview like Instagram","react-native instagram","react-native copy link"],"peerDependencies":{"@react-native-clipboard/clipboard":"^1.16.3","react":"*","react-native":"*","react-native-safe-area-context":"*","react-native-webview":"^14.0.1"},"author":{"name":"İlker Kesici","email":"ilkerrkesici@gmail.com","url":"https://github.com/ilkerkesici"},"license":"MIT","devDependencies":{"@react-native/typescript-config":"0.87.0","@types/react":"^19.2.0","prettier":"2.8.8","typescript":"^6.0.3"},"engines":{"node":">= 22.11.0"},"_id":"@dfmanosalva/react-native-beauty-webview@3.0.7","gitHead":"1dab3a5bf0ce02b4c96092e61be163fc14151e1f","_nodeVersion":"20.19.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-JNDqnERYWMSC3L+RiEn/6bmiqafEiAkfpDgaiYbbQdmqcs6JFbUqdcn/YV1zcrpI02ceJXnVN8lhJQjXYdB9hg==","shasum":"8de2927c71a4c2ee64c5262e3ce1772ca643f26d","tarball":"https://registry.npmjs.org/@dfmanosalva/react-native-beauty-webview/-/react-native-beauty-webview-3.0.7.tgz","fileCount":31,"unpackedSize":3247419,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIG7wHBi+zoLLUo/okmuKoOcdobwtM4rVEdxr7REwhPhsAiBAtALC6lUwOuG/03qAyDOLgbxTEVTkJ4nh73hPxhQt5Q=="}]},"_npmUser":{"name":"dfmanosalva","email":"df.manosalva@uniandes.edu.co"},"directories":{},"maintainers":[{"name":"dfmanosalva","email":"df.manosalva@uniandes.edu.co"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-beauty-webview_3.0.7_1787153882916_0.53430040529396"},"_hasShrinkwrap":false}},"time":{"created":"2024-11-13T00:05:56.115Z","modified":"2026-08-19T15:38:03.301Z","3.0.0":"2024-11-13T00:05:56.535Z","3.0.1":"2024-11-13T00:21:39.434Z","3.0.2":"2024-11-13T00:24:12.469Z","3.0.3":"2024-11-13T01:15:32.234Z","3.0.4":"2025-03-12T13:44:08.980Z","3.0.5":"2026-08-14T22:28:49.077Z","3.0.7":"2026-08-19T15:38:03.163Z"},"author":{"name":"İlker Kesici","email":"ilkerrkesici@gmail.com","url":"https://github.com/ilkerkesici"},"license":"MIT","keywords":["webview","react-native-webview","webview like Instagram","react-native instagram","react-native copy link"],"description":"React-Native Beatuy Web View with different functionalty, and beauty ui","maintainers":[{"name":"dfmanosalva","email":"df.manosalva@uniandes.edu.co"}],"readme":"
\r\n\r\n# React Native Beauty Webview for easy usage\r\n## :star2: Features\r\n- Easy usage\r\n- Easy to configure\r\n- Beauty UI\r\n- Default click and copy url\r\n- Open on browser\r\n- See title of website on header\r\n- Navigation\r\n\r\n## :star: Screenshot\r\n\r\n\r\n\r\n\r\n\r\n\r\n## :arrow_down: Installation\r\n\r\n#### Install react-native-webview\r\nMore information about installation of react-native-webview, click here\r\n\r\n```sh\r\n$ yarn add react-native-webview\r\n\r\nor\r\n\r\n$ npm install --save react-native-webview\r\n\r\n\r\n```\r\n\r\n#### Install @react-native-community/clipboard\r\nMore information about installation of clipboard, click here\r\n\r\n```sh\r\n$ yarn add @react-native-community/clipboard\r\n\r\nor\r\n\r\n$ npm install --save @react-native-community/clipboard\r\n\r\n\r\n```\r\n\r\n#### Link native dependencies for IOS\r\nLink native dependencies of @react-native-community/clipboard and @react-native-community/react-native-webview. If your react native verison is lower than 0.60.x, you must check the official documentation of these packages to link correctly.\r\n\r\n```sh\r\n\r\n$ cd ios && pod install\r\n\r\n```\r\n#### Install our package\r\n```sh\r\n\r\n$ yarn add react-native-beauty-webview\r\n\r\nor\r\n\r\n$ npm install --save react-native-beauty-webview\r\n\r\n```\r\n\r\n## :flashlight: Example Usage\r\n```sh\r\nimport React, {useState} from 'react';\r\nimport {\r\n StyleSheet,\r\n View,\r\n TouchableOpacity,\r\n Text,\r\n} from 'react-native';\r\nimport BeautyWebView from 'react-native-beauty-webview';\r\n\r\nconst App = () => {\r\n const [visible, setVisible] = useState(false);\r\n const onButtonPress = () => {\r\n setVisible(true);\r\n };\r\n\r\n return (\r\n \r\n setVisible(false)} // Required for closing the modal\r\n url={'https://github.com/'}\r\n extraMenuItems={[\r\n {\r\n title: 'Extra Item',\r\n onPress: () => console.log('Extra Menu Item Clicked'),\r\n },\r\n ]}\r\n />\r\n \r\n Open\r\n \r\n \r\n );\r\n};\r\n\r\nconst styles = StyleSheet.create({\r\n container: {\r\n flex: 1,\r\n justifyContent: 'center',\r\n },\r\n button: {\r\n alignSelf: 'stretch',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n padding: 8,\r\n backgroundColor: '#2196f3',\r\n marginHorizontal: 20,\r\n },\r\n text: {\r\n color: '#fff',\r\n fontSize: 16,\r\n },\r\n});\r\n\r\nexport default App;\r\n\r\n\r\n```\r\n## :paperclip: Config\r\n\r\n| Params | Type | Default | Required | Description |\r\n| --- | --- | --- | --- | --- |\r\n| visible | boolean | false | YES | Visibility of modal |\r\n| onPressClose | function | - | YES | Run on press the close button (You must set visibilty as false) | \r\n| url | string | - | YES | URL of the website |\r\n| backgroundColor | string | #fff | - | Background color of view |\r\n| headerContent | 'dark' or 'light' | 'dark' | - | Content type of header items like icons |\r\n| headerBackground | string | #fff | - | Background of header |\r\n| progressColor | string | #2196f3 | - | Color of the progress bar |\r\n| loadingText | string | 'Loading...' | - | Text of the loading |\r\n| copyLinkTitle | string | 'Copy Link' | - | Text of the copy menu item |\r\n| openBrowserTitle | string | 'Open on Browser' | - | Text of the opening on bowser menu item |\r\n| extraMenuItems | Array | - | - | Extra menu items, you can see detail on usage part on above |\r\n| animationType | 'slide' or 'fade' | 'slide' | - | Animation type of modal |\r\n| progressBarType | 'normal' or 'background' | 'normal' | - | Progress bar type |\r\n| onLoadEnd | func | - | - | Run at end of the loading |\r\n| onLoadStart | func | - | - | Run before start loading |\r\n| navigationVisible | boolean | true| - | Show navigation buttons |\r\n| closeIcon | Component | - | - | Close icon of header |\r\n| menuIcon | Component | - | - | Menu icon of header |\r\n| onGoBack | func | - | - | Run at going back |\r\n| onGoForward | func | - | - | Run at going forward |\r\n\r\n\r\n\r\n## :warning: Dependency\r\n### @react-native-community/react-native-webview\r\nYou must install @react-native-community/react-native-webview package correctly before use this package. For more information, please click here\r\n### @react-native-community/clipboard\r\nYou must install @react-native-community/clipboard package correctly before use this package. For more information, please click here\r\n\r\n## :clipboard: References\r\n#### mxck/react-native-material-menu\r\nFor menu component, I took advantages of this resource. More information about this resource, please click here\r\n","readmeFilename":"README.md"}
![\"Build](\"https://img.shields.io/static/v1?label=dil&message=tr&color=yellow\")
\r\n \r\n \r\n ![\"Documentation\"](\"https://img.shields.io/static/v1?label=pack&message=yarn&color=blue\")
\r\n \r\n \r\n ![\"Documentation\"](\"https://img.shields.io/static/v1?label=pack&message=npm&color=red\")
\r\n \r\n