What I'm trying to do here is basically logging a workout by selecting exercises I did. All available exercises could be selected from an "Exercise Explorer" screen.
In the images provided above, I could click on the + button in the training logger screen, it would bring me to the exercise explorer screen, where i could select one or multiple exercises and then there would be a button to click add or something.
Here's the code I have so farLogging Screen
const LoggerScreen: React.FC<HomeProps> = ({ navigation }) => { var today = new Date().toDateString() const [data, setData] = useState<string>(''); return (<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}><Text>{today}</Text><Text>X Exercises</Text><Button title='Add' onPress={() => navigation.navigate('Explorer')} /></View> );};export default LoggerScreen
Explorer Screen
const Item = ({ item, onPress }) => (<Pressable onPress={onPress}><Text>{item.name}</Text></Pressable>);const ExplorerScreen: React.FC<HomeProps> = ({navigation}) => { const renderItem = ({ item }) => { return (<Item item={item} onPress={() => selectExercise(item.name)} /> ) } const selectExercise = (name:string) => { console.log(name) /* selectExercises(name); */ navigation.navigate('Logger', {name}); } return (<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}><Text>Explorer Screen</Text><FlatList data={DATA} renderItem={renderItem} keyExtractor={(item) => item.id} /></View> );};export default ExplorerScreen
So far, here are the resources I looked into to try to solve my problem, but it didn't work.
Passing Data from child to parent component
Pass flatlist items to another screens flatlist
Child to parent functional components in reactJS
Feel free to ignore typings. I'm currently learning React-Native and I'm slowly learning how to type my screens, navigations and everything.
I know I could use a global store, but my goal here would probably be to select exercises and return it directly into the logging screen state, and then only when the log is saved, it would be saved to a global store for each workout day. What do you think?
If I use navigate() from the explorer screen(child) to the training logger(parent), does it pop from the stack? Because that is what the react-navigation documentation recommends.
This is more of a future question about my application but, the explorer screen could be called from the logging screen to select exercises, but is also a repository of exercise where to can explore and learn about exercises (without selection options). How could i achieve this? Typing my screen with optional props and using conditional rendering? (I haven't looked into this yet, feel free to ignore)
Thank you very much for you time. And don't hesitate if you need any more information.