key direction changed after open modal popup with SpatialNavigationNode and select any button

[ionictest2017]

Describe the bug I have a player screen with controls with a modal popup which has some buttons like audio, subtitle, etc whenever I select any button and then close the modal then change my bottom control direction (left-right to right-left) .

Version and OS

"@aws-amplify/react-native": "^1.0.10",
"@aws-amplify/rtn-web-browser": "^1.0.16",
"@emotion/native": "^11.11.0",
"@react-native-async-storage/async-storage": "^1.21.0",
"@react-native-community/netinfo": "^8.3.1",
"@react-native-masked-view/masked-view": "^0.2.9",
"@react-native-picker/picker": "^2.4.8",
"@react-navigation/drawer": "^6.6.6",
"@react-navigation/native": "^6.0.8",
"@react-navigation/native-stack": "^6.9.13",
"@react-navigation/stack": "^6.1.1",
"@reduxjs/toolkit": "^1.9.5",
"@rntext/more-or-less": "^2.0.0",
"@types/react-native": "^0.70.6",
"aws-amplify": "^6.0.12",
"axios": "^1.4.0",
"base-64": "^1.0.0",
"lodash": "4.17.21",
"m3u8-file-parser": "^0.2.4",
"patch-package": "^8.0.0",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-hook-form": "^7.49.3",
"react-native": "npm:react-native-tvos@0.69.8-2",
"react-native-actions-sheet": "^0.8.10",
"react-native-date-picker": "^4.3.6",
"react-native-fast-image": "^8.6.3",
"react-native-fs": "^2.20.0",
"react-native-gesture-handler": "2.9.0",
"react-native-get-random-values": "^1.10.0",
"react-native-image-colors": "github:rsys2022/react-native-image-colors#feature-TVOS",
"react-native-image-picker": "^7.1.0",
"react-native-image-zoom-viewer": "^3.0.1",
"react-native-keyevent": "^0.3.2",
"react-native-linear-gradient": "^2.5.6",
"react-native-media-console": "^2.0.6",
"react-native-modal": "^13.0.1",
"react-native-orientation-locker": "^1.6.0",
"react-native-paper": "^4.12.5",
"react-native-progress": "^5.0.1",
"react-native-reanimated": "^3.7.2",
"react-native-responsive-fontsize": "^0.5.1",
"react-native-safe-area-context": "^4.1.2",
"react-native-screens": "3.20.0",
"react-native-simple-toast": "^3.2.0",
"react-native-snap-carousel": "^3.9.1",
"react-native-splash-screen": "^3.3.0",
"react-native-status-bar-height": "^2.6.0",
"react-native-svg": "^14.1.0",
"react-native-tv-selected-focus": "github:rsys2022/react-native-tv-selected-focus#update_focus",
"react-native-tvos-controller": "^0.2.4",
"react-native-vector-icons": "^9.1.0",
"react-native-video": "github:rsys2022/react-native-video#feature_5.2.1_dev_after_demo_ad_marker",
"react-native-volume-manager": "^1.10.0",
"react-native-web": "^0.18.10",
"react-native-web-linear-gradient": "^1.1.2",
"react-native-webview": "^11.17.2",
"react-redux": "^8.1.2",
"react-tv-space-navigation": "^1.3.0",
"react-web-vector-icons": "^1.0.2",
"redux-persist": "^6.0.0",
"shaka-player": "^4.2.7",
"sprintf-js": "^1.1.2"

[pierpo]

Hey, could you provide some code? I think this is related to the underlying "tricks" of the lib ;)

You can't unmount and remount elements as you will without a little thinking. You should read this in the docs: https://github.com/bamlab/react-tv-space-navigation/blob/main/docs/pitfalls.md#conditional-rendering

Usually, wrapping things with a SpatialNavigationNode that is never unmounted will fix the issue. Please tell me if it's not clear enough :)

[ionictest2017]

here is my code

return (
            <SpatialNavigationRoot>
            <TouchableHighlight
                hasTVPreferredFocus={this.state.showControls ? false : (this.state.actionSheet ? false : this.state.isAdVisible ? false : true) || (this.state.isSeekbarFocused ? false : true)}
                isTVSelectable={this.state.showControls ? false : (this.state.actionSheet ? false : this.state.isAdVisible ? false : true) || (this.state.isSeekbarFocused ? false : true)}

                onPress={this.events.onScreenTouch}
                style={[styles.player.container, this.styles.containerStyle]}>
                <View style={[styles.player.container, this.styles.containerStyle]}>
                    <Video
                        {...this.props}
                        controls={false}
                        ref={videoPlayer => (this.player.ref = videoPlayer)}
                        resizeMode={this.state.resizeMode}
                        volume={this.state.volume}
                        paused={this.state.paused}
                        muted={this.state.muted}
                        rate={this.state.rate}
                        onLoadStart={this.events.onLoadStart}
                        onProgress={this.events.onProgress}
                        onError={this.events.onError}
                        onLoad={this.events.onLoad}
                        onEnd={this.events.onEnd}
                        onSeek={this.events.onSeek}
                        style={[styles.player.video, this.styles.videoStyle]}
                        onAudioTracks={this.onAudioTracks}
                        onTextTracks={this.onTextTracks}
                        onVideoTracks={this.onVideoTracks}
                        selectedTextTrack={this.state.selectedTextTrack}
                        selectedAudioTrack={this.state.selectedAudioTrack}
                        selectedVideoTrack={this.state.selectedVideoTracks}
                        source={this.state.video_source}
                        bitRateSelected={this.state.bitRateSelected}
                        onBuffer={this.events.onBuffer}    
                    />
                    {this.renderError()}
                    {this.props.control ? this.renderLoader() : null}
                    {this.state.controls && this.renderTopControls()}
                    {/* {this.props.control && this.renderBottomControls()} */}
                    {this.toggelNativeAdControls()}

          {this.state.actionSheet && <SubtitlesModal
        isModalVisible={this.state.actionSheet}
        setIsModalVisible={(isModal)=> this.setState({ actionSheet: isModal })}
        setSubtitles={(subT)=>console.log(subT)}
        audioTracks={this.state.audioTracks}
        textTracks={this.state.textTracks}
        videoTracks={this.state.videoTracks}
        selectedTextTrack={this.state.selectedTextTrack}
        selectedAudioTrack={this.state.selectedAudioTrack}
        selectedVideoTrack={this.state.selectedVideoTracks}
        videoBitrate={this.state.bitRateSelected}
        onAudioTracksChange={(item) => this._onChangeAudio(item)}
        isFullScreen={this.props.fullscreen}
        onTextTracksChange={(item) => this._onChangeText(item)}
        onVideoTrackChange={(item) => this._onChangeVideoBitrate(item)}
        onCancel={() => this.setState({ actionSheet: false, setTvFocus: true })}
        onTextTracksOff={() => this.onTextTracksOff()}
      />}
                </View>
            </TouchableHighlight>
            </SpatialNavigationRoot>
        );

and here is my SubtitlesModal ` return (

);`

[pierpo]

Hum, I'm not sure I understand what you've done 😁 You're not supposed to use any Touchable with this lib, we're overriding the whole focus system by creating fake touchables using our own styled views.