native-base#H3 JavaScript Examples

The following examples show how to use native-base#H3. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: About.js    From react-native-expo-starter-kit with MIT License 6 votes vote down vote up 
About = () => (
  <Container>
    <Content padder>
      <Spacer size={30} />
      <H1>Heading 1</H1>
      <Spacer size={10} />
      <Text>
        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus
        commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
        Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
        {' '}
      </Text>

      <Spacer size={30} />
      <H2>Heading 2</H2>
      <Spacer size={10} />
      <Text>
        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus
        commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
        Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
        {' '}
      </Text>

      <Spacer size={30} />
      <H3>Heading 3</H3>
      <Spacer size={10} />
      <Text>
        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus
        commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
        Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
        {' '}
      </Text>
    </Content>
  </Container>
)
Example #2
Source File: Error.js    From react-native-expo-starter-kit with MIT License 6 votes vote down vote up 
Error = ({ title, content, tryAgain }) => (
  <Container style={{ flex: 1 }}>
    <View style={{ alignSelf: 'center' }}>
      <Spacer size={20} />
      <H3 style={{ textAlign: 'center' }}>{title}</H3>
      <Text style={{ textAlign: 'center', marginBottom: 20 }}>{content}</Text>
      {tryAgain && (
        <Button block onPress={tryAgain}>
          <Text>Try Again</Text>
        </Button>
      )}
      <Spacer size={20} />
    </View>
  </Container>
)
Example #3
Source File: Single.js    From react-native-expo-starter-kit with MIT License 5 votes vote down vote up 
ArticlesSingle = ({
  error, loading, article, reFetch,
}) => {
  if (error) {
    return <Error content={error} tryAgain={reFetch} />;
  }

  if (loading) {
    return <Loading content={loading} />;
  }

  if (Object.keys(article).length < 1) {
    return <Error content={errorMessages.articles404} />;
  }

  return (
    <Container>
      <Content padder>
        {!!article.image && (
          <Image
            source={{ uri: article.image }}
            style={{
              height: 200, width: null, flex: 1, resizeMode: 'contain',
            }}
          />
        )}

        <Spacer size={25} />
        <H3>{article.name}</H3>
        <Spacer size={15} />

        {!!article.content && (
          <Card>
            <CardItem header bordered>
              <Text>Content</Text>
            </CardItem>
            <CardItem>
              <Body>
                <Text>{article.content}</Text>
              </Body>
            </CardItem>
          </Card>
        )}
        <Spacer size={20} />
      </Content>
    </Container>
  );
}