Open EvansPie opened 4 years ago
Hi there, I used a state to conditionally render the component, like so :
import React, { FunctionComponent as Component, useState, useEffect } from "react"
import Tags from "react-native-tags"
export const Test: Component<TestProps> = props => {
const [ displayedTags, setDisplayedTags ] = useState()
const getTags = async () => {
var myTags = await ... // Load your tags
setDisplayedTags(myTags)
}
useEffect(() => {
getTags()
}, [])
// You render the component only when displayedTags has been initialised
return (
<>
{ displayedTags &&
<Tags
initialTags={displayedTags}
...
/>
}
</>
)
}
I only use TypeScript for React Native so I don't know the equivalent in plain RN, but you get the point. By using state, you can postpone the render of the Tags component as well as re-rendering it if needed.
@Caminyx its a work around for this issue, but it worked.
here's a work around i did :
const [ tags, setTags] = useState()
useEffect(() => {
if(route.params.tags.length>0) setTags(route.params.tags)
else {
setTags([])
}
}, [])
return (
<>
{ Array.isArray(tags) &&
<Tags
initialTags={tags}
...
/>
}
</>
)
Hey @peterp, first of all, awesome library 🙌
Maybe what I'm doing is out of the scope of this project. I've basically built a wrapper that the user can select/deselect a tag between a list of tags. Similar to setting your interests in various apps. Everything works perfectly apart from re-rendering the view on the
initialTags
prop change. I had a look at your code and it seems that it's like that by design.I've solved my issue by re-setting the state tags when the props tags change.
Is there another way to re-render the view?