React Native: Fetched data wont render as an object in react - javascript

I have the below code to dynamically render a component with data from an API. However I keep getting this error:
Error: Objects are not valid as a React child (found: object with keys {_U, _V, _W, _X}). If you meant to render a collection of children, use an array instead.
In the code I tried to create an array with the data but still continue to get the error. There is just one object that I extract from the API data to render.
import React, { useState } from 'react';
import { Button, View, Text, Image, TextInput, StyleSheet, ScrollView, SafeAreaView, TouchableOpacity } from 'react-native';
import { Video } from 'expo-av';
import { AsyncStorage } from 'react-native';
import { Ionicons } from '#expo/vector-icons';
export default async function Profile({navigation}) {
const [company, setCompany] = useState([])
const getData = async () => {
try {
const value = await AsyncStorage.getItem('company')
console.log(value)
fetchData(value)
if(value !== null) {
}
} catch(e) {
}
}
const fetchData = (name) => {
fetch("https://stonernautz.com/companies.json")
.then(response => {
return response.json()
})
.then(data => {
for(var i in data){
if(data[i].name == name)
console.log(data[i])
setCompany("["+JSON.stringify(data[i])+"]")
console.log(company)
}
})
}
useEffect(() => {
getData()
});
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor:"black",color:"white"}}>
<View style={styles.catView}>
<Ionicons name="arrow-back" color={'white'} size={26} style={{marginLeft:0, marginTop:10}} onPress={() => navigation.goBack()}/>
<Text style={{color:"white"}}>Back</Text>
</View>
<View style={{height:"60%",position:'absolute', top:110}}>
<ScrollView>
{company.map(user => (
<View style={{marginBottom:100}} key={user.name}>
<Video
source={{ uri: `${user.video}` }}
rate={1.0}
volume={1.0}
isMuted={false}
resizeMode="contain"
useNativeControls
style={{ width: 400, height: 250, maxWidth:"100%" }}
/>
<Image
style ={styles.image}
source={{ uri : `${user.logo}`}}
/>
<Text style={styles.name}>{user.name}</Text>
<TouchableOpacity
style={styles.button}
>
<Text>Connect</Text>
</TouchableOpacity>
</View>
))}
</ScrollView>
</View>
</View>
);
}
const styles = StyleSheet.create({
input: {
height: 40,
margin: 12,
borderWidth: 5,
borderBottomColor: '#000000',
borderTopColor: '#000000',
borderRightColor: '#000000',
borderLeftColor: '#000000',
padding: 10,
borderColor: "#000000"
},
image: {
width: 50,
height: 50,
borderRadius: 100,
overflow: "hidden",
marginTop: 20,
marginLeft:20
},
button: {
alignItems: "center",
backgroundColor: "white",
padding: 10,
width:200,
position:'absolute',
top:300,
left:'25%',
height:40,
justifyContent: 'center'
},
container: {
flex: 1,
paddingTop:10,
},
scrollView: {
position:'absolute',
top:80,
left:0,
marginHorizontal: 20,
maxHeight:400,
width:"90%",
maxWidth:"100%",
},
text: {
fontSize: 100,
marginLeft:10,
},
catText: {
color: "white",
fontSize:24,
marginLeft:40,
lineHeight:50
},
catView: {
paddingRight: 20,
position:"absolute",
top:50,
left:20
},
name: {
color:'white',
fontSize:20,
position:'absolute',
top:260,
left:110,
justifyContent: 'center',
alignItems: 'center'
},
});

getData is async so you should try to await the Promise with something like this:
useEffect(() => {
(async () => {
await getData()
})();
}, []);

I figured it out after A While, Here is what I did:
import React, { useState, Component } from 'react';
import { Button, View, Text, Image, TextInput, StyleSheet, ScrollView, SafeAreaView, TouchableOpacity } from 'react-native';
import { Video } from 'expo-av';
import { AsyncStorage } from 'react-native';
import { Ionicons } from '#expo/vector-icons';
const styles = StyleSheet.create({
input: {
height: 40,
margin: 12,
borderWidth: 5,
borderBottomColor: '#000000',
borderTopColor: '#000000',
borderRightColor: '#000000',
borderLeftColor: '#000000',
padding: 10,
borderColor: "#000000"
},
image: {
width: 50,
height: 50,
borderRadius: 100,
overflow: "hidden",
marginTop: 20,
marginLeft:20
},
button: {
alignItems: "center",
backgroundColor: "white",
padding: 10,
width:200,
position:'absolute',
top:300,
left:'25%',
height:40,
justifyContent: 'center'
},
container: {
flex: 1,
paddingTop:10,
},
scrollView: {
position:'absolute',
top:80,
left:0,
marginHorizontal: 20,
maxHeight:400,
width:"90%",
maxWidth:"100%",
},
text: {
fontSize: 100,
marginLeft:10,
},
catText: {
color: "white",
fontSize:24,
marginLeft:40,
lineHeight:50
},
catView: {
paddingRight: 20,
position:"absolute",
top:50,
left:20
},
name: {
color:'white',
fontSize:20,
position:'absolute',
top:260,
left:110,
justifyContent: 'center',
alignItems: 'center'
},
});
class ProductList extends Component {
constructor(props) {
super(props)
this.state = {
company: []
}
}
fetchData = (company) => {
//console.log("hi"+ company)
fetch("https://stonernautz.com/companies.json")
.then(response => {
return response.json()
})
.then(data => {
for(var i in data){
if(data[i].name == company){
this.setState({ company: data[i] })
//console.log(this.state)
}
}
})
}
componentDidMount = async () => {
const value = await AsyncStorage.getItem('company')
//console.log(value)
await this.fetchData(value)
}
render() {
return (
<View style={{backgroundColor:"black", height:"100%", alignItems:"center", justifyContent:"center"}}>
<Text style={{color:"white", alignItems:"center", justifyContent:"center"}}>{this.state.company.name}</Text>
</View>
)
}
}
export default ProductList;

