I am trying to create a to-do app in react-native. It has some some extra functionality such as editing existing tasksand viewing task history. I have a two StackNavigators nested inside a TabNavigator - but I'm struggling to find out exactly how I should be passing state into my application, and then once the state/data is available with the app, how I should then update the application state.
Here is the relevant code for my App:
export default class App extends React.Component {
constructor(props){
super(props)
this.state = {
data: [
//Array of to-do objects here.
]
}
}
updateAppData(id, ){
//define function that wraps this.setState(). This will be passed into
application to update application state.
}
render(){
return(
<Root screenProps={this.state}/>
)
}
}
//make Todos Stack-Nav section to sit inside tab1
const TodosWrapper = StackNavigator({
CurrentTodos: { screen: CurrentTodos },
Details: { screen: Details},
EditTodo: { screen: EditTodo},
AddNewTodo: { screen: AddNewTodo}
})
//make History Stack-Nav section to sit inside tab2
const HistoryWrapper = StackNavigator({
CompletedTodos: { screen: CompletedTodos },
CompletedDetails: { screen: CompletedDetails }
})
//Make main tab navigation that wraps tabs 1 and 2
const Root = TabNavigator({
Todos : {
screen: TodosWrapper,
title: "Open Tasks"
},
History: { screen: HistoryWrapper }
})
I then want to pass the state of my App into my screens, such as the one below:
export default class CurrentTodos extends React.Component {
static navigationOptions = {
header: null
}
render(){
const { navigate } = this.props.navigation;
let { data } = this.props.screenProps;
data = data.map( (item, id) => (
<ListItem style={styles.listItem} key={"_"+id}>
<View style={styles.textWrapper}>
<Text style={styles.listItemTitle}>{item.title}</Text>
<Text note>{ item.isComplete ? "Complete" : "In Progress" }</Text>
<Text note>{item.description}</Text>
</View>
<View>
<Button
onPress={() => this.props.navigation.navigate('Details')}
title="Full Details"
style={styles.fullDetails}
/>
</View>
</ListItem>
)
);
return (
<ScrollView style={styles.scrollView}>
<View style={styles.viewHeader}>
<Text style={styles.title}>
Current Tasks
</Text>
<Text
style={styles.addNew}
onPress={() => navigate("AddNewTodo")}
>
+
</Text>
</View>
<List>
{data}
</List>
</ScrollView>
)
}
}
I am currently planning to pass the state into my screens using screenProps={this.state} and then also passing a function that wraps this.setState() so that screen components can update the app's state.
As I am a newbie to all this, I want to make sure I don't pick up poor practices.
Could anyone help me out as to whether or not this is the correct approach? The huge amount of documentation is overwhelming at times! Thanks in advance!
