Update guides with ReactNative versions#745
Update guides with ReactNative versions#745mattieruth wants to merge 2 commits intorework-client-sdk-referencefrom
Conversation
mattieruth
force-pushed
the
rework-client-sdk-reference
branch
from
161dcd1 to
967046d
Compare
mattieruth
force-pushed
the
client-guides-react-native
branch
from
f8630ac to
37ff838
Compare
Rework client sdk reference
mattieruth
force-pushed
the
client-guides-react-native
branch
from
37ff838 to
9882955
Compare
|
|
||
| </View> | ||
|
|
||
| <View title="React Native" icon="mobile"> |
There was a problem hiding this comment.
Should we use exactly the same code snippet for JavaScript ? I noticed they are slightly different.
There was a problem hiding this comment.
yeah, claude seemed to take the approach of using react with the ReactNative docs and wasn't sure if that was the right thing or if 99% of the docs should just look the same as JavaScript.
|
|
||
| function TranscriptDisplay() { | ||
| useEffect(() => { | ||
| const handler = (data) => { |
There was a problem hiding this comment.
Should we add the type ? For example.
| const handler = (data) => { | |
| const handler = (data: TranscriptData) => { |
|
|
||
| ```tsx | ||
| useEffect(() => { | ||
| const handler = (data) => { |
There was a problem hiding this comment.
Same here, and in all other places if we decide it’s worth keeping the types.
|
|
||
| ```tsx | ||
| try { | ||
| const response = await client.sendClientRequest("get-language"); |
There was a problem hiding this comment.
Currently we would also need to provide the data argument, since it is not optional, right ?
But I guess we just need to fix it in our SDK.
|
|
||
| <View title="React Native" icon="mobile"> | ||
|
|
||
| Audio routing (speaker vs. earpiece) is managed by the platform and `DailyMediaManager`. Use the React Native audio session APIs (e.g., `react-native-audio-session`) to control routing if needed. |
There was a problem hiding this comment.
Audio routing (speaker vs. earpiece) is managed by the platform and
DailyMediaManager.
That is true.
Use the React Native audio session APIs (e.g.,
react-native-audio-session) to control routing if needed.
To control audio routing, they should use either updateSpeaker or updateMic. Both have the same effect, because on mobile apps, changing the audio input also changes the audio output, and vice versa.
We are relying underneath on setAudioDevice provided by DailyMediaManager in both cases.
|
|
||
| ```tsx | ||
| useEffect(() => { | ||
| const handler = (message) => { |
There was a problem hiding this comment.
Should we include the types ? Like:
| const handler = (message) => { | |
| const handler = (message: RTVIMessage) => { |
| ```bash | ||
| npx create-expo-app MyVoiceApp | ||
| cd MyVoiceApp | ||
| npx expo install @pipecat-ai/client-js @pipecat-ai/react-native-small-webrtc-transport @pipecat-ai/react-native-daily-media-manager expo-dev-client |
There was a problem hiding this comment.
We would also need to install these dependencies, in order to use the @pipecat-ai/react-native-daily-media-manager:
@daily-co/config-plugin-rn-daily-js
@daily-co/react-native-daily-js
@daily-co/react-native-webrtc
react-native-background-timer
react-native-get-random-values
As mentioned here:
Or should we just link to this project in this case ?
| "ios": { | ||
| "infoPlist": { | ||
| "NSMicrophoneUsageDescription": "This app uses the microphone to talk to your voice AI assistant." | ||
| } | ||
| }, | ||
| "android": { | ||
| "permissions": ["android.permission.RECORD_AUDIO"] | ||
| } |
There was a problem hiding this comment.
And here we actually need this:
{
"expo": {
"ios": {
"infoPlist": {
"UIBackgroundModes": [
"voip"
]
}
},
"plugins": [
[
"@daily-co/config-plugin-rn-daily-js",
{
"enableCamera": true,
"enableMicrophone": true,
"enableScreenShare": true
}
],
[
"expo-build-properties",
{
"android": {
"minSdkVersion": 24
},
"ios": {
"deploymentTarget": "13.0"
}
}
]
]
}
}
As mentioned here:
You can see a full example here:
| if (isConnected) { | ||
| await client.disconnect(); | ||
| } else { | ||
| await client.connect({ webrtcUrl: BOT_URL }); |
There was a problem hiding this comment.
webrtcUrl is deprecated. We should use webrtcRequestParams.
It looks like we have the same issue in the javascript SDK.
2 participants
This PR expands on #744 with React-Native specific views of the guides.