SwiftUI features in React Native Applications

swiftui-react-native

❗ ❗ This project is new and has not reached a stable release yet. Working to complete all features soon! ❗ ❗

What is it?

SwiftUI is awesome. So is React Native! This library aims to leverage some of the best SwiftUI features in React Native applications.

Views

Stacks 🥞 🔡

• VStack: Vertical stack
• HStack: Horizontal stack
• ZStack: Overlay stack

UI Elements ⚛️ 📱

• Button: A clickable element that performs an action
• Image: An image or icon
• Link: An external link redirecting to the browser
• Spacer: Space in between views (horizontal or vertical)
• Text: A text element
• TextField: A styled text input element
• Label: An element with text and an icon/image
• Toggle: An toggle element to switch something on/off
• Picker: A styled selection element
• RoundedRectangle: You guessed it, a rounded rectangle

Views/Lists 📝 📜

• ScrollView: A scrollable view
• List: A formatted list

Navigation ➡️ 🔗

• NavigationManager: Navigation wrapper
• NavigationViewManager: A collection of naviagble views
• NavigationView: A representation of a navigable screen
• NavigationLink: A link to another view
• TabView: A tab bar view
• TabItem: A tab bar item

Contribution

Run yarn build to generate a dist/ folder, then run yarn watch while developing.

Usage

Install the package like this:

yarn add swiftui-react-native

and then these if you don’t have them installed already:

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Import the components you need like this:

import { VStack, Text, Button } from 'swiftui-react-native';

And display them like this:

return (
  <VStack
    aligment='leading'
    background={UIColor.systemGray6}
    padding={{ leading: 30 }}
    cornerRadius={20}
  >
    <Text font='title'>Some cool text</Text>
    <Button action={doSomething}>
      <Text>Click the cool button</Text>
    </Button>
  </VStack>
);

vs. SwiftUI…

var body: some View {
  VStack(alignment: .leading) {
    Text("Some cool text").font(.title)
    Button(action: doSomething) {
      Text("Click the cool button")
    }
  }.background(Color(UIColor.systemGray6))
   .cornerRadius(20)
   .padding(.leading, 30)
}

Features

• Components/Views
• Custom Hooks
• Native iOS themes and colors
• Pre-styled components (examples/)

Download Details:

Author: andrew-levy

Source Code: https://github.com/andrew-levy/swiftui-react-native

#react #react-native #mobile-apps