Error in displaying the app in the android emulator - react-native

I keep getting this error in my debug console..
This is my main App component code :-
import React, {Component} from 'react';
import {StyleSheet, Text, View, FlatList, Image} from 'react-native';
import Bookitem from "./Bookitem";
const mB = [
{
rank: 1,
title: "Gathering Prey",
author: "John Sanford",
image : "http://du.ec2.nytimes.com.s3.amazonaws.com/prd/books/9780399168796.jpg"
},
{
rank: 2,
title: "Memory Man",
author: "David Baldacci",
image : "http://du.ec2.nytimes.com.s3.amazonaws.com/prd/books/9781455586387.jpg"
}
];
export default class App extends Component {
constructor(props){
super(props);
this.state={data : this.addKeystoBooks(mB)};
}
addKeystoBooks = books => {
return books.map(book => {
return Object.assign(book,{key: book.title})
})
}
_renderitem = ({item}) => {
<Bookitem
coverURL = {item.image}
author = {item.author}
title = {item.key}
/>
}
render() {
return <FlatList
data={this.state.data}
renderItem={this._renderitem} />;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
flexDirection : 'row'
},
input : {
fontFamily: 'Lobster-Regular',
fontSize: 24,
padding: 40,
borderWidth: 2,
textAlign : "center"
}
});
My BookItem Component code is as follows :-
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class book extends Component {
render(){
return(
<View style = {styles.container}>
<Image style = {styles.cover} source = {this.props.coverURL} resizeMode="contain" />>
<View style = {styles.info}>
<Text style = {styles.author}>{this.props.author}</Text>
<Text style ={styles.title}>{this.props.title}</Text>
</View>
</View>
)
}
}
const styles = StyleSheet.create(
{
container : {
flex:1,
justifyContent: "center",
alignItems: "center",
flexDirection: "row",
backgroundColor:"#FFFFFF",
borderBottomColor:"#AAAAAA",
borderBottomWidth: 2,
padding: 5,
height: 175
},
cover : {
flexDirection:"column",
alignItems: "flex-start",
height: 150
},
info:{
flexDirection: "column",
alignItems: "flex-end",
flex: 3,
alignSelf:"center",
padding: 20
},
author: {
fontFamily: "Lobster-regular",
fontSize: 20
},
title : {
fontSize: 23,
fontFamily: "Lobster-Regular"
}
}
)
I have used addkeystobooks function to add a unique identifier to each book for rendering of the flatList's data
I hope this information is sufficient enough to tell me where i am going wrong, i am trying to work with the react-native based on a mock book set..

Related

Cannot display the second product after i clicked first one in React native app

