How to use the hyperview/src/services.createProps function in hyperview

render() {
    const { element, stylesheets, options } = this.props;

    if (element.getAttribute('hide') === 'true') {
      return null;
    }

    const { focused } = this.state;
    const keyboardType = element.getAttribute('keyboard-type') || undefined;
    const props = {
      ...createProps(element, stylesheets, { ...options, focused }),
      autoFocus: element.getAttribute('auto-focus') === 'true',
      ref: options.registerInputHandler,
      multiline: false,
      value: this.state.value,
      keyboardType,
      onFocus: () => this.setState({ focused: true }),
      onBlur: () => this.setState({ focused: false }),
      onChangeText: value => {
        // Render the formatted value and store the formatted value
        // in state (on the XML element).
        const formattedValue = HvTextField.getFormattedValue(element, value);
        this.setState({ value: formattedValue });
        element.setAttribute('value', formattedValue);
      },
    };

render() {
    const props: any = createProps(
      this.props.element,
      this.props.stylesheets,
      this.props.options,
    );
    const color = props['activity-indicator-color'];
    const injectedJavaScript = props['injected-java-script'];
    const source = { uri: props.url };
    return (
       }
        source={source}
        startInLoadingState
      />
    );
  }

render() {
    const { element, stylesheets, onUpdate, options } = this.props;
    let viewOptions = options;
    const { skipHref } = viewOptions || {};
    const props: InternalProps = createProps(element, stylesheets, viewOptions);
    const scrollable = !!element.getAttribute('scroll');
    let Component = View;
    const inputRefs = [];
    if (scrollable) {
      const textFields = element.getElementsByTagNameNS(
        Namespaces.HYPERVIEW,
        'text-field',
      );
      const textAreas = element.getElementsByTagNameNS(
        Namespaces.HYPERVIEW,
        'text-area',
      );
      const hasFields = textFields.length > 0 || textAreas.length > 0;
      Component = hasFields
        ? KeyboardAwareScrollViewWithScrollContext
        : ScrollViewWithScrollContext;

render() {
    const { element, stylesheets, onUpdate, options } = this.props;
    const { skipHref } = options || {};
    const imageProps = {};
    if (element.getAttribute('source')) {
      let source = element.getAttribute('source');
      source = urlParse(source, options.screenUrl, true).toString();
      imageProps.source = { uri: source };
    }
    const props = {
      ...createProps(element, stylesheets, options),
      ...imageProps,
    };
    const component = React.createElement(Image, props);
    return skipHref
      ? component
      : addHref(component, element, stylesheets, onUpdate, options);
  }
}

export function view(element, stylesheets, onUpdate, options) {
  let viewOptions = options;
  const { skipHref } = viewOptions || {};
  const props = createProps(element, stylesheets, viewOptions);
  const scrollable = !!element.getAttribute('scroll');
  let c = View;
  const inputRefs = [];
  if (scrollable) {
    const textFields = element.getElementsByTagNameNS(HYPERVIEW_NS, 'text-field');
    const textAreas = element.getElementsByTagNameNS(HYPERVIEW_NS, 'text-area');
    const hasFields = textFields.length > 0 || textAreas.length > 0;
    c = hasFields ? KeyboardAwareScrollView : ScrollView;
    if (hasFields) {
      props.extraScrollHeight = 32;
      props.keyboardOpeningTime = 0;
      props.keyboardShouldPersistTaps = 'handled';
      props.scrollEventThrottle = 16;
      props.getTextInputRefs = () => inputRefs;
      const registerInputHandler = ref => inputRefs.push(ref);
      viewOptions = { ...viewOptions, registerInputHandler };

render = (): ReactNode => {
    const element: Element = this.props.element;
    const stylesheets: StyleSheets = this.props.stylesheets;
    const options: HvComponentOptions = this.props.options;
    if (element.getAttribute('hide') === 'true') {
      return null;
    }

    const focused: boolean = this.state.focused;
    const pressed: boolean = this.state.fieldPressed;
    const props = createProps(element, stylesheets, {
      ...options,
      focused,
      pressed,
      styleAttr: 'field-style',
    });

    const iosPicker =
      Platform.OS === 'ios' ? this.renderPickerModaliOS() : null;

    return (

renderiOS = (): ReactNode => {
    const element: Element = this.props.element;
    const stylesheets: StyleSheets = this.props.stylesheets;
    const options: HvComponentOptions = this.props.options;
    if (element.getAttribute('hide') === 'true') {
      return null;
    }

    const focused: boolean = this.state.focused;
    const pressed: boolean = this.state.fieldPressed;
    const props = createProps(element, stylesheets, {
      ...options,
      focused,
      pressed,
      styleAttr: 'field-style',
    });
    const fieldTextStyle = createStyleProp(element, stylesheets, {
      ...options,
      focused,
      pressed,
      styleAttr: 'field-text-style',
    });
    const value: ?DOMString = element.getAttribute('value');
    const placeholderTextColor: ?DOMString = element.getAttribute(
      'placeholderTextColor',
    );
    if (!value && placeholderTextColor) {

render() {
    const { element, stylesheets, onUpdate, options } = this.props;
    if (element.getAttribute('hide') === 'true') {
      return null;
    }
    const props = createProps(element, stylesheets, { ...options });
    return React.createElement(
      View,
      props,
      ...Render.renderChildren(element, stylesheets, onUpdate, {
        ...options,
        onSelect: this.onSelect,
      }),
    );
  }
}

export function text(element, stylesheets, onUpdate, options) {
  const { skipHref } = options || {};
  const props = createProps(element, stylesheets, options);
  const component = React.createElement(
    Text,
    props,
    ...Render.renderChildren(element, stylesheets, onUpdate, options),
  );

  return skipHref ?
    component :
    addHref(component, element, stylesheets, onUpdate, options);
}

render() {
    const { element, stylesheets, options } = this.props;

    if (element.getAttribute('hide') === 'true') {
      return null;
    }

    const { focused } = this.state;
    const keyboardType = element.getAttribute('keyboard-type') || undefined;
    const props = {
      ...createProps(element, stylesheets, { ...options, focused }),
      ref: options.registerInputHandler,
      multiline: true,
      value: this.state.value,
      keyboardType,
      onFocus: () => this.setState({ focused: true }),
      onBlur: () => this.setState({ focused: false }),
      onChangeText: value => {
        this.setState({ value });
        element.setAttribute('value', value);
      },
    };

    return React.createElement(TextInput, props);
  }
}