I am new to React Native, I tried to create a component for my radio button but I encountered some issue with the Style when I added the elevation, and it is adding the shadow inside the View instead of outside of the View
Here is my code
import {Text, View, StyleSheet} from 'react-native';
import {RadioButton} from 'react-native-paper';
import {
ScrollView,
TextInput,
TouchableOpacity,
} from "react-native-gesture-handler";
function Chosen({values, onChange, defaultIndex, selectedIndexAtt, renderComponent}){
const [index, setIndex] = useState(defaultIndex ? defaultIndex : 0);
const getRadioStatus = (itemIndex) => {
return index == itemIndex ? 'checked' : 'unchecked';
}
const handleRadioPress = (itemIndex) => {
setIndex(itemIndex);
onChange(itemIndex);
}
return(
<ScrollView style={styles.container}>
<View style={styles.containerRow}>
{values.map((item, index)=> {
return (<View style={styles.itemContainer}>
<View style={styles.item}>
{renderComponent(item)}
<View style={styles.radioButton}>
<RadioButton value={item[selectedIndexAtt ? selectedIndexAtt : index]}
status={getRadioStatus(item[selectedIndexAtt ? selectedIndexAtt : index])}
onPress={() => {
handleRadioPress(item[selectedIndexAtt ? selectedIndexAtt : index])
}}/>
</View>
</View>
</View>)
})}
</View>
</ScrollView>
);
}
const styles = StyleSheet.create({
container:{
flexDirection: 'column',
flex: 1
},
containerRow:{
flexDirection: 'row',
flexWrap: 'wrap',
},
itemContainer: {
width: "50%",
padding: 1
},
item: {
flexDirection: 'row',
margin: 10,
borderWidth: 1,
borderColor: 'rgba(105,105,105,0.6)',
borderRadius: 15,
elevation: 0.1
},
radioButton: {
justifyContent: 'center',
flex: 1,
alignItems: 'flex-end'
}
});
export default Chosen;
and here is how I call it from the parent
<Chosen values={dummyData} defaultIndex={dummyData[0].id} selectedIndexAtt='id' renderComponent={(item) => {
return (
<View>
<Text>{item.name}</Text>
</View>
)
}} onChange={onChange}></Chosen>
and the result is this:
elevation shadow issue
Can someone please help me with this?
You have to provide this for a shadow in react native. Change the values according to your need.
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 10,
},
shadowOpacity: 0.5,
shadowRadius: 10,
elevation: 20,
Related
I am creating a react native app on snack expo.
The app allows the user to select image from device on screen one (PhotoSelection.js) and shows the image to screen 2 (FrameSelection.js). Upon selecting an image from device, I am receiving this error:
NoSuchKeyThe specified key does not exist.v2/46/FrameSelectionM0EK0RMAJZ9JH00KGQ3jUVOsp2fXZp3ZWPaMeUjM57WUcEEUGHNvluc/kOn1FcOfRMnlOquUUUZVYGaB/d2cQQNh0Ko=
Screen 1 (PhotoSelection.js):
import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { Text, View, StyleSheet, Image, TouchableOpacity, Button} from 'react-native';
import MyCustomFont from '../assets/Poppins-Bold.ttf';
import { useNavigation } from '#react-navigation/native';
import * as ImagePicker from 'expo-image-picker';
import { Constants } from 'expo-constants';
export const PhotoSelection =() =>{
const handleSelectImage = async () => {
try {
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
});
if (!result.cancelled) {
navigation.navigate('FrameSelection', { image: result.uri });
}
} catch (error) {
console.log(error);
}
};
return (
<View style ={styles.container}>
<View>
<Image
style = {styles.img1}
source={require('../assets/image 1.png')}
/>
</View>
<View>
<Image
style = {styles.img2}
source ={require('../assets/Group 546020456.png')}
/>
</View>
<Text style={styles.text}>
Frame your special photos & share it with your friends
</Text>
<TouchableOpacity style ={styles.touchbutton}
onPress={handleSelectImage}
>
SELECT PHOTO
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex:1,
backgroundColor: '#603FC0',
justifyContent: 'center',
alignItems:'center',
width:'100%'
},
img1:{
width:360,
resizeMode:'cover'
},
img2:{
"width":220,
marginTop:50
},
text: {
"width": 200,
"fontFamily": 'MyCustomFont',
"fontStyle": "normal",
"fontWeight": "500",
"fontSize": 16,
"lineHeight": 24,
"textAlign": "center",
},
touchbutton:{
marginTop: 30,
paddingLeft:40,
paddingRight:40,
borderRadius:8,
paddingTop:16,
paddingBottom:16,
alignSelf:'center',
backgroundColor:'white',
fontFamily: 'MyCustomFont',
fontStyle: 'normal',
fontWeight: 700,
fontSize: 16,
},
});
Screen 2 (FrameSelection.js):
import React, {useState} from 'react';
import { Text, View, StyleSheet, Image, TouchableOpacity} from 'react-native';
import {PhotoSelection} from './PhotoSelection';
import { Constants } from 'expo-constants';
export const FrameSelection =({route}) =>{
const frames =
[
{ id: 1, small: require('../assets/image 4.png'), large: require('../assets/image 4.png') },
{ id: 2, small: require('../assets/image 4.png'), large: require('../assets/image 4.png') },
{ id: 3, small: require('../assets/image 4.png'), large: require('../assets/image 4.png') },
];
const [selectedFrame, setSelectedFrame] = useState(frames[0]);
const handleImagePress = (frame) => {
setSelectedFrame(frame);
};
return (
<View style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
{route.params.image ? (
<Image source={{ uri: route.params.image }} style={{position: 'absolute', padding:0, top: 0, left: 0, width: '100%', height: '100%', resizeMode: 'contain', backgroundColor: 'white', zIndex: 1} } />
) : (
<Text>No image selected</Text>
)}
<Image
source={selectedFrame.large}
style={{flex:1,position: 'absolute', resizeMode: 'contain', top: 0, left: 0, width: '100%', height: '100%', zIndex: 2}}
resizeMode="contain" />
</View>
<View style={{ flexDirection: 'row', height: 100 }}>
{frames.map((frame) => (
<TouchableOpacity onPress={() => handleImagePress(frame)}>
<Image source={frame.small} style={{ width: 60, height: 60, margin: 10 }} resizeMode="contain" />
</TouchableOpacity>
))}
</View>
</View>
);
};
I Tried checking if the selected image's uri is being passed correctly.
This is my code ....
react native
Multiple Input Text handle in object and array in react native...
Is it possible to share your code? Share the entire component where you have these groups of 5 inputs. You can just copy and paste it inside your question body. That way I can help you better
App.js
import {
StyleSheet,
Pressable,
View,
} from 'react-native';
import {
AntDesign,
FontAwesome
} from '#expo/vector-icons';
import { useState } from 'react';
import AddStudentProfile from './Pages/AddStudentProfile';
import StudentList from './Pages/StudentList';
export default function App() {
const [iconColor, setIconColor] = useState(['#ab09bf', '#A9A9A9']);
const [multiValues, setMultiValues] = useState([]);
const [screen, setScreen] = useState(<StudentList stuList={multiValues} />);
function changeIconColor(pressCheck) {
if (pressCheck) {
setIconColor([
'#ab09bf',
'#A9A9A9'
]
);
}
else {
setIconColor([
'#A9A9A9',
'#ab09bf'
]
);
}
}
// const [iconChangableColor, setIconChangableColor] = useState('#A9A9A9');
function changeScreen(scr) {
setScreen(
// < AddStudentProfile />
scr
);
// setIconChangableColor('#ab09bf');
// console.log(multiValues)
changeIconColor(true)
}
function appendData(inp, onsrcChange) {
setScreen(
// < AddStudentProfile />
onsrcChange
);
setMultiValues([
...multiValues,
inp]);
console.log(multiValues)
}
return (
< View style={styles.container} >
<View style={{ flex: 9 }}>{screen}
</View>
<View >
<View style={styles.bottomIconContainer}>
<Pressable onPress={() => [changeScreen(<StudentList />), changeIconColor(true)]}
android_ripple={{ color: 'black' }}>
<View style={styles.bottomIconInnerContainer}>
<FontAwesome
name="list-ul"
size={35}
color={iconColor[0]} />
</View></Pressable>
<Pressable onPress={() => [changeScreen(<AddStudentProfile onAppendData={appendData} returnToProfile={changeScreen} />), changeIconColor(false)]}
android_ripple={{ color: 'black' }}>
<View style={styles.bottomIconInnerContainer}>
<AntDesign name="adduser"
size={35}
color={iconColor[1]}
/></View></Pressable></View>
</View>
</View >
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
bottomIconContainer: {
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
},
bottomIconInnerContainer: {
marginVertical: 20,
marginHorizontal: 80
}
});
AddStudentProfile.js
import {
Text,
TextInput,
ImageBackground,
View,
Button,
ScrollView,
StatusBar,
StyleSheet
} from "react-native";
import { useState } from "react";
import { AntDesign } from '#expo/vector-icons';
import PrimaryButton from "../Componenets/PrimaryButton";
import ColorCode from "../Componenets/ColorCode.js";
export default function AddStudentProfile({ returnToProfile, onAppendData }) {
const [values, setValues] = useState({});
function inputHandler(name, value) {
setValues({
...values,
[name]: value
})
}
function inpValues(srcChange) {
onAppendData(values, srcChange)
console.log(values)
}
return (
<ScrollView>
<View style={styles.screenContainer}>
<View>
<Text style={styles.textContainer}>
Add Student Profile
</Text>
</View>
<View style={styles.iconOutterContainer}>
<View style={styles.iconContainer}>
<AntDesign
name="user"
size={80}
color='white'
/>
</View>
</View>
<View style={{ alignItems: 'center' }}>
<TextInput
style={styles.inputTextContainer}
placeholder="name"
placeholderTextColor={ColorCode.placeHolder}
onChangeText={(val) => inputHandler('sname', val)}
/>
<TextInput
style={styles.inputTextContainer}
placeholder="roll no"
placeholderTextColor={ColorCode.placeHolder}
onChangeText={(val) => inputHandler('rno', val)}
/>
<TextInput
style={styles.inputTextContainer}
placeholder="department"
placeholderTextColor={ColorCode.placeHolder}
onChangeText={(val) => inputHandler('dep', val)}
/>
<TextInput
style={styles.inputTextContainer}
placeholder="e-mail"
placeholderTextColor={ColorCode.placeHolder}
onChangeText={(val) => inputHandler('mail', val)}
/>
<TextInput
style={styles.inputTextContainer}
placeholder="Phone no"
placeholderTextColor={ColorCode.placeHolder}
onChangeText={(val) => inputHandler('phno', val)}
/>
</View>
<PrimaryButton
onreturnToProfile={returnToProfile}
inputValues={inpValues}
changeColor='#8a0896'
>Save</PrimaryButton>
</View>
</ScrollView>
);
}
const styles = StyleSheet.create({
iconContainer: {
height: 100,
width: 100,
borderRadius: 100,
backgroundColor: '#ab09bf',
alignItems: 'center',
justifyContent: 'center'
},
textContainer: {
marginVertical: 10,
textAlign: 'center',
fontSize: 20,
},
screenContainer: {
marginTop: StatusBar.currentHeight,
flex: 1,
padding: 20
},
iconOutterContainer: {
alignItems: 'center'
},
inputOutterContainer: {
padding: 10,
marginHorizontal: 5
},
inputTextContainer: {
padding: 10,
backgroundColor: '#fff',
marginVertical: 10,
width: '95%',
fontSize: 19,
elevation: 5,
borderRadius: 6,
shadowColor: '#ab09bf',
color: '#ab09bf'
},
buttonOutterContainer: {
width: '30%',
marginHorizontal: 10,
fontSize: 20
},
buttonInnerContainer: { fontSize: 23 }
});
PrimaryButton.js
import {
View,
Text,
Pressable,
StyleSheet
} from 'react-native';
import StudentList from '../Pages/StudentList';
export default function PrimaryButton({ children, inputValues, onreturnToProfile }) {
function pressHandler() {
//onreturnToProfile();
inputValues(<StudentList />)
}
return (
< View style={{ alignItems: 'center', marginTop: 15 }
}>
<View
style={styles.textOutterContainer}
>
<Pressable
onPress={pressHandler}
android_ripple={{ color: 'white' }}
>
<Text style={styles.textContainer}>{children}</Text>
</Pressable>
</View>
</View >
);
}
const styles = StyleSheet.create({
textContainer: {
fontSize: 23,
color: 'white',
textAlign: 'center'
},
textOutterContainer: {
backgroundColor: '#8a0896',
borderRadius: 22,
width: '20%',
height: 40,
alignItems: 'center',
justifyContent: 'center'
}
})
I have gone through your code and it seems to be right even though a bit complicated. What is the issue you are facing?
You are adding a set of student info(5 fields) on a button press to a parent component state. You are appending it to an empty array. Ideally, you should get something like the below. What seems to be the problem? Please explain.
multiValues = [
{
'sname': 'some sname',
'rno': 'some rno',
'dep': 'some dep',
'mail': 'some mail',
'phno': 'some phno'
},
{
'sname': 'some sname',
'rno': 'some rno',
'dep': 'some dep',
'mail': 'some mail',
'phno': 'some phno'
},
{
'sname': 'some sname',
'rno': 'some rno',
'dep': 'some dep',
'mail': 'some mail',
'phno': 'some phno'
},
{
'sname': 'some sname',
'rno': 'some rno',
'dep': 'some dep',
'mail': 'some mail',
'phno': 'some phno'
},
]
Will update this answer depending on your response so that it might be of help to someone else.
When I tap in the Pressable element in the JSX I get the error : Undefined is not a function (near '... wines.map ...'). The log says it's coming from the wines.map loop in the JSX. I'm unsure on what could be wrong with how I'm trying to change the data in the toggle function or how I set the default useState array object. The code is supposed to toggle between two different kind of images for each button independently.
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow strict-local
*/
import 'react-native-gesture-handler';
import React, {useState} from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
ImageBackground,
Image,
TextInput,
Button,
TouchableNativeFeedback,
TouchableWithoutFeedback,
TouchableOpacity,
TouchableHighlight,
FlatList,
Pressable,
RecyclerViewBackedScrollViewComponent
} from 'react-native';
import { Immersive } from 'react-native-immersive';
const fullWine = require('../images/selected-wine.png');
const emptyWine = require('../images/empty-wine-icon.png');
const WineList = () => {
Immersive.on()
Immersive.setImmersive(true)
const [wines, setWines] = useState([
{
name: "2018 Prezzo",
info: "What dsbetter way to spend a lazy afternoon than sipping away on this wine.",
imageUrl: emptyWine
},
{
name: "2018 Coqueta",
info: "A litstle flirty wine.",
imageUrl: emptyWine
}
])
function toggle(pressedWine){
let oldWines = [...wines]
let newWines = oldWines.map((wine) => {
if(wine === pressedWine){
if(wine.imageUrl == emptyWine){
wine.imageUrl = fullWine;
} else {
wine.imageUrl = emptyWine;
}
}
return wine;
});
setWines({newWines});
// setWines({newWines});
}
return (
<View style={{flex:1}}>
<ScrollView style={styles.scrollView}>
<View style={styles.headerMessage}>
<Text style={styles.headerMessageText}>Select your wines for tasting</Text>
</View>
<View style={[styles.wineListWrapper]}>
{ wines.map((wine, index) => {
return(
<View key={index} style={[styles.item]}>
<Image source={require('../images/Peresozo2018.png')} style={[styles.bottle]} />
<View style={[styles.infoWrapper]}>
<Text style={[styles.itemTitle]}>{wine.name}</Text>
<Text style={[styles.itemInfo]}>
{wine.info}
</Text>
</View>
<Pressable onPress={ (wine) => toggle(wine) } style={[styles.wineIcon]}>
<Image source={wine.imageUrl} />
</Pressable>
</View>
)
})}
</View>
</ScrollView>
<TouchableOpacity onPress={() => alert('yo') } style={[styles.footerButton]}>
<Text style={[styles.footerText]}>Start Tasting</Text>
</TouchableOpacity>
</View>
)
}
const styles = StyleSheet.create({
footerButton:{
flex:1,
justifyContent: 'flex-end',
alignContent:'center',
alignItems:'center',
backgroundColor:'white',
paddingTop:90
},
footerText:{
fontFamily: 'Charm-Regular',
fontSize:40,
color:'#624124'
},
item:{
flex:1,
flexDirection: 'row',
justifyContent: 'space-between',
padding: 10
},
infoWrapper:{
flex:0.7,
flexWrap: 'wrap',
flexDirection: 'row',
padding:10,
alignSelf:'flex-start',
justifyContent: 'space-between',
marginTop: -30,
marginLeft:1
},
itemTitle:{
color:'white',
fontFamily: 'Charm-Regular',
fontSize: 40,
},
itemInfo:{
color:'white',
fontSize: 20,
},
wineIcon:{
padding:5,
flex:0.15
},
wineListWrapper:{
marginLeft: 10,
marginTop: 40
},
bottle:{
marginLeft: 2,
width: 80,
height: 250,
resizeMode: 'contain',
},
scrollView:{
backgroundColor: '#4B4239',
},
headerMessage:{
backgroundColor: 'white',
flex: 1,
alignItems: 'center',
alignContent: 'center',
justifyContent: 'center',
flexDirection: 'column',
alignSelf: 'center',
width:400,
borderRadius: 4,
padding: 0,
marginTop: 10
},
headerMessageText:{
color: '#4B4239',
textAlign: 'center',
fontSize: 30,
fontFamily: 'Charm-Regular',
lineHeight: 50
}
})
export default WineList
The issue is that you're setting an object into the wines state when updating it:
setWines({ newWines });
Since the value of the state is an array, you probably meant:
setWines(newWines);
Additionally, the parameter passed to the onPress callback is not the wine object, but a PressEvent. As a result, you're shadowing the wine variable from the .map() with the event object from the callback's parameter.
You probably meant to pass the wine from the loop to toggle instead, so just remove the (wine) => parameter.
<Pressable onPress={() => toggle(wine)} style={[styles.wineIcon]}>
<Image source={wine.imageUrl} />
</Pressable>
Not sure where I go about declaring the array with which I want to search from, any assistance would be appreciated. I believe my issue is that I am declaring the "services' array in the incorrect area but I am not sure where else to put it! Or if the commas are the right character to be using in between strings/services
import React, { useState, Component } from 'react';
import { StyleSheet, StatusBar, View, Text, Button, TouchableOpacity } from 'react-native';
import AutoComplete from 'react-native-autocomplete-input';
class CareProviderSequenceScreen extends Component {
constructor (props) {
super (props);
this.state = {
services: [],
query: '',
}
}
render() {
const query = this.state;
const services = {
"Pick up my Prescription",
'Pick up groceries',
'Pick up dry cleaning',
'Pick up my pet',
}
return (
<View style={styles.container}>
<Autocomplete
autoCapitalize="none"
autoCorrect={false}
containerStyle={styles.autocompleteContainer}
//data to show in suggestion
data={services.length === 1 && comp(query, services[0].title) ? [] : services}
//default value if you want to set something in input
defaultValue={query}
/*onchange of the text changing the state of the query which will trigger
the findFilm method to show the suggestions*/
onChangeText={text => this.setState({ query: text })}
placeholder="Enter your need"
renderItem={({ item }) => (
//you can change the view you want to show in suggestion from here
<TouchableOpacity onPress={() => this.setState({ query: item.title })}>
<Text style={styles.itemText}>
{item.title} ({item.release_date})
</Text>
</TouchableOpacity>
)}
/>
<View style={styles.descriptionContainer}>
{services.length > 0 ? (
<Text style={styles.infoText}>{this.state.query}</Text>
) : (
<Text style={styles.infoText}>Enter The Film Title</Text>
)}
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#F5FCFF',
flex: 1,
padding: 16,
marginTop: 40,
},
autocompleteContainer: {
backgroundColor: '#ffffff',
borderWidth: 0,
},
descriptionContainer: {
flex: 1,
justifyContent: 'center',
},
itemText: {
fontSize: 15,
paddingTop: 5,
paddingBottom: 5,
margin: 2,
},
infoText: {
textAlign: 'center',
fontSize: 16,
},
});
export default CareProviderSequenceScreen ;
CareProviderSequenceScreen .navigationOptions = () => ({
title: "Home & Personal Care",
headerTintColor: '#9EBBD7',
headerStyle: {
height: 65,
backgroundColor: '#1E5797',
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.20,
shadowRadius: 1.41,
elevation: 2,}
});
First, you are assigning an object to services array.
Second, you are not accessing the query state properly. It should be
const { query } = this.state
This is my code for Chat Box, the window where I have "In" and "Out" messages are appearing.
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";
export default class ChatBox extends Component {
static navigationOptions = {
header: null
};
state = {
group_msgs: [],
student_id: null
};
renderDate = date => {
return <Text style={styles.time}>{date}</Text>;
};
componentWillMount = () => {
this.loading();
const { navigation } = this.props;
groupName = navigation.getParam("groupName");
group_id = navigation.getParam("group_id");
};
loading = async () => {
const userid = await AsyncStorage.getItem("user_id");
this.state.student_id = userid;
try {
let { data } = await axios.get('https://www.qualpros.com/chat/imApi/getMessage?groupId=6&limit=10&start=0&userId=62').then(response => {
// console.log(response)
if (response.status == 200) {
this.setState({ group_msgs: response.data.response.message });
console.log(response.data.response)
} else {
}
});
} catch (err) {
console.log(err);
}
};
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>
<Thumbnail
source={Tutor}
style={{
marginLeft: 8,
width: 30,
height: 30,
borderRadius: 30 / 2
}}
/>
</Left>
<Body>
<Text
onPress={() => {
this.props.navigation.navigate("Groupmembers", {
group_id:group_id,
groupname:groupName,
});
}}
style={{
alignSelf: Platform.OS == "android" ? "center" : null,
fontSize: 17,
color: "#fff"
}}
>
{groupName}
</Text>
</Body>
<Right>
<Button
style={{ backgroundColor: "#d91009" }}
onPress={() => {
this.props.navigation.navigate("TutorCalender");
}}
>
<Icon1 active name="calendar" size={24} color="#FFF" />
</Button>
</Right>
</Header>
<View style={styles.container}>
<FlatList
style={styles.list}
data={this.state.group_msgs}
keyExtractor={item => {
return item.m_id;
}}
renderItem={message => {
console.log(item);
const item = message.item;
let inMessage = (item.sender === this.state.userid) ? 'in' : 'out';
let itemStyle = inMessage ? styles.itemIn : styles.itemOut;
return (
<View style={[styles.item, itemStyle]}>
<View style={[styles.balloon]}>
<Text>{item.message}</Text>
</View>
</View>
);
}}
/>
<View style={styles.footer}>
<View style={styles.inputContainer}>
<TextInput
style={styles.inputs}
placeholder="Write a message..."
underlineColorAndroid="transparent"
onChangeText={name_address => this.setState({ name_address })}
/>
</View>
{/* <TouchableOpacity style={styles.btnSend}>
<Ionicons name="md-send" size={36} color='#d91009' /> style={styles.iconSend} />
</TouchableOpacity> */}
</View>
</View>
</Container>
);
}
}
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
}
});
I am using axios to fetch the api, the api response is coming as an Array inside the array but nothing is coming on the screen.
I can get it with storing response upto message but then I can't have the loop on messages.
Please help.
Thanks in advance
When doing a GET request to the endpoint in your code the response looks as follows:
{
"status":{
"code":200,
"message":"Success"
},
"totalMessage":6,
"recentMessageId":228,
"response":[
...
]
}
Inside the response object there's an array of message objects so you can't use response.data.response.message when setting state. That part of your code needs to be:
this.setState({ group_msgs: response.data.response });
Now you should be able to iterate through the group_msgs object to get the message key value for each item in the array.
Also in the FlatList component you should have
keyExtractor={item => {
return item.message.m_id;
}}
Your renderItem seems to be wrong as well, see should be something like this:
renderItem={ ({item}) => {
let inMessage = (item.sender.usedId === this.state.userid) ? 'in' : 'out';
let itemStyle = inMessage ? styles.itemIn : styles.itemOut;
return (
<View style={[styles.item, itemStyle]}>
<View style={[styles.balloon]}>
<Text>{item.message.message}</Text>
</View>
</View>
);
}}
I strongly suggest you take a look at the structure of the response object since that's where you are failing at the moment.