[Android] 0.3.0 Element type is invalid React-Native 0.28.0

[basudz365]

I use this library in a few different screens throughout my app and 0.2.0 was working great in Android 4.4. I recently updated React-Native to 0.28.0 and also upgraded this library to 0.3.0 to handle the Keyboard listener changes, however. Now any screen that uses a gives me a React red screen error with the following message.

E/ReactNativeJS(15228): Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `SetupScreen`.

And here is the render method of SetupScreen. Note that if I remove the KeyboardSpacer component, everything works. Also, I reverted back to 0.2.0 and just changed the DeviceEventEmitter to Keyboard and then everything worked correctly, the spacer worked properly, and I didn't have any Keyboard warnings popping up either.

render() {
    return (
      <Image style={styles.bgImg} source={require('./img/thank-bg.jpg')}>
        <View style={styles.scene}>
        <Animatable.View animation='' easing='ease-in' style={styles.modal}>
            <View style={styles.bar}>
              <Text style={styles.text}>
                Kiosk: {this.props.kioskloc.name} |
                Org: {this.props.kioskloc.orgname} |
                Location: {this.props.kioskloc.locationname}
              </Text>
              <Text style={styles.text}>
                Device ID: {DeviceInfo.mobileDeviceId}  |
                Serial #: {DeviceInfo.serialNumber}
              </Text>
              <Text style={styles.text}>
                Mode: {this.state.apiMode}
              </Text>
            </View>
            <View style={styles.modalContent}>
              {
                GlobalConfig.isProdMode()
                ?
                  null
                :
                  <View>
                    <Text style={styles.h1}>Change API URL</Text>
                    <TextInput
                      ref='apiUrl'
                      style={styles.input}
                      autoFocus={false}
                      autoComplete={false}
                      autoCapitalize={'none'}
                      placeholder={'API URL'}
                      returnKeyType={'next'}
                      value={this.state.apiBaseUrl}
                      onChangeText={value => this.setState({apiBaseUrl: value})}

                    />
                    <SmallButton {...this.props} onPress={this.handleSaveApiBaseUrl.bind(this)}
                                                 color={UI.positiveColor}
                                                 label="Save"/>
                  </View>
              }
              <Text style={styles.h1}>
                Change Kiosk or Full Sync
              </Text>
              <TextInput
                ref='kioskName'
                style={styles.input}
                autoFocus={false}
                autoComplete={false}
                autoCapitalize={'none'}
                placeholder={'Kiosk Name'}
                returnKeyType={'next'}
                value={this.state.kioskName}
                onChangeText={value => this.setState({kioskName: value})}

              />
              <SmallButton {...this.props}
                onPress={this.handleSaveKiosk.bind(this)}
                color={UI.positiveColor}
                label={this.props.kioskloc.name != this.state.kioskName ? "Change Kiosk" : "Full Sync"}/>
              <SmallButton {...this.props}
                onPress={() => this.props.goHome()} color={UI.primaryColor}
                label="Cancel"/>
            </View>
          </Animatable.View>
          <KeyboardSpacer/>
        </View>
      </Image>
    );

[basudz365]

I was able to fix this issue by adding back in the module.exports = KeyboardSpacer; line at the bottom.
Also noticed that the key is missing for keyboardSpace in the setState call in updateKeyboardSpace.

[Andr3wHur5t]

Thanks for reporting,

I ran into this error with my initial testing of v0.3.0 as well but upgrading the react-native cli and clearing watchman solved the problem.

Falling back to module exports might be a good way to make upgrades simpler; Ill take a look into how this works with v0.3.0 when upgrading applications using older versions of react-native.

Can you reference the commit you were seeing the missing keyboardSpace key?

[basudz365]

Thanks for the response and suggestion. I tried upgrading the react-native cli and clearing watchman but the problem still occurs for me. I'm pretty new to the React/JS world so it seems that keyboardSpace is working correctly as a computed dynamic property. Keep me posted on the module export issue and let me know if you need any more information. Seems to be the only way I've been able to make 0.3.0 work in my project.

[cuitianze]

0.3.0 react-native 0.28.0 I have this problem too. Already run watchman watch-del-all and npm start --reset-cache.

[sibelius]

@Andr3wHur5t we can close this

[Andr3wHur5t]

Anyone on this thread apposed?

[basudz365]

@Andr3wHur5t nope, you can close it.