How do you do basic navigation between Pages for tv platforms? #1784
-
I used react-navigation and have error where react-native-safe-area-context lib throwing error on andoirdtv and tvos. |
Beta Was this translation helpful? Give feedback.
Answered by
Marius456
Nov 19, 2024
Replies: 1 comment 1 reply
-
Hello @CircusCanard, "plugins": {
"react-native-safe-area-context": "source:rnv",
"@react-navigation/native": "source:rnv",
"@react-navigation/native-stack": "5.0.5",
"react-native-screens": "source:rnv"
} As an example I added two pages in import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
const App = () => (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Page2" component={Page2} />
</Stack.Navigator>
</NavigationContainer>
);
const Home = ({navigation}) => {
return (
<View>
<TouchableOpacity
onPress={() =>
navigation.navigate('Page2')
}
style={{backgroundColor: 'blue', width: '100px', alignSelf: 'center'}}
>
<Text>Go to Page2</Text>
</TouchableOpacity>
</View>
);
};
const Page2 = ({navigation}) => {
return (
<View>
<TouchableOpacity
onPress={() =>
navigation.navigate('Home')
}
style={{backgroundColor: 'green', width: '100px', alignSelf: 'center'}}
>
<Text>Go to Home</Text>
</TouchableOpacity>
</View>
);
};
export default App; |
Beta Was this translation helpful? Give feedback.
1 reply
Answer selected by
pauliusguzas
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello @CircusCanard,
You need to add these plugins in
renative.json
:As an example I added two pages in
src\app\index.tsx
: