This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { | |
VStack, | |
Text, | |
TextField, | |
useBinding, | |
} from 'swiftui-react-native'; | |
function App() { | |
const text = useBinding(''); | |
return ( |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useState } from 'react'; | |
import { | |
View, | |
Text, | |
Image, | |
TextInput, | |
StyleSheet | |
} from 'react-native'; | |
function App() { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { styled } from 'style-direct-club'; | |
import { MyButton } from './components/MyButton'; | |
const MyStyledButton = styled(MyButton); | |
function App() { | |
return ( | |
<MyStyledButton | |
backgroundColor="blue" | |
paddingTop={10} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { styled } from 'style-direct-club'; | |
import { View } from 'react-native'; | |
const StyledView = styled(View, { | |
aliases: { | |
bg: 'backgroundColor', | |
p: 'padding', | |
m: 'margin', | |
mt: 'marginTop', | |
}, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { styled } from 'style-direct-club'; | |
import { TouchableOpacity } from 'react-native'; | |
const StyledTouchableOpacity = styled(TouchableOpacity, { | |
defaultStyles: { | |
backgroundColor: 'blue', | |
padding: 10, | |
borderRadius: 8, | |
}, | |
}); |
OlderNewer