andrew-levy

import React, { useState } from 'react';
import { StyleSheet, View, Pressable } from 'react-native';
import { MotiView, AnimatePresence } from 'moti';
import {
  Ionicons,
  FontAwesome,
  MaterialCommunityIcons,
  Feather,
  Entypo,
} from '@expo/vector-icons';

andrew-levy

import SwiftUI

struct App: View {
    @State var text = ""
    var body: some View {
        VStack(alignment: .leading) {
            Text("Some cool text").font(.title)
            Image(systemName: "bolt.fill").frame(width: 100, height: 100)
            TextField("Name", text: $text)
        }

andrew-levy

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

function App() {
  const text = useBinding('');
  return (

andrew-levy

import { useState } from 'react';
import { 
  View,
  Text,
  Image,
  TextInput,
  StyleSheet
} from 'react-native';

function App() {

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" />

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 { 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 { 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 { View } from 'react-native';

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

andrew-levy

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

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