Emila
Emila

Reputation: 13

Render list from arrey with getParam (reacy nativie)

) I would like to create a list from an array using getParam (transfer data between screens). The end result should look like this:

Wiosła Deska Podciąganie

planList ``import React, {useState} from "react"; import { Button, StyleSheet, Text, View, Pressable, FlatList, TouchableOpacity } from 'react-native'; import { globalStyles } from "../styles/global";

export default function PlanList({navigation}){

const [training, setTraining] = useState([
    { title: 'Trening pleców', body: ['wiosła', 'deska', 'podciaganie'], key: '1' },
    { title: 'Trening brzuch/uda/pośladki', body: ['odwodzenie', 'krab', 'martwy ciąg'], key: '2' },
    { title: 'Trening ręce+klatka', body: ['rozpiętki', 'przyciąganie do skroni', 'bicek'], key: '3' },
  ]);


return(
    <View style={globalStyles.container}>
            <Text>Ułóż swoje bloki treningowe</Text>
            <Pressable><Text>Dodaj nowy</Text></Pressable>

            <FlatList
            data={training}
            renderItem={({item}) => (
                <TouchableOpacity style={globalStyles.trainingGrup} onPress={() => navigation.navigate('Training', item)}>
                        <Text>{item.title}</Text>
                </TouchableOpacity>
            )}
            ></FlatList> 
    </View>
)

}``

addTraining: ``import React from "react"; import { StyleSheet, View, Text, Image, FlatList } from "react-native"; import { globalStyles , images} from "../styles/global";

export default function Training({navigation}){ return( {navigation.getParam('body')} ) }``

Upvotes: 0

Views: 33

Answers (1)

Talha
Talha

Reputation: 886

For Screen1 Where you are passing your data or detail.

import React, {useState} from "react";
import { Button, StyleSheet, Text, View, Pressable, FlatList, TouchableOpacity } from 'react-native';
import { globalStyles } from "../styles/global";

export default function PlanList({navigation}){
   const training = [
     { title: 'Trening pleców', body: ['wiosła', 'deska', 'podciaganie'], key: '1' },
     { title: 'Trening brzuch/uda/pośladki', body: ['odwodzenie', 'krab', 'martwy ciąg'], key: '2' },
     { title: 'Trening ręce+klatka', body: ['rozpiętki', 'przyciąganie do skroni', 'bicek'], key: '3' },
   ]
    return(
       <View style={globalStyles.container}>
         <Text>Ułóż swoje bloki treningowe</Text>
         <Pressable><Text>Dodaj nowy</Text></Pressable>
         <FlatList data={training} renderItem={({item}) => (
             <TouchableOpacity style={globalStyles.trainingGrup} onPress={() => navigation.navigate('Training', item)}>
                <Text>{item.title}</Text>
             </TouchableOpacity>
          )/> 
       </View>
     )
  }

For Screen2 where you are fatching your data using props.

import React,{useEffect} from "react"; 
import { StyleSheet, View, Text, Image, FlatList } from "react-native";
import { globalStyles , images} from "../styles/global";

export default function Training({navigation,route}){
  var title=route.params.Training;
  useEffect(()=>{
    console.log(title);
    alert(JSON.stringify(title))
  },[])
   return( 
       <View style={{flex:1}}>
          <Text></Text>
       </View> 
   ) 
}

I hope it will work

Upvotes: 0

Related Questions