native-base#H1 JavaScript Examples

The following examples show how to use native-base#H1. 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: Transactions.js    From web3-react-native with MIT License 6 votes vote down vote up 
Transactions = ({ transactions, width, ...extraProps }) => {
  const numTransactions = transactions.toJS().length;
  const hasTransactions = numTransactions > 0;
  return (
    <View
    >
      <H1
        style={styles.text}
        children={`Transactions (${numTransactions})`}
      />
      {(!hasTransactions) && (
        <Text
          style={styles.text}
          children="Your transactions will be listed here."
        />
      )}
      {(!!hasTransactions) && (
        <Carousel
          data={transactions.toJS()}
          renderItem={({ item: transaction, index}) => (
            <Transaction
              key={index}
              transaction={transaction}
            />
          )}
          sliderWidth={width}
          itemWidth={width * 0.8}
        />
      )}
    </View>
  );
}
Example #2
Source File: Wallets.js    From web3-react-native with MIT License 6 votes vote down vote up 
Wallets = ({ wallets, width, ...extraProps }) => {
  const numWallets = wallets.toJS().length;
  const hasWallets = numWallets > 0;
  return (
    <View
    >
      <H1
        style={styles.text}
        children={`Wallets (${numWallets})`}
      />
      {(!hasWallets) && (
        <Text
          style={styles.text}
          children="Add a wallet to get started."
        />
      )}
      {(!!hasWallets) && (
        <Carousel
          data={wallets.toJS()}
          renderItem={({ item: wallet, index}) => (
            <Wallet
              key={index}
              wallet={wallet}
            />
          )}
          sliderWidth={width}
          itemWidth={width * 0.8}
        />
      )}
    </View>
  );
}
Example #3
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 #4
Source File: Header.js    From react-native-expo-starter-kit with MIT License 6 votes vote down vote up 
Header = ({ title, content }) => (
  <View>
    <Spacer size={25} />
    <H1>{title}</H1>
    {!!content && (
      <View>
        <Spacer size={10} />
        <Text>{content}</Text>
      </View>
    )}
    <Spacer size={25} />
  </View>
)