I'm trying to develop an app with React Native.
When I clicked on any product, I can see the product detail page correctly. But for the second click, the same product always appears as keep in a cache or something.
What am I missing out?
Maybe it is a state problem but I cannot figure it out.
Product Listing Page:
import { NavigationHelpersContext } from "#react-navigation/core";
import React, { Component } from "react";
import {
SafeAreaView,
ScrollView,
StatusBar,
View,
StyleSheet,
FlatList,
Text,
Image,
TouchableOpacity,
Alert,
useColorScheme,
} from "react-native";
import { getData } from "./loadData";
export default class Pekmez extends Component {
constructor(props) {
super(props);
this.state = {
refreshFlag: (Boolean = false),
data: [],
};
}
componentDidMount() {
this._unsubscribe = this.props.navigation.addListener("focus", () => {
const { route, navigation } = this.props;
const { params } = route;
console.log("_KAT fetch params:", params);
let suffix = "Product/" + params.id;
console.log("_KAT product:", suffix);
getData(suffix, "GET").then((val) => {
this.setState({ data: val.data }, () => {
console.log("state=>", this.state);
});
});
});
//id gelecek
//fetch
}
clickEventListener(item) {
this.props.navigation.navigate("UrunDetay", { ...item });
}
render() {
return (
<View style={styles.container}>
<View style={styles.headerbar}>
<Text style={styles.pagetitle}>Ürünler</Text>
</View>
<FlatList
style={styles.list}
contentContainerStyle={styles.listContainer}
data={this.state.data}
horizontal={false}
numColumns={2}
keyExtractor={(item) => {
return item.id;
}}
renderItem={({ item }) => {
return (
<TouchableOpacity
style={styles.card}
onPress={() => {
this.clickEventListener(item);
}}
>
<View style={styles.cardFooter}></View>
<Image
style={styles.cardImage}
source={{
uri:
"https://www.toptankoyurunleri.com/Uploads/Products/" +
item.id +
"/" +
item.filename,
}}
/>
<View style={styles.cardHeader}>
<View
style={{ alignItems: "center", justifyContent: "center" }}
>
<Text style={styles.title}>{item.title}</Text>
</View>
</View>
</TouchableOpacity>
);
}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
headerbar: {
height: 55,
backgroundColor: "#f27a1a",
alignItems: "center",
justifyContent: "center",
paddingVertical: 15,
marginBottom: 10,
},
pagetitle: {
fontSize: 18,
flex: 1,
alignSelf: "center",
color: "#fff",
fontWeight: "bold",
},
container: {
flex: 1,
marginTop: 0,
},
list: {
paddingHorizontal: 5,
},
listContainer: {
alignItems: "center",
},
/******** card **************/
card: {
shadowColor: "#00000021",
shadowOffset: {
width: 0,
height: 6,
},
shadowOpacity: 0.37,
shadowRadius: 7.49,
elevation: 12,
marginVertical: 10,
backgroundColor: "white",
flexBasis: "42%",
marginHorizontal: 10,
},
cardHeader: {
paddingVertical: 10,
paddingHorizontal: 5,
borderTopLeftRadius: 1,
borderTopRightRadius: 1,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
},
cardContent: {
paddingVertical: 5,
paddingHorizontal: 6,
},
cardFooter: {
flexDirection: "row",
justifyContent: "space-between",
paddingTop: 5,
paddingBottom: 5,
paddingHorizontal: 10,
borderBottomLeftRadius: 1,
borderBottomRightRadius: 1,
},
cardImage: {
height: 150,
width: 150,
alignSelf: "center",
},
title: {
fontSize: 13,
flex: 1,
alignSelf: "center",
color: "#696969",
fontWeight: "bold",
},
});
Product Detail Page
import React, { Component } from "react";
import {
SafeAreaView,
TouchableOpacity,
ScrollView,
StatusBar,
View,
StyleSheet,
Text,
Image,
useColorScheme,
Button,
BackHandler,
} from "react-native";
import {
Colors,
DebugInstructions,
Header,
LearnMoreLinks,
ReloadInstructions,
} from "react-native/Libraries/NewAppScreen";
import { WebView } from "react-native-webview";
export default class UrunDetay extends Component {
constructor(props) {
super(props);
this.state = {
detailData: {},
};
}
componentDidMount() {
console.log("this props detail:", JSON.stringify(this.props));
const { route, navigation } = this.props;
const { params } = route;
console.log("params:", params);
this.setState({ detailData: params });
}
render() {
const { detailData } = this.state;
console.log("deail:", this.props.navigation);
let vw = <Text>Loading...</Text>;
if (detailData.id && detailData.id > 0) {
vw = (
<View style={styles.container}>
<View style={styles.headerbar}>
<Text style={styles.pagetitle}>{this.state.detailData.title}</Text>
</View>
<WebView
source={{
uri:
"https://app.toptankoyurunleri.com/urun/urunadi/" +
this.state.detailData.id,
forceReload: this.state.forceReload,
}}
style={{ marginTop: 55 }}
/>
</View>
);
}
return vw;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
headerbar: {
height: 55,
backgroundColor: "#fff",
flex: 1,
position: "absolute",
top: 0,
width: "100%",
paddingBottom: 15,
paddingTop: 15,
},
pagetitle: {
fontSize: 18,
flex: 1,
alignSelf: "center",
color: "#000",
fontWeight: "bold",
},
});
Where did you map your item in your list ? It appear to keep the same item or item.id in your state can you make test with breakpoints on your browser tool ?

Get back on a component after DeepLinking react native

I'm using deeplinking in react-native in order to redirect the user to a youtube channel. But when I'm going back to my app, I have a blank screen, how can I make the user going back to the homeScreen ?
Here is my youtube code :
import React from 'react';
import { View, Text, Linking } from 'react-native';
import Acceuil from './Accueil';
class ChaineYT extends React.Component {
state = {
isLoading:false,
isLinked: false
}
componentDidMount = () => {
Linking.openURL('vnd.youtube://' + 'www.youtube.com/channel/UC1UpcbyFVTZTDrvdjNmSzSg')
this.setState(isLoading=true, isLinked=true);
if(this.state.isLoading && this.state.isLinking){
return this.props.navigation.navigate("Acceuil")
}
}
render() {
return (
<View>
</View>
)
}
}
export default ChaineYT
I'm not sure about the states that I'm using.
Edit : I've updated with the Accueil.js screen.
import React from 'react';
import { StyleSheet, View, TextInput, Button, Text, FlatList, ListView, Linking, StatusBar } from 'react-native';
import voyantes from '../Helpers/voyantesData';
import VoyanteItem from './VoyanteItem';
import MyButton2 from './MyButton2';
const numColumns = 2;
class Accueil extends React.Component {
_displayDetailForVoyante = (idVoyante,photo, specialite, description, name) => {
console.log("Display film with id " + idVoyante);
this.props.navigation.navigate("VoyanteProfil", { idVoyante: idVoyante,photo: photo,specialite:specialite,description:description, name:name });
}
render() {
return (
<View style={styles.main_container}>
<View style={{ flexDirection:'row', justifyContent: 'space-around', marginVertical: 8 }}>
<MyButton2 style={{}} text={"Voyance privée\nouvert 24h/24\n01 44 01 77 01"} icone='icone-transfert' onPress={() => { Linking.openURL('tel:0144017701'); }}/>
<MyButton2 text={"Voyance sans CB\nouvert 24h/24\n32 32"} icone='icone-sonnerie' onPress={() => { Linking.openURL('tel:3232'); }}/>
</View>
<FlatList style={styles.flatList}
data={voyantes}
keyExtractor={(item) => item.id.toString()}
renderItem={({item}) => <VoyanteItem voyante={item} displayDetailForVoyante={this._displayDetailForVoyante} />}
numColumns={numColumns} />
</View>
)
}
}
const styles = StyleSheet.create({
main_container: {
flex: 1,
backgroundColor: '#dfdee1',
backgroundColor: 'white',
flexDirection: 'column',
},
textinput: {
marginLeft: 5,
marginRight: 5,
height: 50,
borderColor: '#000000',
borderWidth: 1,
paddingLeft: 5,
backgroundColor: 'white'
},
button: {
backgroundColor: '#EF3934',
borderColor: '#EF3934',
marginLeft: 20,
marginRight: 20
},
text: {
backgroundColor: '#EF3934',
borderColor: '#EF3934',
marginLeft: 20,
marginRight: 20
},
flatList: {
flex: 1,
flexDirection: 'column',
alignContent: 'flex-start',
//justifyContent: 'flex-start',
//alignItems: 'flex-start'
}
})
export default Accueil
``
I found solution :
In your ChaineYT you have written below line :
this.setState(isLoading=true, isLinked=true);
replace it with :
this.setState({isLoading:true, isLinked:true});

How to create a complex view and card in react native

I want to create a custom card in react native and it gets me confused as to use the views.
I have tried to make a card following the tutorial but I am not getting anywhere since its very confusing.The image below is what I'm trying to achieve.
This is what I have
trying to make the card
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Platform } from "react-native";
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.squareShapeView}/>
<View style={{flex:0.7}}>
<Text>Test1</Text>
<Text>Test1</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
marginTop:50,
justifyContent: 'center',
alignItems:'center',
flexDirection:'row',
borderWidth:0.3,
marginLeft:30,
marginRight:30
},
squareShapeView: {
//To make Square Shape
width:20,
height:70,
backgroundColor: '#14ff5f',
alignSelf:'flex-start'
},
});
This is what I expect to get
this is what I expect
I hope this might help you
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { MaterialIcons } from '#expo/vector-icons';
import { Constants } from 'expo';
// You can import from local files
import AssetExample from './components/AssetExample';
const Card = ({ title, desc }) => (
<View style={styles.cardContainer}>
<View style={styles.cardContent}>
<View style={{ flexDirection: 'column' }}>
<Text>{title}</Text>
<Text>{desc}</Text>
</View>
<MaterialIcons name="navigate-next" size={40} color="red" />
</View>
</View>
)
export default class App extends React.Component {
constructor(props) {
super(props);
this.cards = [
{
title: 'Top up',
desc: 'Top up any number'
},
{
title: 'Top up history',
desc: 'View all of the top up you have made'
}
]
}
renderCards = () => {
return this.cards.map(card => (
<Card
title={card.title}
desc={card.desc}
/>
))
}
render() {
return (
<View style={styles.container}>
{this.renderCards()}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 25,
},
cardContainer: {
paddingTop: 30,
paddingBottom: 30,
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowOffset: { x: 0, y: 10 },
shadowOpacity: 1,
borderLeftColor: 'blue',
borderLeftWidth: 10,
alignSelf: 'stretch',
backgroundColor: 'white',
marginTop: 20,
},
cardContent: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginLeft: 20,
}
});
https://snack.expo.io/#xavier96/aGVscC

