Untitled

// In App.js in a new project

import * as React from 'react';
import { View, Text,Button,Platform } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Link } from '@react-navigation/native';
import { useLinkTo } from '@react-navigation/native';



const isWeb = Platform.OS === 'web';

function HomeScreen({ navigation }) {
  const linkTo = useLinkTo();

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <View style={{ marginVertical: 20 }}>
      <Text style={{fontWeight:'100',fontSize:30}}>Home Screen</Text>
      </View>
          
      <Button onPress={() => linkTo('/Details')} title="Go to Details Screen" />

      {/* <Link to={{ screen: '/Details'}}>
        <Text> Go to Jane's profile </Text>
      </Link> */}
      
      {/* <Button
        title="Go to Details Screen"
        onPress={() => navigation.navigate('Details')}
      /> */}

      <View style={ {marginVertical:20}}>
        <Link to="/Details">Go to Details's Screen</Link>
      </View>

      {/* <View style={ {marginVertical:20}}>
        <Button  title="Go to Setting Screen" onPress={() => navigation.navigate('Setting')} />
      </View> */}
    </View>
  );
}

function Setting() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text style={{fontWeight:'100',fontSize:30}}>Setting Screen</Text>
    </View>
  );
}

function Details() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
     <Text style={{fontWeight:'100',fontSize:30}}>Detail's Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();


function App() {

  // const linking = {
  //   prefixes: ['rne://127.0.0.1:19000/--/'],
  //   config: {
  //     screens: {
  //       Root: {
  //         path: '/Home',
  //         initialRouteName: '/Home',
  //         screen: {
  //           HomeScreen: '/',
  //           DetailsScreen: '/Details',
  //           SettingScreen:'/Setting'
  //         }
  //      }
  //     },
  //   },
  // };

  const linking = {
    prefixes: ['myurlhere://'],
    config: {

      screens: {
        Setting: 'Setting',
        Details: 'Details',
      },
    },
  };


  return (
    <NavigationContainer linking={linking}>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: !isWeb}} />
        <Stack.Screen name="Setting" component={Setting} options={{headerShown:!isWeb}}/>
        <Stack.Screen name="Details" component={Details} options={{headerShown:!isWeb}}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;