RN App js file for testing setPreferredRes and FrameRate

App.js

import React, { Component } from 'react';
import { View, Button, TextInput, Text, SafeAreaView } from 'react-native';
import { OTSession, OTPublisher, OTSubscriber, OT } from 'opentok-react-native';
import { Picker } from '@react-native-community/picker';

export default class App extends Component {
    constructor(props) {
        super(props);
        this.apiKey = '';
        this.sessionId =
            '';
        this.token =
            '';
        this.state = {
            streamProperties: {
                subscribeToAudio: true,
                subscribeToVideo: false,
            },
            resolution: '1280x720',
            frameRate: 30,
        };

        this.sessionEventHandlers = {
            streamCreated: (event) => {
                const streamProperties = {
                    ...this.state.streamProperties,
                    [event.streamId]: {
                        preferredFrameRate: 7,
                    },
                };
                console.log('streamCreated', streamProperties);
                this.setState({ streamProperties, frameRate: 7 });
            },
        };

        this.subscriberProperties = {
            subscribeToAudio: true,
            subscribeToVideo: false,
            preferredFrameRate: 7,
            preferredResolution: { width: 1280, height: 720 },
        };
    }

    setPreferredResolution = (itemValue) => {
        console.log('setPreferredResolution', itemValue);
        const streamIds = Object.keys(this.state.streamProperties);
        streamIds.map((streamId) => {
            const newStreamProps = {
                ...this.state.streamProperties,
                [streamId]: {
                    preferredResolution: itemValue,
                },
            };
            console.log('New STREAM PROPS', newStreamProps);
            this.setState(() => {
                return { streamProperties: newStreamProps, resolution: itemValue };
            });
        });
    };

    setPreferredFrameRate = (itemValue) => {
        console.log('setPreferredFrameRate', itemValue);
        const streamIds = Object.keys(this.state.streamProperties);
        streamIds.map((streamId) => {
            const newStreamProps = {
                ...this.state.streamProperties,
                [streamId]: {
                    preferredFrameRate: itemValue,
                },
            };
            console.log('New STREAM PROPS', newStreamProps);
            this.setState(() => {
                return { streamProperties: newStreamProps, frameRate: itemValue };
            });
        });
    };

    /* setPrefFR = (value) => {
                    console.log('setPrefFR', value);
                    this.setState({ streamProperties: { frameRate: value } });
                  }; */

    render() {
        const { preferredFrameRate, preferredResolution } = this.state;
        return (
            <SafeAreaView style={{ flex: 1, flexDirection: 'column' }}>
                <View style={{ flex: 1, flexDirection: 'row' }}>
                    <View style={{ flexDirection: 'column', flex: 1 }}>
                        <Text>FrameRate</Text>
                        <Picker
                            selectedValue={this.state.frameRate}
                            style={{ height: 50, width: 100 }}
                            onValueChange={this.setPreferredFrameRate}>
                            <Picker.Item label="30" value={30} />
                            <Picker.Item label="15" value={15} />
                            <Picker.Item label="7" value={7} />
                            <Picker.Item label="1" value={1} />
                            <Picker.Item label="Reset" value={null} />
                        </Picker>
                    </View>
                    <View style={{ flexDirection: 'column', flex: 1 }}>
                        <Text>Resolution: </Text>
                        <Picker
                            selectedValue={this.state.resolution}
                            style={{ height: 50, width: 100 }}
                            onValueChange={this.setPreferredResolution}>
                            <Picker.Item label="1280x720" value="1280x720" />
                            <Picker.Item label="640x480" value="640x480" />
                            <Picker.Item label="320x240" value="320x240" />
                            <Picker.Item label="160x120" value="160x120" />
                            <Picker.Item label="Reset" value={null} />
                        </Picker>
                    </View>
                    <View style={{ flexDirection: 'row', flex: 1 }}>
                        <Text>{preferredFrameRate}</Text>
                    </View>
                </View>
                <View style={{ flex: 2, flexDirection: 'column' }}>
                    <View style={{ flex: 1, flexDirection: 'column' }}>
                        <OTSession
                            apiKey={this.apiKey}
                            sessionId={this.sessionId}
                            token={this.token}
                            eventHandlers={this.sessionEventHandlers}>
                            <OTPublisher style={{ width: 100, height: 100 }} />
                            <OTSubscriber
                                style={{ height: '100%' }}
                                properties={this.subscriberProperties}
                                streamProperties={this.state.streamProperties}
                            />
                        </OTSession>
                    </View>
                </View>
            </SafeAreaView>
        );
    }
}