I've narrowed this down to find that the error occurs only when I try to pass the <Moment /> component as described in the React-Moment documentation. So far, I haven't found any explanations specific to this package and hope someone out there has had a similar issue!
The docs spell out a usage like this:
import Moment from 'react-moment';
// then within the class component:
return (
const dateToFormat = '1976-04-19T12:59-0500';
<Moment>{dateToFormat}</Moment>
);
And I'd like to take a raw date string like this:
<Text>Created {this.props.postDate}</Text>
which is stored thusly: "postDate": "2019-01-31T04:13:31.224Z"
but so far, anytime I add <Moment>{this.props.postDate}</Moment>, whether that be outside of or inside of the existing <Text /> block I get red:
It's in the documentation:
https://github.com/headzoo/react-moment#usage-with-react-native
<Moment element={Text}>{dateToFormat}</Moment>
Related
Kinda new to react/react-native.
I have a list component that contains an array of items in state
The list component sometimes query the server for information, and according to the information he gets from the server, he should update some things in the items state.
For testing purposes, I tried to do the something like the following:
componentWillMount() {
this.setState({posts: [<Item key={0} ... >, <Item key={1} ... >]}
}
...
testFunc() {
... // get data from server
this.state.posts[0].updateNewInfoFromServer(new_info);
}
But it didn't work, and it printed that the updateNewInfoFromServer function of my item component is undefined (it did the same when I tried to change it to any other function of my item component. It's pretty weird to me that I can't access the component's functions but I am able to access its props).
I also tried to add refs to the Items inside the posts array and then try to call this._myref.updateNewInfoFromServer inside the testFunc(), but I got exactly the same error..
What is the "react" way to solve this problem?
Thanks a lot!
In order to retrieve the equipment type I am using a that will retrieve the equipment model and then another that references the equipment type using the equipment model's field "typeID" to retrieve the equipment type.
However it displays the following warning:
Warning: Failed prop type: Invalid prop translateChoice of type
boolean supplied to ReferenceField, expected function.
The image represents the data model (an equipment has an equipment model, and an equipment model has an equipment type)
I found a better solution is kinda of an hack but seems to be more efficient.
Taking the question example where in order to get equipmentType is only needed <ReferenceField>, it would be something like this:
const EquipList = ({...props}) => {
<List {...props}>
<Datagrid>
<ReferenceFieldController label="Equipment Type" reference="equipmentModel" source="modelID" linkType={false}>
{({referenceRecord, ...props}) => (
<ReferenceField basePath="/equipmentModel" resource="equipmentModel" reference="equipmentType" source="typeID" record={referenceRecord || {}} linkType="show">
<TextField source="name" />
</ReferenceField>
)}
</RefenceFieldController>
</Datagrid>
</List>
}
In the example above <ReferenceFieldController> fetches the equipmentModel of equipment, as like <ReferenceField>. Label is needed because RA uses the first <ReferenceField> to show the column header in <Datagrid>, if you use internationalization you should apply translate function to the correct resource on this prop.
<ReferenceController> fetches the record and passes it as referenceRecord to a child function that will render the component for field presentation. Instead of presenting the field component you render a <ReferenceField> to fetch the nested relation and next you show the field. Since <ReferenceFieldController> only passes controller props to its child and the props of field component don't do what you want in the nested relation, you have to explicit pass them to <ReferenceField>. You need to pass record of <ReferenceField> as referenceRecord || {} because the initially the referenceRecord is not fetched yet and <ReferenceField> doesn't work with record as null.
Setting the linkType of <ReferenceFieldController> to false makes it not render a <Link> component that would redirect the user to an incorrect route.
Not a perfect fix, but to get around the translateChoice issue, you can create a wrapper and pluck out that prop to prevent it from being passed.
const SubReference = ({ translateChoice, children, ...props }) => (
<ReferenceField {...props}>{children}</ReferenceField>
);
While troubleshooting this, I was also receiving an error about nested a tags. I was able to silence the error by setting the linkType prop to false in the parent ReferenceField
<ReferenceField source="item_id" reference="list" linkType={false}>
<SubReference source="id_to_reference_from_list" reference="second_list">
<TextField source="name" />
</SubReference>
</ReferenceField>
I have the same problem and I think this is an actual bug. I commented on the corresponding github issue https://github.com/marmelab/react-admin/issues/2140
I looked into the code for ReferenceField and as far as I understood this is an actual bug. ReferenceField expects a function for the translateChoice property, but internally hands a boolean to ReferenceFieldView.
If you nest one ReferenceField into another the inner one receives false as translateChoice property and rightfully complains that it is a boolean and not a function.
I am using a styles file to handle everything relating to that within my application. I am trying to set a style based off of a variable that is previously declared however I am unsure of the syntax needed.
render() {
const { params } = this.props.navigation.state;
return (
<View style={styles.${params.key}}>
</View>
);
}
The line in question is the style={styles.${params.key}} but that line is not properly compiling. Not sure on the correct syntax of this. Thanks.
I think it's going to be something like that:
styles[params.key]
New JavaScript and React Native user here. This seems so simple it's embarrassing to ask, but I'm having no luck finding related documentation or examples.
I'm trying to set up a view from a custom component class, but I can't figure out how to avoid a SyntaxError when I assign the view a style and props. Here's the line with the error:
<MyView {myWidth=500}, style={backgroundColor: 'blue'}>
</MyView>
The exact Error is : "SyntaxError App.js: Unexpected token, expected ... (144:23)"
I know 144 is the line number, but I'm not sure what the significance is of the number 23.
Here is the custom component class:
class MyView extends React.Component {
render() {
return (
<View
style={{
width: this.props.myWidth,
}}
>
</View>
);
}
}
Can you please help me fix the error? I would also greatly appreciate a link to applicable React Native documentation that I missed.
It's:
<MyView myWidth={500}, style={{backgroundColor: 'blue'}}></MyView>
So myWidth is key (or prop) where 500 is the value, and style has an Object with key and value for styling.
and of course sorry if the question is somewhat dumb.
In the app I'm developing a user should be able to swipe on the TextInput. Since TextInput only listens to taps I used this gist: https://gist.github.com/MikeShi42/87b65984f0a31e38d553cc056fcda017
(BTW #Michael Shi thanks a ton)
However, once I changed TextInput to SlideTextInput the Clear button ceased to work.
clearInput() {
this.setState({text: ''});
}
render() {
return (
<Button name='clear' action={this.clearInput} />
<SlideTextInput
style={styles.input}
ref='input'
onChangeText={(text) => this.setState({text: text})}
placeholder={this.state.placeholder}
value={this.state.text}
multiline={true}
returnKeyType='done'
blurOnSubmit={true} />
)
}
I also tried this.refs.input.setNativeProps({text: ''}); instead of just passing a new value prop (that should be — and was — sufficient for normal TextInput), and calling forceUpdate(), but again to no avail. I don't see much changes in SlideTextInput.js compared to the original TextInput component, but I must be missing something that would explain such bad behaviour?
UPD: the answer was pretty simple in the end. Instead of linking the component to its native counterpart (ref={this._setNativeRef}) like original TextInput does, SlideTextInput has it ref'ed to a string (ref="input"). I changed it back and voila.
Looking at the code it seems that the value props is not being sent to the original TextInput. It is extending the TextInput but it is returning another component without sending the value prop.
Try:
this.refs.input.setText('');
The answer was pretty simple in the end. Instead of linking the component to its native counterpart (ref={this._setNativeRef}) like original TextInput does, SlideTextInput has it ref'ed to a string (ref="input") (it's not about props in my code it's about SlideTextInput.js file itself). I changed it back and voila.