Develop Reference

Javascript || React Native how to use map() [duplicate]

This question already has an answer here:
React native How to add Images with map()
(1 answer)
Closed 11 months ago.
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;
Is my way of adding images to my const Icons correct? 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.
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import IconSelection from "./icons";
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<IconSelection />
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
It says Check the render method of app. The error source is pointing require().

You are returning an array of items.
You most likely need a new component that wraps your icons. Something like this
const IconSelection = () => {
return <>
Icons.map((icons) => (
<View>
<Image source={icons.uri} />
<Text style={{ textAlign: "center" }}>{icons.name}</Text>
</View>
)
</>
}
You also need to make sure that the paths to images are correct and you have proper loaders for that file type.

Touchable Opacity not responding in stack navigator screen - React Native

I'm building a React Native app, it uses React Navigation. I use TouchableOpacity throughout the app, however, in a stack navigator screen, it doesn't seem to work at all. Touching the element doesn't change the opacity and the onpress function doesn't work. The screen itself displays fine and all other screens in my app have TouchableOpacity's that work fine.
Using button doesn't respond either, I'm thinking this is a react navigation issue potentially? There is no issues transitioning to the screen though?
Here is my screen;
import React, {Component} from 'react';
import { View, Text, TouchableOpacity, Alert, Button} from 'react-native';
class RaceScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
}
}
render() {
return (
<View style={{ flex: 1, alignItems: 'center', backgroundColor:'rgba(30,30,30,0.98)'}}>
<TouchableOpacity onPress = {() => console.log('Hello')}>
<View style={{ margin:50, height:100, width: 200, backgroundColor:'red', alignItems:'center', justifyContent:'center' }}>
<Text style={{ color:'white' }}>
Go back
</Text>
</View>
</TouchableOpacity>
<Button title="Go back button" onPress = {() => console.log('Hello')}>
</Button>
</View>
);
}
}
export default RaceScreen

I've found that the Touchable components typically don't respond well to text children. You simply need to wrap it inside a View:
import React, {Component} from 'react';
import { View, Text, TouchableOpacity, Alert} from 'react-native';
export default class RaceScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', backgroundColor:'rgba(30,30,30,0.98)'}}>
<TouchableOpacity onPress = {() => console.log('Hello')}>
<View style={{ margin:50, height:100, width: 200, backgroundColor:'red', alignItems:'center', justifyContent:'center' }}>
<Text style={{ color:'white' }}>
Go back
</Text>
</View>
</TouchableOpacity>
</View>
);
}
}

I finally figured it out. In the createStackNavigator method from react-navigation, transparentCard:true is a deprecated property and was causing the bug. I was using version 3 documentation on a version 4 package of react navigation.
Looking at there site, they have just released version 5 which is great!
A note to the less experienced developers like myself, making sure you're aware of the version of each package you are using is critical for some of these difficult bugs. Don't let it get you down though, react native is elite!

My simple react native project won't render, any suggestions?

