1"use strict";(self.webpackChunksample_website=self.webpackChunksample_website||[]).push([[7119],{3905:(e,t,n)=>{n.d(t,{Zo:()=>p,kt:()=>f});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},i=Object.keys(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var c=a.createContext({}),s=function(e){var t=a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},p=function(e){var t=s(e.components);return a.createElement(c.Provider,{value:t},e.children)},d="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},u=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,c=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),d=s(n),u=r,f=d["".concat(c,".").concat(u)]||d[u]||m[u]||i;return n?a.createElement(f,o(o({ref:t},p),{},{components:n})):a.createElement(f,o({ref:t},p))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,o=new Array(i);o[0]=u;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l[d]="string"==typeof e?e:r,o[1]=l;for(var s=2;s<i;s++)o[s]=n[s];return a.createElement.apply(null,o)}return a.createElement.apply(null,n)}u.displayName="MDXCreateElement"},799:(e,t,n)=>{n.r(t),n.d(t,{contentTitle:()=>o,default:()=>d,frontMatter:()=>i,metadata:()=>l,toc:()=>c});var a=n(3117),r=(n(7294),n(3905));const i={title:"How to use with React Native"},o="How to use with React Native",l={type:"mdx",permalink:"/how-to/use-with-react-native",source:"@site/src/pages/how-to/use-with-react-native.md",title:"How to use with React Native",description:"React Native is an open source framework for building Android and iOS applications using React and the app platform\u2019s native capabilities. With React Native, you use JavaScript to access your platform\u2019s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code.",frontMatter:{title:"How to use with React Native"}},c=[{value:"Connection URL",id:"connection-url",level:2},{value:"Common issues",id:"common-issues",level:2},{value:"Cleartext traffic blocked on Android",id:"cleartext-traffic-blocked-on-android",level:3},{value:"With a self-signed certificate",id:"with-a-self-signed-certificate",level:3},{value:"Sample projects",id:"sample-projects",level:2}],s={toc:c},p="wrapper";function d(e){let{components:t,...n}=e;return(0,r.kt)(p,(0,a.Z)({},s,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"how-to-use-with-react-native"},"How to use with React Native"),(0,r.kt)("admonition",{type:"note"},(0,r.kt)("p",{parentName:"admonition"},"React Native is an open source framework for building Android and iOS applications using ",(0,r.kt)("a",{parentName:"p",href:"https://react.dev/"},"React")," and the app platform\u2019s native capabilities. With React Native, you use JavaScript to access your platform\u2019s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code."),(0,r.kt)("p",{parentName:"admonition"},"Reference: ",(0,r.kt)("a",{parentName:"p",href:"https://reactnative.dev/"},"https://reactnative.dev/"))),(0,r.kt)("p",null,"All tips from our ",(0,r.kt)("a",{parentName:"p",href:"/how-to/use-with-react"},"React guide")," can be applied with React Native as well."),(0,r.kt)("h2",{id:"connection-url"},"Connection URL"),(0,r.kt)("p",null,"The URL to reach your Socket.IO server during development varies depen
1ding on your platform:"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:null},"Platform"),(0,r.kt)("th",{parentName:"tr",align:null},"URL"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"Web browser"),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"localhost"))),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"iOS simulator"),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"localhost"))),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"Android simulator"),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"10.0.2.2"))),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"Real device"),(0,r.kt)("td",{parentName:"tr",align:null},"the IP of your machine (provided that you are on the same network)")))),(0,r.kt)("p",null,"Example with a real device:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js",metastring:'title="socket.js"',title:'"socket.js"'},'import { io } from "socket.io-client";\n\nexport const socket = io("http://192.168.0.10:3000");\n')),(0,r.kt)("admonition",{type:"tip"},(0,r.kt)("p",{parentName:"admonition"},"When developing an application in the browser, you will also need to enable CORS on the server side:"),(0,r.kt)("pre",{parentName:"admonition"},(0,r.kt)("code",{parentName:"pre",className:"language-js"},'const io = new Server({\n cors: {\n origin: ["http://localhost:8081"],\n }\n});\n')),(0,r.kt)("p",{parentName:"admonition"},"Reference: ",(0,r.kt)("a",{parentName:"p",href:"/docs/v4/handling-cors/"},"Handling CORS"))),(0,r.kt)("h2",{id:"common-issues"},"Common issues"),(0,r.kt)("h3",{id:"cleartext-traffic-blocked-on-android"},"Cleartext traffic blocked on Android"),(0,r.kt)("p",null,"Starting with API level 28 (Android 9 and higher), cleartext traffic is blocked by default, which means you won't be able to reach a server without SSL (",(0,r.kt)("inlineCode",{parentName:"p"},"http://"),")."),(0,r.kt)("p",null,"You can add the following configuration to allow it during development:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"either with ",(0,r.kt)("inlineCode",{parentName:"li"},'android:usesCleartextTraffic="true"'))),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-xml",metastring:'title="android/app/src/debug/AndroidManifest.xml"',title:'"android/app/src/debug/AndroidManifest.xml"'},'<?xml version="1.0" encoding="utf-8"?>\n<manifest>\n <application\n android:usesCleartextTraffic="true"\n />\n</manifest>\n')),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"or with a Network Security Configuration file:")),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-xml",metastring:'title="android/app/src/debug/res/xml/network_security_config.xml"',title:'"android/app/src/debug/res/xml/network_security_config.xml"'},'<?xml version="1.0" encoding="utf-8"?>\n<network-security-config>\n <domain-config cleartextTrafficPermitted="true">\n <domain>192.168.0.10</domain>\n </domain-config>\n</network-security-config>\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-xml",metastring:'title="android/app/src/debug/AndroidManifest.xml"',title:'"android/app/src/debug/AndroidManifest.xml"'},'<?xml version="1.0" encoding="utf-8"?>\n<manifest>\n <application\n android:networkSecurityConfig="@xml/network_security_config"\n />\n</manifest>\n')),(0,r.kt)("p",null,"Reference: ",(0,r.kt)("a",{parentName:"p",href:"https://developer.android.com/privacy-and-security/security-config"},"https://developer.android.com/privacy-and-security/security-config")),(0,r.kt)("h3",{id:"with-a-self-signed-certificate"},"With a self-signed certificate"),(0,r.kt)("p",null,"You can reach a Socket.IO server with a self-signed certificate with the following configuration:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-xml",metastring:'title="android/app/src/debug/AndroidManifest.xml"',title:'"android/app/src/debug/AndroidManifest.xml"'},'<?xml version="1.0" encoding="utf-8"?>\n<manifest>\n <application\n android:networkSecurityConfig="@xml/network_security_config"\n />\n</manifest>\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-xml",metastring:'title="android/app/src/debug/res/xml/network_security_config.xml"',title:'"android/app/src/debug/res/xml/network_security_config.xml"'},'<?xml version="1.0" encoding="utf-8"?>\n<network-security-config>\n \x3c!-- needed by the Metro dev server --\x3e\n <domain-config cleartextTrafficPermitted="true">\n <domain>localhost</domain>\n </domain-config>\n\n <domain-config>\n <domain>192.168.0.10</domain>\n <trust-anchors>\n <certificates src="@raw/mycert" />\n </trust-anchors>\n </domain-config>\n</network-security-config>\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-raw",metastring:'title="android/app/src/debug/res/raw/mycert.pem"',title:'"android/app/src/debug/res/raw/mycert.pem"'},"-----BEGIN CERTIFICATE-----\n[...]\n-----END CERTIFICATE-----\n")),(0,r.kt)("admonition",{type:"caution"},(0,r.kt)("p",{parentName:"admonition"},"The IP address must be included in the ",(0,r.kt)("inlineCode",{parentName:"p"},"subjectAltName")," of the self-signed certificate:"),(0,r.kt)("pre",{parentName:"admonition"},(0,r.kt)("code",{parentName:"pre",className:"language-bash"},"$ openssl req -x509 -nodes \\\n -newkey rsa:2048 \\\n -out cert.pem \\\n -keyout key.pem \\\n -subj '/CN=localhost' \\\n -addext 'subjectAltName = IP:192.168.0.10'\n")),(0,r.kt)("p",{parentName:"admonition"},"Else the client won't be able to establish the connection."),(0,r.kt)("p",{parentName:"admonition"},"You can check it with the following command:"),(0,r.kt)("pre",{parentName:"admonition"},(0,r.kt)("code",{parentName:"pre",className:"language-bash"},"$ openssl x509 -in cert.pem -text -noout | grep X509v3 -A 1\n X509v3 extensions:\n X509v3 Subject Key Identifier:\n C3:67:68:1A:F2:2C:F2:E8:B9:7A:7D:25:3F:5D:E0:AF:B5:B0:AF:16\n X509v3 Authority Key Identifier:\n C3:67:68:1A:F2:2C:F2:E8:B9:7A:7D:25:3F:5D:E0:AF:B5:B0:AF:16\n X509v3 Basic Constraints: critical\n CA:TRUE\n X509v3 Subject Alternative Name:\n IP Address:192.168.0.10\n"))),(0,r.kt)("p",null,"Reference: ",(0,r.kt)("a",{parentName:"p",href:"https://developer.android.com/privacy-and-security/security-config"},"https://developer.android.com/privacy-and-security/security-config")),(0,r.kt)("h2",{id:"sample-projects"},"Sample projects"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",{parentName:"li",href:"https://docs.expo.dev/"},"Expo Go"),": ",(0,r.kt)("a",{parentName:"li",href:"https://github.com/socketio/socket.io/tree/main/examples/expo-example"},"https://github.com/socketio/socket.io/tree/main/examples/expo-example")),(0,r.kt)("li",{parentName:"ul"},"React Native CLI: ",(0,r.kt)("a",{parentName:"li",href:"https://github.com/socketio/socket.io/tree/main/examples/ReactNativeExample"},"https://github.com/socketio/socket.io/tree/main/examples/ReactNativeExample"))),(0,r.kt)("p",null,"That's all folks, thanks for reading!"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/get-started/"},"Back to the list of examples")))}d.isMDXComponent=!0}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.