bamlab
key direction changed after open modal popup with SpatialNavigationNode and select any button
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:[email protected]",
"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"
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 :)
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 (
<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>
);`
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.
I'm closing this as the issue is not explicit enough. Feel free to reopen with a more illustrated example or a reproducible example.