I'm using the expo application on my phone to build a simple react native application, but I'm unable to render simple text. Is there something I'm doing wrong?
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import bball from './assets/bball.jpeg'
export default class App extends Component {
render() {
let pic = {
uri: bball
}
return (
<View style={styles.container}>
<Text>hello, world</Text>
<Image source={{pic}} />
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

Have you tried this way?
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text>hello, world</Text>
<Image source={require('./assets/bball.jpeg')} />
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

#Myers Nii-Ansah, try to import image like
const image = require('./my-icon.png');

just use directly bbal in the source of image.
<Image source={bbal} />
if you have url of any image use like this.
<Image source={{uri: "https://example.com/image.png"}} />
so you can do this way if any how you can have image url from your component state.
render() {
let pic = this.state.url ? { uri: this.state.url } : bbal
return (
<View style={styles.container}>
<Text>hello, world</Text>
<Image source={pic} />
</View>
)
}

TextBox above Keyboard

I am new to React Native and I have encountered a problem: my TextBox doesn't stay above the keyboard while I am writing in it.
These are the visuals from the application
Screenshot
And this is my Signup.js:
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native';
import Form from '../components/Form';
import Logo2 from'../components/Logo2';
import {Actions} from 'react-native-router-flux';
export default class Signup extends Component {
goBack() {
Actions.pop()
}
render() {
return(
<View style={styles.container}>
<Logo2/>
<Form type="Registrar"/>
<View style={styles.signupTextCont}>
<Text style={styles.signupText}>Ja tens uma conta? </Text>
<TouchableOpacity onPress={this.goBack}><Text style={styles.signupButton}>Entra</Text></TouchableOpacity>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#232122'
},
signupTextCont: {
flexGrow: 1,
justifyContent: 'center',
alignItems: 'flex-end',
paddingVertical: 16,
flexDirection: 'row'
},
signupText: {
color: 'rgba(255,255,255,0.7)',
fontSize:16
},
signupButton: {
color: '#FFA200',
fontSize:16,
fontWeight: '500'
}
});
I don't know what I need to code.
Could you please help me?

To replicate my comment that resolved your problem; you can use the component KeyboardAvoidingView from the package react-native. It levels up the area it contains above your virtual keyboard.
Wrap your code like this:
<KeyboardAvoidingView behavior={'position'} enabled>
<View style={styles.signupTextCont}>
<Text style={styles.signupText}>Ja tens uma conta? </Text>
<TouchableOpacity onPress={this.goBack}>
<Text style={styles.signupButton}>Entra</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
Here's some more info about how it works: https://facebook.github.io/react-native/docs/keyboardavoidingview.

You can wrap your code with KeyboardAvoidingView rather than a normal View so that it can actually lift up any items inside it above the keyboard. You can use <KeyboardAvoidingView behavior="padding">
Hope it helps.

React Native TypeError: undefined is not an object (evaluating '_ref.item')

I'm trying to do an Instagram clone, but when using a FlatList I'm getting this error:
Error: TypeError: undefined is not an object (evaluating '_ref.item')
I followed this tutorial on youtube and my code is basically the same to the one on the video, I believe that probably the docs have changed due to the video was uploaded 1 year ago.
Using React Native Cli & android studio
import React, {Component} from "react";
import {FlatList} from "react-native";
import Post from "../presentation";
class PostFeed extends Component{
_renderPost({ item }) {
return <Post />;
}
_returnKey(item) {
return item.toString();
}
render() {
return (
<FlatList
data={[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]}
keyExtractor={this._returnKey}
renderItem={this._renderPost()}
/>
);
}
}
export default PostFeed;
Here's the InstaClone.js
import React, {Component} from "react";
import { View, Text, StyleSheet, Image, Dimensions, TouchableOpacity } from "react-native";
import config from "./config";
import { PostFeed } from './components/container';
class InstaClone extends Component {
render() {
return (
<View style={{ flex: 1, width: 100+"%", height: 100+"%"}}>
<View style={styles.tempNav}>
<Text>Instagram</Text>
</View>
<PostFeed/>
</View>
);
}
}
export default InstaClone;
const styles = StyleSheet.create({
tempNav: {
width:100+"%",
height: 56,
backgroundColor:"rgb(250,250,250)",
borderBottomColor:"rgb(233,233,233)",
borderBottomWidth: StyleSheet.hairlineWidth,
justifyContent: "center",
alignItems: "center"
},
userBar: {
width:100+"%",
height: config.styleConstants.rowHeight,
backgroundColor: "#fff",
flexDirection: "row",
paddingHorizontal: 10,
justifyContent: "space-between"
},
userPic: {
height:40,
width:40,
borderRadius:20
},
iconBar: {
height: config.styleConstants.rowHeight,
width: 100 + "%",
borderColor:"rgb(233,233,233)",
borderTopWidth: StyleSheet.hairlineWidth,
borderBottomWidth: StyleSheet.hairlineWidth,
flexDirection: "row"
},
icon: {
marginHorizontal: 5
},
})

You’re trying to destructure an “item” in the argument to _renderPost. There is no object passed in so it is complaining.

Just replace your code with this and I think it will solve the issue
<FlatList
data={[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]}
keyExtractor={this._returnKey}
renderItem={({ item }) => <View> {item} </View>}
/>