Jetpack Compose v SwiftUI
On my previous post I mentioned how I wanted to see if I could copy and paste code between Jetpack Compose and SwiftUI. This is the results of that experiment. I made a simple 2 screen app that has buttons going back and forth. I'll show you screen shots and the code for each app. Before that I want to point out that this was all made in one file. I know that isn't the proper way to structure apps but this is just a little experiment.
Jetpack Compose
Code
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
NavigationTheme {
// A surface container using the 'background' color from the theme
Surface(color = MaterialTheme.colors.background) {
NavigationApp()
}
}
}
}
}
@Composable
fun NavigationApp(){
val navController = rememberNavController()
NavHost(navController = navController, startDestination = "first") {
composable("first") { ScreenOne(navController) }
composable("second") { ScreenTwo(navController) }
}
}
@Composable
fun ScreenOne(navController: NavHostController) {
Scaffold(
topBar = {
TopAppBar(
title = {
Text(
text = "Navigation",
textAlign = TextAlign.Center,
modifier = Modifier.fillMaxWidth()
)
}
)
},
content = {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = "Screen 1",
modifier = Modifier.padding(bottom = 10.dp)
)
Button(
content = {
Text("Go forward")
},
onClick = {
navController.navigate("second")
}
)
}
}
)
}
@Composable
fun ScreenTwo(navController: NavHostController) {
Scaffold(
topBar = {
TopAppBar(
title = {
Text(
text= "Navigation",
textAlign = TextAlign.Center,
modifier = Modifier.fillMaxWidth()
)
}
)
},
content = {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = "Screen 2",
modifier = Modifier.padding(bottom = 10.dp)
)
Button(
content = {
Text(text = "Go Backwards")
},
onClick = {
navController.navigateUp()
}
)
}
}
)
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
NavigationTheme {
NavigationApp()
}
}
Screenshots

Thoughts
This was actually a bit challenging for me. As far as navigation goes I wasn't able to wrap my mind around it the first few times. I'm so use to using nav graphs in Android that I immediately assumed that I'd have one and things would work the same. I was extremely wrong. I found this article that was able to break down the logic for me. Now I'll try to past this code directly into swift UI with a little doctoring.
Swift UI
Initial Paste/Doctoring

Code - Final
struct ContentView: View {
var body: some View {
NavigationView {
ScreenOne()
}
}
}
struct ScreenOne: View {
var body: some View {
VStack(content: {
Text("Screen 1")
.padding(.bottom, 10.0)
.navigationTitle("Navigation")
NavigationLink(destination: ScreenTwo()) {
Text("Go forward")
}
})
}
}
struct ScreenTwo: View {
@Environment(\.presentationMode) var presentation
var body: some View {
VStack(content: {
Text("Screen 2")
.padding(.bottom, 10.0)
.navigationTitle("Navigation")
.navigationBarBackButtonHidden(true)
Button("Go Backwards"){
self.presentation.wrappedValue.dismiss()
}
})
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Screenshots

Thoughts
Again navigation took me bit to grasp but not as long as Android. I think this might be because of how they are used. Android navigation is explicitly passed but iOS is not. Something I need to check on after this is the environment variable and why it has to be there to pop the backstack. That is a concept/logic I'm still unfamiliar with.
In conclusion the ability to copy and paste across platforms is kinda possible. I don't feel like it took me long to build the iOS app. All I really changed was the navigation. Granted Android stumped me for navigation understanding, but I think regardless this is a really cool thing. If you can learn the basics of both I think you will be an unstoppable force in the field (especially if you freelance). This is a slightly different meaning to "Code Once, Distribute to all", but its only a half a step off.
I look forward to continued testing of this copy and paste theory as time goes on. I can definitely see a "joint ide" in the future or some type of quick conversion app.