Related

TypeError: Attempted to assign to readonly property when using useRef() in React Native(Typescript)

I'm trying to use a useRef hook so a scrollview and my pan gesture handler can share a common ref. but once I initialize the useRef() hook and pass it to both components, it breaks with this error
TypeError: Attempted to assign to readonly property.
I've tried typecasting and adding types to the useRef call but it returns the same error. Can someone help please?
My component:
import { StyleSheet, Text, View, Image, Dimensions } from "react-native";
import React from "react";
import {
PanGestureHandler,
PanGestureHandlerGestureEvent,
PanGestureHandlerProps,
} from "react-native-gesture-handler";
import Animated, {
runOnJS,
useAnimatedGestureHandler,
useAnimatedStyle,
useSharedValue,
withTiming,
} from "react-native-reanimated";
import { FontAwesome } from "#expo/vector-icons";
export interface InfluencerItemProps
extends Pick<PanGestureHandlerProps, "simultaneousHandlers"> {
id?: string;
name: string;
userName: string;
profileImg: string;
rating?: Number;
onDismiss?: (Item: InfluencerItemProps) => void;
}
const ITEM_HEIGHT = 65;
const { width: SCREEN_WIDTH } = Dimensions.get("window");
const TRANSLATE_X_THRESHOLD = -SCREEN_WIDTH * 0.3;
const InfluencerItem = (props: InfluencerItemProps) => {
const { name, userName, profileImg, onDismiss, simultaneousHandlers } = props;
const translateX = useSharedValue(0);
const marginVertical = useSharedValue("2%");
const R_Height = useSharedValue(ITEM_HEIGHT);
const opacity = useSharedValue(1);
const panGesture = useAnimatedGestureHandler<PanGestureHandlerGestureEvent>({
onActive: (event) => {
translateX.value = event.translationX;
},
onEnd: () => {
const shouldbeDismissed = translateX.value < TRANSLATE_X_THRESHOLD;
if (shouldbeDismissed) {
translateX.value = withTiming(-SCREEN_WIDTH);
R_Height.value = withTiming(0);
marginVertical.value = withTiming("0%");
opacity.value = withTiming(0, undefined, (isFinished) => {
if (isFinished && onDismiss) {
runOnJS(onDismiss)(props);
}
});
} else {
translateX.value = withTiming(0);
}
},
});
const rStyle = useAnimatedStyle(() => ({
transform: [
{
translateX: translateX.value,
},
],
}));
const rIconContainerStyle = useAnimatedStyle(() => {
const opacity = withTiming(
translateX.value < TRANSLATE_X_THRESHOLD ? 1 : 0
);
return { opacity };
});
const RContainerStyle = useAnimatedStyle(() => {
return {
height: R_Height.value,
opacity: opacity.value,
marginVertical: marginVertical.value,
};
});
return (
<Animated.View style={[styles.wrapper, RContainerStyle]}>
<Animated.View style={[styles.iconContainer, rIconContainerStyle]}>
<FontAwesome name="trash" size={ITEM_HEIGHT * 0.5} color="white" />
</Animated.View>
<PanGestureHandler
simultaneousHandlers={simultaneousHandlers}
onGestureEvent={panGesture}
>
<Animated.View style={[styles.container, rStyle]}>
<Image
source={{
uri: profileImg,
}}
style={styles.image}
/>
<View style={styles.text}>
<Text style={styles.name}>{name}</Text>
<Text style={styles.userName}>{userName}</Text>
</View>
</Animated.View>
</PanGestureHandler>
</Animated.View>
);
};
export default InfluencerItem;
const styles = StyleSheet.create({
wrapper: {
width: "100%",
alignItems: "center",
},
container: {
flexDirection: "row",
borderWidth: 1,
borderRadius: 12,
height: ITEM_HEIGHT,
width: "100%",
backgroundColor: "#FFFFFF",
},
image: {
marginVertical: 10,
marginHorizontal: "4%",
height: 48,
width: 48,
borderRadius: 50,
},
text: {
justifyContent: "center",
alignItems: "flex-start",
marginHorizontal: 6,
},
name: {
fontSize: 14,
fontWeight: "500",
color: "#121212",
},
userName: {
fontSize: 12,
fontWeight: "400",
color: "#121212",
},
iconContainer: {
height: ITEM_HEIGHT,
width: ITEM_HEIGHT,
backgroundColor: "red",
position: "absolute",
right: "2.5%",
justifyContent: "center",
alignItems: "center",
},
});
InfluencerItem.defaultProps = {
name: "UserName",
userName: "userName",
profileImg:
"https://d2qp0siotla746.cloudfront.net/img/use-cases/profile-picture/template_0.jpg",
rating: "4",
};
This is my Screen:
import {
StyleSheet,
Text,
View,
SafeAreaView,
TextInput,
ScrollView,
} from "react-native";
import { StatusBar } from "expo-status-bar";
import React, { useCallback, useRef, useState } from "react";
import InfluencerItem from "../../components/InfluencerItem";
import { InfluencerItemProps } from "../../components/InfluencerItem";
// import { ScrollView } from "react-native-gesture-handler";
type Props = {};
const Saved = (props: Props) => {
const [search, setSearch] = useState<string>("");
const [influencerData, setInfluencerData] = useState(influencerz);
const handleSearch = () => {
console.log(search);
};
const onDismiss = useCallback((Item: InfluencerItemProps) => {
setInfluencerData((influencers) =>
influencers.filter((item) => item.id !== Item.id)
);
}, []);
const ref = useRef(null); //useRef initialization
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.container}>
<View style={styles.saved}>
{/* Saved Kikos component goes in here */}
<ScrollView ref={ref}> //passed ref here
{influencerData.map((influencer) => (
<InfluencerItem
key={influencer.id}
name={influencer.name}
userName={influencer.handle}
profileImg={influencer.image}
onDismiss={onDismiss}
simultaneousHandlers={ref} //also passed ref here
/>
))}
</ScrollView>
</View>
<Text style={styles.bottomText}>No Saved Kikos again</Text>
</View>
</SafeAreaView>
);
};
export default Saved;
const styles = StyleSheet.create({
container: {
paddingHorizontal: "4%",
},
headerText: {
color: "#121212",
fontWeight: "700",
lineHeight: 30,
fontSize: 20,
marginTop: 40,
},
search: {
borderRadius: 12,
backgroundColor: "#D9D9D9",
fontSize: 14,
lineHeight: 21,
color: "#7A7B7C",
paddingLeft: 10,
paddingRight: 5,
height: 45,
marginTop: 15,
position: "relative",
},
innerSearch: {
position: "absolute",
top: 30,
right: 10,
},
saved: {
backgroundColor: "rgba(217, 217, 217, 0.15)",
marginTop: 22,
paddingVertical: "7%",
marginBottom: 34,
},
bottomText: {
fontSize: 14,
fontWeight: "500",
textAlign: "center",
},
});
Use createRef() instead of useRef() as mentioned in the documentation.
const imagePinch = React.createRef();
return (
<RotationGestureHandler
simultaneousHandlers={imagePinch}
....
There is a complete example here in TypeScript.
Also make sure to use Animated version of components wherever applicable (<Animated.View> instead of <View>, <Animated.Image> instead of <Image> etc)

How we can give auto height to FlatList based on its list items content in React Native

I am using FlatList in my component which is working fine. All is wanted is that my entire screen should have an automatic height to it and FlatList contents never does out of the screen height.
Also, the height of FlatList should be changed based on content/items in it rather than giving any fixed height.
How I can be acheived both cases like automatic screen height and auto height of FlatList content?
Code:
import React, { useState, useEffect } from 'react';
import {
View,
StyleSheet,
useWindowDimensions,
Text,
FlatList,
SafeAreaView,
TouchableOpacity,
} from 'react-native';
import { LinearGradient as LinearGradientView } from 'expo-linear-gradient';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { ActivityIndicator, ThemeProvider } from 'react-native-paper';
import { ScrollView } from 'react-native-gesture-handler';
import { useIsFocused, useNavigation } from '#react-navigation/native';
import Svg, { Path } from 'react-native-svg';
import { BASE_GRADIENT_HEAVY } from '../rooms/Background';
import { useResolution } from '../browse/useResolution';
import { OnboardingNavigationProp } from '../navigation/LinkingConfiguration';
import { LIGHT_THEME } from '../Theme';
import { OnboardingBack } from './OnboardingBack';
import {
useOnboardingYearsOfExperiencePage,
useOnboardingYearsOfExperienceSubmit,
} from './useOnboardingYearsOfExperiencePage';
export function OnboardingYearsOfExperience({ route }: { route?: any }) {
const { height } = useWindowDimensions();
const { top: safeAreaTop } = useSafeAreaInsets();
const [selectedId, setSelectedId] = useState<{ id: string }>();
const [role_id, setRoleId] = useState<number>();
const { navigate } =
useNavigation<OnboardingNavigationProp<'OnboardingConfirmAllDetails'>>();
const parentUrl = route?.params.result.onboarding._links;
const initialUrl = parentUrl.onboarding_years_of_experience.href;
const onboardingUrl = parentUrl.self.href;
useEffect(() => {
setRoleId(route?.params.role_id);
}, []);
const isFocused = useIsFocused();
const { contentType } = useResolution();
const {
data: result,
isLoading,
error,
} = useOnboardingYearsOfExperiencePage(initialUrl, contentType, role_id, {
enabled: isFocused,
notifyOnChangeProps: ['data', 'isLoading', 'error'],
});
const {
mutateAsync: updateYearsOfExperience,
isLoading: isUpdatingYearsOfExperience,
error: yearsOfExperienceUpdateError,
} = useOnboardingYearsOfExperienceSubmit(onboardingUrl);
const Arrow = ({ style }: { style: object }) => {
return (
<Svg width="7" height="11" viewBox="0 0 7 11" fill="none" style={style}>
<Path
d="M6.28711 5.53931C6.28711 5.31649 6.19783 5.12476 6.02452 4.95376L1.9911 1.07251C1.85455 0.937781 1.68649 0.865234 1.48692 0.865234C1.07728 0.865234 0.751664 1.18651 0.751664 1.58552C0.751664 1.78243 0.830441 1.96898 0.977493 2.11407L4.54875 5.53413L0.977492 8.95937C0.835692 9.10446 0.751663 9.28583 0.751662 9.48792C0.751662 9.88693 1.07728 10.2082 1.48692 10.2082C1.68649 10.2082 1.85455 10.1357 1.99635 10.0009L6.02452 6.11968C6.20308 5.93832 6.28711 5.75695 6.28711 5.53931Z"
fill="#4D4D4D"
/>
</Svg>
);
};
const Item = ({
item,
onPress,
}: {
item?: { id: string; title: string };
onPress: () => void;
}) => (
<TouchableOpacity onPress={onPress}>
<Text
style={{
color: '#4D4D4D',
fontFamily: 'Inter_400Regular',
fontStyle: 'normal',
fontWeight: '400',
fontSize: 16,
lineHeight: 32,
padding: 3,
margin: 2,
}}
>
{item?.title}
</Text>
</TouchableOpacity>
);
const renderItem = ({ item }: { item: { id: string; title: string } }) => {
return (
<React.Fragment>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
borderRadius: 5,
backgroundColor:
selectedId?.id === item?.id ? '#F2F2F2' : 'transparent',
}}
>
<View style={{ width: '90%' }}>
<Item
item={item}
onPress={() => {
setSelectedId({ id: item.id });
updateYearsOfExperience({ id: item.id, role_id })
.then((result) => {
navigate('Onboarding', {
screen: 'OnboardingConfirmAllDetails',
params: { result },
});
})
.catch(() => {});
}}
/>
</View>
<View style={{ width: '10%' }}>
<Arrow style={{ position: 'absolute', top: 16, right: 10 }} />
</View>
</View>
</React.Fragment>
);
};
return (
<ThemeProvider theme={LIGHT_THEME}>
<View style={{ height: safeAreaTop }} />
<View style={styles.topHeader}>
<LinearGradientView
{...BASE_GRADIENT_HEAVY}
style={[styles.gradiantStyle]}
/>
</View>
<View style={styles.innerContainer}>
<ScrollView
contentContainerStyle={{
marginHorizontal: 'auto',
alignSelf: 'center',
width: '100%',
backgroundColor: '#ffffff',
height: '100%',
}}
>
<OnboardingBack
style={{
left: -10,
}}
/>
<Text style={styles.topHeadline}>
How many years of experience do you have?
</Text>
<Text style={styles.middleHeadline}>
Jump-start the conversation by sharing your years of experience
within healthcare.
</Text>
{isLoading || isUpdatingYearsOfExperience ? (
<ActivityIndicator size="large" />
) : (
<SafeAreaView>
<FlatList
contentContainerStyle={{ flexGrow: 1 }}
data={Object.values(
result!['years_of_experiences']['years_of_experiences_list']
)}
renderItem={renderItem}
keyExtractor={(item) => item.id}
extraData={selectedId}
style={{
borderWidth: 1,
borderStyle: 'solid',
borderColor: '#D7D7D7',
borderRadius: 5,
padding: 12,
height: '27%',
}}
ListEmptyComponent={
<View>
<Text>No data found</Text>
</View>
}
/>
</SafeAreaView>
)}
</ScrollView>
</View>
</ThemeProvider>
);
}
const styles = StyleSheet.create({
innerContainer: {
display: 'flex',
position: 'relative',
backgroundColor: 'white',
padding: 18,
},
topHeader: {
backgroundColor: '#e5dede',
padding: 0,
width: '100%',
},
topHeadline: {
fontSize: 24,
fontFamily: 'CircularStd_Medium',
fontStyle: 'normal',
fontWeight: '500',
color: '#222222',
marginTop: 40.6,
marginBottom: 14.6,
display: 'flex',
alignItems: 'center',
lineHeight: 32,
},
middleHeadline: {
fontSize: 16,
fontFamily: 'Inter_400Regular',
fontStyle: 'normal',
fontWeight: '400',
lineHeight: 24,
color: '#4D4D4D',
marginBottom: 30,
},
gradiantStyle: {
width: 248.4,
height: 4.71,
},
});
add the following style to your flatList =>
style={{maxHeight:'what ever you want',flexGrow:0}}

