KeyboardAwareScrollView crashes

[sshymko]

Environment:

• React Native 0.36.0
• React Native Form Generator 0.9.9
• iOS

Steps to reproduce:

1. Declare a simple form:

import { Form, InputField, KeyboardAwareScrollView } from 'react-native-form-generator';

<KeyboardAwareScrollView>
  <Form
    ref="form"
    label="Information"
  >
    <InputField
      ref="num"
      label="Number"
      keyboardType="number-pad"
    />
  </Form>
</KeyboardAwareScrollView>

Expected result:

• Form and the underlying fields are rendered
• Form is scrollable

Actual result:

• The application crashes with the following error:

Element type is invalid: expected a string (for built-in components) but got: undefined.

[sshymko]

Standalone component react-native-keyboard-aware-scroll-view seems to work:

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

[peacechen]

react-native-form-generator's root index.js does not export KeyboardAwareScrollView. There is a commented line that imports it from a dependency, but aside from being commented, that dependency was removed. It looks like the author opted to place a copy of KeyboardAwareScrollView under src where it is referenced. However the outside world can't see it.

Created PR #87. Would be great if the fix was published to npm after being merged :)

[ainesophaur]

FWIW... I'd like to avoid the continued use/promotion of any external keyboard-aware components since it's baked into react-native KeyboardAvoidingView -- packages like react-native-keyboard-aware-scroll-view haven't performed as well for me as KeyboardAvoidingView .. that is of course unless someone can chime in on the benefits

[jnmandal]

Any idea why the KeyboardAwareScrollView is commented out and/or if #87 will be merged soon?

[marcpechaitis]

I just started trying to use this repo and I too am getting the crash with error:

Element type is invalid: expected a string (for built-in components) but got: undefined.

But in my case I am not referencing KeyboardAwareScrollView at all.

react: 15.4.1
react-native: 0.39.2
react-native-form-generator: 0.9.9
iOS: 10.2

<Form
  ref="form"
  label="Information"
>
  <InputField
    ref="num"
    label="Number"
    keyboardType="number-pad"
  />
</Form>

Error:

[ainesophaur]

Can you post the actual code from your components render function? Your code looks fine from what I can see

…

On Dec 28, 2016 7:03 PM, "MARC P" ***@***.***> wrote: I just started trying to use this repo and I too am getting the crash with error: Element type is invalid: expected a string (for built-in components) but got: undefined. But in my case I am not referencing KeyboardAwareScrollView at all. react: 15.4.1 react-native: 0.39.2 react-native-form-generator: 0.9.9 iOS: 10.2 <Form ref="form" label="Information" > <InputField ref="num" label="Number" keyboardType="number-pad" /> </Form> Error: [image: simulator screen shot dec 28 2016 4 59 31 pm] <https://cloud.githubusercontent.com/assets/12177541/21534077/09cb5ae2-cd1f-11e6-9175-e94f5a327ca6.png> — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#83 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEeBdtDx8ZxxNXImOjN24iwQBul0VMBiks5rMvjZgaJpZM4K3p1T> .

[marcpechaitis]

import React, { Component } from 'react';

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

import { Form, InputField } from 'react-native-form-generator';

export class FormGeneratorTester extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      formData:{}
    }
  }

  render(){
    return (
      <Form
        ref="form"
        label="Information"
      >
        <InputField
          ref="num"
          label="Number"
          keyboardType="number-pad"
        />
      </Form>
    )
  }
}

[ainesophaur]

All looks correct. Since you're exporting the component as a named export, make sure you're doing import {FormGeneratorTester} from 'path' and not import FormGeneratorTester from 'path' when you're including your component for rendering

…

On Dec 28, 2016 7:12 PM, "MARC P" ***@***.***> wrote: import React, { Component } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { Form, InputField } from 'react-native-form-generator'; export class FormGeneratorTester extends React.Component{ constructor(props){ super(props); this.state = { formData:{} } } render(){ return ( <Form ref="form" label="Information" > <InputField ref="num" label="Number" keyboardType="number-pad" /> </Form> ) } } — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#83 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEeBdiGhLY7KAuX5PAQendj4AIEZ0Vecks5rMvsCgaJpZM4K3p1T> .

[marcpechaitis]

@ainesophaur yup! that was my issue...many thanks! Keep up the good work!!