CODEWITHSUNDEEP
react-nativenative-base
Ali
Ali

Reputation: 663

Add Separator to Text native-base

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

Upvotes: 0

Views: 3347

Answers (1)

Cjmarkham
Cjmarkham

Reputation: 9681

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>
    )
  }
}

Upvotes: 2

Related Questions