i am facing a problem regarding async storage in react native

i am facing a problem regarding async storage in react native .
when i setItem in async storage and then retrieve it if there are 3 tasks- which i have added,
only two of them is retrieved
i will share a photo of before and after
this is output before refreshing
this is the output after refreshing the app
This is my app.js code
import { StatusBar } from 'expo-status-bar';
import {
StyleSheet,
Text,
View,
KeyboardAvoidingView,
FlatList,
TextInput,
TouchableOpacity,
Keyboard,
} from 'react-native';
import React, { Component } from 'react';
import * as Font from 'expo-font';
import Task from './components/Task';
import AppLoading from 'expo-app-loading';
import AsyncStorage from '#react-native-async-storage/async-storage';
let customFonts = {
Poppins_SemiBold: require('./assets/Poppins-SemiBold.ttf'),
Poppins_Regular: require('./assets/Poppins-Regular.ttf'),
};
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
task: '',
taskItems: [],
fontsLoaded: false,
};
}
async _loadFontsAsync() {
await Font.loadAsync(customFonts);
this.setState({ fontsLoaded: true });
}
componentDidMount() {
this._loadFontsAsync();
this._retrieveData()
}
_retrieveData = async () => {
try {
const value = await AsyncStorage.getItem('data');
if (value.length !== 2) {
// We have data!!
this.setState({taskItems:[...JSON.parse(value)]})
console.log(value);
}
} catch (error) {
// Error retrieving data
console.log(error)
}
};
handleAddTask=()=>{
Keyboard.dismiss()
this.setState({taskItems:[...this.state.taskItems,this.state.task]})
this.setState({task:''})
AsyncStorage.setItem('data',JSON.stringify(this.state.taskItems))
}
deleteItem=(index)=>{
try {
let arr = [...this.state.taskItems];
arr.splice(index, 1);
this.setState({taskItems:arr})
AsyncStorage.setItem('data',JSON.stringify(arr))
} catch (err) {
console.log(err);
}
}
render() {
if (!this.state.fontsLoaded) {
return <AppLoading />;
}
return (
<View style={styles.container}>
{/* Todays Tasks */}
<View style={styles.taskWrapper}>
<Text style={styles.sectionTitle}>Today's Tasks</Text>
<View style={styles.items}>
{/* This is where the tasks will go! */}
<FlatList
data={this.state.taskItems}
keyExtractor={(item) => item}
renderItem={({ item, index }) => (
<Task text={item} handleDelete={() => this.deleteItem(index)} />
)}
/>
</View>
</View>
{/* Write a Task */}
<KeyboardAvoidingView style={styles.writeTaskWrapper}>
<TextInput
style={styles.input}
placeholder={'Write A Task!'}
onChangeText={(text) => {
this.setState({ task: text });
}}
value={this.state.task}
/>
<TouchableOpacity
onPress={() => {
this.handleAddTask();
}}>
<View style={styles.addWrapper}>
<Text style={styles.addText}>+</Text>
</View>
</TouchableOpacity>
</KeyboardAvoidingView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#E8EAED',
},
taskWrapper: {
paddingTop: 80,
paddingHorizontal: 20,
},
sectionTitle: {
fontSize: 24,
backgroundColor: '#fff',
fontFamily: 'Poppins_SemiBold',
borderRadius: 10,
margin: 'auto',
width: 250,
height: 60,
textAlign: 'center',
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.2,
shadowRadius: 2,
elevation: 5,
paddingTop: 10,
},
items: {
marginTop: 30,
},
writeTaskWrapper: {
position: 'absolute',
bottom: 60,
width: '100%',
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
},
input: {
paddingVertical: 15,
paddingHorizontal: 15,
backgroundColor: '#fff',
borderRadius: 60,
width: 250,
fontFamily: 'Poppins_Regular',
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.5,
shadowRadius: 2,
elevation: 3,
},
addWrapper: {
width: 60,
height: 60,
backgroundColor: '#fff',
borderRadius: 60,
justifyContent: 'center',
alignItems: 'center',
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.5,
shadowRadius: 2,
elevation: 3,
},
addText: {},
});
and this is my task.js code which is a component:
import React from 'react';
import {
View,
Text,
StyleSheet,
Dimensions,
Animated,
TouchableOpacity,
} from 'react-native';
import AppLoading from 'expo-app-loading';
import {
Poppins_100Thin,
Poppins_100Thin_Italic,
Poppins_200ExtraLight,
Poppins_200ExtraLight_Italic,
Poppins_300Light,
Poppins_300Light_Italic,
Poppins_400Regular,
Poppins_400Regular_Italic,
Poppins_500Medium,
Poppins_500Medium_Italic,
Poppins_600SemiBold,
Poppins_600SemiBold_Italic,
Poppins_700Bold,
Poppins_700Bold_Italic,
Poppins_800ExtraBold,
Poppins_800ExtraBold_Italic,
Poppins_900Black,
Poppins_900Black_Italic,
} from '#expo-google-fonts/poppins';
import { useFonts } from 'expo-font';
import Swipeable from 'react-native-gesture-handler/Swipeable';
const SCREEN_WIDTH = Dimensions.get('window').width;
const Task = (props) => {
let [fontsLoaded, error] = useFonts({
Poppins_100Thin,
Poppins_100Thin_Italic,
Poppins_200ExtraLight,
Poppins_200ExtraLight_Italic,
Poppins_300Light,
Poppins_300Light_Italic,
Poppins_400Regular,
Poppins_400Regular_Italic,
Poppins_500Medium,
Poppins_500Medium_Italic,
Poppins_600SemiBold,
Poppins_600SemiBold_Italic,
Poppins_700Bold,
Poppins_700Bold_Italic,
Poppins_800ExtraBold,
Poppins_800ExtraBold_Italic,
Poppins_900Black,
Poppins_900Black_Italic,
});
if (!fontsLoaded) {
return <AppLoading />;
}
const leftSwipe = (progress, dragX) => {
const scale = dragX.interpolate({
inputRange: [0, 100],
outputRange: [0, 1],
extrapolate: 'clamp',
});
return (
<TouchableOpacity onPress={props.handleDelete} activeOpacity={0.6}>
<View style={styles.deleteBox}>
<Animated.Text
style={{
transform: [{ scale: scale }],
color: '#fff',
fontFamily: 'Poppins_400Regular',
fontSize: 18,
}}>
Delete
</Animated.Text>
</View>
</TouchableOpacity>
);
};
return (
<Swipeable renderLeftActions={leftSwipe}>
<View style={styles.item}>
<View style={styles.itemLeft}>
<View style={styles.square}></View>
<Text style={styles.itemText}>{props.text}</Text>
</View>
<View style={styles.circular}></View>
</View>
</Swipeable>
);
};
const styles = StyleSheet.create({
item: {
backgroundColor: 'white',
padding: 15,
borderRadius: 10,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: 20,
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.5,
shadowRadius: 2,
elevation: 3,
},
itemLeft: {
flexDirection: 'row',
alignItems: 'center',
flexWrap: 'wrap',
},
square: {
width: 24,
height: 24,
backgroundColor: '#55BCF6',
opacity: 0.5,
borderRadius: 5,
marginRight: 15,
},
itemText: {
maxWidth: '80%',
fontFamily: 'Poppins_400Regular',
},
circular: {
width: 12,
height: 12,
borderColor: '#55BCF6',
borderWidth: 2,
borderRadius: 5,
},
deleteBox: {
backgroundColor: 'red',
justifyContent: 'center',
alignItems: 'center',
width: 100,
height: 55,
borderRadius: 10,
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.5,
shadowRadius: 2,
elevation: 5,
},
});
export default Task;
Due to React internal state update implementation, update Async storage run before new state updated. It's recommended to run asynchronous code before updating the state.
To solve the issue, refactor your code as below:
handleAddTask= async ()=>{
Keyboard.dismiss()
const updatedTaskItems = [...this.state.taskItems,this.state.task]
await AsyncStorage.setItem('data',JSON.stringify(updatedTaskItem))
this.setState({taskItems:updatedTaskUtems,task:''})
}

