What React Native concepts become in Kotlin and Swift
Nsila is my first project in Kotlin and Swift. I came from React Native, so both languages were entirely new to me.
Some of it was easier than I expected. State was the first thing that clicked. When I read about remember in Jetpack Compose, I understood it quite quickly, because the idea is already common knowledge in React Native. The component names and what each one is for took longer, about a couple of days across both platforms.
This is the map I wish I had on day one.
Local state
// React Native
const [adding, setAdding] = useState(false);
// Kotlin, Jetpack Compose
var adding by remember { mutableStateOf(false) }
// Swift, SwiftUI
@State private var adding = falseLayout components
- A column of views: View in React Native, Column in Compose, VStack in SwiftUI
- A row of views: View with flexDirection row, Row, HStack
- Views stacked on top of each other: absolute positioning, Box, ZStack
- A long list: FlatList, LazyColumn, List or a lazy stack
- A modal screen: Modal, Dialog, fullScreenCover or sheet
Styling
There is no style object. Compose uses a Modifier chain and SwiftUI uses modifiers on the view. The order matters in both, because each modifier wraps what came before it. Padding before a background gives a different result from padding after it.
Effects
LaunchedEffect in Compose is close to useEffect. Its keys work like a dependency array, and it runs again when they change. DisposableEffect adds an onDispose block, which is the cleanup function you would return from useEffect. SwiftUI splits this across onAppear, onDisappear, task and onChange.
Shared state
Where I would use Zustand in React Native, Nsila uses a ViewModel with StateFlow on Android, and an ObservableObject with @Published properties on iOS. Screens subscribe to them and redraw when a value changes.
Where the comparison stops working
remember only keeps a value while that part of the screen stays in the composition, and it does not survive something like a screen rotation. Compose has rememberSaveable for that, and Nsila uses both.
So the React Native knowledge transfers well for how a screen should think about state. It does not tell you the names, the lifecycles or the platform APIs underneath. Those still have to be learned one at a time.