drnaf/src/elements/DRNAFImageView.js

Dynamic React-Native Application Framework

import React, { Component } from 'react'
import {
  View,
  Image,
  Text, TouchableHighlight
} from 'react-native'
import { DRNAFComponent } from '../inherites/DRNAFComponent'

export class DRNAFImageView extends DRNAFComponent {
  constructor(props) {
    super(props)

    // prepare usage variables
    const request = props.request;
    if (!request) {
      // default state
      this.state = {
        callback: null,
        label: 'no',
        width: '100%',
        parent: {
          width: 0,
          height: 0,

        },
        child: {
          width: 0,
          height: 0,

        },
        height: 50,
        style: {
          alignSelf: "baseline",
          backgroundColor: 'purple',
          borderRadius: 10,
          padding: 5,
        }
      }

      // exit from this process
      return;
    }

    this.state = {
      width: 0,
      height: 0,
      child: {
        width: 0,
        height: 0,

      },
      callback: props.callback,
      style: request.style,
      label: request.label,

    }

    if (!this.state.style.width) {
      delete this.state.style['width']
    }

    if (!this.state.style.height) {
      delete this.state.style['height']
    }

  }

  /** Feature methods */
  onPageLayout = (event) => {
    const { width, height } = event.nativeEvent.layout;

    this.setState({
      child: {
        width: width,
        height: height,

      }
    })
  };

  /** [Inbound] Feature methods */
  x = () => {
    return "AAAA";// this.state.label;

  }

  render() {
    return <Image style={{
      alignSelf: 'center',
      width: this.state.width,
      height: Number.parseInt(this.state.child.width / 1.5)

    }}
      onLayout={this.onPageLayout}
      source={{
        uri: 'https://image.freepik.com/free-vector/calculator-with-modern-flat-style_3322-74.jpg'
      }}
    />

  }
}