Example of React Native default approach to styling components

Card.tsx

import React from 'react';

function Card({ children }: PropsWithChildren<unknown>) {
  return (
    <View style={styles.cardContainer}>
      {children}
    </View>
  );
}

const styles = StyleSheet.create({
  cardContainer: {
    backgroundColor: 'rgba(255, 255, 255, 1)',
    borderRadius: 20,
    padding: 16
  }
});

Text.tsx

import React from 'react';
import { Text as RNText } from 'react-native';

type TextProps = {
  variant?: 'body' | 'overline';
};

function Text({ variant = 'body' }: PropsWithChildren<TextProps>) {
  const style = variant === 'body' ? styles.variantBody : styles.variantOverline;
  
  return <RNText style={style}>{children}</RNText>;
}

const styles = StyleSheet.create({
  variantBody: {
    color: 'rgba(0, 0, 0, 1)',
    fontSize: 12,
    fontWeight: 500,
    textTransform: 'uppercase'
  },
  
  variantOverline: {
    color: 'rgba(151, 151, 151, 1)',
    fontSize: 16,
    fontWeight: 700
  }
});