render list of item from array by gerParam() - react native - javascript

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
now I'm using Text, probably it can be work by FlatList (but nothing is displayed)
code:
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>
)
}
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(
<View style={globalStyles.container}>
<Text>
{navigation.getParam('body')}
</Text>
</View>
)
}

If you can access the data in the Training screen
you should declare a const
const { title } = route.params;

Related

React native How to add Images with map()

import React from "react";
import { View, Text, StyleSheet, ScrollView, Image } from "react-native";
const Icons = [
{ name: "Food", uri: require("./images/Food.png") },
{ name: "Mart", uri: require("./images/mart.png") },
{ name: "Car", uri: require("./images/car.png") }
];
const IconSelection = Icons.map((icons) => (
<View>
<Image source={icons.uri} />
<Text style={{ textAlign: "center" }}>{icons.name}</Text>
</View>
));
const styles = StyleSheet.create({});
export default IconSelection;
IconSelection.js
How do I add images inside my const Icons? Basically I want to create like a list of Icons using images and able to call them. Previously my method is basically handcode them but I found it is very messy. I think maps() could help me but I'm not really sure how to use it too. Thank you.
IconSelectionis a reference to an array containing returned JSX.
Convert it into a functional component
import React from "react";
import { View, Text, StyleSheet, ScrollView, Image } from "react-native";
const Icons = [
{ name: "Food", uri: require("./images/Food.png") },
{ name: "Mart", uri: require("./images/mart.png") },
{ name: "Car", uri: require("./images/car.png") },
];
const IconSelection = () =>
Icons.map((icons) => (
<View>
<Image source={icons.uri} />
<Text style={{ textAlign: "center" }}>{icons.name}</Text>
</View>
));
const styles = StyleSheet.create({});
export default IconSelection;

React native app stuck on white screen without any errors

I am learning React native and was trying to build an app. However, the app is stuck on a white screen and doesn't show anything nor gives any error. This code is going to render a flatlist from an array and will have a delete to swipe button on the right. I am not getting any errors though.
Message.js
import React, { useState } from 'react'
import {
View,
Text,
StyleSheet,
FlatList,
SafeAreaView,
StatusBar,
ItemSeparatorComponent,
Platform
} from 'react-native'
import ListItem from '../components/ListItem'
import ListItemSeparator from '../components/ListItemSeparator'
import DeleteSwipe from '../components/DeleteSwipe'
const messages = [
{
id: 1,
name: 'T1',
description: 'D2',
image: require('../assets/mosh.jpg')
},
{
id: 2,
name: 'T2',
description: 'D2',
image: require('../assets/mosh.jpg')
},
{
id: 3,
name: 'T3',
description: 'D3',
image: require('../assets/mosh.jpg')
},
{
id: 4,
name: 'T4',
description: 'D4',
image: require('../assets/mosh.jpg')
}
]
export default function Message () {
const [messages, setMessage] = useState(messages)
const handleDelete = messages => {
const newMessages = messages.filter(m => m.id != messages.id)
setMessage(newMessages)
}
return (
<SafeAreaView style={styles.screen}>
<FlatList
data={messages}
keyExtractor={messages => messages.id.toString()}
renderItem={({ item }) => (
<ListItem
name={item.name}
description={item.description}
image={item.image}
onPress={() => console.log('touched', item)}
renderRightActions={() => (
<DeleteSwipe onPress={() => handleDelete(item)} />
)}
/>
)}
ItemSeparatorComponent={ListItemSeparator}
/>
<FlatList />
</SafeAreaView>
)
}
const styles = StyleSheet.create({
screen: {
padding: Platform.OS === 'android' ? StatusBar.currentHeight : 0
}
})
DeleteSwipe.js
import React from 'react'
import { View, Text, StyleSheet, TouchableWithoutFeedback } from 'react-native'
import Swipeable from 'react-native-gesture-handler/Swipeable'
import { AntDesign } from '#expo/vector-icons'
const DeleteSwipe = props => {
const { renderRightActions } = props
return (
<TouchableWithoutFeedback onPress={console.log('delete it')}>
<View style={styles.container}>
<AntDesign name='delete' size={24} color='white' />
</View>
</TouchableWithoutFeedback>
)
}
const styles = StyleSheet.create({
container: {
width: 70,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ff5252'
}
})
export default DeleteSwipe
If it is a debugger issue, Restart the debugger if react native debugger is running. and again start
Or it could be a flexbox issue, Try to add or remove display: flex and flex:1 on this and parent.
Or it could be component is too small, Open inspector from dev menu and check component names in screen.
Change onPress={console.log....} to onPress={() => console.log(...
)}
But it seems what you want is onPress={props.onPress}

