DEV Community

Rapid Developa
Rapid Developa

Posted on

SwiftUI vs. React Native

I have been working with SwiftUI and React Native for few years and it has been eye opening to see that both declarative UI frameworks have a lot in common. This becomes obvious when implementing custom views.Here's a simple example of a LocationCardView:
SwiftUI

struct LocationCardView: View {

    @Environment(Theme.self) private var theme
    var locationCoordinate: LocationCoordinate

    var body: some View {
        VStack(alignment: .leading, spacing: theme.spacing.md) {
            Text(locationCoordinate.city)
                .font(.headline)
            Text(locationCoordinate.state)
                .font(.caption)
            Text(locationCoordinate.countryCode)
                .font(.caption)
        }
        .locationCardViewStyle(theme)
    }
}
Enter fullscreen mode Exit fullscreen mode

React Native

const LocationCardView = (props: LocationCardViewProps) => {

  const {location} = props
  const { theme } = useThemeManager((state) => state)
  const styles = createLocationCardViewStyles(theme, props)

  return (
    <View style={styles.container}>
      <Text style={[theme.typography.h6Headline]}>{location.city}</Text>
      <Text style={[theme.typography.caption]}>{location.state}</Text>
      <Text style={[theme.typography.caption]}>{location.countryCode}</Text>
    </View>
  )
}
Enter fullscreen mode Exit fullscreen mode

LocationCardView in Simulator

LocationCardView SwiftUI vs React Native

As you can see, it takes similar number of lines to accomplish the task.But SwiftUI provides basic primitives like the VStack out of the box.This reduces memory overload and time. And personally, I prefer the DX of SwiftUI.

What do the think about both frameworks and which do you prefer? Let us know in the comments.

Top comments (0)