How to use the styled-components/primitives function in styled-components

ListFooter,
  ListItem,
  ListItemArrowGroup,
  ListItemDivider,
} from '../list';
import { Emoji } from '../text';

const SettingsExternalURLs = {
  review:
    'itms-apps://itunes.apple.com/us/app/appName/id1457119021?mt=8&action=write-review',
  twitterDeepLink: 'twitter://user?screen_name=rainbowdotme',
  twitterWebUrl: 'https://twitter.com/rainbowdotme',
};

// ⚠️ Beware: magic numbers lol
const SettingIcon = styled(FastImage)`
  ${position.size(44)};
  margin-left: -6;
  margin-right: -6;
  margin-top: 6.5;
`;

const SettingsSection = ({
  language,
  nativeCurrency,
  network,
  onPressBackup,
  onPressCurrency,
  onPressImportSeedPhrase,
  onPressLanguage,
  onPressNetwork,
  onPressReview,

import { deviceUtils } from '../utils';

const Content = styled(Column).attrs({ align: 'center', justify: 'start' })`
  ${padding(2, 31, 0)}
  flex-shrink: 0;
`;

const SeedPhraseButton = styled(Button)`
  margin-top: ${fonts.size.h5};
`;

const SeedPhraseSection = styled(Centered)`
  flex: 1;
`;

const SeedPhraseText = styled(Monospace).attrs({ size: 'h5', weight: 'medium' })`
  line-height: 28;
  max-width: 288;
  text-align: center;
`;

const WalletAddressTextContainer = styled(Centered).attrs({ direction: 'column' })`
  margin-bottom: ${(deviceUtils.dimensions.height < 700) ? 30 : 52};
  margin-top: 22;
  width: 100%;
`;

const SettingsScreen = ({
  address,
  onPressBackButton,
  onSendFeedback,
  onToggleShowSeedPhrase,

import { settingsUpdateAccountName, settingsUpdateAccountColor } from '../../redux/settings';
import { makeSpaceAfterFirstEmoji } from '../../helpers/emojiHandler';

const TopMenu = styled(View)`
  justify-content: center;
  align-items: center;
  width: ${deviceUtils.dimensions.width - 110};
  padding: 24px;
`;

const Container = styled(View)`
  justify-content: center;
  align-items: center;
`;

const AddressAbbreviation = styled(TruncatedAddress).attrs({
  align: 'center',
  color: colors.blueGreyDark,
  firstSectionLength: abbreviations.defaultNumCharsPerSection,
  size: 'lmedium',
  truncationLength: 4,
  weight: 'regular',
})`
  opacity: 0.6;
  width: 100%;
  margin-top: 9px;
  margin-bottom: 5px;
`;

const Divider = styled(View)`
  width: 93px;
  margin: 19px 0;

top: ${statusBarHeight};
`;

const CoinButton = styled(Row)`
  border-radius: 20px;
  height: 40px;
  marginLeft: 4px;
`;

const CoinButtonShadow = [
  [0, 0, 9, colors.shadowGrey, 0.1],
  [0, 5, 15, colors.shadowGrey, 0.12],
  [0, 10, 30, colors.shadowGrey, 0.06],
];

const CoinText = styled(Text)`
  color: ${colors.alpha(colors.blueGreyDark, 0.5)};
  font-family: ${fonts.family.SFProRounded};
  font-size: ${fonts.size.large};
  font-weight: ${fonts.weight.semibold};
  height: 40px;
  letter-spacing: ${fonts.letterSpacing.looseyGoosey};
  line-height: 39px;
  margin-left: 6px;
  margin-right: 11px;
  text-align: center;
`;

const MiniCoinIcon = styled(CoinIcon).attrs({
  alignSelf: "center",
  size: 26,
})`

import PropTypes from 'prop-types';
import React, { createElement } from 'react';
import { pure } from 'recompose';
import styled from 'styled-components/primitives';
import CollectiblesSendRow from '../coin-row/CollectiblesSendRow';
import { sheetVerticalOffset } from '../../navigation/transitions/effects';
import { colors, padding, position } from '../../styles';
import { deviceUtils, ethereumUtils, safeAreaInsetValues } from '../../utils';
import { SendCoinRow } from '../coin-row';
import { Icon } from '../icons';
import { Column, ColumnWithMargins } from '../layout';
import { ShadowStack } from '../shadow-stack';
import SendAssetFormCollectible from './SendAssetFormCollectible';
import SendAssetFormToken from './SendAssetFormToken';

const Container = styled(Column)`
  ${position.size('100%')};
  background-color: ${colors.white};
  flex: 1;
  overflow: hidden;
`;

const nftPaddingBottom = safeAreaInsetValues.bottom + 19;
const tokenPaddingBottom = sheetVerticalOffset + 19;

const TransactionContainer = styled(Column).attrs({
  align: 'end',
  justify: 'space-between',
})`
  ${({ isNft }) =>
    padding(22, 15, isNft ? nftPaddingBottom : tokenPaddingBottom)};
  background-color: ${colors.lighterGrey};

size: 'h5',
  weight: 'semibold',
})`
  line-height: 20;
`;

const InstructionsText = styled(Monospace).attrs({
  color: 'white',
  size: 'lmedium',
})`
  color: ${colors.alpha(colors.white, 0.46)};
  line-height: ${fonts.lineHeight.looser};
  width: 315;
`;

const IntroAppVersion = styled(AppVersionStamp)`
  bottom: ${({ bottomInset }) => bottomInset};
  left: 0;
  position: absolute;
  right: 0;
`;

const WarningIcon = styled(Icon).attrs({
  color: colors.orangeLight,
  name: 'warning',
})`
  margin-right: ${fonts.size.micro};
`;

const IntroScreen = ({ onCreateWallet, safeAreaInset }) => (

})`
  ${borders.buildRadius('top', 16)};
  ${padding(0, 16, 16)};
  background: ${colors.white};
  top: ${statusBarHeight};
`;

const HandleIcon = styled(Icon).attrs({
  color: '#C4C6CB',
  name: 'handle',
})`
  margin-top: 16px;
  margin-bottom: 2;
`;

const StyledImportButton = styled(BorderlessButton)`
  ${padding(6, 8)};
  ${shadow.build(0, 6, 10, colors.dark, 0.14)};
  background-color: ${({ disabled }) =>
    disabled ? '#D2D3D7' : colors.appleBlue};
  border-radius: 15px;
`;

const ConfirmImportAlert = onSuccess =>
  Alert({
    buttons: [
      {
        onPress: onSuccess,
        text: 'Import Wallet',
      },
      {
        style: 'cancel',

import { BlurView } from '@react-native-community/blur';
import PropTypes from 'prop-types';
import React from 'react';
import styled from 'styled-components/primitives';
import { colors, padding } from '../../styles';
import ActivityIndicator from '../ActivityIndicator';
import { Centered } from '../layout';
import { Text } from '../text';
import TouchableBackdrop from '../TouchableBackdrop';

const Overlay = styled(Centered)`
  ${padding(19, 19, 22)}
  background-color: ${colors.alpha(colors.blueGreyDark, 0.15)};
  border-radius: 20;
`;

const Title = styled(Text).attrs({
  color: 'blueGreyDark',
  lineHeight: 'none',
  size: 'large',
  weight: 'semibold',
})`
  margin-left: 8;
`;

const LoadingOverlay = ({ title }) => (

const ButtonContainerHeight = 193;
const ButtonContainerWidth = 225;

const InterstitialMargin = 18;

const ButtonContainer = styled(Centered).attrs({ direction: 'column' })`
  width: ${ButtonContainerWidth};
`;

const DividerContainer = styled(Centered)`
  ${margin(InterstitialMargin, 0)}
  width: 93;
`;

const Container = styled(Centered)`
  left: 50%;
  position: absolute;
  top: 50%;
`;

const Paragraph = styled(Text).attrs({
  align: 'center',
  color: colors.placeholder,
  lineHeight: 'loose',
  size: 'smedium',
})`
  margin-top: ${InterstitialMargin};
`;

const buildInterstitialTransform = offsetY => ({
  transform: [

const AlphaWarningText = styled(Monospace).attrs({
  color: 'orangeLight',
  size: 'lmedium',
  weight: 'medium',
})`
  line-height: ${fonts.lineHeight.looser};
`;

const Container = styled(Column).attrs({ align: 'start', justify: 'center' })`
  ${padding(0, 30)}
  background-color: ${colors.black};
  height: 100%;
`;

const Content = styled(Column)`
  margin-bottom: 10;
`;

const CreateWalletButton = styled.View`
  ${padding(14, 18, 17)}
  background-color: ${colors.teal};
  border-radius: 14;
  margin-top: 47;
`;

const CreateWalletButtonText = styled(Monospace).attrs({
  color: 'black',
  size: 'h5',
  weight: 'semibold',
})`
  line-height: 20;