Why next layout is on bottom in React-Native?

I've made CustomHeader like below.
import React from 'react'
import {Platform, View, Text, TouchableHighlight, TouchableOpacity, StyleSheet} from 'react-native'
import {Ionicons} from '#expo/vector-icons';
import ScaleImage from 'react-native-scalable-image';
import {scale, moderateScale, verticalScale} from '../utils/scaling';
export default class CustomHeader extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.wrap}>
<TouchableOpacity style={styles.goBack} onPress={() => {
this.props.nav.goBack(null)
}}>
<Ionicons name="ios-arrow-back" size={moderateScale(33)} color="#565656"/>
</TouchableOpacity>
<View style={styles.title}>
<Text style={styles.titleText}>Title</Text>
</View>
<TouchableOpacity style={styles.share}>
<Ionicons name="ios-share-outline" size={moderateScale(30)} color="#565656"/>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Platform.OS === 'ios' ? Expo.Constants.statusBarHeight : 0
},
wrap: {
height: moderateScale(50),
flexDirection: 'row',
borderBottomWidth: 1,
borderBottomColor: '#e5e5e5'
},
goBack: {
flex: 1,
alignItems: 'flex-start',
justifyContent: 'center',
paddingLeft: 12,
},
title: {
flex: 8,
alignItems: 'center',
justifyContent: 'center'
},
titleText: {
fontSize: moderateScale(15),
fontWeight: 'bold'
},
share: {
flex: 1,
justifyContent: 'center',
paddingRight: 12,
alignItems: 'flex-end',
}
});
And this component is imported ContentDetailScreen.js below.
import React from 'react';
import CustomHeader from '../components/CustomHeader'
import {Platform, View, ScrollView, StyleSheet, Text, Dimensions, Image, Button, Modal} from 'react-native';
import ScaleImage from 'react-native-scalable-image';
import {scale, moderateScale, verticalScale} from '../utils/scaling';
import {Ionicons} from '#expo/vector-icons';
import Swiper from 'react-native-swiper'
const {width} = Dimensions.get('window')
export default class ContentDetailScreen extends React.Component {
static navigationOptions = {
header: null
};
render() {
console.log(this.props.navigation);
return (
<View style={[styles.container]}>
<CustomHeader nav={this.props.navigation}/>
<Text style={{backgroundColor: 'red'}}>Something</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
shareIcon: {
color: '#565656'
},
wrapper: {
backgroundColor: '#333',
justifyContent: 'flex-start'
},
slide: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#111'
},
text: {
color: '#fff',
fontSize: 30,
fontWeight: 'bold'
},
image: {
width,
flex: 1
},
paginationStyle: {
position: 'absolute',
bottom: 10,
right: 10
},
paginationText: {
color: '#333',
fontSize: 20
}
});
But, It's displaying like .
I would like to be on just next of CustomHeader as common.
But 'Something (red color)' is on bottom of Screen.
What's wrong?
If I remove CustomHeader, It's correct.
remove the
flex: 1,
from the CustomHeader style, and you will get what you want

Passing a state value React Native

I'm trying to link the backgroundColor value in the styles container to the state: color so the background color will change to whatever color I put on the textInput. Here are my codes. Thank you!
import React, {Component} from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';
export default class App extends Component {
state = {
color: '',
};
_color = (text) => {this.setState({color: text})};
_applyAndClear = () => {
this.setState({color: ''})}
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.input}
value = {this.state.color}
onChangeText = {this._color}
onSubmitEditing = {this._applyAndClear}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'someColor',
alignItems: 'center',
justifyContent: 'center',
},
input: {
borderWidth: 3,
width: 100,
height: 40,
borderColor: 'white',
alignItems: 'center',
justifyContent: 'center',
}
});
You could do this with the following:
<View style={[styles.container, { backgroundColor: this.state.color }]}>