Hi everyone !
========Informations about the app=============================
- SDK Version: 47
- Platforms(Android/iOS/web/all): android
- Add the appropriate “Tag” based on what Expo library you have a question on.
============================================================
Since i’ve made the update of the expo SDK to the sdk 47 and update of all the modules, i’ve lost all my TV navigation. In fact the focus doesn’t work anymore.
I’ve checked all the code, I don’t see any problem. There is no problem on the debugger. I’m quite lost.
Can you help me please.
This is my App.js
import React, {useContext, useEffect} from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import {Context as AuthContext, Provider as AuthProvider} from './context/authContext';
import {Context as UserContext, Provider as UserProvider} from './context/userContext';
import {GlobalizeProvider, loadCldr, loadMessages} from 'react-native-globalize';
import { globalizeRef } from './services/Globalize';
import * as fr from './locales/fr.json';
import * as en from './locales/en.json';
import LoginScreen from "./screens/LoginScreen";
import BroadcastScreen from "./screens/BroadcastScreen";
import AnimatorListScreen from "./screens/AnimatorListScreen";
import SettingsScreen from "./screens/SettingsScreen";
import EntrantScreen from "./screens/EntrantScreen";
import SplashScreen from "./screens/SplashScreen";
loadCldr(
require('react-native-globalize/locale-data/fr'),
require('react-native-globalize/locale-data/en'),
);
loadMessages({fr, en});
const Stack = createStackNavigator();
const Animator = createStackNavigator();
const AnimatorStack = () => {
return (
<Animator.Navigator initialRouteName="List" screenOptions={{headerShown: false}}>
<Animator.Screen name="List" component={AnimatorListScreen} />
<Animator.Screen name="Broadcast" component={BroadcastScreen} options={{ headerShown: false }} />
<Animator.Screen name="Settings" component={SettingsScreen} />
</Animator.Navigator>
)
}
const Entrant = createStackNavigator();
const EntrantStack = () => {
return (
<Entrant.Navigator initialRouteName="Enter" screenOptions={{headerShown: false}}>
<Entrant.Screen name="Enter" component={EntrantScreen} options={{ headerShown: false }} />
<Entrant.Screen name="Settings" component={SettingsScreen} />
</Entrant.Navigator>
)
}
const App = () => {
const {state: authState, restoreInfos} = useContext(AuthContext);
const {state: userState, restoreLanguage} = useContext(UserContext);
useEffect(() => {
restoreInfos();
restoreLanguage();
}, []);
return (
(authState.loading || !userState.language) ?
// We haven't finished checking for the token yet
<Stack.Screen name="Splash" component={SplashScreen} /> :
<GlobalizeProvider ref={globalizeRef} locale={userState.language}>
<NavigationContainer>
<Stack.Navigator>
{(authState.token == null || authState.userType == null) ?
<Stack.Screen name="SignIn" component={LoginScreen} options={{ headerShown: false }} /> :
authState.userType === 'showman' ?
<Stack.Screen name="Showman" component={AnimatorStack} options={{ headerShown: false }} /> :
<Stack.Screen name="Entrant" component={AnimatorStack} options={{ headerShown: false }} />
}
</Stack.Navigator>
</NavigationContainer>
</GlobalizeProvider>
);
}
export default () => {
return (
<AuthProvider>
<UserProvider>
<App />
</UserProvider>
</AuthProvider>
)
}
And one of my screen :
import React, {useContext, useEffect, useRef, useState} from 'react';
import {Animated, StyleSheet, Text, TouchableOpacity, View} from "react-native";
import {Context as UserContext} from "../context/userContext";
import WebView from "react-native-webview";
import {LongPressGestureHandler, State as gestureState} from 'react-native-gesture-handler';
import {useGlobalize} from "react-native-globalize";
import {Ionicons} from '@expo/vector-icons';
import {useNavigation} from "@react-navigation/native";
import Colours from "../constants/Colours";
import Loader from "../components/Loader";
const EntrantScreen = () => {
const navigation = useNavigation();
const {formatMessage} = useGlobalize();
const {state: userState, getChosenAnimation} = useContext(UserContext);
const [reload, setReload] = useState(0);
const [loading, setLoading] = useState(true);
useEffect(() => {
setLoading(true);
getChosenAnimation().finally(() => {
setLoading(false);
});
}, [reload]);
const reloadNow = () => {
setReload(reload + 1);
}
const goToSettings = () => {
navigation.navigate('Settings');
}
const opacityHandler = useRef(new Animated.Value(0)).current;
const fadeIn = () => {
// Will change fadeAnim value to 1 in 5 seconds
Animated.timing(opacityHandler, {
toValue: 1,
duration: 500,
useNativeDriver: true
}).start();
setTimeout(() => {
Animated.timing(opacityHandler, {
toValue: 0,
duration: 500,
useNativeDriver: true
}).start();
}, 3000);
};
const runFirst = "window.oncontextmenu = function(event) {\n" +
" event.preventDefault();\n" +
" event.stopPropagation();\n" +
" return false;\n" +
"};" +
"document.onselectstart = new Function (\"return false\");" +
"document.documentElement.style.property = 'user-select:none;';" +
"document.getElementsByClassName('aha-footer')[0].remove();";
return (
<View style={styles.mainView}>
{loading && <Loader />}
{ userState.chosenAnimation &&
<View style={styles.mainView}>
<LongPressGestureHandler
minDurationMs={5000}
onHandlerStateChange={({nativeEvent}) => {
if (nativeEvent.state === gestureState.ACTIVE) {
fadeIn();
}
}}>
<View style={styles.actionCaller}><></></View>
</LongPressGestureHandler>
<Animated.View style={{...styles.actionButtonHandler, opacity: (opacityHandler || 0)}}>
<TouchableOpacity onPress={() => reloadNow()}>
<Ionicons style={{color: Colours.bleu}} name="reload" size={48} />
</TouchableOpacity>
<TouchableOpacity onPress={() => goToSettings()}>
<Ionicons style={{color: Colours.bleu}} name="settings-outline" size={48} />
</TouchableOpacity>
</Animated.View>
<WebView
style={styles.container}
source={{uri: userState.chosenAnimation.entrant_link}}
injectedJavaScript={runFirst}
/>
</View>
}
{!loading && !userState.chosenAnimation &&
<View style={styles.viewNoAnim}>
<Text style={styles.textNoAnim}>{formatMessage('noChosenAnim')}</Text>
<View style={styles.viewIconsNoAnim}>
<TouchableOpacity style={styles.iconsNoAnim} onPress={() => reloadNow()}>
<Ionicons style={{color: Colours.bleu}} name="reload" size={48} />
</TouchableOpacity>
<TouchableOpacity style={styles.iconsNoAnim} onPress={() => goToSettings()}>
<Ionicons style={{color: Colours.bleu}} name="settings-outline" size={48} />
</TouchableOpacity>
</View>
</View>
}
</View>
)
}
const styles = StyleSheet.create({
mainView: {
flex: 1
},
actionCaller: {
width: 50,
height: 80,
position: 'absolute',
left: 0,
top: 0,
backgroundColor: 'transparent',
zIndex: 2,
opacity: 0.1
},
actionButtonHandler: {
width: 80,
height: '100%',
position: 'absolute',
left: 0,
top: 0,
justifyContent: 'space-evenly',
alignItems: 'center',
zIndex: 2
},
viewNoAnim: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
viewIconsNoAnim: {
flexDirection: 'row',
},
iconsNoAnim: {
margin: 10
},
textNoAnim: {
fontSize: 24
}
});
export default EntrantScreen;
Thanks a lot for your help.