React Native Android Flatlist is not visible
up vote
0
down vote
favorite
Flat list is not showing in android but it is working fine with all the functionality in ios
Below is my code for the same. I don't understand why it is happening as it is react native basic prop. But still it is not working
import React, { Component } from "react";
import {
StyleSheet,
Text,
View,
TouchableOpacity,
TextInput,
FlatList,
Platform,
AsyncStorage
} from "react-native";
import Tutor from "../image/krutika.jpg";
import {
Container,
Header,
Left,
Input,
Body,
Right,
Thumbnail,
Button
} from "native-base";
import FontAwesome from "react-native-vector-icons/FontAwesome";
import Ionicons from "react-native-vector-icons/Ionicons";
import Icon1 from "react-native-vector-icons/FontAwesome";
import axios from "axios";
import group_img from "../image/group_img.png";
import Spinner from 'react-native-loading-spinner-overlay';
export default class ChatBox extends Component {
static navigationOptions = {
header: null
};
state = {
group_msgs: ,
student_id: null,
groupType: null,
typedText: null,
groupId: null,
group_img1: null,
groupName: null,
group_type: null,
spinner: null,
};
renderDate = date => {
return <Text style={styles.time}>{date}</Text>;
};
componentWillMount = async () => {
this.loading();
const {
groupId,
group_im,
groupName,
group_type
} = this.props.navigation.state.params;
await this.setState({
groupId: groupId,
group_img1: group_im,
groupName: groupName,
group_type: group_type
});
//console.log(group_img1);
};
loading = async () => {
const userid = await AsyncStorage.getItem("user_id");
this.setState({ student_id : userId});
try {
let { data } = await axios
.get(
"https://www.qualpros.com/chat/imApi/getMessage?groupId=" +
this.state.groupId +
"&limit=10&start=0&userId="+userid
)
.then(response => {
// console.log(response)
if (response.status == 200) {
this.setState({ group_msgs: response.data.response });
console.log(this.state.group_msgs.sender);
} else {
}
});
} catch (err) {
console.log(err);
}
console.log(this.state.group_img1);
};
reset = async () => {
this.setState({ searchText: "" });
};
getInitialState = function() {
return {
searchText: ""
};
};
onSubmitEditing = async () => {
this.setState({ spinner: true })
try {
var formcardBody = ;
formcardBody.push( "groupId=" + this.state.groupId);
formcardBody.push( "message=" + this.state.typedText);
formcardBody.push( "userId=" + this.state.student_id);
formcardBody = formcardBody.join("&");
let {data} = await fetch("https://www.qualpros.com/chat/imApi/sendMessage", {
method: "post",
body: formcardBody,
headers: {
Accept: "application/json",
"Content-Type": "application/x-www-form-urlencoded",
}
})
.then(response => {
console.log(response)
if (response.status == 200) {
this.loading();
this.setState({ spinner: false })
} else {
}
});
} catch (error) {
console.log(error.response);
}
console.log(this.state.groupId);
console.log(this.state.typedText);
console.log(this.state.student_id);
this.setState({
typedText: ""
});
};
render() {
return (
<Container>
<Header style={{ backgroundColor: "#d91009" }}>
<Left style={{ flex: 1, flexDirection: "row" }}>
<TouchableOpacity
style={styles.backArrow}
onPress={() => this.props.navigation.navigate("ChatScreen")}
>
<FontAwesome name="angle-left" size={30} color="#fff" />
</TouchableOpacity>
{this.state.group_type == "0" ? (
<Thumbnail style={styles.thumbnail} source={group_img} />
) : (
<Thumbnail
style={styles.thumbnail}
source={{ uri: this.state.group_img1 }}
/>
)}
</Left>
<Body>
{this.state.group_type == "0" ?
<Text
onPress={() => {
this.props.navigation.navigate("Groupmembers", {
group_id: this.state.groupId,
groupName: this.state.groupName,
});
}}
style={{
alignSelf: Platform.OS == "android" ? "center" : null,
fontSize: 17,
color: "#fff"
}}
>
{this.state.groupName}
</Text>
: <Text>{this.state.groupName}</Text> }
</Body>
<Right>
{this.state.group_type == "1" ? (
<Button
style={{ backgroundColor: "#d91009" }}
onPress={() => {
this.props.navigation.navigate("TutorCalender");
}}
>
<Icon1
active
name="calendar"
size={24}
color="#FFF"
onPress={this.clearText}
/>
</Button>
) : null}
</Right>
</Header>
<View style={styles.container}>
<FlatList
ref={ref => this.flatList = ref}
onContentSizeChange={() => this.flatList.scrollToEnd({animated: true})}
onLayout={() => this.flatList.scrollToEnd({animated: true})}
style={styles.list}
data={this.state.group_msgs}
keyExtractor={item => {
return item.message.m_id.toString();
}}
renderItem={message => {
const item = message.item;
console.log(item.message.sender);
let inMessage = item.message.sender === this.state.student_id ? "out" : "in";
let itemStyle =
inMessage === "in" ? styles.itemIn : styles.itemOut;
return (
<View style={[styles.item, itemStyle]}>
{item.message.type === "text" ? (
<View style={[styles.balloon]}>
<Text>{item.message.message}</Text>
</View>
) : null}
</View>
);
}}
/>
<Spinner
color={"#d91009"}
visible={this.state.spinner}
textContent={'Sending Message...'}
textStyle={styles1.spinnerTextStyle}
animation={'slide'}
/>
<View style={styles.footer}>
<View style={styles.inputContainer}>
<TextInput
style={styles.inputs}
placeholder="Write a message..."
underlineColorAndroid="transparent"
onChangeText={typedText =>
this.setState({
typedText
})
}
value={
this.state.typedText
}
/>
<Ionicons
name="md-send"
size={30}
color="#d91009"
onPress={this.onSubmitEditing}
/>
</View>
{/* <TouchableOpacity style={styles.btnSend}>
<Ionicons name="md-send" size={36} color='#d91009' /> style={styles.iconSend} />
</TouchableOpacity> */}
</View>
</View>
</Container>
);
}
}
const styles1 = StyleSheet.create({
spinnerTextStyle: {
color: "#d91009"
},
});
const styles = StyleSheet.create({
container: {
flex: 1
},
list: {
paddingHorizontal: 17
},
footer: {
flexDirection: "row",
height: 60,
backgroundColor: "#eeeeee",
paddingHorizontal: 10,
padding: 5
},
btnSend: {
//color: "#d91009",
width: 40,
height: 40,
borderRadius: 360,
alignItems: "center",
justifyContent: "center"
},
iconSend: {
width: 30,
height: 30,
alignSelf: "center"
},
inputContainer: {
borderBottomColor: "#F5FCFF",
backgroundColor: "#FFFFFF",
borderRadius: 30,
borderBottomWidth: 1,
height: 40,
flexDirection: "row",
alignItems: "center",
flex: 1,
marginRight: 10
},
inputs: {
height: 40,
marginLeft: 16,
borderBottomColor: "#FFFFFF",
flex: 1
},
balloon: {
maxWidth: 250,
padding: 15,
borderRadius: 20
},
itemIn: {
alignSelf: "flex-start",
backgroundColor: "#eeeeee"
},
itemOut: {
alignSelf: "flex-end",
backgroundColor: "#DCF8C5"
},
time: {
alignSelf: "flex-end",
margin: 15,
fontSize: 12,
color: "#808080"
},
item: {
marginVertical: 14,
flex: 1,
flexDirection: "row",
borderRadius: 300,
padding: 1
},
thumbnail: {
width: 40,
height: 40,
borderRadius: 30 / 2,
marginLeft: 8
}
});Please help me resolve this, I almost finish in the app with other functionalities.
javascript
android react-native asked Nov 22 at 16:26
Kedar Dave
137111
add a comment |
up vote
0
down vote
favorite
Flat list is not showing in android but it is working fine with all the functionality in ios
Below is my code for the same. I don't understand why it is happening as it is react native basic prop. But still it is not working
import React, { Component } from "react";
import {
StyleSheet,
Text,
View,
TouchableOpacity,
TextInput,
FlatList,
Platform,
AsyncStorage
} from "react-native";
import Tutor from "../image/krutika.jpg";
import {
Container,
Header,
Left,
Input,
Body,
Right,
Thumbnail,
Button
} from "native-base";
import FontAwesome from "react-native-vector-icons/FontAwesome";
import Ionicons from "react-native-vector-icons/Ionicons";
import Icon1 from "react-native-vector-icons/FontAwesome";
import axios from "axios";
import group_img from "../image/group_img.png";
import Spinner from 'react-native-loading-spinner-overlay';
export default class ChatBox extends Component {
static navigationOptions = {
header: null
};
state = {
group_msgs: ,
student_id: null,
groupType: null,
typedText: null,
groupId: null,
group_img1: null,
groupName: null,
group_type: null,
spinner: null,
};
renderDate = date => {
return <Text style={styles.time}>{date}</Text>;
};
componentWillMount = async () => {
this.loading();
const {
groupId,
group_im,
groupName,
group_type
} = this.props.navigation.state.params;
await this.setState({
groupId: groupId,
group_img1: group_im,
groupName: groupName,
group_type: group_type
});
//console.log(group_img1);
};
loading = async () => {
const userid = await AsyncStorage.getItem("user_id");
this.setState({ student_id : userId});
try {
let { data } = await axios
.get(
"https://www.qualpros.com/chat/imApi/getMessage?groupId=" +
this.state.groupId +
"&limit=10&start=0&userId="+userid
)
.then(response => {
// console.log(response)
if (response.status == 200) {
this.setState({ group_msgs: response.data.response });
console.log(this.state.group_msgs.sender);
} else {
}
});
} catch (err) {
console.log(err);
}
console.log(this.state.group_img1);
};
reset = async () => {
this.setState({ searchText: "" });
};
getInitialState = function() {
return {
searchText: ""
};
};
onSubmitEditing = async () => {
this.setState({ spinner: true })
try {
var formcardBody = ;
formcardBody.push( "groupId=" + this.state.groupId);
formcardBody.push( "message=" + this.state.typedText);
formcardBody.push( "userId=" + this.state.student_id);
formcardBody = formcardBody.join("&");
let {data} = await fetch("https://www.qualpros.com/chat/imApi/sendMessage", {
method: "post",
body: formcardBody,
headers: {
Accept: "application/json",
"Content-Type": "application/x-www-form-urlencoded",
}
})
.then(response => {
console.log(response)
if (response.status == 200) {
this.loading();
this.setState({ spinner: false })
} else {
}
});
} catch (error) {
console.log(error.response);
}
console.log(this.state.groupId);
console.log(this.state.typedText);
console.log(this.state.student_id);
this.setState({
typedText: ""
});
};
render() {
return (
<Container>
<Header style={{ backgroundColor: "#d91009" }}>
<Left style={{ flex: 1, flexDirection: "row" }}>
<TouchableOpacity
style={styles.backArrow}
onPress={() => this.props.navigation.navigate("ChatScreen")}
>
<FontAwesome name="angle-left" size={30} color="#fff" />
</TouchableOpacity>
{this.state.group_type == "0" ? (
<Thumbnail style={styles.thumbnail} source={group_img} />
) : (
<Thumbnail
style={styles.thumbnail}
source={{ uri: this.state.group_img1 }}
/>
)}
</Left>
<Body>
{this.state.group_type == "0" ?
<Text
onPress={() => {
this.props.navigation.navigate("Groupmembers", {
group_id: this.state.groupId,
groupName: this.state.groupName,
});
}}
style={{
alignSelf: Platform.OS == "android" ? "center" : null,
fontSize: 17,
color: "#fff"
}}
>
{this.state.groupName}
</Text>
: <Text>{this.state.groupName}</Text> }
</Body>
<Right>
{this.state.group_type == "1" ? (
<Button
style={{ backgroundColor: "#d91009" }}
onPress={() => {
this.props.navigation.navigate("TutorCalender");
}}
>
<Icon1
active
name="calendar"
size={24}
color="#FFF"
onPress={this.clearText}
/>
</Button>
) : null}
</Right>
</Header>
<View style={styles.container}>
<FlatList
ref={ref => this.flatList = ref}
onContentSizeChange={() => this.flatList.scrollToEnd({animated: true})}
onLayout={() => this.flatList.scrollToEnd({animated: true})}
style={styles.list}
data={this.state.group_msgs}
keyExtractor={item => {
return item.message.m_id.toString();
}}
renderItem={message => {
const item = message.item;
console.log(item.message.sender);
let inMessage = item.message.sender === this.state.student_id ? "out" : "in";
let itemStyle =
inMessage === "in" ? styles.itemIn : styles.itemOut;
return (
<View style={[styles.item, itemStyle]}>
{item.message.type === "text" ? (
<View style={[styles.balloon]}>
<Text>{item.message.message}</Text>
</View>
) : null}
</View>
);
}}
/>
<Spinner
color={"#d91009"}
visible={this.state.spinner}
textContent={'Sending Message...'}
textStyle={styles1.spinnerTextStyle}
animation={'slide'}
/>
<View style={styles.footer}>
<View style={styles.inputContainer}>
<TextInput
style={styles.inputs}
placeholder="Write a message..."
underlineColorAndroid="transparent"
onChangeText={typedText =>
this.setState({
typedText
})
}
value={
this.state.typedText
}
/>
<Ionicons
name="md-send"
size={30}
color="#d91009"
onPress={this.onSubmitEditing}
/>
</View>
{/* <TouchableOpacity style={styles.btnSend}>
<Ionicons name="md-send" size={36} color='#d91009' /> style={styles.iconSend} />
</TouchableOpacity> */}
</View>
</View>
</Container>
);
}
}
const styles1 = StyleSheet.create({
spinnerTextStyle: {
color: "#d91009"
},
});
const styles = StyleSheet.create({
container: {
flex: 1
},
list: {
paddingHorizontal: 17
},
footer: {
flexDirection: "row",
height: 60,
backgroundColor: "#eeeeee",
paddingHorizontal: 10,
padding: 5
},
btnSend: {
//color: "#d91009",
width: 40,
height: 40,
borderRadius: 360,
alignItems: "center",
justifyContent: "center"
},
iconSend: {
width: 30,
height: 30,
alignSelf: "center"
},
inputContainer: {
borderBottomColor: "#F5FCFF",
backgroundColor: "#FFFFFF",
borderRadius: 30,
borderBottomWidth: 1,
height: 40,
flexDirection: "row",
alignItems: "center",
flex: 1,
marginRight: 10
},
inputs: {
height: 40,
marginLeft: 16,
borderBottomColor: "#FFFFFF",
flex: 1
},
balloon: {
maxWidth: 250,
padding: 15,
borderRadius: 20
},
itemIn: {
alignSelf: "flex-start",
backgroundColor: "#eeeeee"
},
itemOut: {
alignSelf: "flex-end",
backgroundColor: "#DCF8C5"
},
time: {
alignSelf: "flex-end",
margin: 15,
fontSize: 12,
color: "#808080"
},
item: {
marginVertical: 14,
flex: 1,
flexDirection: "row",
borderRadius: 300,
padding: 1
},
thumbnail: {
width: 40,
height: 40,
borderRadius: 30 / 2,
marginLeft: 8
}
});Please help me resolve this, I almost finish in the app with other functionalities.
javascript
android react-native asked Nov 22 at 16:26
Kedar Dave
137111
Your code is a bit confused and confusing, sometimes you use arrow functions and sometimes standard functions, sometimes you place a;and sometimes not, sometimes you use triple = comparison and other times just double.. as a general suggestion try to standardize your code, it really helps you! Then, ABSOLUTELY AVOID to modify your state directly as you did here:this.state.student_id = userid.
– Milore
Nov 22 at 17:54
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
Flat list is not showing in android but it is working fine with all the functionality in ios
Below is my code for the same. I don't understand why it is happening as it is react native basic prop. But still it is not working
import React, { Component } from "react";
import {
StyleSheet,
Text,
View,
TouchableOpacity,
TextInput,
FlatList,
Platform,
AsyncStorage
} from "react-native";
import Tutor from "../image/krutika.jpg";
import {
Container,
Header,
Left,
Input,
Body,
Right,
Thumbnail,
Button
} from "native-base";
import FontAwesome from "react-native-vector-icons/FontAwesome";
import Ionicons from "react-native-vector-icons/Ionicons";
import Icon1 from "react-native-vector-icons/FontAwesome";
import axios from "axios";
import group_img from "../image/group_img.png";
import Spinner from 'react-native-loading-spinner-overlay';
export default class ChatBox extends Component {
static navigationOptions = {
header: null
};
state = {
group_msgs: ,
student_id: null,
groupType: null,
typedText: null,
groupId: null,
group_img1: null,
groupName: null,
group_type: null,
spinner: null,
};
renderDate = date => {
return <Text style={styles.time}>{date}</Text>;
};
componentWillMount = async () => {
this.loading();
const {
groupId,
group_im,
groupName,
group_type
} = this.props.navigation.state.params;
await this.setState({
groupId: groupId,
group_img1: group_im,
groupName: groupName,
group_type: group_type
});
//console.log(group_img1);
};
loading = async () => {
const userid = await AsyncStorage.getItem("user_id");
this.setState({ student_id : userId});
try {
let { data } = await axios
.get(
"https://www.qualpros.com/chat/imApi/getMessage?groupId=" +
this.state.groupId +
"&limit=10&start=0&userId="+userid
)
.then(response => {
// console.log(response)
if (response.status == 200) {
this.setState({ group_msgs: response.data.response });
console.log(this.state.group_msgs.sender);
} else {
}
});
} catch (err) {
console.log(err);
}
console.log(this.state.group_img1);
};
reset = async () => {
this.setState({ searchText: "" });
};
getInitialState = function() {
return {
searchText: ""
};
};
onSubmitEditing = async () => {
this.setState({ spinner: true })
try {
var formcardBody = ;
formcardBody.push( "groupId=" + this.state.groupId);
formcardBody.push( "message=" + this.state.typedText);
formcardBody.push( "userId=" + this.state.student_id);
formcardBody = formcardBody.join("&");
let {data} = await fetch("https://www.qualpros.com/chat/imApi/sendMessage", {
method: "post",
body: formcardBody,
headers: {
Accept: "application/json",
"Content-Type": "application/x-www-form-urlencoded",
}
})
.then(response => {
console.log(response)
if (response.status == 200) {
this.loading();
this.setState({ spinner: false })
} else {
}
});
} catch (error) {
console.log(error.response);
}
console.log(this.state.groupId);
console.log(this.state.typedText);
console.log(this.state.student_id);
this.setState({
typedText: ""
});
};
render() {
return (
<Container>
<Header style={{ backgroundColor: "#d91009" }}>
<Left style={{ flex: 1, flexDirection: "row" }}>
<TouchableOpacity
style={styles.backArrow}
onPress={() => this.props.navigation.navigate("ChatScreen")}
>
<FontAwesome name="angle-left" size={30} color="#fff" />
</TouchableOpacity>
{this.state.group_type == "0" ? (
<Thumbnail style={styles.thumbnail} source={group_img} />
) : (
<Thumbnail
style={styles.thumbnail}
source={{ uri: this.state.group_img1 }}
/>
)}
</Left>
<Body>
{this.state.group_type == "0" ?
<Text
onPress={() => {
this.props.navigation.navigate("Groupmembers", {
group_id: this.state.groupId,
groupName: this.state.groupName,
});
}}
style={{
alignSelf: Platform.OS == "android" ? "center" : null,
fontSize: 17,
color: "#fff"
}}
>
{this.state.groupName}
</Text>
: <Text>{this.state.groupName}</Text> }
</Body>
<Right>
{this.state.group_type == "1" ? (
<Button
style={{ backgroundColor: "#d91009" }}
onPress={() => {
this.props.navigation.navigate("TutorCalender");
}}
>
<Icon1
active
name="calendar"
size={24}
color="#FFF"
onPress={this.clearText}
/>
</Button>
) : null}
</Right>
</Header>
<View style={styles.container}>
<FlatList
ref={ref => this.flatList = ref}
onContentSizeChange={() => this.flatList.scrollToEnd({animated: true})}
onLayout={() => this.flatList.scrollToEnd({animated: true})}
style={styles.list}
data={this.state.group_msgs}
keyExtractor={item => {
return item.message.m_id.toString();
}}
renderItem={message => {
const item = message.item;
console.log(item.message.sender);
let inMessage = item.message.sender === this.state.student_id ? "out" : "in";
let itemStyle =
inMessage === "in" ? styles.itemIn : styles.itemOut;
return (
<View style={[styles.item, itemStyle]}>
{item.message.type === "text" ? (
<View style={[styles.balloon]}>
<Text>{item.message.message}</Text>
</View>
) : null}
</View>
);
}}
/>
<Spinner
color={"#d91009"}
visible={this.state.spinner}
textContent={'Sending Message...'}
textStyle={styles1.spinnerTextStyle}
animation={'slide'}
/>
<View style={styles.footer}>
<View style={styles.inputContainer}>
<TextInput
style={styles.inputs}
placeholder="Write a message..."
underlineColorAndroid="transparent"
onChangeText={typedText =>
this.setState({
typedText
})
}
value={
this.state.typedText
}
/>
<Ionicons
name="md-send"
size={30}
color="#d91009"
onPress={this.onSubmitEditing}
/>
</View>
{/* <TouchableOpacity style={styles.btnSend}>
<Ionicons name="md-send" size={36} color='#d91009' /> style={styles.iconSend} />
</TouchableOpacity> */}
</View>
</View>
</Container>
);
}
}
const styles1 = StyleSheet.create({
spinnerTextStyle: {
color: "#d91009"
},
});
const styles = StyleSheet.create({
container: {
flex: 1
},
list: {
paddingHorizontal: 17
},
footer: {
flexDirection: "row",
height: 60,
backgroundColor: "#eeeeee",
paddingHorizontal: 10,
padding: 5
},
btnSend: {
//color: "#d91009",
width: 40,
height: 40,
borderRadius: 360,
alignItems: "center",
justifyContent: "center"
},
iconSend: {
width: 30,
height: 30,
alignSelf: "center"
},
inputContainer: {
borderBottomColor: "#F5FCFF",
backgroundColor: "#FFFFFF",
borderRadius: 30,
borderBottomWidth: 1,
height: 40,
flexDirection: "row",
alignItems: "center",
flex: 1,
marginRight: 10
},
inputs: {
height: 40,
marginLeft: 16,
borderBottomColor: "#FFFFFF",
flex: 1
},
balloon: {
maxWidth: 250,
padding: 15,
borderRadius: 20
},
itemIn: {
alignSelf: "flex-start",
backgroundColor: "#eeeeee"
},
itemOut: {
alignSelf: "flex-end",
backgroundColor: "#DCF8C5"
},
time: {
alignSelf: "flex-end",
margin: 15,
fontSize: 12,
color: "#808080"
},
item: {
marginVertical: 14,
flex: 1,
flexDirection: "row",
borderRadius: 300,
padding: 1
},
thumbnail: {
width: 40,
height: 40,
borderRadius: 30 / 2,
marginLeft: 8
}
});Please help me resolve this, I almost finish in the app with other functionalities.
javascript
android react-native asked Nov 22 at 16:26
Kedar Dave
137111
Flat list is not showing in android but it is working fine with all the functionality in ios
Below is my code for the same. I don't understand why it is happening as it is react native basic prop. But still it is not working
import React, { Component } from "react";
import {
StyleSheet,
Text,
View,
TouchableOpacity,
TextInput,
FlatList,
Platform,
AsyncStorage
} from "react-native";
import Tutor from "../image/krutika.jpg";
import {
Container,
Header,
Left,
Input,
Body,
Right,
Thumbnail,
Button
} from "native-base";
import FontAwesome from "react-native-vector-icons/FontAwesome";
import Ionicons from "react-native-vector-icons/Ionicons";
import Icon1 from "react-native-vector-icons/FontAwesome";
import axios from "axios";
import group_img from "../image/group_img.png";
import Spinner from 'react-native-loading-spinner-overlay';
export default class ChatBox extends Component {
static navigationOptions = {
header: null
};
state = {
group_msgs: ,
student_id: null,
groupType: null,
typedText: null,
groupId: null,
group_img1: null,
groupName: null,
group_type: null,
spinner: null,
};
renderDate = date => {
return <Text style={styles.time}>{date}</Text>;
};
componentWillMount = async () => {
this.loading();
const {
groupId,
group_im,
groupName,
group_type
} = this.props.navigation.state.params;
await this.setState({
groupId: groupId,
group_img1: group_im,
groupName: groupName,
group_type: group_type
});
//console.log(group_img1);
};
loading = async () => {
const userid = await AsyncStorage.getItem("user_id");
this.setState({ student_id : userId});
try {
let { data } = await axios
.get(
"https://www.qualpros.com/chat/imApi/getMessage?groupId=" +
this.state.groupId +
"&limit=10&start=0&userId="+userid
)
.then(response => {
// console.log(response)
if (response.status == 200) {
this.setState({ group_msgs: response.data.response });
console.log(this.state.group_msgs.sender);
} else {
}
});
} catch (err) {
console.log(err);
}
console.log(this.state.group_img1);
};
reset = async () => {
this.setState({ searchText: "" });
};
getInitialState = function() {
return {
searchText: ""
};
};
onSubmitEditing = async () => {
this.setState({ spinner: true })
try {
var formcardBody = ;
formcardBody.push( "groupId=" + this.state.groupId);
formcardBody.push( "message=" + this.state.typedText);
formcardBody.push( "userId=" + this.state.student_id);
formcardBody = formcardBody.join("&");
let {data} = await fetch("https://www.qualpros.com/chat/imApi/sendMessage", {
method: "post",
body: formcardBody,
headers: {
Accept: "application/json",
"Content-Type": "application/x-www-form-urlencoded",
}
})
.then(response => {
console.log(response)
if (response.status == 200) {
this.loading();
this.setState({ spinner: false })
} else {
}
});
} catch (error) {
console.log(error.response);
}
console.log(this.state.groupId);
console.log(this.state.typedText);
console.log(this.state.student_id);
this.setState({
typedText: ""
});
};
render() {
return (
<Container>
<Header style={{ backgroundColor: "#d91009" }}>
<Left style={{ flex: 1, flexDirection: "row" }}>
<TouchableOpacity
style={styles.backArrow}
onPress={() => this.props.navigation.navigate("ChatScreen")}
>
<FontAwesome name="angle-left" size={30} color="#fff" />
</TouchableOpacity>
{this.state.group_type == "0" ? (
<Thumbnail style={styles.thumbnail} source={group_img} />
) : (
<Thumbnail
style={styles.thumbnail}
source={{ uri: this.state.group_img1 }}
/>
)}
</Left>
<Body>
{this.state.group_type == "0" ?
<Text
onPress={() => {
this.props.navigation.navigate("Groupmembers", {
group_id: this.state.groupId,
groupName: this.state.groupName,
});
}}
style={{
alignSelf: Platform.OS == "android" ? "center" : null,
fontSize: 17,
color: "#fff"
}}
>
{this.state.groupName}
</Text>
: <Text>{this.state.groupName}</Text> }
</Body>
<Right>
{this.state.group_type == "1" ? (
<Button
style={{ backgroundColor: "#d91009" }}
onPress={() => {
this.props.navigation.navigate("TutorCalender");
}}
>
<Icon1
active
name="calendar"
size={24}
color="#FFF"
onPress={this.clearText}
/>
</Button>
) : null}
</Right>
</Header>
<View style={styles.container}>
<FlatList
ref={ref => this.flatList = ref}
onContentSizeChange={() => this.flatList.scrollToEnd({animated: true})}
onLayout={() => this.flatList.scrollToEnd({animated: true})}
style={styles.list}
data={this.state.group_msgs}
keyExtractor={item => {
return item.message.m_id.toString();
}}
renderItem={message => {
const item = message.item;
console.log(item.message.sender);
let inMessage = item.message.sender === this.state.student_id ? "out" : "in";
let itemStyle =
inMessage === "in" ? styles.itemIn : styles.itemOut;
return (
<View style={[styles.item, itemStyle]}>
{item.message.type === "text" ? (
<View style={[styles.balloon]}>
<Text>{item.message.message}</Text>
</View>
) : null}
</View>
);
}}
/>
<Spinner
color={"#d91009"}
visible={this.state.spinner}
textContent={'Sending Message...'}
textStyle={styles1.spinnerTextStyle}
animation={'slide'}
/>
<View style={styles.footer}>
<View style={styles.inputContainer}>
<TextInput
style={styles.inputs}
placeholder="Write a message..."
underlineColorAndroid="transparent"
onChangeText={typedText =>
this.setState({
typedText
})
}
value={
this.state.typedText
}
/>
<Ionicons
name="md-send"
size={30}
color="#d91009"
onPress={this.onSubmitEditing}
/>
</View>
{/* <TouchableOpacity style={styles.btnSend}>
<Ionicons name="md-send" size={36} color='#d91009' /> style={styles.iconSend} />
</TouchableOpacity> */}
</View>
</View>
</Container>
);
}
}
const styles1 = StyleSheet.create({
spinnerTextStyle: {
color: "#d91009"
},
});
const styles = StyleSheet.create({
container: {
flex: 1
},
list: {
paddingHorizontal: 17
},
footer: {
flexDirection: "row",
height: 60,
backgroundColor: "#eeeeee",
paddingHorizontal: 10,
padding: 5
},
btnSend: {
//color: "#d91009",
width: 40,
height: 40,
borderRadius: 360,
alignItems: "center",
justifyContent: "center"
},
iconSend: {
width: 30,
height: 30,
alignSelf: "center"
},
inputContainer: {
borderBottomColor: "#F5FCFF",
backgroundColor: "#FFFFFF",
borderRadius: 30,
borderBottomWidth: 1,
height: 40,
flexDirection: "row",
alignItems: "center",
flex: 1,
marginRight: 10
},
inputs: {
height: 40,
marginLeft: 16,
borderBottomColor: "#FFFFFF",
flex: 1
},
balloon: {
maxWidth: 250,
padding: 15,
borderRadius: 20
},
itemIn: {
alignSelf: "flex-start",
backgroundColor: "#eeeeee"
},
itemOut: {
alignSelf: "flex-end",
backgroundColor: "#DCF8C5"
},
time: {
alignSelf: "flex-end",
margin: 15,
fontSize: 12,
color: "#808080"
},
item: {
marginVertical: 14,
flex: 1,
flexDirection: "row",
borderRadius: 300,
padding: 1
},
thumbnail: {
width: 40,
height: 40,
borderRadius: 30 / 2,
marginLeft: 8
}
});Please help me resolve this, I almost finish in the app with other functionalities.
import React, { Component } from "react";
import {
StyleSheet,
Text,
View,
TouchableOpacity,
TextInput,
FlatList,
Platform,
AsyncStorage
} from "react-native";
import Tutor from "../image/krutika.jpg";
import {
Container,
Header,
Left,
Input,
Body,
Right,
Thumbnail,
Button
} from "native-base";
import FontAwesome from "react-native-vector-icons/FontAwesome";
import Ionicons from "react-native-vector-icons/Ionicons";
import Icon1 from "react-native-vector-icons/FontAwesome";
import axios from "axios";
import group_img from "../image/group_img.png";
import Spinner from 'react-native-loading-spinner-overlay';
export default class ChatBox extends Component {
static navigationOptions = {
header: null
};
state = {
group_msgs: ,
student_id: null,
groupType: null,
typedText: null,
groupId: null,
group_img1: null,
groupName: null,
group_type: null,
spinner: null,
};
renderDate = date => {
return <Text style={styles.time}>{date}</Text>;
};
componentWillMount = async () => {
this.loading();
const {
groupId,
group_im,
groupName,
group_type
} = this.props.navigation.state.params;
await this.setState({
groupId: groupId,
group_img1: group_im,
groupName: groupName,
group_type: group_type
});
//console.log(group_img1);
};
loading = async () => {
const userid = await AsyncStorage.getItem("user_id");
this.setState({ student_id : userId});
try {
let { data } = await axios
.get(
"https://www.qualpros.com/chat/imApi/getMessage?groupId=" +
this.state.groupId +
"&limit=10&start=0&userId="+userid
)
.then(response => {
// console.log(response)
if (response.status == 200) {
this.setState({ group_msgs: response.data.response });
console.log(this.state.group_msgs.sender);
} else {
}
});
} catch (err) {
console.log(err);
}
console.log(this.state.group_img1);
};
reset = async () => {
this.setState({ searchText: "" });
};
getInitialState = function() {
return {
searchText: ""
};
};
onSubmitEditing = async () => {
this.setState({ spinner: true })
try {
var formcardBody = ;
formcardBody.push( "groupId=" + this.state.groupId);
formcardBody.push( "message=" + this.state.typedText);
formcardBody.push( "userId=" + this.state.student_id);
formcardBody = formcardBody.join("&");
let {data} = await fetch("https://www.qualpros.com/chat/imApi/sendMessage", {
method: "post",
body: formcardBody,
headers: {
Accept: "application/json",
"Content-Type": "application/x-www-form-urlencoded",
}
})
.then(response => {
console.log(response)
if (response.status == 200) {
this.loading();
this.setState({ spinner: false })
} else {
}
});
} catch (error) {
console.log(error.response);
}
console.log(this.state.groupId);
console.log(this.state.typedText);
console.log(this.state.student_id);
this.setState({
typedText: ""
});
};
render() {
return (
<Container>
<Header style={{ backgroundColor: "#d91009" }}>
<Left style={{ flex: 1, flexDirection: "row" }}>
<TouchableOpacity
style={styles.backArrow}
onPress={() => this.props.navigation.navigate("ChatScreen")}
>
<FontAwesome name="angle-left" size={30} color="#fff" />
</TouchableOpacity>
{this.state.group_type == "0" ? (
<Thumbnail style={styles.thumbnail} source={group_img} />
) : (
<Thumbnail
style={styles.thumbnail}
source={{ uri: this.state.group_img1 }}
/>
)}
</Left>
<Body>
{this.state.group_type == "0" ?
<Text
onPress={() => {
this.props.navigation.navigate("Groupmembers", {
group_id: this.state.groupId,
groupName: this.state.groupName,
});
}}
style={{
alignSelf: Platform.OS == "android" ? "center" : null,
fontSize: 17,
color: "#fff"
}}
>
{this.state.groupName}
</Text>
: <Text>{this.state.groupName}</Text> }
</Body>
<Right>
{this.state.group_type == "1" ? (
<Button
style={{ backgroundColor: "#d91009" }}
onPress={() => {
this.props.navigation.navigate("TutorCalender");
}}
>
<Icon1
active
name="calendar"
size={24}
color="#FFF"
onPress={this.clearText}
/>
</Button>
) : null}
</Right>
</Header>
<View style={styles.container}>
<FlatList
ref={ref => this.flatList = ref}
onContentSizeChange={() => this.flatList.scrollToEnd({animated: true})}
onLayout={() => this.flatList.scrollToEnd({animated: true})}
style={styles.list}
data={this.state.group_msgs}
keyExtractor={item => {
return item.message.m_id.toString();
}}
renderItem={message => {
const item = message.item;
console.log(item.message.sender);
let inMessage = item.message.sender === this.state.student_id ? "out" : "in";
let itemStyle =
inMessage === "in" ? styles.itemIn : styles.itemOut;
return (
<View style={[styles.item, itemStyle]}>
{item.message.type === "text" ? (
<View style={[styles.balloon]}>
<Text>{item.message.message}</Text>
</View>
) : null}
</View>
);
}}
/>
<Spinner
color={"#d91009"}
visible={this.state.spinner}
textContent={'Sending Message...'}
textStyle={styles1.spinnerTextStyle}
animation={'slide'}
/>
<View style={styles.footer}>
<View style={styles.inputContainer}>
<TextInput
style={styles.inputs}
placeholder="Write a message..."
underlineColorAndroid="transparent"
onChangeText={typedText =>
this.setState({
typedText
})
}
value={
this.state.typedText
}
/>
<Ionicons
name="md-send"
size={30}
color="#d91009"
onPress={this.onSubmitEditing}
/>
</View>
{/* <TouchableOpacity style={styles.btnSend}>
<Ionicons name="md-send" size={36} color='#d91009' /> style={styles.iconSend} />
</TouchableOpacity> */}
</View>
</View>
</Container>
);
}
}
const styles1 = StyleSheet.create({
spinnerTextStyle: {
color: "#d91009"
},
});
const styles = StyleSheet.create({
container: {
flex: 1
},
list: {
paddingHorizontal: 17
},
footer: {
flexDirection: "row",
height: 60,
backgroundColor: "#eeeeee",
paddingHorizontal: 10,
padding: 5
},
btnSend: {
//color: "#d91009",
width: 40,
height: 40,
borderRadius: 360,
alignItems: "center",
justifyContent: "center"
},
iconSend: {
width: 30,
height: 30,
alignSelf: "center"
},
inputContainer: {
borderBottomColor: "#F5FCFF",
backgroundColor: "#FFFFFF",
borderRadius: 30,
borderBottomWidth: 1,
height: 40,
flexDirection: "row",
alignItems: "center",
flex: 1,
marginRight: 10
},
inputs: {
height: 40,
marginLeft: 16,
borderBottomColor: "#FFFFFF",
flex: 1
},
balloon: {
maxWidth: 250,
padding: 15,
borderRadius: 20
},
itemIn: {
alignSelf: "flex-start",
backgroundColor: "#eeeeee"
},
itemOut: {
alignSelf: "flex-end",
backgroundColor: "#DCF8C5"
},
time: {
alignSelf: "flex-end",
margin: 15,
fontSize: 12,
color: "#808080"
},
item: {
marginVertical: 14,
flex: 1,
flexDirection: "row",
borderRadius: 300,
padding: 1
},
thumbnail: {
width: 40,
height: 40,
borderRadius: 30 / 2,
marginLeft: 8
}
});import React, { Component } from "react";
import {
StyleSheet,
Text,
View,
TouchableOpacity,
TextInput,
FlatList,
Platform,
AsyncStorage
} from "react-native";
import Tutor from "../image/krutika.jpg";
import {
Container,
Header,
Left,
Input,
Body,
Right,
Thumbnail,
Button
} from "native-base";
import FontAwesome from "react-native-vector-icons/FontAwesome";
import Ionicons from "react-native-vector-icons/Ionicons";
import Icon1 from "react-native-vector-icons/FontAwesome";
import axios from "axios";
import group_img from "../image/group_img.png";
import Spinner from 'react-native-loading-spinner-overlay';
export default class ChatBox extends Component {
static navigationOptions = {
header: null
};
state = {
group_msgs: ,
student_id: null,
groupType: null,
typedText: null,
groupId: null,
group_img1: null,
groupName: null,
group_type: null,
spinner: null,
};
renderDate = date => {
return <Text style={styles.time}>{date}</Text>;
};
componentWillMount = async () => {
this.loading();
const {
groupId,
group_im,
groupName,
group_type
} = this.props.navigation.state.params;
await this.setState({
groupId: groupId,
group_img1: group_im,
groupName: groupName,
group_type: group_type
});
//console.log(group_img1);
};
loading = async () => {
const userid = await AsyncStorage.getItem("user_id");
this.setState({ student_id : userId});
try {
let { data } = await axios
.get(
"https://www.qualpros.com/chat/imApi/getMessage?groupId=" +
this.state.groupId +
"&limit=10&start=0&userId="+userid
)
.then(response => {
// console.log(response)
if (response.status == 200) {
this.setState({ group_msgs: response.data.response });
console.log(this.state.group_msgs.sender);
} else {
}
});
} catch (err) {
console.log(err);
}
console.log(this.state.group_img1);
};
reset = async () => {
this.setState({ searchText: "" });
};
getInitialState = function() {
return {
searchText: ""
};
};
onSubmitEditing = async () => {
this.setState({ spinner: true })
try {
var formcardBody = ;
formcardBody.push( "groupId=" + this.state.groupId);
formcardBody.push( "message=" + this.state.typedText);
formcardBody.push( "userId=" + this.state.student_id);
formcardBody = formcardBody.join("&");
let {data} = await fetch("https://www.qualpros.com/chat/imApi/sendMessage", {
method: "post",
body: formcardBody,
headers: {
Accept: "application/json",
"Content-Type": "application/x-www-form-urlencoded",
}
})
.then(response => {
console.log(response)
if (response.status == 200) {
this.loading();
this.setState({ spinner: false })
} else {
}
});
} catch (error) {
console.log(error.response);
}
console.log(this.state.groupId);
console.log(this.state.typedText);
console.log(this.state.student_id);
this.setState({
typedText: ""
});
};
render() {
return (
<Container>
<Header style={{ backgroundColor: "#d91009" }}>
<Left style={{ flex: 1, flexDirection: "row" }}>
<TouchableOpacity
style={styles.backArrow}
onPress={() => this.props.navigation.navigate("ChatScreen")}
>
<FontAwesome name="angle-left" size={30} color="#fff" />
</TouchableOpacity>
{this.state.group_type == "0" ? (
<Thumbnail style={styles.thumbnail} source={group_img} />
) : (
<Thumbnail
style={styles.thumbnail}
source={{ uri: this.state.group_img1 }}
/>
)}
</Left>
<Body>
{this.state.group_type == "0" ?
<Text
onPress={() => {
this.props.navigation.navigate("Groupmembers", {
group_id: this.state.groupId,
groupName: this.state.groupName,
});
}}
style={{
alignSelf: Platform.OS == "android" ? "center" : null,
fontSize: 17,
color: "#fff"
}}
>
{this.state.groupName}
</Text>
: <Text>{this.state.groupName}</Text> }
</Body>
<Right>
{this.state.group_type == "1" ? (
<Button
style={{ backgroundColor: "#d91009" }}
onPress={() => {
this.props.navigation.navigate("TutorCalender");
}}
>
<Icon1
active
name="calendar"
size={24}
color="#FFF"
onPress={this.clearText}
/>
</Button>
) : null}
</Right>
</Header>
<View style={styles.container}>
<FlatList
ref={ref => this.flatList = ref}
onContentSizeChange={() => this.flatList.scrollToEnd({animated: true})}
onLayout={() => this.flatList.scrollToEnd({animated: true})}
style={styles.list}
data={this.state.group_msgs}
keyExtractor={item => {
return item.message.m_id.toString();
}}
renderItem={message => {
const item = message.item;
console.log(item.message.sender);
let inMessage = item.message.sender === this.state.student_id ? "out" : "in";
let itemStyle =
inMessage === "in" ? styles.itemIn : styles.itemOut;
return (
<View style={[styles.item, itemStyle]}>
{item.message.type === "text" ? (
<View style={[styles.balloon]}>
<Text>{item.message.message}</Text>
</View>
) : null}
</View>
);
}}
/>
<Spinner
color={"#d91009"}
visible={this.state.spinner}
textContent={'Sending Message...'}
textStyle={styles1.spinnerTextStyle}
animation={'slide'}
/>
<View style={styles.footer}>
<View style={styles.inputContainer}>
<TextInput
style={styles.inputs}
placeholder="Write a message..."
underlineColorAndroid="transparent"
onChangeText={typedText =>
this.setState({
typedText
})
}
value={
this.state.typedText
}
/>
<Ionicons
name="md-send"
size={30}
color="#d91009"
onPress={this.onSubmitEditing}
/>
</View>
{/* <TouchableOpacity style={styles.btnSend}>
<Ionicons name="md-send" size={36} color='#d91009' /> style={styles.iconSend} />
</TouchableOpacity> */}
</View>
</View>
</Container>
);
}
}
const styles1 = StyleSheet.create({
spinnerTextStyle: {
color: "#d91009"
},
});
const styles = StyleSheet.create({
container: {
flex: 1
},
list: {
paddingHorizontal: 17
},
footer: {
flexDirection: "row",
height: 60,
backgroundColor: "#eeeeee",
paddingHorizontal: 10,
padding: 5
},
btnSend: {
//color: "#d91009",
width: 40,
height: 40,
borderRadius: 360,
alignItems: "center",
justifyContent: "center"
},
iconSend: {
width: 30,
height: 30,
alignSelf: "center"
},
inputContainer: {
borderBottomColor: "#F5FCFF",
backgroundColor: "#FFFFFF",
borderRadius: 30,
borderBottomWidth: 1,
height: 40,
flexDirection: "row",
alignItems: "center",
flex: 1,
marginRight: 10
},
inputs: {
height: 40,
marginLeft: 16,
borderBottomColor: "#FFFFFF",
flex: 1
},
balloon: {
maxWidth: 250,
padding: 15,
borderRadius: 20
},
itemIn: {
alignSelf: "flex-start",
backgroundColor: "#eeeeee"
},
itemOut: {
alignSelf: "flex-end",
backgroundColor: "#DCF8C5"
},
time: {
alignSelf: "flex-end",
margin: 15,
fontSize: 12,
color: "#808080"
},
item: {
marginVertical: 14,
flex: 1,
flexDirection: "row",
borderRadius: 300,
padding: 1
},
thumbnail: {
width: 40,
height: 40,
borderRadius: 30 / 2,
marginLeft: 8
}
});javascript
android react-native javascript
android react-native asked Nov 22 at 16:26
Kedar Dave
137111
asked Nov 22 at 16:26
Kedar Dave
137111
edited Nov 22 at 18:02
asked Nov 22 at 16:26
Kedar Dave
137111
asked Nov 22 at 16:26
Kedar Dave
137111
asked Nov 22 at 16:26
Kedar Dave
137111
137111
Your code is a bit confused and confusing, sometimes you use arrow functions and sometimes standard functions, sometimes you place a;and sometimes not, sometimes you use triple = comparison and other times just double.. as a general suggestion try to standardize your code, it really helps you! Then, ABSOLUTELY AVOID to modify your state directly as you did here:this.state.student_id = userid.
– Milore
Nov 22 at 17:54
add a comment |
Your code is a bit confused and confusing, sometimes you use arrow functions and sometimes standard functions, sometimes you place a;and sometimes not, sometimes you use triple = comparison and other times just double.. as a general suggestion try to standardize your code, it really helps you! Then, ABSOLUTELY AVOID to modify your state directly as you did here:this.state.student_id = userid.
– Milore
Nov 22 at 17:54
Your code is a bit confused and confusing, sometimes you use arrow functions and sometimes standard functions, sometimes you place a
; and sometimes not, sometimes you use triple = comparison and other times just double.. as a general suggestion try to standardize your code, it really helps you! Then, ABSOLUTELY AVOID to modify your state directly as you did here: this.state.student_id = userid.– Milore
Nov 22 at 17:54
Your code is a bit confused and confusing, sometimes you use arrow functions and sometimes standard functions, sometimes you place a
; and sometimes not, sometimes you use triple = comparison and other times just double.. as a general suggestion try to standardize your code, it really helps you! Then, ABSOLUTELY AVOID to modify your state directly as you did here: this.state.student_id = userid.– Milore
Nov 22 at 17:54
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
It seems that you have an unexpected identifier error. I was browsing around regarding this error. I found this stackoverflow thread which might help.
Uncaught syntaxerror: unexpected identifier?
It's likely that you've missed ; or a , or a ( or a { or a ) or a }.
answered Nov 22 at 16:35
Zeel Mehta
193
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
It seems that you have an unexpected identifier error. I was browsing around regarding this error. I found this stackoverflow thread which might help.
Uncaught syntaxerror: unexpected identifier?
It's likely that you've missed ; or a , or a ( or a { or a ) or a }.
answered Nov 22 at 16:35
Zeel Mehta
193
add a comment |
up vote
1
down vote
It seems that you have an unexpected identifier error. I was browsing around regarding this error. I found this stackoverflow thread which might help.
Uncaught syntaxerror: unexpected identifier?
It's likely that you've missed ; or a , or a ( or a { or a ) or a }.
answered Nov 22 at 16:35
Zeel Mehta
193
add a comment |
up vote
1
down vote
up vote
1
down vote
It seems that you have an unexpected identifier error. I was browsing around regarding this error. I found this stackoverflow thread which might help.
Uncaught syntaxerror: unexpected identifier?
It's likely that you've missed ; or a , or a ( or a { or a ) or a }.
answered Nov 22 at 16:35
Zeel Mehta
193
It seems that you have an unexpected identifier error. I was browsing around regarding this error. I found this stackoverflow thread which might help.
Uncaught syntaxerror: unexpected identifier?
It's likely that you've missed ; or a , or a ( or a { or a ) or a }.
answered Nov 22 at 16:35
Zeel Mehta
193
answered Nov 22 at 16:35
Zeel Mehta
193
answered Nov 22 at 16:35
Zeel Mehta
193
answered Nov 22 at 16:35
Zeel Mehta
193
193
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53434994%2freact-native-android-flatlist-is-not-visible%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Your code is a bit confused and confusing, sometimes you use arrow functions and sometimes standard functions, sometimes you place a
;and sometimes not, sometimes you use triple = comparison and other times just double.. as a general suggestion try to standardize your code, it really helps you! Then, ABSOLUTELY AVOID to modify your state directly as you did here:this.state.student_id = userid.– Milore
Nov 22 at 17:54