Android app crashes when I open build app

Android app crashes when I open build app. It's happens only when I build app react native async storage. On iOS & Android emulators it's working stability. Help me please!
At first I thought that the problem was that I did not use JSON, but it turned out that I did not. JOHN tried, but nothing came of it. Maybe I am not saving correctly in Async Storage?
import React, { useState, useEffect } from 'react'
import { View, TextInput, StyleSheet, TouchableOpacity, ScrollView } from 'react-native'
import Icon from 'react-native-vector-icons/Octicons'
import BackNavbar from '../components/BackNavbar'
import { colors } from '../theme/theme'
import AsyncStorage from '#react-native-community/async-storage'
import GoalCard from '../components/GoalCard'
export default GoalScreen = ({ navigation }) => {
const STORAGE_KEY = '#data'
function goBack() {
navigation.goBack()
}
const [ goal, setGoal ] = useState([])
const [ goalScore, setGoalScore ] = useState()
const [ goalName, setGoalName ] = useState('')
const addGoal = () => {
setGoal([
... goal,
{
id: Date.now(),
text: goalName,
score: goalScore,
}
])
setGoalName('')
setGoalScore('')
}
const saveData = async (dataSave) => {
try {
await AsyncStorage.setItem(STORAGE_KEY, dataSave)
} catch (e) {
alert('Failed to save the data to the storage')
}
}
const loadData = async () => {
try {
const json = await AsyncStorage.getItem(STORAGE_KEY) || JSON.stringify([])
const loadData = JSON.parse(json)
if (loadData != null) {
setGoal(loadData)
alert(loadData.map())
}
} catch (e) {
alert('Failed to load the data to the storage')
}
}
useEffect(() => {
loadData()
}, [])
useEffect(() => {
saveData(JSON.stringify(goal))
}, [goal])
return (
<View style={styles.container}>
<BackNavbar title='Goals' back={goBack} />
<ScrollView>
{ goal.map( item => <GoalCard key={item.id} {... item} /> ) }
</ScrollView>
<View style={styles.inputView}>
<TextInput
keyboardType = "number-pad"
style={styles.inputTextScore}
value={goalScore}
onChangeText={score => setGoalScore(score)}
/>
<TextInput
style={styles.inputText}
value={goalName}
onChangeText={name => setGoalName(name)}
/>
<TouchableOpacity
style={styles.inputButton}
onPress={addGoal}
>
<Icon name="plus" size={26} color={colors.LIGHT_COLOR} />
</TouchableOpacity>
</View>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'flex-start',
},
inputView: {
marginTop: 15,
flexDirection: 'row',
width: '80%',
marginBottom: 15,
},
inputText: {
width: '62%',
height: 50,
paddingHorizontal: '5%',
right: 5,
borderRadius: 15,
backgroundColor: '#f2f2f2',
borderColor: colors.BORDER_COLOR,
color: colors.SECOND_COLOR,
borderWidth: 1,
fontSize: 20,
elevation: 3,
fontSize: 16,
},
inputTextScore: {
width: '20%',
height: 50,
marginRight: 10,
paddingHorizontal: '5%',
right: 5,
borderRadius: 15,
backgroundColor: '#f2f2f2',
borderColor: colors.BORDER_COLOR,
borderWidth: 1,
fontSize: 20,
elevation: 3,
color: colors.SECOND_COLOR,
fontWeight: '500',
},
inputButton: {
alignItems: 'center',
justifyContent: 'center',
paddingHorizontal: 15,
paddingVertical: 10,
borderRadius: 50,
backgroundColor: colors.MAIN_COLOR,
left: 5,
}
})

