microsoft / react-native-windows

A framework for building native Windows apps with React.
https://microsoft.github.io/react-native-windows/
Other
16.13k stars 1.13k forks source link

The type-safe navigation is not found #13415

Open TitigamerYT opened 2 weeks ago

TitigamerYT commented 2 weeks ago

Problem Description

The type-safe navigation is not found

Steps To Reproduce

r

Expected Results

r

CLI version

npx react-native -v

Environment

npx react-native info

Community Modules

import android.app.Person import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.* import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items import androidx.compose.material3.Button import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.navigation.NavType import androidx.navigation.compose.NavHost import androidx.navigation.compose.composable import androidx.navigation.compose.rememberNavController import androidx.navigation.navArgument import androidx.navigation.toRoute import com.example.exameteste2.ui.theme.ExameTeste2Theme import kotlinx.serialization.Serializable

class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { ExameTeste2Theme { MyApp() } } } }

@Composable fun MyApp() {

val people = remember {
    listOf(
        Profile("Tiago",  22),
        Profile("Ana", 28),
        Profile("João", 35)
    )
}
val navController = rememberNavController()

NavHost(navController = navController, startDestination = HomeScreen) {
    composable<HomeScreen> {
        val args = it.toRoute<HomeScreen>()
        LazyColumn(
            modifier = Modifier.fillMaxSize(),
            contentPadding = PaddingValues(16.dp)
        ) {
            items(people) {
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .clickable {
                            navController.navigate("details/${args.name}/${args.age}")
                        }
                        .padding(vertical = 8.dp),
                    horizontalArrangement = Arrangement.SpaceBetween
                ) {
                    Text(text = args.name)
                }
            }
        }
    }
    composable<Profile> {
        val args = it.toRoute<Profile>()

        Column (
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ){
            Text(text = "Nome: ${args.name}")
            Text(text = "Idade: ${args.age}")

            Button(onClick = {
                navController.navigateUp()
            }) {
                Text(text = "Voltar")
            }
        }
    }
}

}

@Serializable data class HomeScreen( val name: String, val age: Int )

@Serializable data class Profile( val name: String, val age: Int )

Target Platform Version

10.0.15063

Target Device(s)

Desktop

Visual Studio Version

Visual Studio 2022

Build Configuration

Debug

Snack, code example, screenshot, or link to a repository

r

microsoft-github-policy-service[bot] commented 1 week ago

This issue lacks the environment info requested in the bug template. Please edit your issue report to add this information.

If you are using latest version:

  1. npx react-native --version:
  2. npx react-native run-windows --info:

Otherwise if --info doesn't exist:

  1. react-native -v:
  2. npm ls rnpm-plugin-windows:
  3. npm ls react-native-windows:
  4. node -v:
  5. npm -v:
  6. yarn --version:
acoates-ms commented 1 week ago

This looks like an issue using react-native for android. This repo is for react-native-windows, which is react-native for windows.

microsoft-github-policy-service[bot] commented 4 days ago

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 7 days of this comment.