I have a problem with adding the {navigation} parameter to the export default class extends Component, I need it for the FlatList
How can I add it here?
export default class ENews extends Component {
render() {
return (
<View style={styles.main}>
<StatusBar style='auto'/>
<FlatList
data={this.state.data}
onRefresh={() => this.onRefresh()}
refreshing={this.state.isFetching}
initialNumToRender={4}
contentContainerStyle={{ alignSelf: 'stretch' }}
keyExtractor={({ id }, index) => id}
renderItem={({item}) => (
<TouchableOpacity onPress={() => navigation.navigate('FullNews', item)}>
</TouchableOpacity>
)} />
</View>
);
}}
You need to get navigation from props you can either deconstruct this.props and get navigation like this
const { navigation } = this.props;
or you can directly use it like this
this.props.navigation.navigate('FullNews', item)
But I suggest using deconstructing props
export default class ENews extends Component {
render() {
const { navigation } = this.props;
return (
<View style={styles.main}>
<StatusBar style='auto'/>
<FlatList
data={this.state.data}
onRefresh={() => this.onRefresh()}
refreshing={this.state.isFetching}
initialNumToRender={4}
contentContainerStyle={{ alignSelf: 'stretch' }}
keyExtractor={({ id }, index) => id}
renderItem={({item}) => (
<TouchableOpacity onPress={() => navigation.navigate('FullNews', item)}>
</TouchableOpacity>
)} />
</View>
);
}}
Parent class
export default class ComponentName extends Component {
render() {
return (
<>
...other component
<ENews {...this.props}></ENews>
</>
);
}
}
you Component
export default class ENews extends Component {
render() {
const {navigation} = this.props; // here you destructuring you props
return (
<View style={styles.main}>
<StatusBar style="auto" />
<FlatList
data={this.state.data}
onRefresh={() => this.onRefresh()}
refreshing={this.state.isFetching}
initialNumToRender={4}
contentContainerStyle={{alignSelf: 'stretch'}}
keyExtractor={({id}, index) => id}
renderItem={({item}) => (
<TouchableOpacity
onPress={() => navigation.navigate('FullNews', item)}
/>
)}
/>
</View>
);
}
}
change as above in your code
Related
const Item = ({ item }) => (
<TouchableOpacity
onPress={() => this.navigation.navigate(
"carProfile",
{item: item}
)}>
<View style={styles.item}>
<Text style={styles.title}>{item.name}</Text>
<Text style={styles.details}>{item.details}</Text>
</View>
</TouchableOpacity>
);
const List = (props,navigation) => {
const renderItem = ({ item }) => {
if (props.searchPhrase === "") {
return <Item item={item} />;
}
if (item.name.toUpperCase().includes(props.searchPhrase.toUpperCase().trim().replace(/\s/g, ""))) {
return <Item item={item} />;
}
if (item.details.toUpperCase().includes(props.searchPhrase.toUpperCase().trim().replace(/\s/g, ""))) {
return <Item item={item} />;
}
};
return (
<SafeAreaView style={styles.list__container}>
<View
onStartShouldSetResponder={() => {
props.setClicked(false);
}}
>
<FlatList
data={props.data}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>
</View>
</SafeAreaView>
);
};
export default List;
the error is continuing to be there despite me trying to put navigation container in different positions. I want to send the user to the carProfile page, where the data passed in item is reused. This way user can know about the selection they are looking for
Use this way
onPress={() => this.props.navigation.navigate(
"carProfile",
{item: item}
)}
The navigation is inside the props, not as a second argument. Below is a classic example. And also note, you cannot extract navigation prop for child components, it will only work on Main components(Screens).
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details')}
/>
</View>
);
}
If you want to use navigation inside child components, you can use the navigation hooks.
import { useNavigation } from "#react-navigation/native";
function MyBackButton() {
const navigation = useNavigation();
return (
<Button
title="Back"
onPress={() => {
navigation.goBack();
}}
/>
);
}
Flatlist code
class HomeScreen extends Component {
state = { refreshing: false }
_renderItem = ({ item }) => <ImageGrid item={item} />
_handleRefresh = () => {
};
render() {
const { data } = this.props;
if (data.loading) {
return (
<Root>
<Loading size="large" />
</Root>
)
}
//render
return (
<FlatList
contentContainerStyle={{ alignSelf: 'stretch' }}
data={data.getPosts}
keyExtractor={item => item._id}
renderItem={this._renderItem}
numColumns={3}
refreshing={this.state.refreshing}
onRefresh={this._handleRefresh}
/>
);
}
}
implemented with class component
Make changes:
_handelRefresh=async()=>{
this.setState({refreshing: true})
this.YOURAPIFunction();
this.setState({refreshing: false})
}
<FlatList
contentContainerStyle={{ alignSelf: 'stretch' }}
data={data.getPosts}
keyExtractor={item => item._id}
renderItem={this._renderItem}
numColumns={3}
refreshing={this.state.refreshing}
onRefresh={this._handleRefresh}
/>
I'm new to react native and so I'm wondering why I'm receiving an error like
"undefined is not an object (evaluating 'props.navigation.toggleDrawer')" when I try to click on hamburger menu in my Home
Here below my Home.js
const NavigatorHome = props => {
return (
<View>
<AppHeader navigation={props.navigation} title="Home" />
</View>
);
};
export default class Home extends Component {
state = {
users: []
}
async componentDidMount() {
const users = await ajax.fetchUsers();
//ET20200226 This was a warning
this.setState({users});
}
render() {
return (
<View>
<NavigatorHome></NavigatorHome>
<View>
<Text style={styles.h2text}>
List of requests
</Text>
<FlatList
data={this.state.users}
showsVerticalScrollIndicator={false}
renderItem={({item}) =>
<View style={styles.flatview}>
<Text style={styles.uuid}>{item.uuid}</Text>
</View>
}
keyExtractor={item => item.uuid}
/>
</View>
</View>
);
}
}
Here my AppHeader.js
const AppHeader = props => {
return (
<Header
//leftComponent={<HamburgerMenu navigation={props.navigation} />}
leftComponent={<Icon
color="#fff"
name="menu"
onPress={() => props.navigation.toggleDrawer()}
/>}
centerComponent={{
text: props.title,
style: { color: "#fff", fontWeight: "bold" }
}}
statusBarProps={{ barStyle: "light-content" }}
/>
);
};
export default AppHeader;
Can someone help me to figure out how to fix it?
The reason for the error is that props.navigation is undefined in NavigatorHome. you must pass props.navigation to NavigatorHome. Your code should be as follows:
<View>
<NavigatorHome navigation={this.props.navigation}></NavigatorHome>
<View>
I want to delete item from the FlatList. However, the solution from here is not working for my code. When I run my code, I am getting error such as 'index is not defined'.
I have yet to find other post regarding this issue so any help would be greatly appreciated.
Code snippet provided below:
export default class FrCreateScreen extends Component {
constructor(props) {
super(props);
this.state = {
//new timeSlots
timeSlots: [],
}
}
setEndTime = (event, appointmentEndTime, textEndTime) => {
appointmentEndTime = appointmentEndTime || this.state.appointmentEndTime;
textEndTime = textEndTime || moment(appointmentEndTime).format('h:mm a').toString();
this.setState({
showEndTime: Platform.OS === 'ios' ? true : false,
appointmentEndTime,
textEndTime,
timeSlots: [
...this.state.timeSlots,
{
apptdate: this.state.textAppointmentDate,
appttime: this.state.textAppointmentTime,
endTime: textEndTime,
}
],
});
}
deleteDateTime = (id) => {
const filteredData = this.state.timeSlots.filter(item => item.id !== id);
this.setState({ timeSlots: filteredData });
}
render() {
return (
<ScrollView>
...
<View>
<FlatList
data={this.state.timeSlots}
keyExtractor={({ id }, index) => index.toString()}
renderItem={({ item }) => {
return (
<View style={styles.containerList}>
...
<TouchableOpacity onPress={() => this.deleteDateTime(index)}>
<Feather name="trash" style={styles.icon} />
</TouchableOpacity>
</View>
</View>
);
}}
/>
</View>
</ScrollView>
)
};
};
Screenshot below:
I think you need to add index inside renderItem { item, index }
renderItem = {({ item, index }) => {
return (
<View style={styles.containerList}>
<TouchableOpacity onPress={() => this.deleteDateTime(index)}>
<Feather name="trash" style={styles.icon} />
</TouchableOpacity>
</View>
);
}}
While rendering in map function , it provides the index too, so try adding that.
renderItem={({ item,index }) => {
return (
<View style={styles.containerList}>
...
<TouchableOpacity onPress={() => this.deleteDateTime(index)}>
<Feather name="trash" style={styles.icon} />
</TouchableOpacity>
</View>
</View>
);
}}
Hope it helps
ok fixed. on touchable onPress, the argument should be 'item.index' instead of 'index'.
here's the correct code:
renderItem={({ item,index }) => {
return (
<View style={styles.containerList}>
...
<TouchableOpacity onPress={() => this.deleteDateTime(item.index)}>
<Feather name="trash" style={styles.icon} />
</TouchableOpacity>
</View>
</View>
);
}}
I have checkboxes inside Flatlist like this
constructor(props) {
super(props);
this.state = {
checked: false
}
}
breakfastData = ({item}) => {
return(
<ListItem style={{flex:1 , flexDirection: 'row' , justifyContent:'space-between'}} >
<Text>{item}</Text>
<CheckBox
checked={this.state.checked}
onPress={() => this.setState({checked: !this.state.checked})} style={{ alignSelf: 'flex-end'}} color="#FC7B04" />
</ListItem>
)
}
render(){
return(
<View>
<FlatList
data={this.state.breakfast}
renderItem={ this.breakfastData }
keyExtractor={(item, index) => index}
/>
</View>
)
}
here is a screenshot from the app but the checkboxes don't work when i click any of the check boxes
i just want the user feel that the check box is checked
You must set checked for each item.
constructor(props) {
super(props);
this.state = {
breakfast:[
{id:1,checked:false},
{id:2,checked:false}
]
}
}
onItemPress = (item, index) => {
var tempItem = item
tempItem.checked = !item.checked
const tempArr = [...this.state.breakfast]
tempArr[index] = tempItem
this.setState({
breakfast: tempArr
})
}
breakfastData = ({item}) => {
return(
<ListItem style={{flex:1 , flexDirection: 'row' , justifyContent:'space-between'}} >
<Text>{item}</Text>
<TouchableOpacity onPress={() => {this.onItemPress(item,index)}}>
<CheckBox checked={item.checked} style={{ alignSelf: 'flex-end'}} color="#FC7B04" />
</TouchableOpacity>
</ListItem>
)
}
render(){
return(
<View>
<FlatList
data={this.state.breakfast}
renderItem={ this.breakfastData }
extraData ={ this.state}
keyExtractor={(item, index) => index}
/>
</View>
)
}