Catch Pressable press with styled-components in React Native

Is there a way to pass the pressed property to styled-components?
What I have now:
import React from 'react';
import { Pressable, Text, View } from 'react-native';
import styled from 'styled-components/native';
const StyledPressable = styled(Pressable)``;
const App = () => {
return (
<View>
<StyledPressable
onPress={() => null}
android_ripple={{ color: 'black', borderless: true }}>
<Text>Log in</Text>
</StyledPressable>
</View>
);
};
export default App;
What I want to achieve
import React from 'react';
import { Pressable, Text, View } from 'react-native';
import styled from 'styled-components/native';
const StyledPressable = styled(Pressable)`
background-color: ${props => pressed ? 'black' : 'blue'} // change color on press, eg.
`;
const App = () => {
return (
<View>
<StyledPressable
onPress={() => null}
android_ripple={{ color: 'black', borderless: true }}>
pressed={pressed} // this property "pressed" does not exist.
<Text>Log in</Text>
</StyledPressable>
</View>
);
};
export default App;
This is the official docs. It uses inline style and I can't make this work with styled components.
I don't think there is a way currently. A work around would be to use a View between Pressable and Text and do all you styling in it:
import React from 'react';
import { Pressable, Text, View } from 'react-native';
import styled from 'styled-components/native';
const StyledView = styled.View`
background-color: ${({pressed}) => pressed ? 'black' : 'blue'}
`;
const App = () => {
return (
<View>
<Pressable onPress={() => null}>
{({pressed}) => (
<StyledView pressed={pressed}>
<Text>Log in</Text>
</StyledView>
)}
</Pressable>
</View>
);
};
export default App;

Error in render method of App.js? React-Native question

