peterp / react-native-tags

Tag input component for React Native
MIT License
288 stars 75 forks source link

unable to use react-native-tags with Formik #67

Closed mrpmohiburrahman closed 3 years ago

mrpmohiburrahman commented 4 years ago

Update: After struggling for 2 days and posting this issue, I've finally got the solution. I have to put following code on my onChangeTags. formikProps.setFieldValue("careers",careers)

So my problem has nothing to do with this package. Sorry to bother. Maintainers can delete this issue.

=========================================================================================

Hi, Not sure if this is the problem with Formik or not. In "onChangeTags" when I use "formikProps.handleChange(key)", it seems that formik is unable to see the changes. Here is the code

`<Formik initialValues={{careers:[]}} onSubmit={(values,action)=>{ action.setSubmitting(true) }}

{(formikProps)=>(

Creers (press space after adding a career)
        onChangeTags={(careers)=>{
            formikProps.handleChange('careers')  // ==> This should work here. But it doesn't work.
        }}
        onTagPress={(index,tagLabel,event,deleted)=>console.log(index,tagLabel,event, deleted?"deleted":"not deleted")}
        inputStyle={{
            borderBottomColor:borderColor,
            borderBottomWidth:1,
            borderRadius:0,
            backgroundColor:"white",
            color:Colors.darkGrey,
            fontSize:Fonts.size.body,
            fontFamily:Fonts.type.base,
            lineHeight:17,
            paddingLeft:0,
        }}
        tagTextStyle={styles.label}
        renderTag={({tag,index, onPress, deleteTagOnPress, readonly})=>(
            <TouchableOpacity style={{
                borderWidth:1,
                borderColor:"#18B18D",
                borderRadius:4,
                marginVertical:3
            }}
            key={`${tag}-${index}`}
            onPress={onPress}
            // onChangeText={formikProps.handleChange(formikKey)}
            >
                <View style={{padding:10}}>
                    <Text fwBold caption primaryColor>
                        {tag}
                    </Text>
                </View>

            </TouchableOpacity>
        )}

        />
      </View
  )}

`