Have fun creating UI for React Native.
npm install react-native-motif
// src/components/title.tsx
import { Text } from 'react-native'
import { VariantProps, styled } from 'react-native-motif'
const title = styled({
color: {
primary: 'red',
secondary: 'yellow',
},
fontSize: {
sm: 15,
md: 18,
},
})
export type Props = {
children: string | string[]
} & VariantProps<typeof title>
export function Title(props: Props) {
return (
<Text
style={{
color: title.color.get(props.color),
fontSize: title.fontSize.get(props.fontSize),
}}
>
{props.children}
</Text>
)
}
// src/app.tsx
import { View } from 'react-native'
import { style } from 'react-native-motif'
import { Title } from './components/title'
export function App() {
return (
<View
style={{
flex: 1,
alignItems: "center",
justifyContent: "center",
}}
>
<Title
color="primary"
fontSize="md"
>
Hello world
</Title>
</View>
)
}