Object.values requires that input parameter not to be null or undefined

[me1k]

i just re-used an example from the showcase file

[swushi]

Copy and paste the exact example you are following please

[me1k]

react-native-input-outline/example/src/Showcase.tsx /

Line 31-43

[swushi]

Thanks for submitting the issue. I'm going to need you to provide more context however. There are a lot of things that could go wrong if you just directly copy from the example.

[me1k]

const inputRef = useRef<InputOutline>(null); <KeyboardAwareScrollView
        extraHeight={180}
        contentContainerStyle={{ flex: 1 }}>
        <View style={{ flex: 1 }}>
          <View style={{ flex: 0.8, justifyContent: 'center' }}>
            <Controller
              control={control}
              render={({ onChange, onBlur, value }) => (
                <>
                  <TextInput
                    placeholder="Gib uns dein Feedback"
                    multiline={true}
                    value={value}
                    defaultValue=""
                    onChangeText={(input) => onChange(input)}
                    onBlur={onBlur}
                    autoCapitalize="none"
                    mode="flat"
                    error={errors.feedback ? true : false}
                  />
                  <InputOutline
                    activeColor={primary}
                    inactiveColor={lightBackground}
                    placeholder="Customizable"
                    autoCorrect={false}
                    fontSize={30}
                    keyboardAppearance="dark"
                    autoCapitalize="words"
                    ref={inputRef}
                    backgroundColor={darkForeground}
                    fontColor={lightBackground}
                    assistiveText="Well Documented Reusable Component"
                  />
                  {errors.feedback && <Text>{errors.feedback.message}</Text>}
                </>
              )}
              name="feedback"
              rules={{ required: true }}
            />

            <View
              style={{
                justifyContent: 'center',
                alignItems: 'center',
                paddingTop: 20,
              }}>
              <Button
                mode="contained"
                onPress={handleSubmit(onSubmit)}
                loading={isLoading}>
                Abschicken
              </Button>
            </View>
          </View>
        </View>
      </KeyboardAwareScrollView>

  This is the exact code that i use

[swushi]

@me1k Thank you for the info. This is still not enough info as a lot of things here could be causing that error. For instance, I can't tell if from this snippet if you have lightBackground or darkForeground defined, as I know these were the variables I used in the example. I also see that you are providing an error prop to a vanilla RN <TextInput /> which is not a supported prop for that.

I would also like to see verification that the basic usage of InputOutline is working for me to further investigate this issue, i.e. without being in the <Controller /> component and with fewer props to help pinpoint the exact issue.

Unfortunately, as is it is, this has not narrowed down the problem enough. Closing for now, as I do not believe this is an issue with the library, but absolutely feel welcomed to reopen the issue.

[jaydeep-reactnative]

Still facing the same issue even in the basic example

"react": "16.14.0",
"react-native": "^0.64.2",
"react-native-input-outline": "^1.5.1",
"react-native-reanimated": "^2.0.0",

import React, { useState, useRef } from "react"
import { View } from "react-native"
import { Screen } from "../../components"
import { InputOutline } from 'react-native-input-outline'

export const WelcomeScreen = observer(function WelcomeScreen() {
  const navigation = useNavigation()
  const nextScreen = () => navigation.navigate("demo")

  const [text, setText] = useState(" ")
  const [error, setError] = useState(" ")
  const inputRef = useRef(null)

  const showError = () => {
    setError('This is your error message!')
  }

  const hideError = () => {
    setError(undefined)
  }

  return (
    <View testID="WelcomeScreen" style={FULL}>
      <Screen style={CONTAINER} preset="scroll" backgroundColor={color.transparent}>
        <InputOutline
          ref={inputRef}
          error={error} // wont take effect until a message is passed
        />
      </Screen>
    </View>
  )
})

Also tried below example

<InputOutline
    activeColor={primary}
    inactiveColor={lightBackground}
    style={styles.input}
    placeholder="Customizable"
    autoCorrect={false}
    fontSize={30}
    keyboardAppearance="dark"
    autoCapitalize="words"
    backgroundColor={darkForeground}
    fontColor={lightBackground}
    assistiveText="Well Documented Reusable Component" 
/>