how to pass the data in the api from render method


#1

import React, { Component } from ‘react’;

import { ScrollView, StyleSheet, ActivityIndicator, TouchableHighlight, Text, View, Alert,Image, Platform , ViewPagerAndroid} from ‘react-native’;
import { withNavigation } from ‘react-navigation’;
import { TitleBar } from ‘react-native-awesome-viewpager’;
import ViewPager1 from ‘./ViewPager1’;

class ModernApp extends Component {

static navigationOptions = ({ navigation }) => {
return {
title: navigation.getParam(‘otherParam’),
};
};

constructor(props) {
super(props);
this.state = {
isLoading: true,
dataSource: null,
id:’’
}
}

componentDidMount() {

return fetch(‘http://www.handsinservices.com/bookrecce/Api_bookreccee/Property_data.php’,{
method: ‘POST’, // or ‘PUT’
body: JSON.stringify({
prop_id : data,

}), // data can be `string` or {object}!
headers:{
  'Content-Type': 'application/json',
  'accept':'application/json',
}

}).then((response) => response.json())
.then((responseJson) => {
if(responseJson.status === “false”){
this.setState({
isLoading: false,
dataSource: ‘’,

})
Alert.alert('fjgfdjgfdgjfd');
}
this.setState({
    isLoading: false,
    dataSource: responseJson.property_detail,

})
})
.catch((error) =>{
    console.log(error)

});

}

render() {
const { params } = this.props.navigation.state;
let otherParam = params ? params.otherParam :null;
let data = params ? params.data : null;
let id = this.setState.data;
console.log(id)
//console.log(this.setState.data);

//const { navigation } = this.props;
// const data = navigation.getParam(‘data’);
// const otherParam = navigation.getParam(‘otherParam’);
console.log(otherParam);
console.log(data);
// console.log(otherParam);

if(this.state.isLoading){
return (
<View style={{flex: 1}}>


);
}else{

let property_detail = this.state.dataSource.map((val,key) =>{

   return<View style={{flex:1}}>
   <ScrollView showsVerticalScrollIndicator={false} style={{flex:1, display:'flex'}}> 
   <View style={{flex:1,backgroundColor:'white'}}>
         {/* <View style={styles.MainContainer} >
         <Image source = {{ uri: this.state.data }} style={styles.imageViewContainer1} />
         </View> */}
         {/* <View style={{flexDirection:'row'}}>
         <Image source = {{ uri: val.Related_images.image }} style={styles.imageViewContainer} />
         <Image source = {{ uri: val.Related_images.image }} style={styles.imageViewContainer} />
         </View> */}
         <View style={{flexDirection:'row', justifyContent:'space-around'}} >
         <View style={{paddingRight:20}}>
         <TouchableHighlight style={[styles.buttonContainer, styles.signupButton]}>
            <Text style={{fontWeight:"bold", fontSize:20, color:'white'}}>SCOUT</Text>
        </TouchableHighlight>
        </View>
        <View style={{borderColor:"#2294a3"}}>
        <TouchableHighlight style={[styles.buttonContainer1, styles.signupButton1]}>
            <Text style={{fontWeight:"bold", fontSize:20, color:'#2294a3'}}>BOOK</Text>
        </TouchableHighlight>
        </View>
        </View>
         <View style={styles.detailscomponent}>
         <Text style={styles.textViewContainer}>{ val.property_name}</Text>
         <Text style={styles.textView1Container}>{val.About_Location}</Text>
         <Text style={styles.textView2Container}>{val.Type}</Text>
         </View> 
   </View>

  
   </ScrollView>
   </View>
   });

return (
<ScrollView style={{backgroundColor:“white”, flex:1}} showsVerticalScrollIndicator={false}>
{/* <Image source = {{ uri:val.property_image }} style={styles.imageViewContainer1} /> /}
{data}
{/
<View style={{flex:1, backgroundColor:‘white’}}>
{property_detail}
*/}
<View style={{flexDirection:‘row’, justifyContent:‘space-around’}} >

<TouchableHighlight style={[styles.buttonContainer, styles.signupButton]}>
<Text style={{fontWeight:“bold”, fontSize:20, color:‘white’}}>SCOUT


<View style={{borderColor:"#2294a3"}}>
<TouchableHighlight style={[styles.buttonContainer1, styles.signupButton1]}>
<Text style={{fontWeight:“bold”, fontSize:20, color:’#2294a3’}}>BOOK



<TitleBar
style={styles.container}
titles={[‘Page 1’, ‘Page 2’, ‘Page 3’]}>

{property_detail}


Page 2dgfthjnhjghjnmghjghjhjhjfhjfh


Page 3



);
}
}
}

const styles = StyleSheet.create({

container: {
flex:1,
display: ‘flex’,
backgroundColor: ‘white’,
flexDirection: ‘row’,
},
welcome: {
fontSize: 20,
textAlign: ‘center’,
margin: 10,
},
instructions: {
textAlign: ‘center’,
color: ‘#333333’,
marginBottom: 5,
},

MainContainer :{

// Setting up View inside content in Vertically center.
justifyContent: ‘center’,
flex:1,
paddingTop: (Platform.OS === ‘ios’) ? 0 : 0,

},

imageViewContainer1: {
width: ‘100%’,
height: 250 ,
borderRadius : 5,
paddingBottom:10

},
imageViewContainer: {
width: ‘100%’,
height: 100 ,
margin: 10,
borderRadius : 5,
paddingBottom:10

},

textViewContainer: {

textAlignVertical:‘center’,
width:‘100%’,
fontSize:25,
fontWeight:‘bold’,
paddingTop:20,
paddingRight:25,
paddingLeft:20,

},
textView1Container: {

textAlignVertical:‘center’,
width:‘100%’,
fontSize:20,
paddingTop:5,
paddingLeft:20,
paddingRight:20

},
textView2Container: {

textAlignVertical:‘center’,
width:‘100%’,
color:‘grey’,
fontSize:20,
paddingTop:5,
paddingLeft:20,
paddingRight:20

},
detailscomponent:{
backgroundColor:‘white’,
},
buttonContainer: {
height:55,
flexDirection: ‘row’,
justifyContent: ‘center’,
alignItems: ‘center’,
marginBottom:30,
marginLeft:30,
width:172,
borderRadius:2,
shadowOffset: { width: 1, height: 2 },
shadowOpacity: 0.2,
shadowRadius: 2,
shadowColor:‘lightgrey’,
},
buttonContainer1: {
height:55,
flexDirection: ‘row’,
justifyContent: ‘center’,
alignItems: ‘center’,
marginBottom:30,
marginRight:30,
marginLeft:30,
width:172,
borderColor:"#2294a3",
borderRadius:2,
borderWidth: 3,
borderRadius: 5,
},
signupButton: {
backgroundColor: “#2294a3”,
},
signupButton1: {
backgroundColor: “white”,
},

containerT: {
flex: 1,
backgroundColor: ‘white’,
flexDirection: ‘column’,
},
welcome: {
fontSize: 20,
textAlign: ‘center’,
margin: 10,
},
instructions: {
textAlign: ‘center’,
color: ‘#333333’,
marginBottom: 5,
},
viewPager: {
flex: 1,
flexDirection: ‘column’,
},
pageStyle: {
alignItems: ‘center’,
padding: 20,
flex:1
}

});

export default ModernApp ;


#2

Hey @aman123,

This is extremely hard to read/follow. Can you you create a Snack with only the minimal and relevant code to what you demonstrate what you are trying to achieve?

Cheers,

Adam


#3

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.