React Native Motif

Have fun creating UI for React Native.

1npm install react-native-motif

1// src/components/title.tsx
2
3import { Text } from 'react-native'
4import { VariantProps, styled } from 'react-native-motif'
5
6const title = styled({
7  color: {
8    primary: 'red',
9    secondary: 'yellow',
10  },
11  fontSize: {
12    sm: 15,
13    md: 18,
14  },
15})
16
17export type Props = {
18  children: string | string[]
19} & VariantProps<typeof title>
20
21export function Title(props: Props) {
22  return (
23    <Text
24      style={{
25        color: title.color(props.color),
26        fontSize: title.fontSize(props.fontSize),
27      }}
28    >
29      {props.children}
30    </Text>
31  )
32}

1// src/app.tsx
2
3import { View } from 'react-native'
4import { style } from 'react-native-motif'
5import { Title } from './components/title'
6
7export function App() {
8  return (
9    <View
10      style={{
11        flex: 1,
12        alignItems: "center",
13        justifyContent: "center",
14      }}
15    >
16      <Title
17        color="primary"
18        fontSize="md"
19      >
20        Hello world
21      </Title>
22    </View>
23  )
24}