Warning Component Label declared 'PropTypes' instead 'propTypes'.

[same07]

hello.. i got warning error Warning Component Label declared 'PropTypes' instead 'propTypes'. Did u misspell the property assignment. how can i fix it? i try to edit Label.js

Label.PropTypes = {
  children: PropTypes.string.isRequired
}

to

Label.propTypes = {
  children: PropTypes.string.isRequired
}

its working.. but not in Input.js

Input.PropTypes = {
  ...TextInput.propTypes,
  inlineLabel: PropTypes.bool.isRequired
}

to

Input.propTypes = {
  ...TextInput.propTypes,
  inlineLabel: PropTypes.bool.isRequired
}

here is my code

<Form theme={CONFIG.theme}>
      <FieldsContainer theme={CONFIG.theme}>  
          <Fieldset label={LANG.merchant_details} theme={CONFIG.theme} >
             <FormGroup inlineLabel={false} border={true} theme={CONFIG.theme}                            
                <Label theme={CONFIG.theme}>{LANG.merchant_name}</Label>
                <Input theme={CONFIG.theme} placeholder={LANG.merchant_name} onChangeText={this._setMerchantName}/>
             </FormGroup>
        </Fieldset>
   </FieldsContainer>
</Form>

Environment:
  OS: macOS High Sierra 10.13.2
  Node: 6.12.0
  Yarn: 1.3.2
  npm: 5.6.0
  Watchman: 4.9.0
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: 3.0 AI-171.4408382

Packages: (wanted => installed)
  react: 16.2.0 => 16.2.0
  react-native: 0.52.0 => 0.52.0

thank u..

[priezz]

Please see #80 for the fix (it just makes the replacement of .PropTypes to .propTypes everywhere in the code)

[woutersmet]

Just installed the package from npm, also got this error, and ended up right back here through google :)

So, could it be that you haven't published the latest version that includes this fix to npm yet?

[Asinox]

Please make this fix public....

[priezz]

@Asinox, you could use my fork here https://github.com/priezz/react-native-clean-form/tree/switch (switch branch is preferable as it contains all other fixes and improvements, i.e. better select, switch and label styling). I have not made any PR yet as the changes are not documented yet.

[markusguenther]

@Asinox Only @esbenp can release stuff. Maybe we can add semantic-release with commitizen to empower team members as well to release a npm package.

[naiduasn]

@priezz If i use your fork with switch branch, i get this error: TypeError: Cannot read property 'Label' of undefined. But if i use master branch, i do not have any issues.

[priezz]

Could you send the full error message with the stacktrace?

пт, 7 сент. 2018 г., 18:02 Naidu Annepu notifications@github.com:

@priezz https://github.com/priezz If i use your fork with switch branch, i get this error: TypeError: Cannot read property 'Label' of undefined. But if i use master branch, i do not have any issues.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/esbenp/react-native-clean-form/issues/72#issuecomment-419486647, or mute the thread https://github.com/notifications/unsubscribe-auth/AGXu_RqGiDfiqeXp5gbM0IVUuI9vuM-Cks5uYpitgaJpZM4Rb1x5 .

[ticketapp]

I still get the same error the 22th of august 2019 with the version 0.5.0

[priezz]

@ticketapp, use my nostyled branch, it is the most recent version. https://github.com/priezz/react-native-clean-form/tree/nostyled

[ticketapp]

Ok thanks. Then there is no way to get this version by Yarn?

[priezz]

@ticketapp yarn add github:priezz/react-native-clean-form#nostyled

[ticketapp]

I didn't know this, thank you very much.

[ticketapp]

@priezz My working form does not work with your repo :(, I get this error: "Undefined is not an object (evaluation 'theme.Label') " Same thing with the Switch branch (with the master branch I get an other error: theme.BaseInput). The problem comes with a Select component like this one (with or without label): <Select name="region" // label="Region" options={regionOptions} placeholder="Auvergne-Rhône-Alpes" />

[priezz]

@ticketapp W/o going into details I guess, that in my fork, theme parameter is obligatory. Just feed it with the default theme. Here is a way I use it:

import {Theme} from 'react-native-clean-form'
import {
    Input,
    Select,
    Switch,
} from 'react-native-clean-form/redux-form'

import {colors} from '@/styles'

const FormItem = ({label, name, theme, type, ...rest}: any) => {
    let Component = Input
    if(type === 'select') Component = Select
    if(type === 'switch') Component = Switch

    return <Component
        {...rest}
        allowFontScaling={false}
        border={false}
        label={typeof label !== 'undefined' ? label : name.capitalize()}
        name={name}
        returnKeyType='done'
        theme={theme || (type === 'switch' ? switchTheme : formTheme)}
        thumbColor={colors.lightBlue}
    />
}
export default FormItem

export const formTheme = {
    ...Theme,
    BaseInput: {
        ...Theme.BaseInput,
        placeholderColor: colors.textSecondary2,
        fontSize: 15,
        lineHeight: 16,
    },
    ErrorMessage: {
        ...Theme.ErrorMessage,
        color: colors.otherPink,
        fontSize: 12,
    },
    Fieldset: {
        ...Theme.Fieldset,
        borderBottomWidth: 0,
    },
    FieldsetLabel: {
        ...Theme.FieldsetLabel,
        fontSize: 15,
    },
    FormGroup: {
        ...Theme.FormGroup,
        height: 32,
        justifyContent: 'space-between',
        marginBottom: 2,
    },
    Input: {
        ...Theme.Input,
        color: colors.text,
        paddingBottom: 0,
        underlineColor: colors.textSecondary2,
    },
    LabelText: {
        ...Theme.LabelText,
        color: colors.textSecondary1,
        fontSize: 14,
    },
    Select: {
        ...Theme.Select,
        fontSize: 15,
        hideArrow: true,
    },
    Switch: {
        ...Theme.Switch,
        activeBackgroundColor: colors.background3,
        activeColor: colors.blue,
        inactiveBackgroundColor: colors.background3,
        inactiveColor: colors.background4,
        justifyContent: 'space-between',
    },
}

export const switchTheme = {
    ...formTheme,
    Label: {
        ...formTheme.Label,
        flex: 3,
    },
}

[ticketapp]

Indeed, fot the future readers: I just added theme={Theme} after having imported it and it works like a charm (but only with the Master and Switch branches, not with the nostyled one). Thanks a lot