Creating a seperator in react native

Question

I'm trying to create a separator line between text.

Here is my Separator component

import { View, StyleSheet } from "react-native";

const Seperator = () => {
  return <View style={styles.seperator} />;
};

const styles = StyleSheet.create({
  seperator: {
    borderBottomColor: "red",
    borderBottomWidth: StyleSheet.hairlineWidth,
    marginVertical: 1,
  },
});

export default Seperator;

Here is the settings screen I'm trying to use seperator.

import { View, Text, StyleSheet } from "react-native";
import Seperator from "../components/Seperator";

const SettingsScreen = () => {
  return (
    <View style={styles.container}>
      <Text>I'm a SettingsScreen</Text>
      <Seperator />
      <Text>I'm a SettingsScreen</Text>
      <Seperator />

      <Text>I'm a SettingsScreen</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "blue",
  },
});

export default SettingsScreen;

I have done many searches but could not find a solution.

score 0 · Answer 1 · answered Sep 25 '22 at 17:45

Try this in your Separator component

const styles = StyleSheet.create({
  seperator: {
    height: 1,
    backgroundColor: "red",
    marginVertical: 1,
  },
});

or you can give

I added height + you can give height: StyleSheet.hairlineWidth and removed borderBottomColor: "red"

I hope that helps.

Creating a seperator in react native

1 Answers1