React Native Line Break component - Add easily line breaks in your React Native app

LineBreak.tsx

/**
 * (c) 2024 Pierre-Henry Soria.
 */
import { StyleSheet, View, ViewStyle, DimensionValue } from 'react-native';

type LineBreakProps = {
  width?: DimensionValue;
  color?: string;
  style?: ViewStyle;
};

const colors = {
  whiteOpacity20: 'rgba(255, 255, 255, 0.2)',
};

export const LineBreak = ({
  width = '80%',
  color = colors.whiteOpacity20,
  style,
}: LineBreakProps) => {
  return (
    <View style={s.container}>
      <View style={[s.lineBreak, { width, backgroundColor: color }, style]} />
    </View>
  );
};

const s = StyleSheet.create({
  container: {
    width: '100%',
    alignItems: 'center',
    paddingVertical: 16,
  },
  lineBreak: {
    height: StyleSheet.hairlineWidth,
    borderRadius: StyleSheet.hairlineWidth / 2,
  },
});

Usage (here, with a 75% line):

  <LineBreak
    width="75%"
  color={colors.whiteOpacity10}
  style={{ marginVertical: 12 }}
/>