import React from 'react';
import { Image, Text, View } from 'react-native';

const Spacer = () => <View style={{ height: '1rem' }} />;

export default function Children() {
  return (
    <View>
      <Text>
        Text wraps across multiple lines by default. Text wraps across multiple lines by default.
        Text wraps across multiple lines by default. Text wraps across multiple lines by default.
      </Text>

      <Spacer />

      <Text>
        (Text inherits styles from parent Text elements,
        <Text style={{ fontWeight: 'bold' }}>
          {'\n  '}
          (for example this text is bold
          <Text style={{ fontSize: 11, color: '#527fe4' }}>
            {'\n    '}
            (and this text inherits the bold while setting size and color)
          </Text>
          {'\n  '})
        </Text>
        {'\n'})
      </Text>

      <Spacer />

      <Text style={{ opacity: 0.7 }}>
        (Text opacity
        <Text>
          {'\n  '}
          (is inherited
          <Text style={{ opacity: 0.7 }}>
            {'\n    '}
            (and accumulated
            <Text style={{ backgroundColor: '#ffaaaa' }}>
              {'\n      '}
              (and also applies to the background)
            </Text>
            {'\n    '})
          </Text>
          {'\n  '})
        </Text>
        {'\n'})
      </Text>

      <Spacer />

      <Text>
        This text contains an inline blue view{' '}
        <View style={{ width: 25, height: 25, backgroundColor: 'steelblue' }} /> and an inline image{' '}
        <Image
          source={{ uri: 'http://lorempixel.com/30/11' }}
          style={{ width: 30, height: 11, resizeMode: 'cover' }}
        />
        .
      </Text>

      <Spacer />

      <Text>
        This text contains a view{' '}
        <View style={{ borderColor: 'red', borderWidth: 1 }}>
          <Text style={{ borderColor: 'blue', borderWidth: 1 }}>which contains</Text>
          <Text style={{ borderColor: 'green', borderWidth: 1 }}>another text.</Text>
          <Text style={{ borderColor: 'yellow', borderWidth: 1 }}>
            And contains another view
            <View style={{ borderColor: 'red', borderWidth: 1 }}>
              <Text style={{ borderColor: 'blue', borderWidth: 1 }}>
                which contains another text!
              </Text>
            </View>
          </Text>
        </View>{' '}
        And then continues as text.
      </Text>
    </View>
  );
}
