Develop Reference

Getting error in snack expo while using 'expo-image-picker' : 'NoSuchKeyThe specified key does not exist'

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.

Multiple Input Text handle in object and array in react native

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.

React Native Elevation shadow does not work properly

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,

react-native-draggable-flatlist not working inside ScrollView

I am struggling for last couple of months to achieve a requirement where I'm having a draggable flatlist and a flatlist in a single scrollview and I should able to scroll the whole content.
The draggable flatlist should have autoscroll as well, that means when the list is too long and I'm trying to drag it out of the viewport, the list should scroll automatically unless I drop it.
I know the requirement is pretty much tricky but I am not getting any clue to make it work completely.
I am using the below code and I am using 'react-native-draggable-flatlist'(https://github.com/computerjazz/react-native-draggable-flatlist) for this purpose.
Code:
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
TouchableOpacity
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import DraggableFlatList from 'react-native-draggable-flatlist'
import { Component } from 'react'
const exampleData = [...Array(20)].map((d, index) => ({
key: `item-${index}`, // For example only -- don't use index as your key!
label: index,
backgroundColor: `rgb(${Math.floor(Math.random() * 255)}, ${index *
5}, ${132})`
}));
class App extends Component {
state = {
data: exampleData,
scrollEnabled: true
};
onEnableScroll = (value: boolean) => {
this.setState({
enableScrollViewScroll: value,
});
};
renderItem = ({ item, index, drag, isActive }) => {
return (
<TouchableOpacity
style={{
height: 100,
backgroundColor: isActive ? "blue" : item.backgroundColor,
alignItems: "center",
justifyContent: "center"
}}
onLongPress={drag}
>
<Text
style={{
fontWeight: "bold",
color: "white",
fontSize: 32
}}
>
{item.label}
</Text>
</TouchableOpacity>
);
};
render() {
return (
<ScrollView
style={{ backgroundColor: '#000', flex: 1 }}
contentContainerStyle={{ paddingTop: 800, paddingBottom: 100 }}
scrollEnabled={this.state.scrollEnabled}
>
<DraggableFlatList
data={this.state.data}
renderItem={this.renderItem}
keyExtractor={(item, index) => `draggable-item-${item.key}`}
onMoveBegin={() => this.setState({ scrollEnabled: false })}
onMoveEnd={({ data }) => {
this.setState({ scrollEnabled: true, data });
}}
/>
<FlatList
data={this.state.data}
renderItem={this.renderItem}
keyExtractor={(item, index) => `draggable-item-${item.key}`}
/>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
scrollView: {
backgroundColor: Colors.lighter,
},
engine: {
position: 'absolute',
right: 0,
},
body: {
backgroundColor: Colors.white,
},
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
color: Colors.black,
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
color: Colors.dark,
},
highlight: {
fontWeight: '700',
},
footer: {
color: Colors.dark,
fontSize: 12,
fontWeight: '600',
padding: 4,
paddingRight: 12,
textAlign: 'right',
},
});
export default App;

You should use ListFooterComponent and ListHeaderComponent method to render items.
Please change your render method like below code.
render() {
return (
<View
style={{ backgroundColor: '#000', flex: 1 }}
>
<DraggableFlatList
data={this.state.data}
renderItem={this.renderItem}
keyExtractor={(item, index) => `draggable-item-${item.key}`}
onMoveBegin={() => this.setState({ scrollEnabled: false })}
onMoveEnd={({ data }) => {
this.setState({ scrollEnabled: true, data });
}}
ListFooterComponent={() => {
return <View>
<FlatList
data={this.state.data}
renderItem={this.renderItem}
keyExtractor={(item, index) => `draggable-item-${item.key}`}
/>
</View>
}}
/>
</View>
);
}

In my case, I have another ScrollView composition.
My solution was found in this repository:
React Native Draggable FlatList
I replaced:
ScrollView -> NestableScrollContainer
DraggableFlatList -> NestableDraggableFlatList
Initially there was one DraggableFlatList but in this case I was able to scroll via the DraggableFlatList

List item for chat from Array inside array React Native

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.