I'm trying to use propTypes for my RN application, but it never seems to be enforced. My component looks something like this:
import React, { Component } from "react";
import { Text } form "react-native";
export class Table extends Component {
render() {
return (<Text>...</Text>);
}
}
Table.propTypes = {
data: React.PropTypes.string,
};
This didn't warn I passed a number into the component from another file like this:
<Table data= { 2000 } />
So I tried making propTypes a static property of Table because I saw some stuff about ES6 working with propTypes that way:
import React, { Component } from "react";
import { Text } form "react-native";
export class Table extends Component {
static propTypes = {
data: React.PropTypes.string,
};
render() {
return (<Text>...</Text>);
}
}
Then I tried adding a plugin to my .babelrc file
"plugins": [
"transform-class-properties",
]
I've tried making the prop required
static propTypes = {
data: React.PropTypes.string.isRequired,
};
I've even tried changing the export class Table... to export default class Table... with no luck. I've tried every combination of the methods listed above to no avail. What am I missing?
The problem seemed to go away by itself when I was fiddling with the code. It may have been an env issue like #asaf david suggested, I'm not really sure. I tried to go back and change stuff back to see if I could reproduce, but I couldn't :(. I'm sorry to anyone searching this in the future.
Related
I found it a little time-consuming to figure out which device was using my app, as the documentation doesn't have many clear examples and other posts are lacking as well.
You can find that getDeviceTypeAsync() should get the device type but not how to read the result.
Here is a simple solution put together from a few pieces of public code:
import React, { useEffect } from "react";
import { StyleSheet, Text, View } from "react-native";
import { DeviceType, getDeviceTypeAsync } from "expo-device";
export default function DevelopmentScreen() {
const deviceTypeMap = {
[DeviceType.UNKNOWN]: "unknown",
[DeviceType.PHONE]: "phone",
[DeviceType.TABLET]: "tablet",
[DeviceType.DESKTOP]: "desktop",
[DeviceType.TV]: "tv",
};
useEffect(() => {
getDeviceTypeAsync().then((deviceType) => {
console.log(deviceTypeMap[deviceType]);
});
}, []);
return null
}
Cheers!
I can't figured out this warning . I examined import and exports but still I can't comprehend what warning means
Require cycle: src\components\index.ts -> src\components\LoadNavigation.tsx -> src\components\index.ts
//index.ts
export { default as LoadAssets } from "./LoadAssets";
export { default as Loading } from "./Loading";
export { default as LoadNavigation } from './LoadNavigation';
export { default as SafeAreaView } from "./SafeAreaView";
export { SocialIcon, SocialIconButton, SocialIcons } from "./SocialAuth";
//LoadNavigation.tsx
import { AuthenticationNavigator } from "../navigation/auth-navigation";
import { useTypedSelector } from "../redux";
import { Onboarding } from "../screens";
import { AppRoutes } from "../types/navigation-type";
import Loading from "./Loading";
import { useIsFirstLaunch } from "./../hooks/useIsFirstLaunch";
How can I fix this warning. Thanks for any help.
I'm making a webpage using Nuxt and I would like to make a class and use it in one of my .vue files. I've tried using an import: import Card from "~/assets/mylib/Card.js" but that doesn't work. Not sure how to access my Card.js file inside of a .vue file.
index.vue
import Card from "~/assets/mylib/Card.js"
created() {
let card = new Card("blue")
}
Card.js
class Card {
constructor(color) {
this.color = color
}
}
error:
_assets_mylib_Card_js__WEBPACK_IMPORTED_MODULE_4___default.a is not a constructor
Modify Card.js as follows:
export default class Card {
constructor(color) {
this.color = color
}
}
Then import it from within index.vue as follows:
import { Card } from "~/assets/mylib/Card"
you have to update your Card.js like beow
export class Card {
constructor(color) {
this.color = color
}
}
and import in vue file like below
import { Card } from "~/assets/mylib/Card"
I have probably very profoundly simple question: how to invoke methods located in components from store.js, for instance I want a toast popup from store mutation. Any ideas?
The $bvToast can be found in BToast export. You can import it to use it.
import { BToast } from 'bootstrap-vue'
Example Class
import { BToast } from 'bootstrap-vue'
class uiUtils
{
showToast(message : string,title : string){
let bootStrapToaster = new BToast();
bootStrapToaster.$bvToast.toast(message, {
title: title,
toaster: "b-toaster-top-right",
solid: true,
appendToast: false
})
}
}
export default new uiUtils();
The documentation does show the individual component exports at the bottom of the page and can be found here Bootstrap Vue Documentation.
Good day, I'm using react native. I need to use two exports in a folder, but I get this error when using it. What is the problem?
import history from "./components/usrFirst";
import { withRouter } from "react-router-dom";
class LoginForm extends Component {
...
}
export default withRouter(LoginForm);
export default !firebase.apps.length ? firebase.initializeApp(config) : firebase.app();
As the error states, you can't have multiple default exports. You can have one, and then used a named export for the other.
const FirebaseComponent = !firebase.apps.length ? firebase.initializeApp(config) : firebase.app();
export {
FirebaseComponent
}
export default withRouter(LoginForm)
Then you would use it like so
import LoginForm, { FirebaseComponent } from 'foo.js'