Skip to content

Instantly share code, notes, and snippets.

@thekevinscott

thekevinscott/image-with-text.js

Created April 28, 2017 17:30
Show Gist options
  • Save thekevinscott/0b2ba3dbd3e3c0b2efd9fd91a08a7696 to your computer and use it in GitHub Desktop.
Save thekevinscott/0b2ba3dbd3e3c0b2efd9fd91a08a7696 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Kevin Scott created this gist Apr 28, 2017.
    43 changes: 43 additions & 0 deletions image-with-text.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,43 @@
    import React, { Component } from 'react';
    import {
    AppRegistry,
    Image,
    Text,
    } from 'react-native';

    const remote = 'https://s15.postimg.org/tw2qkvmcb/400px.png';

    export default class BackgroundImage extends Component {
    render() {
    const resizeMode = 'center';
    const text = 'This is some text inlaid in an <Image />';

    return (
    <Image
    style={{
    backgroundColor: '#ccc',
    flex: 1,
    resizeMode,
    position: 'absolute',
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    }}
    source={{ uri: remote }}
    >
    <Text
    style={{
    backgroundColor: 'transparent',
    textAlign: 'center',
    fontSize: 30,
    padding: 40,
    }}
    >
    {text}
    </Text>
    </Image>
    );
    }
    }

    AppRegistry.registerComponent('BackgroundImage', () => BackgroundImage);