andrew-levy

package expo.modules.jetpackcomposeview

import android.content.Context
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.*

andrew-levy

import ExpoModulesCore
import SwiftUI

public class SwiftuiViewModule: Module {
  public func definition() -> ModuleDefinition {
    Name("SwiftuiForm")
      View(SwiftuiView.self) {
          Prop("name") { (view, name: String) in
              view.name = name
          }

andrew-levy

import { styled } from 'style-direct-club';

const Text = styled.Text.withOptions({
  aliases: {
    bg: "backgroundColor",
  }
});

andrew-levy

import { styled } from 'style-direct-club';
import { Text } from 'react-native';

const StyledText = styled(Text, {
  customProps: {
    sm: {
      fontSize: 12,
      marginBottom: 5,
    },
    xl: {

andrew-levy

import { styled } from 'style-direct-club';
import { TouchableOpacity } from 'react-native';

const StyledTouchableOpacity = styled(TouchableOpacity, {
  defaultStyles: {
    backgroundColor: 'blue',
    padding: 10,
    borderRadius: 8,
  },
});

andrew-levy

import { styled } from 'style-direct-club';
import { View } from 'react-native';

const StyledView = styled(View, {
  aliases: {
    bg: 'backgroundColor',
    p: 'padding',
    m: 'margin',
    mt: 'marginTop',
  },

andrew-levy

import { Text, StyleSheet } from 'react-native'
import { MyButton } from './components/MyButton';

function App() {
  return (
    <MyButton 
      style={styles.button}
      onPress={() => console.log("Pressed")}
    >
      <Text style={styles.text}>Press Me!</Text>

andrew-levy

import { styled } from 'style-direct-club';
import { MyButton } from './components/MyButton';

const MyStyledButton = styled(MyButton);

function App() {
  return (
    <MyStyledButton 
      backgroundColor="blue"
      paddingTop={10}

andrew-levy

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

function StylingExample() {
  return (
    <VStack 
      alignment="leading"
      backgroundColor="systemGray6" 
      cornerRadius={8}
    >
      <Text font="title3">Styling is easy with modifiers!</Text>

andrew-levy

import { TextField, Toggle, VStack, useBinding } from "swiftui-react-native";

function BindingExample() {
  const text = useBinding("");  
  const isOn = useBinding(false);

  return (
    <VStack>
      <TextField text={text} placeholder="Search" />
      <Toggle isOn={isOn} tintColor="systemBlue" />