Add Separator to Text native-base

Question

I see that there is a Seperator for the List view in native-base like so

import React, { Component } from 'react';
import { Container, Content, ListItem, Text, Separator } from 'native-base';
export default class SeperatorExample extends Component {
  render() {
    return (
        <Container>
            <Content>
                <Separator bordered>
                    <Text>FORWARD</Text>
                </Separator>
                <ListItem >
                    <Text>Aaron Bennet</Text>
                </ListItem>
                <ListItem>
                    <Text>Claire Barclay</Text>
                </ListItem>
                <ListItem last>
                    <Text>Kelso Brittany</Text>
                </ListItem>
                <Separator bordered>
                    <Text>MIDFIELD</Text>
                </Separator>
                <ListItem>
                    <Text>Caroline Aaron</Text>
                </ListItem>
            </Content>
        </Container>
    );
}

}

but how would I add in a separator to just a normal text field?

render() {
  return (
    <Container>
        <Content>
            <Text>Hello</Text>
            </Separator>
            <Text>How are you?</Text>
        </Content>
    </Container>
  );
}

as this Separator seems like a List specific piece

Your request for this feature is included on our list. Check [here](https://github.com/GeekyAnts/NativeBase/issues/873) for updates — Supriya Kalghatgi, May 25 '17 at 07:39

Cjmarkham · Answer 1 · 2018-05-14T00:29:55.533

2

You could use your own component to act as a separator.

// separator.js
export default class extends React.component {
  render () {
    return (
      <View style={...this.props.style}>
        // If you want children
        { this.props.children }
      </View>
    )
  }
}

// Your other component
import TextSeparator from './separator';

export default class extends React.component {
  render () {
    return (
      <Container>
        <Content>
          <Text>Hello</Text>
          <TextSeparator style={{paddingVertical: 10}} />
          <Text>How are you?</Text>
        </Content>
      </Container>
    )
  }
}

edited May 14 '18 at 00:29

answered May 15 '17 at 18:24

Cjmarkham

9,484
5
48
81

ok so with this you are just making a component to add some padding. Do you know if there any sort of support for native-base for this? Also if you could upvote my question it would be greatly appreciated! – Ali May 15 '17 at 20:10
I haven't looked in to every component, my answer was just an example of what you could do. TBH, you dont even need another component, just use a view with a simple style. Also, I would have upvoted your question if I wanted to, I don't approve of people begging for an upvote. – Cjmarkham May 15 '17 at 21:03

Add Separator to Text native-base

1 Answers1