When I use it works fine.
But when I try to use , nothing appears.
That's my code:
export default props => {
//console.warn(Object.keys(props))
function getUserItem({item: user}) {
console.warn(user.name)
return (
<ListItem
leftAvatar={{source: {uri: user.avatarUrl}}}
key={user.id}
title={user.name}
/>
)
}
return (
<View>
<FlatList
keyExtractor={user=>user.id.toString()}
data={users}
renderItem={getUserItem}
/>
</View>
)
}
Can anybody helps me? Thank you!!!
Use this way
<View style={{flex:1}}>
...
</View>
const getUserItem = ({item: user}) => {
...
}
Related
I'm trying to use useContext hook in a React Native page I have, I'm using this hook in other components as well and they work just fine, but this one won't - can't figure out why.
This is my component:
const GoalCard = (goal: IGoal) => {
const {theme} = useContext(ThemeContext); <-- error is here
return (
<Animated.View style={[styles.card, {height: cardHeight, backgroundColor: "#ff5e"}]}>
<View>
.....
</View>
</Animated.View>
);
I'm using this component inside a FlatList which is in a separate file.
return (
<SafeAreaView style={[styles.pageContainer, {backgroundColor: theme.background}]}>
<FlatList
showsVerticalScrollIndicator={false}
style={{padding: 8}}
data={goals}
renderItem={({index}) => GoalCard(goals[index])}
keyExtractor={item => item.id}
/>
</SafeAreaView>
);
I get the error: Invalid hook call, but it does not seem like something is wrong here.
Saw few questions about this, but none worked, also, nothing seems wrong according to the Rules of Hooks page. Why this error happens here?
EDIT:
this is my ThemeProvider:
function ThemeProvider({ children }) {
const [dark, setDark] = React.useState(false);
const toggle = () => {
setDark(!dark);
}
const theme = dark ? themes.dark : themes.light;
return (
<ThemeContext.Provider value={{theme, dark, toggle}}>
{children}
</ThemeContext.Provider>
)
}
And this is my App.tsx:
<ThemeProvider>
<Provider store={store}>
<NavigationContainer>
.....
</NavigationContainer>
</Provider>
</ThemeProvider>
I don't know what I did wrong in this function, I thought I had a return but I don't think it's being considered, and when I change the closing brackets or parenthesis it shows an error :/
Can someone help me?
function PopSheet() {
let popupRef = React.createRef()
const sheet =() => {
const onShowPopup =()=> {
popupRef.show()
}
const onClosePopup =()=> {
popupRef.close()
}
return (
<SafeAreaView style ={styles.container}>
<TouchableWithoutFeedback onPress={onShowPopup}>
</TouchableWithoutFeedback>
<BottomPopup
title="Demo Popup"
ref ={(target) => popupRef =target}/>
onTouchOutside={onClosePopup}
</SafeAreaView>
);
}
};
You need to use the render function which is responsible for rendering or display the JSX element into your app.
render() {
return (
<SafeAreaView style={styles.container}>
<TouchableWithoutFeedback
onPress={onShowPopup}></TouchableWithoutFeedback>
<BottomPopup title="Demo Popup" ref={target => (popupRef = target)} />
onTouchOutside={onClosePopup}
</SafeAreaView>
);
}
I'm making a to-do list to display on a page where the user can click on an icon to mark the task as done, in which the background colour of the corresponding task changes. The issue I'm having is I reuse the 'task' component and cannot specify which component's background should change colour. Hence, clicking any of the icons changes only one component's background colour. GIF of what I mean is below:
Only one component is changing
My code is as follows:
export default function GoalItems(props) {
const goals = props.goals;
if (goals == 1) {
return <Goal goal="Goal 1" />;
} else if (goals == 2) {
return (
<View>
<Goal goal="Goal 1" />
<View style={{marginVertical: 15}} />
<Goal goal="Goal 2" />
</View>
);
} else {
return (
<View>
<Goal goal="Goal 1" />
<View style={{marginVertical: 15}} />
<Goal goal="Goal 2" />
<View style={{marginVertical: 15}} />
<Goal goal="Goal 3" />
</View>
);
}
}
function Goal(props) {
const text = props.goal;
const [checkBox, setCheckBox] = useState(false);
const [checkBoxValue, setCheckBoxValue] = useState(
'ios-checkmark-circle-outline',
);
const [iconColour, setIconColour] = useState('#FF1744');
const [goalColour, setGoalColour] = useState('#64B5F6');
onPressCheckBox = () => {
setCheckBox(!checkBox);
if (checkBox) {
setCheckBoxValue('ios-checkmark-circle');
setIconColour('#1ABC9C');
setGoalColour('#1ABC9C');
} else {
setCheckBoxValue('ios-checkmark-circle-outline');
setIconColour('#FF1744');
setGoalColour('#64B5F6');
}
};
return (
<View style={styles.goalContainer}>
<View style={[{backgroundColor: goalColour}, styles.goal]}>
<Text style={styles.text}>{text}</Text>
</View>
<TouchableOpacity onPress={() => this.onPressCheckBox()}>
<Icon
name={checkBoxValue}
size={40}
style={styles.checkbox}
color={iconColour}
/>
</TouchableOpacity>
</View>
);
}
And the I just render <GoalItems goals={num_of_goals} /> in my main app page. I know its poorly coded with the if statements but I'm not sure how to return X amount of <GoalItems /> given num_of_goals, but that's a separate issue...
Any advice would be appreciated. Thanks in advance!
i think the reason is asynchronous.
When you call setCheckBox(!checkBox) you must wait to it working. When it done, you continue handle new state.
onPressCheckBox = () => {
setCheckBox(!checkBox)
};
useEffect(() => {
if (checkBox) {
setCheckBoxValue('ios-checkmark-circle');
setIconColour('#1ABC9C');
setGoalColour('#1ABC9C');
} else {
setCheckBoxValue('ios-checkmark-circle-outline');
setIconColour('#FF1744');
setGoalColour('#64B5F6');
}
}, [])
I'm currently creating a small example of React Native. The issue I'm having is that when I tried to pass the image source from my LoginScreen component to ImageHolder component, the Node shows error below:
Loading dependency graph, done.
error: bundling failed: Error: src\ImageHolder.js:Invalid call at line 7: require({
imageSource: imageSource
})
at C:\Users\Kuro\vuichoi_ui\node_modules\metro\src\JSTransformer\worker.js:247:19
at Generator.next (<anonymous>)
at step (C:\Users\Kuro\vuichoi_ui\node_modules\metro\src\JSTransformer\worker.js:40:30)
at C:\Users\Kuro\vuichoi_ui\node_modules\metro\src\JSTransformer\worker.js:51:15
Here is my code:
LoginScreen.js render:
render() {
if (true) {
return (
<View>
<LoginText
imgSource="./img/account.png"
secureOption={false}
value={this.state.username}
placeholder="username"
onChangeText={username => this.setState(username)}
/>
</View>
)
}
}
LoginText.js:
const LoginText = ({imgSource, secureOption, placeholder, value, onChangeText}) => {
return (
<View style={styles.containerStyle}>
<ImageHolder imageSource={imgSource} />
<InputField placeholder={placeholder} secureOption={secureOption} value={value} onChangeText={onChangeText}/>
</View>
)
}
ImageHolder.js:
const ImageHolder = ({imageSource}) => {
return (
<View style={styles.imgContainerStyle}>
<Image source={require(imageSource)}></Image>
</View>
)
}
The issue is in the path of Image. If all the component on the same path then you can the same thing.
The solutions is that you need to pass Image from LoginScreen.js
render() {
if (true) {
return (
<View>
<LoginText
imgSource={require('./img/account.png')}
secureOption={false}
value={this.state.username}
placeholder="username"
onChangeText={username => this.setState(username)}
/>
</View>
)
}
}
ImageHolder.js
const ImageHolder = ({imageSource}) => {
return (
<View style={styles.imgContainerStyle}>
<Image source={imageSource}></Image>
</View>
)
}
Replace the code above tow js and it will work for you.
I've this....
renderSearchResults() {
if (!this.props.events.successfully) {
return
}
//This don't work
/*
return (
<View>
{
this.props.events.data.data.filter(flt =>
flt.location.toLowerCase().includes(this.state.searchText.toLowerCase()))
.map(item => {
alert(item)
return (<View style={style.searchResultsWrapper} key={'ev' + item.id}>
<EventItem data={item}></EventItem>
</View>)
})
}
</View>
)
*/
//This Works
return (
<View>
{
this.props.events.data.data.map(item => {
return (
<View style={style.searchResultsWrapper} key={'ev' + item.id}>
<EventItem data={item}></EventItem>
</View>
)
})
}
</View>
)
}
I need to make the non-working code to work. Actually the alert line executes fine, so it means that's iterating fine. However this can't render results. Any clue ?
I just put the working code to demonstrante that this works ok without the filter. Is there something that I did't get it ?
Actually, your code run properly with some change like in the below in my demo code. Maybe you look your all component and try with a component like in the below.
<View>
{
this.props.events.data.data.filter(flt =>
flt.location.toLowerCase().includes(this.state.searchText.toLowerCase()))
.map(item => {
alert(item)
return (<View key={'ev' + item.id}>
<Text>{item.location}</Text>
</View>)
})
}
</View>