import colors from "../config/colors.js";

// inline style
<View style={{color: colors.red}} />

// styled components
const Container = styled.View`
	color: ${colors.red}
`

--App.js--

const Common = styled.SafeAreaView`
  ${Platform.select({
    ios: {
      fontFamily: "Avenir",
    },
    android: {
      fontFamily: "Roboto",
      paddingTop: StatusBar.currentHeight,
    },
  })}
`;

import * as Typography from "../config/typography.js";

<Typography.H1 color={colors.red}>Welcome to Airbnb</Typography.H1>

import * as Button from "../components/Button.js";

<Button.BtnContain
  icon="search"
  label="Next"
	labelcolor={colors.white}
  color={colors.red}
  size="small"
  disabled={false}
  onPress={() => onNavigate()}
/>

import * as List from "../components/List.js";

<ListItem.Default
  title="Title"
	secondary="Secondary Text"
  containedicon="location"
  onPress={() => onNavigate(item.title)}
/>

<List.UserList
  title="User Name"
  secondary="Secondary Text"
  image={userimage}
  meta={item.dates}
  onPress={() => handleNavigation(item)}
  RightActions={() => (
    <DeleteItem onPress={() => handleDelete(item)} />
  )}
/>

import * as Cards from "../components/Cards.js";

<Cards.Image
  image={image}
  sub="Subheader"
  title="Title"
  secondary="Secondary text"
  action="View More"
  onPress={() => console.log(item)}
/>