Pasted below is my code:
import React, {useState} from 'react';
import {View, StyleSheet, Flatlist, Alert} from 'react-native';
import 'react-native-get-random-values';
import {v4 as uuidv4} from 'uuid';
import {AddTask} from './src/screens/AddTask';
import {TaskList} from './src/screens/TaskList';
const App = () => {
const [tasks, setTasks] = useState([{id: uuidv4(), text: 'Task 1'}]);
const deleteTask = (id) => {
setTasks((prevTasks) => {
return prevTasks.filter((task) => task.id != id);
});
};
const addTask = (text) => {
if (!text) {
Alert.alert('Error', 'Please enter a task', {text: 'Ok'});
} else {
setTask((prevTask) => {
return [{id: uuid(), text}, ...prevTask];
});
}
};
return (
<View style={styles.container}>
<AddTask addTask={addTask} />
<Flatlist
data={tasks}
renderItem={({task}) => (
<TaskList item={task} deleteTask={deleteTask} />
)}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 10,
},
});
export default App;
I get an error about my render method:
ERROR Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
After Googling a bit people told me to check my imports, but I swear they are done correctly. Could someone help me understand this? I am building a task manager and I am looking to implement Redux later but I am simply seeking to build the app first: add redux later.
Full Github Project: https://github.com/calebdockal/TaskManagerApp2
There are few changes to be done in the code.
In the import statement remove curly brackets around AddTask and TaskList
import AddTask from './src/screens/AddTask';
import TaskList from './src/screens/TaskList';
Change Flatlist to FlatList in import statement
import {View, StyleSheet, FlatList, Alert} from 'react-native';
and change in return statement. Then update variable in renderItem from task to item and item to task as show below
<FlatList data={tasks}
renderItem={({item}) => (
<TaskList task={item} deleteTask={deleteTask} />
)}
/>
Full code below
import React, {useState} from 'react';
import {View, StyleSheet, FlatList, Alert, Text} from 'react-native';
import 'react-native-get-random-values';
import {v4 as uuidv4} from 'uuid';
import AddTask from './src/screens/AddTask';
import TaskList from './src/screens/TaskList';
const App = () => {
const [tasks, setTasks] = useState([{id: uuidv4(), text: 'Task 1'}]);
const deleteTask = (id) => {
setTasks((prevTasks) => {
return prevTasks.filter((task) => task.id != id);
});
};
const addTask = (text) => {
if (!text) {
Alert.alert('Error', 'Please enter a task', {text: 'Ok'});
} else {
setTasks((prevTask) => {
return [{id: uuidv4(), text}, ...prevTask];
});
}
};
return (
<View style={styles.container}>
<AddTask addTask={addTask} />
<FlatList
data={tasks}
renderItem={({item}) => (
<TaskList task={item} deleteTask={deleteTask} />
)}
/>
)}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 10,
},
});
export default App;
I have taken your code from github and updated the code. You can check here
https://snack.expo.io/FbOC0J!MM
You need to add import React from 'react' at top of your code

ReferenceError can't find variable flatlist and Element Type Invalid

I was following tutorial and I got 'ReferenceError can't find variable flatlist' error, then I deleted the code and copied from the github to check if I might missed something and it's still didn't work.
import React, {useState} from 'react';
import {StyleSheet, Text, View,FlatList} from 'react-native';
import Header from './components/header';
export default function App () {
const [todos, setTodos] = useState([
{ text: 'buy coffee', key: '1' },
{ text: 'create an app', key: '2' },
{ text: 'play on the switch', key: '3' }
]);
return (
<View style={styles.container}>
<Header />
<View style={styles.content}>
{/* add todo form */}
<View style={styles.list}>
<FlatList
data={todos}
renderItem={({item}) => (
<Text>{item.text}</Text>
)}
/>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
content:{
padding: 40,
},
list:{
marginTop:20,
}
});
Header :
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
export default function Header() {
return(
<View style={styles.header}>
<Text style={styles.title}>My Todo List</Text>
</View>
)
}
const styles= StyleSheet.create({
header:{
height: 80,
paddingTop: 38,
backgroundColor: 'red',
},
title:{
textAlign: 'center',
color:'#fff',
fontSize: 20,
fontWeight:'bold',
}
});
export default Header;
Perhaps something changed in the version or something else. I will be grateful if you can tell how I can fix the error.
Edit: I changed the casing from Flatlist to FlatList and I got error 'Element type invalid: expected a string (for built- in components)'.
\ Screenshot
change case of Flatlist import as:
import {StyleSheet, Text, View,FlatList} from 'react-native';
check export of your header component. You have exported Header Component two time.
Try Replace Flatlist with FlatList
Correct: import {StyleSheet, Text, View,FlatList} from 'react-native';
Also, try to export as Class, if it's entry point:
import React, { Component } from 'react';
export default class App extends Component {
state = {
todos: [
{ text: 'buy coffee', key: '1' },
{ text: 'create an app', key: '2' },
{ text: 'play on the switch', key: '3' },
],
};
render() {
const { todos } = this.state;
return (
<View style={styles.container}>
<Header />
<View style={styles.content}>
{/* add todo form */}
<View style={styles.list}>
<FlatList
data={todos}
renderItem={({ item }) => <Text>{item.text}</Text>}
/>
</View>
</View>
</View>
);
}
}

Categories