Related
for some reason the component is not Re-Rendering on the setDependent, i have added the setPerson and the console does log the item without that one deleted, but is not updating the component. please see code below, as of right now is loading with no problem from the server but at the moment of deletion it does send the command to delete but the list does not get re-render, the "person" still listed on the FlatList
const RemoveDependent = ({ onPress }) =>
(
<TouchableWithoutFeedback onPress={onPress}>
<View style={{
backgroundColor: colors.dangerLight,
//height: 70,
width: 70,
//borderRadius: 35,
right:-5,
justifyContent: 'center',
alignItems: 'center'
}}>
<MaterialCommunityIcons name="trash-can" size={30} style={{ color: colors.white }} />
</View>
</TouchableWithoutFeedback>
)
function FamilyScreen(props) {
const [person, setDependent] = useState(dependents);
const handleRemove = onDependent => {
console.log(person.filter(d => d.id !== onDependent.id));
setDependent(person.filter((d) => d.id !== onDependent.id));
}
return (
<View style={{ backgroundColor: colors.white, flex: 1 }}>
<Image
source={require('../assets/familyBg.jpeg')}
style={styles.image}
resizeMode="cover"
/>
<View style={styles.details}>
<RevText style={styles.title}>Family Plan</RevText>
<RevText style={styles.description}>Description here</RevText>
</View>
<FlatList
data={dependents}
keyExtractor={personal => personal.id.toString()}
renderItem={({ item }) => (
<ListItem
onPress={() => handleRemove(item) }
title={item.name}
subTitle={item.type}
image={item.image}
renderRightActions={() => (<RemoveDependent onPress={() => handleRemove(item)} />) }
ItemSeparatorComponent={() => (<View style={{ width: '96%', left: 5, borderBottomColor: 'red', borderBottomWidth: 1 }} />)}
/>
)}
/>
</View>
);
}
Object {
"id": 1014,//REMOVED ID WHEN CLICKED
"image": 19,
"name": "Person 1",
"type": "Child",
}
Array [ //NEW ARRAY
Object {
"id": 1015,
"image": 19,
"name": "PERSON 2",
"type": "Child",
},
Object {
"id": 1016,
"image": 19,
"name": "PERSON 3",
"type": "Child",
},
Object {
"id": 1017,
"image": 19,
"name": "PERSON 4",
"type": "Child",
},
]
The main problem with this code is that your are altering a state object directly. You should treat all state objects as if they are immutable.
change
setDependent(person.filter((d) => d.id !== onDependent.id));
with
setDependent([...person.filter((d) => d.id != onDependent.id)]);
I run a fetch from a server that returns an object that you can see an exemple of here:
{
"info": [
{
"ID": "1",
"name": "name sample",
"description": "description sample",
"img": "0",
"price": "14.00",
"Omega": "0",
"categories": []
}
],
"categories": [
{
"ID": "1",
"name": "base",
"min": "1",
"max": "1",
"actual": "2",
"options": [
{
"ID": "1",
"name": "peanuts",
"supplement": "1",
"checked": "true"
},
{
"ID": "2",
"name": "cheesecake",
"supplement": "0",
"checked": "false"
},
{
"ID": "9",
"name": "carrots",
"supplement": "3",
"checked": "true"
}
]
},
{
"ID": "2",
"name": "enhancer",
"min": "1",
"max": "1",
"actual": "0",
"options": [
{
"ID": "3",
"name": "mojito",
"supplement": "3",
"checked": "false"
}
]
},
{
"ID": "3",
"name": "berry",
"min": "1",
"max": "3",
"actual": "1",
"options": [
{
"ID": "10",
"name": "banana",
"supplement": "0",
"checked": "true"
},
{
"ID": "11",
"name": "blueberry",
"supplement": "2",
"checked": "false"
}
]
},
{
"ID": "4",
"name": "special",
"min": "1",
"max": "4",
"actual": "0",
"options": [
{
"ID": "12",
"name": "moon",
"supplement": "1",
"checked": "false"
}
]
},
{
"ID": "8",
"name": "ultima",
"min": "0",
"max": "1",
"actual": "1",
"options": [
{
"ID": "13",
"name": "ultimo",
"supplement": "5",
"checked": "true"
}
]
}
]
}
and then to parse all this result into a list of checkboxes i use this code:
<FlatList
data={data.categories}
keyExtractor={(item, index) => item.name + item.ID}
// style={{marginBottom: 200}}
renderItem={({ item }) => (
<View
style={{
marginTop: 0,
marginLeft: 0,
marginRight: 0,
marginBottom: 0,
flexDirection: "column",
}}
>
<View
style={{
paddingTop: 10,
paddingBottom: 0,
flexDirection: "column",
}}
>
<View
style={{
paddingTop: 10,
paddingBottom: 10,
flexDirection: "column",
borderTopColor: "lightgrey",
borderTopWidth: 1,
borderBottomColor: "lightgrey",
borderBottomWidth: 1,
marginTop: 10,
}}
>
<Text
style={{
fontSize: 18,
color: "black",
textAlign: "left",
paddingHorizontal: 10,
fontWeight: "bold",
}}
>
{item.name}
</Text>
<View
style={{
flexDirection: "row",
}}
>
{item.min > "0" ? (
<Text
style={{
fontSize: 12,
color: "red",
textAlign: "left",
paddingLeft: 10,
}}
>
Requis
</Text>
) : (
<Text></Text>
)}
<Text
style={{
fontSize: 12,
color: "black",
textAlign: "left",
paddingHorizontal: 5,
}}
>
Choose between {item.min} and {item.max} options
</Text>
</View>
</View>
<FlatList
data={item.options}
style={{}}
keyExtractor={(item, index) => item.name + item.ID}
renderItem={({ item: innerData, index }) => (
<View>
<View style={styles.optionView}>
<CheckBox
containerStyle={{ marginLeft: 0, width: "100%" }}
title={
innerData.supplement > "0" ? (
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
paddingHorizontal: 5,
}}
>
<Text style={styles.optionDescription}>{innerData.name}</Text>
<Text style={styles.optionPrice}>+ {innerData.supplement}</Text>
</View>
) : (
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
paddingHorizontal: 5,
}}
>
<Text style={styles.optionDescription}>
{innerData.name}
</Text></View>
)
}
textStyle={{ color: "black" }}
checkedIcon="check-square-o"
uncheckedIcon="square-o"
checked= {stringToBoolean(innerData.checked)}
checkedColor="green"
uncheckedColor="green"
onPress={() => {
stringToBoolean(innerData.checked) == false ? setData({ ...data, innerData.checked: true }) : setData({ ...data, innerData.checked: false });
}}
/>
</View>
</View>
)}
/>
</View>
</View>
)}
/>
As you can see some chekboxes come prechecked from the source, some not, my idea was to update the original json object everytime a checkbox gets updated to keep track and thus disable or enable a checkbox according to actual value and the min/max values, but for the life of me i can't seem to get the code to update the object right:
onPress={() => {stringToBoolean(innerData.checked) == false ? setData({ ...data, innerData.checked: true }) : setData({ ...data, innerData.checked: false });}
Any idea how to solve that? and is my idea sound for the whole process of limiting checkboxes?
I started learning react-native and javascript late November and i'm having a blast, big thank you to all the community here sharing ideas and solutions
Please try using a key prop in the checkbox component
Thank you "Great" for your answer, i have meanwhile figured out the answer, i'll share it here for others:
the solution is as follow:
onPress={() => {stringToBoolean(innerData.checked) == false
? Number(item.actual) < item.max
? ((innerData.checked = "true"),
(item.actual = Number(item.actual) + 1))
: showToast("max options reached!")
: (innerData.checked = "false",
item.actual = Number(item.actual) - 1);
}}
Cheers folks.
I'm trying to work with Navbar from navbar-native but i'm getting this error when I import it for my project (typeerror undefined is not an object (evaluating '_react.proptypes.bool')).
Here is the code :
import React from "react";
import { Image, StyleSheet, View, Text } from "react-native";
import { navbar } from "navbar-native";
import colors from "../config/colors";
function ViewImageScreen(props) {
return (
<View style={styles.container}>
<Navbar
title={"Navbar Native"}
left={{
icon: "ios-arrow-back",
label: "Back",
onPress: () => {alert('Go back!')}
}}
right={[{
icon: "ios-search",
onPress: () => {alert('Search!')}
},{
icon: "ios-menu",
onPress: () => {alert('Toggle menu!')}
}]}
/>
<View style={styles.signinIcon}>
<Text style={styles.signinText}>Se connecter</Text>
</View>
<View style={styles.favoris}>
<Image style={styles.icon} source={require("../assets/logo-red.png")} />
<Text style={styles.settingsText}>Favoris</Text>
</View>
<View style={styles.newsletter}>
<Image style={styles.icon} source={require("../assets/logo-red.png")} />
<Text style={styles.settingsText}>Newsletter</Text>
</View>
<View style={styles.aide}>
<Image style={styles.icon} source={require("../assets/logo-red.png")} />
<Text style={styles.settingsText}>Aide & Contact</Text>
</View>
<View style={styles.apropos}>
<Image style={styles.icon} source={require("../assets/logo-red.png")} />
<Text style={styles.settingsText}>A propos</Text>
</View>
<View style={styles.signupIcon}>
<Text style={styles.signupText}>S'enregistrer</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
signinIcon: {
width: "90%",
height: 50,
position: "absolute",
top: 360,
alignSelf: "center",
borderColor: colors.fm_blue,
borderWidth: 2,
textAlign: "center",
justifyContent: "center",
alignItems: "center",
borderRadius: 5,
},
signupIcon: {
backgroundColor: colors.fm_blue,
width: "90%",
height: 50,
position: "absolute",
top: 300,
alignSelf: "center",
textAlign: "center",
justifyContent: "center",
alignItems: "center",
borderRadius: 5,
},
container: {
backgroundColor: colors.grey,
flex: 1,
},
signinText: {
fontSize: 16,
color: colors.fm_blue,
},
signupText: {
fontSize: 16,
color: colors.white,
},
settingsText: {
fontSize: 14,
margin: 50,
color: colors.black,
},
favoris: {
backgroundColor: colors.white,
width: "100%",
height: 50,
position: "absolute",
top: 40,
alignSelf: "center",
borderColor: colors.white,
textAlign: "center",
justifyContent: "center",
},
newsletter: {
backgroundColor: colors.white,
width: "100%",
height: 50,
position: "absolute",
top: 100,
alignSelf: "center",
borderColor: colors.white,
textAlign: "center",
justifyContent: "center",
},
aide: {
backgroundColor: colors.white,
width: "100%",
height: 50,
position: "absolute",
top: 160,
alignSelf: "center",
borderColor: colors.white,
textAlign: "center",
justifyContent: "center",
},
apropos: {
backgroundColor: colors.white,
width: "100%",
height: 50,
position: "absolute",
top: 220,
alignSelf: "center",
borderColor: colors.white,
textAlign: "center",
justifyContent: "center",
},
icon: {
margin: 20,
width: 20,
height: 20,
position: "absolute",
justifyContent: "center",
},
});
export default ViewImageScreen;
And here is my package.json :
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~38.0.8",
"expo-status-bar": "^1.0.2",
"navbar-native": "^1.6.1",
"prop-types": "^15.7.2",
"react": "~16.11.0",
"react-dom": "~16.11.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
"react-native-navbar": "^2.1.0",
"react-native-vector-icons": "^7.0.0",
"react-native-web": "~0.11.7"
},
"devDependencies": {
"#babel/core": "^7.8.6",
"#types/react-native-vector-icons": "^6.4.5",
"babel-preset-expo": "~8.1.0"
},
"private": true
}
And here is a screenshot of the error on the android emulator :
Deugger Error
First you need to import Navbar with uppercase
import { Navbar } from "navbar-native";
If not please reference these
https://github.com/redbaron76/navbar-native/issues/12
https://github.com/redbaron76/navbar-native/issues/18
https://github.com/redbaron76/navbar-native/issues/21
Updated Answer: You should wrap Navbar with Container
import React, { Component } from 'react';
import { View } from 'react-native';
import { Container, Navbar } from 'navbar-native';
class ReactNativeProject extends Component {
render() {
return (
<Container>
<Navbar
title={"Navbar Native"}
left={{
icon: "ios-arrow-back",
label: "Back",
onPress: () => {alert('Go back!')}
}}
right={[{
icon: "ios-search",
onPress: () => {alert('Search!')}
},{
icon: "ios-menu",
onPress: () => {alert('Toggle menu!')}
}]}
/>
... other stuff ...
</Container>
);
}
}
Here is video of the problem
The application is upside down after loading on iPad, after manual 180deg rotation, app works as expected
The same behaviour on real iPad device, works fine with Android
orientation: locked to "landscape" in app.json config
my App.js file:
import React from 'react';
import { View, Text } from 'react-native';
const App = () => {
return (
<View style={{ flex: 1, backgroundColor: 'grey', justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ position: 'absolute', fontSize: 30, top: 0 }}>TOP</Text>
<Text style={{ position: 'absolute', fontSize: 30, left: 0 }}>LEFT</Text>
<Text style={{ position: 'absolute', fontSize: 30, right: 0 }}>RIGHT</Text>
<Text style={{ position: 'absolute', fontSize: 30, bottom: 0 }}>BOTTOM</Text>
</View>
);
};
export default App;
expo sdk: "^37.0.0"
my app.json file:
{
"expo": {
"packagerOpts": {
"config": "metro.config.js",
"sourceExts": [
"js",
"jsx",
"ts",
"tsx",
"svg"
]
},
"name": "My Test App",
"slug": "my-test-app",
"privacy": "public",
"platforms": [
"ios"
],
"version": "1.2.6",
"orientation": "landscape",
"splash": {
"image": "./assets/splash2.png",
"resizeMode": "contain",
"backgroundColor": "#113F67"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"bundleIdentifier": "ru.my.testapp",
"buildNumber": "1.2.6",
"supportsTablet": true,
"isTabletOnly": true,
"requireFullScreen": true,
"infoPlist": {
"NSLocationWhenInUseUsageDescription": "location"
},
"config": {
"googleMapsApiKey": "api-key"
}
},
"description": ""
}
}
I am new to React Native. I try to create pie chart using 'react-native-pathjs-charts' library, but I got an error mentioning method.bind is not a function.
Here is my code:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Animated, Easing, TouchableOpacity, Image, Linking} from 'react-native';
import { Bar } from 'react-native-pathjs-charts'
import { Pie } from 'react-native-pathjs-charts'
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
type Props = {
};
export default class App extends Component<Props> {
constructor(){
super()
this.state = {
Default_Rating: 2,
Max_Rating : 5,
}
this.Star = 'https://aboutreact.com/wp-content/uploads/2018/08/star_filled.png';
this.Star_With_Border = 'https://aboutreact.com/wp-content/uploads/2018/08/star_corner.png';
this.animatedValue = new Animated.Value(0)
}
UpdateRating( key )
{
this.setState({ Default_Rating: key });
}
componentDidMount(){
this.animate()
}
animate(){
this.animatedValue.setValue(0)
Animated.timing(
this.animatedValue,
{
toValue: 1,
duration: 2000,
easing: Easing.linear
}
).start(() => this.animate())
}
render() {
let data = [{
"name": "Washington",
"population": 7694980
}, {
"name": "Oregon",
"population": 2584160
}, {
"name": "Minnesota",
"population": 6590667,
"color": {'r':223,'g':154,'b':20}
}, {
"name": "Alaska",
"population": 7284698
}]
let options = {
margin: {
top: 20,
left: 20,
right: 20,
bottom: 20
},
width: 350,
height: 350,
color: '#2980B9',
r: 50,
R: 150,
legendPosition: 'topLeft',
animate: {
type: 'oneByOne',
duration: 200,
fillTransition: 3
},
label: {
fontFamily: 'Arial',
fontSize: 8,
fontWeight: true,
color: '#ECF0F1'
}
}
let React_Native_Rating_Bar = [];
for( var i = 1; i <= this.state.Max_Rating; i++ )
{
React_Native_Rating_Bar.push(
<TouchableOpacity
activeOpacity = { 0.7 }
key = { i }
onPress = { this.UpdateRating.bind( this, i ) }>
<Image
style = { styles.StarImage }
source = { ( i <= this.state.Default_Rating ) ? { uri: this.Star } : { uri: this.Star_With_Border } } />
</TouchableOpacity>
);
}
const marginLeft = this.animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, 150]
})
return (
<View style={styles.container}>
<View>
<Text style={styles.title}>Merchant Dashboard</Text>
</View>
<View style = { styles.childView }>
{
React_Native_Rating_Bar
}
</View>
<Text style = { styles.textStyle1 }>
Rating for your shop :
{ this.state.Default_Rating } / { this.state.Max_Rating }
</Text>
<View style={styles.box}>
<Animated.Text
style={{
marginLeft,
color: 'green'}} >
Possitive Reviews!
</Animated.Text>
<Animated.Text
style={{
marginLeft,
color: 'red'
}}>
Negative Reviews!
</Animated.Text>
<View style={styles.btnStyle}>
<TouchableOpacity style={styles.FacebookStyle} activeOpacity={0.5}>
<Image
source={{
uri:
'https://image.flaticon.com/icons/png/512/8/8816.png',
}}
style={styles.ImageIconStyle}
/>
</TouchableOpacity>
<TouchableOpacity style={styles.FacebookStyle} activeOpacity={0.5}>
<Image
source={{
uri:
'https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_play_circle_outline_48px-512.png',
}}
style={styles.ImageIconStyle}
/>
</TouchableOpacity>
<TouchableOpacity style={styles.FacebookStyle} activeOpacity={0.5}>
<Image
source={{
uri:
'https://image.flaticon.com/icons/png/512/56/56616.png',
}}
style={styles.ImageIconStyle}
/>
</TouchableOpacity>
</View>
</View>
<View style={styles.container1}>
<Pie data={data}
options={options}
accessorKey="population"
margin={{top: 20, left: 20, right: 20, bottom: 20}}
color="#2980B9"
pallete={
[
{'r':25,'g':99,'b':201},
{'r':24,'g':175,'b':35},
{'r':190,'g':31,'b':69},
{'r':100,'g':36,'b':199},
{'r':214,'g':207,'b':32},
{'r':198,'g':84,'b':45}
]
}
r={50}
R={150}
legendPosition="topLeft"
label={{
fontFamily: 'Arial',
fontSize: 8,
fontWeight: true,
color: '#ECF0F1'
}}
/>
</View>
<View>
<Text style={styles.LinkStyle} onPress={ ()=> Linking.openURL('https://google.com') } >Click Here To view Suggetions for improvement of the shop.</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
container1: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f7f7f7',
},
childView:{
justifyContent: 'center',
flexDirection: 'row',
},
StarImage:{
width: 40,
height: 40,
resizeMode: 'cover'
},
textStyle1:
{
textAlign: 'center',
color: '#000',
marginTop: 15
},
title:{
fontSize: 23,
color: '#000'
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
box: {
marginTop: 10,
height:80,
width: 300,
backgroundColor: '#b2beb5',
},
btnStyle:{
justifyContent: 'center',
flexDirection: 'row',
},
btn2Style:{
alignItems: 'flex-end'
},
ImageIconStyle: {
padding: 10,
margin: 5,
height: 25,
width: 25,
resizeMode: 'stretch',
},
TextStyle: {
color: '#fff',
marginBottom: 4,
marginRight: 20,
},
SeparatorLine: {
backgroundColor: '#fff',
width: 1,
height: 40,
},
LinkStyle: {
color: '#E91E63',
textDecorationLine: 'underline'
},
});
In my case the error was due to react-native-d3multiline-chart which occured after upgrading react-native version from 0.54.6 to 0.59.1 because internally react-native-d3multiline-chart was using react-native-svg.
I solved this error by forking this repository and changing the react-native-svg version to 9.3.3 in package.json of react-native-d3multiline-chart.
Pointing to this updated commit id in my project package.json for react-native-d3multiline-chart solved this error for me.
I think you need to use arrow function. Like this,
onPress={() => this.UpdateRating.bind(this, i)}
If this not working, pls share your error log to understand error clearly.
I'm running into this exact issue (after a RN upgrade, 0.57.8 -> 0.59.1) and am almost certain is it because the react-native-pathjs-charts library is no longer maintained, and is pointing at an old / wrong version of react-native-svg.
While I haven't solved it yet (will update), my suspicion is that updating react-native-svg & updating the package.json of react-native-pathjs-charts to not explicitly use v~5.5.1 will get us in the right direction.
UPDATE: I was able to fix it (temporarily, will need to fork the charts repo) by manually updating the module's package.json to point at my own local react-native-svg module:
"dependencies": {
"lodash": "^4.12.0",
"paths-js": "^0.4.5"
},
"peerDependencies": {
"react-native-svg": "9.3.3"
},
Just make sure you're properly adding react-native-svg to your project.