Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Add to Flatlist from anoter screen

$
0
0

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.

Logging ScreenExercise 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

  1. Feel free to ignore typings. I'm currently learning React-Native and I'm slowly learning how to type my screens, navigations and everything.

  2. 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?

  3. 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.

  4. 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.


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>