diff --git a/examples/bot-ready-signalling/client/react-native/README.md b/examples/bot-ready-signalling/client/react-native/README.md index a1c0d1422..5da0c67be 100644 --- a/examples/bot-ready-signalling/client/react-native/README.md +++ b/examples/bot-ready-signalling/client/react-native/README.md @@ -34,6 +34,10 @@ npm i # Before a native app can be compiled, the native source code must be generated. npx expo prebuild + +# Configure the environment variable to connect to the local server +cp env.example .env +# edit .env and add your local ip address, for example: http://192.168.1.16:7860 ``` #### Running on Android @@ -53,4 +57,4 @@ npm run ios ``` #### Connect to the server -Use the http://localhost:5173 in your app. \ No newline at end of file +Use the http://localhost:5173 in your app. diff --git a/examples/bot-ready-signalling/client/react-native/babel.config.js b/examples/bot-ready-signalling/client/react-native/babel.config.js index 2900afe9d..81d4cb0da 100644 --- a/examples/bot-ready-signalling/client/react-native/babel.config.js +++ b/examples/bot-ready-signalling/client/react-native/babel.config.js @@ -2,5 +2,6 @@ module.exports = function(api) { api.cache(true); return { presets: ['babel-preset-expo'], + plugins: [["module:react-native-dotenv"]], }; }; diff --git a/examples/bot-ready-signalling/client/react-native/env.example b/examples/bot-ready-signalling/client/react-native/env.example new file mode 100644 index 000000000..4c242c880 --- /dev/null +++ b/examples/bot-ready-signalling/client/react-native/env.example @@ -0,0 +1 @@ +API_BASE_URL=http://YOUR_LOCAL_IP:7860 diff --git a/examples/bot-ready-signalling/client/react-native/package-lock.json b/examples/bot-ready-signalling/client/react-native/package-lock.json index ed78f865f..c8cff3517 100644 --- a/examples/bot-ready-signalling/client/react-native/package-lock.json +++ b/examples/bot-ready-signalling/client/react-native/package-lock.json @@ -21,6 +21,7 @@ "react": "18.3.1", "react-native": "0.76.3", "react-native-background-timer": "^2.4.1", + "react-native-dotenv": "^3.4.11", "react-native-get-random-values": "^1.11.0" }, "devDependencies": { @@ -9223,6 +9224,18 @@ "react-native": ">=0.47.0" } }, + "node_modules/react-native-dotenv": { + "version": "3.4.11", + "resolved": "https://registry.npmjs.org/react-native-dotenv/-/react-native-dotenv-3.4.11.tgz", + "integrity": "sha512-6vnIE+WHABSeHCaYP6l3O1BOEhWxKH6nHAdV7n/wKn/sciZ64zPPp2NUdEUf1m7g4uuzlLbjgr+6uDt89q2DOg==", + "license": "MIT", + "dependencies": { + "dotenv": "^16.4.5" + }, + "peerDependencies": { + "@babel/runtime": "^7.20.6" + } + }, "node_modules/react-native-get-random-values": { "version": "1.11.0", "resolved": "https://registry.npmjs.org/react-native-get-random-values/-/react-native-get-random-values-1.11.0.tgz", diff --git a/examples/bot-ready-signalling/client/react-native/package.json b/examples/bot-ready-signalling/client/react-native/package.json index c35307874..065245399 100644 --- a/examples/bot-ready-signalling/client/react-native/package.json +++ b/examples/bot-ready-signalling/client/react-native/package.json @@ -21,6 +21,7 @@ "react": "18.3.1", "react-native": "0.76.3", "react-native-background-timer": "^2.4.1", + "react-native-dotenv": "^3.4.11", "react-native-get-random-values": "^1.11.0" }, "devDependencies": { diff --git a/examples/bot-ready-signalling/client/react-native/src/App.js b/examples/bot-ready-signalling/client/react-native/src/App.js index 3f56904dc..46b4c1e91 100644 --- a/examples/bot-ready-signalling/client/react-native/src/App.js +++ b/examples/bot-ready-signalling/client/react-native/src/App.js @@ -1,6 +1,7 @@ import React, { useState, useEffect } from 'react'; import {SafeAreaView, View, Text, Button, StyleSheet, ScrollView} from 'react-native'; import Daily from "@daily-co/react-native-daily-js"; +import { API_BASE_URL } from "@env"; const CallScreen = () => { const [connectionStatus, setConnectionStatus] = useState('Disconnected'); @@ -59,7 +60,7 @@ const CallScreen = () => { try { const callObject = Daily.createCallObject({ subscribeToTracksAutomatically: true }); setCallObject(callObject); - const connectionUrl = 'http://192.168.1.16:7860/connect' + const connectionUrl = `${API_BASE_URL}/connect` const res = await fetch(connectionUrl, { method: "POST", headers: { "Content-Type": "application/json" } }); const roomInfo = await res.json(); await callObject.join({ url: roomInfo.room_url });