Mapping over an array in javascript to render data dynamically

I have an array of items which I have retrieved from an Object. The array has 5 items. It looks like this:
I have saved the array in my state as :
this.state={
serviceDetails: planDetails[0].nbs_plans.map(service => service.extension_attributes.productServicetList.map(name=>name.name)),
}
Now, I am trying to render the array in my component using map function like :
{
this.state.serviceDetails.map((serviceName) => {
return (
<SelectableChips initialChips={serviceName} />
);
})
}
But the problem is all the arrays are coming together at the same place as shown below:
The way it should be is : The first "See more" should be at the first section, the 2nd at the 2nd and so on.
My complete code for this component looks like this:
//This is an example code for FlatList//
import React from 'react';
import {
StyleSheet, FlatList, Text, View, Alert , Image, TouchableOpacity
} from 'react-native';
import SelectableChips from '../../../components/Chip/SelectableChips';
import CheckBox from '../../../components/CheckBox';
import propTypes from 'prop-types';
import Service from './Service';
import { planDetails } from '../../../api/mockedData/PlanServiceDetails';
class Selected_Items_Array {
constructor() {
selectedItemsArray = [];
this.state = {
planName: planDetails[0].nbs_plans.map(data => data.name),
serviceDetails: planDetails[0].nbs_services.map(data => data.service_line),
};
var result = planDetails.filter(d => {
return d.nbs_plans[0].name = "TruComplete℠ Lawn Care Plan";
});
// alert(Object.keys(planDetails).length);
// alert(Object.keys(planDetails[0].nbs_plans).length);
// alert(JSON.stringify(planDetails[0].nbs_plans[0].productId));
// alert(JSON.stringify(planDetails[0].nbs_plans[0].name));
// alert(JSON.stringify(planDetails[0].nbs_plans.map(data => data.name)));
}
pushItem(option) {
selectedItemsArray.push(option);
}
getArray() {
return selectedItemsArray;
}
}
export default class Services extends React.Component {
constructor(props) {
super(props);
this.state = {
// FlatListItems: [
// { id: '1', value: 'TruGreen Mosquito Defense' ,applicationType:'annual' },
// { id: '2', value: 'Sprinkler Maintenance Program' ,applicationType:'first' },
// { id: '3', value: 'Soil Treatment to balance the PH of the lawn-' ,applicationType:'priceper'},
// { id: '4', value: 'Tree & Shrub Care' ,applicationType:'customquote'},
// ],
planName: planDetails[0].nbs_plans.map(data=>data.name),
serviceDetails: planDetails[0].nbs_plans.map(service => service.extension_attributes.productServicetList.map(name=>name.name)),
};
selectedArrayOBJ = new Selected_Items_Array();
alert(JSON.stringify(planDetails[0].nbs_plans.map(data => data.name)));
alert(JSON.stringify(planDetails[0].nbs_plans[0].extension_attributes.productServicetList.map(data=> data.name)));
alert(JSON.stringify(planDetails[0].nbs_plans.map(service => service.extension_attributes.productServicetList.map(name=>name.name))));
alert(this.state.planName);
alert(this.state.serviceDetails);
}
FlatListItemSeparator = () => {
return (
//Item Separator
<View
style={{ height: 7, width: '100%', backgroundColor: 'transparent' }}
/>
);
};
GetItem(item) {
//Function for click on an item
Alert.alert(item);
}
render() {
return (
<View style={styles.MainContainer}>
<FlatList
data={this.state.planName}
//data defined in constructor
ItemSeparatorComponent={this.FlatListItemSeparator}
//Item Separator View
renderItem={({ item }) => (
// Single Comes here which will be repeatative for the FlatListItems
<View style={styles.cellContainerStyle} >
<View backgroundColor = {"transparent"} flexDirection = {'row'} justifyContent= {'flex-start'} margin={0}>
<View backgroundColor={'#73c573'} justifyContent= {'center'} alignItems={'center'} width={35} height={35} marginTop={0} paddingTop={0}>
<View backgroundColor={'#73c573'} width={25} height={25}>
<CheckBox size={25}
keyValue={1}
selectedArrayObject={selectedArrayOBJ}
checked={false}
label = ''
color="transparent"
labelColor="#00703c"
checkBoxClick={this.checkBoxOnClicked}/>
</View>
</View>
<View flex={1.75} backgroundColor={'transparent'} marginLeft={5}>
<Text style={{ color: '#00703c', fontSize: 21, fontFamily: 'SourceSansPro-Bold' }}> {item}</Text>
</View>
<View flex={0.15} marginTop={10}>
<TouchableOpacity style = {{ backgroundColor: 'transparent' }} onPress = {this.props.seeMore} >
<Image source={require('../../../assets/img/iOS/chevron_right.png')} style={styles.rightArrowImageStyle}/>
</TouchableOpacity>
</View>
</View>
<View style={styles.cellSubViewTwo}>
<Text style = {styles.textHeaderStyle}>This plan includes:</Text>
<View backgroundColor = {"transparent"} flexDirection='column' marginTop={5}>
{
this.state.serviceDetails.map((serviceName) => {
return (
<SelectableChips selectedChipStyle={selectableStyles} initialChips={serviceName} onChangeChips={(chips) => console.log(chips)} alertRequired={false} backgroundColor={"transparent"}
subView={
<TouchableOpacity style = {{ backgroundColor: 'transparent' }} onPress = {this.props.seeMore} >
<View backgroundColor={'transparent'} flexDirection = {'row'} alignItems= {'center'} marginLeft={5}>
<Text style={styles.seeMoreStyle}>See more</Text>
<Image source={require('../../../assets/img/iOS/chevron_right.png')} style={styles.rightArrowSeeMoreImageStyle}/>
</View>
</TouchableOpacity>
}/>
);
})
}
</View>
</View>
<Service serviceType={item.applicationType} isButton={false}/>
</View>
)}
/>
</View>
);
}
checkBoxOnClicked() {
if (selectedArrayOBJ.getArray().length == 0) {
//Alert.alert('CheckBox UnChecked');
} else {
// Alert.alert('CheckBox Checked');
}
}
}
Services.propTypes = { seeMore: propTypes.string.isRequired };
const styles = StyleSheet.create({
MainContainer: {
justifyContent: 'center',
margin: 7,
backgroundColor: 'transparent',
},
cellContainerStyle: {
padding: 0,
fontSize: 18,
flexDirection: 'column',
backgroundColor: '#ffffff',
borderColor: 'lightgray',
borderWidth: 0.5,
},
cellSubViewOne: {
flexDirection: 'row',
},
cellSubViewTwo: {
flexDirection: 'column',
marginLeft: 15,
backgroundColor: "#ffffff",
marginTop: 15,
},
cellSubViewThree: {
flexDirection: 'column',
marginLeft: 0,
backgroundColor: "#eff5ef",
marginTop: 15,
},
textHeaderStyle: {
color: '#73c573',
fontSize: 10.5,
fontFamily: "SourceSansPro-SemiBold",
},
rightArrowImageStyle: {
height: 12,
width: 12,
resizeMode: 'center',
alignItems: 'center',
tintColor: '#a6a6a6',
},
rightArrowSeeMoreImageStyle: {
height: 8,
width: 8,
resizeMode: 'center',
alignItems: 'center',
tintColor: '#ff9933',
},
seeMoreStyle: {
fontSize: 11,
color: '#ff9933',
fontFamily: "SourceSansPro-SemiBold",
},
});
const selectableStyles = StyleSheet.create({
chip: {
backgroundColor: '#73c573',
borderColor: '#73c573',
borderWidth: 1,
margin: 3,
padding: 0,
borderRadius: 5,
alignItems: 'center',
justifyContent: 'center',
},
valueStyle: {
color: '#ffffff',
fontSize: 12,
fontFamily: "SourceSansPro-Regular",
},
chipSelected: {
backgroundColor: '#73c573',
borderColor: '#73c573',
borderWidth: 1,
margin: 3,
padding: 0,
borderRadius: 5,
alignItems: 'center',
justifyContent: 'center',
},
valueStyleSelected: {
color: '#ffffff',
fontSize: 12,
fontFamily: "SourceSansPro-Regular",
},
});
Can someone please guide me how to proceed.
As each plan has as productServicetList, create a object serviceDetails where the key is the planName and the value is productServicetList.
this.state={
serviceDetails: planDetails[0].nbs_plans.reduce(
(acc, service) => ({
...acc,
[service.name]: service.extension_attributes.productServicetList.map(
name => name.name
)
}),
{}
);
}
Then render the serviceDetail as follows
{
this.state.serviceDetails[item].map(serviceName => {
return <SelectableChips initialChips={serviceName} />;
});
}

Categories