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 (

<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 (
    <SpatialNavigationRoot isActive={isModalVisible}>
      <GenericModal isVisible={isModalVisible}>
        <ActionSheet
          audioTracks={audioTracks}
          textTracks={textTracks}
          videoTracks={videoTracks}
          selectedTextTrack={selectedTextTrack}
          selectedAudioTrack={selectedAudioTrack}
          selectedVideoTrack={selectedVideoTrack}
          videoBitrate={videoBitrate}
          onAudioTracksChange={onAudioTracksChange}
          isFullScreen={isFullScreen}
          onTextTracksChange={onTextTracksChange}
          onVideoTrackChange={onVideoTrackChange}
          onCancel={_onCancel}
          onTextTracksOff={onTextTracksOff}
        />

      </GenericModal>
    </SpatialNavigationRoot>
  );`

[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.