An Asset example for responsive components using restyle

AssetExample.js

import * as React from 'react';
import { Image, StyleSheet } from 'react-native';
import Box from './Box';
import Text from './Text';
import Button from './Button';

export default function AssetExample() {
  return (
    <Box
      alignItems="center"
      justifyContent={{ phone: 'center', tablet: 'space-around' }}
      padding="m"
      backgroundColor="cardPrimaryBackground"
      elevation={4}
      flexDirection={{ phone: 'column', tablet: 'row' }}
      borderRadius={4}>
      <Image style={styles.logo} source={require('../assets/snack-icon.png')} />
      <Box alignItems="flex-start" flexWrap="wrap" flex={1} margin="s">
        <Text variant="subheader">
          The Restyle library provides a type-enforced system for building UI
          components in React Native with TypeScript.
        </Text>
        <Text variant="paragraph" marginTop="s">
          It's a library for building UI libraries, with themability as the core
          focus. Local files and assets can be imported by dragging and dropping
          them into the editor. This is an example of card component which is
          responsive for different screen sizes. On mobile it fits accordingly
          and on web it looks perfect.
        </Text>
        <Button label="Get started" marginTop="s" isLoading={false} />
      </Box>
    </Box>
  );
}

const styles = StyleSheet.create({
  logo: {
    height: 128,
    width: 128,
    margin: 4,
  },
});