I'm using Jetpack Compose to display a Google Map with text at the bottom. The app works as expected when TalkBack is turned off, but crashes when TalkBack is turned on.
I'm not sure which component is causing the issue, but I'm getting the following exception:
java.lang.IllegalStateException: LayoutNode should be attached to an owner
Can anyone help me identify and fix the issue?
@Composable
fun LocationPickerScreen(
uiState: LocationPickerScreenContract.UiState,
) {
val configuration = LocalConfiguration.current
val screenHeight = configuration.screenHeightDp.dp
val currentLoc = uiState.locationInfo.addressLatLng
val cameraState = rememberCameraPositionState()
LaunchedEffect(key1 = currentLoc) {
cameraState.centerOnLocation(currentLoc)
}
val marker = LatLng(currentLoc.latitude, currentLoc.longitude)
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
Box(
modifier = Modifier.fillMaxSize()
) {
GoogleMap(
modifier = Modifier
.fillMaxWidth()
.height(screenHeight - 300.dp)
.align(Alignment.TopCenter),
cameraPositionState = cameraState,
properties = MapProperties(
isMyLocationEnabled = true,
mapType = MapType.HYBRID,
isTrafficEnabled = true
)
) {
Marker(
state = MarkerState(position = marker),
title = "MyPosition",
snippet = "This is a description of this Marker",
draggable = true
)
}
Column(
modifier = Modifier
.fillMaxWidth()
.height(308.dp)
.align(Alignment.BottomCenter),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
) {
Text(
text = "Data Place Holder",
modifier = Modifier
.semantics {
contentDescription = "data"
}
.padding(bottom = 8.dp),
style = MaterialTheme.typography.body2.copy(
fontSize = 14.sp,
fontWeight = FontWeight.SemiBold,
lineHeight = 16.sp
),
)
}
}
}
}
private suspend fun CameraPositionState.centerOnLocation(
location: LatLng
) = animate(
update = CameraUpdateFactory.newLatLngZoom(
location,
15f
),
durationMs = 1500
)
