After upgrading my project to React-Native 0.26, the app crashing with the following error :
"Super expression must either be null or a function, not undefined"
It crashes in the Switch.js file, which belongs to the React-Native-Material-Kit package.
Ahh, it's because React-Native is moving fast! Too fast in my option. In 25 we saw this warning:
Deprecations
Requiring React API from react-native is now deprecated - 2eafcd4 0b534d1
Instead of:
import React, { Component, View } from 'react-native';
you should now:
import React, { Component } from 'react';
import { View } from 'react-native';
And just one release later in 26 this is now a breaking change
You can try this codemod if you dare. I'm just doing a manual change.
Related
Hell, I'm trying to create a tab bar in my react native app, but after importing it, it appears it's always undefined. Has this component been deprecated? I still see it listed in the docs. https://facebook.github.io/react-native/docs/tabbarios.html
import React, { Component } from 'react';
import {
TabBarIOS
} from 'react-native';
export default class App extends Component {
render() {
return (
<TabBarIOS/>
);
}
}
I'm using react-native 0.59.3
Looks like this has been removed as part of a core cleanup effort. There doesn't appear to be any native alternative that also behaves correctly on tvos.
https://github.com/facebook/react-native/commit/02697291ff41ddfac5b85d886e9cafa0261c8b98
I've gone ahead and extracted TabBarIOS out into a native module for anyone looking for this.
https://github.com/modavi/NativeIOS
install instructions:
npm install git+https://github.com/modavi/NativeIOS#master
react-native link native-ios
The PropTypes from 'react-native' package has been deprecated and people are using this https://www.npmjs.com/package/prop-types package for prop validation now.
I'm just wondering how do we add validation for styles in the new prop-types package. I think the link above might fail to mention that.
The View.propTypes.style and Text.propTypes.style worked quite well but now deprecated. :(
Thanks for your time.
React Native now provides ViewPropTypes.style instead of View.propTypes.style. You can use it for validating styles like this:
import { ViewPropTypes } from 'react-native';
MyComponent.propTypes = {
style: ViewPropTypes.style
};
I'm trying to extend the built in react native TextInput component with a method to return the text selection rectangles for a given range. I followed this pattern here but I'm stuck at this step
import React, { Component } from 'react';
import {AppRegistry, StyleSheet, Text, View, NativeModules } from 'react-native';
var TextViewManager = NativeModules.TextViewManager;
TextViewManager is always null. Does anyone know why or how to get access to TextViewManager so I can call the method I've added to it?
I've tried accessing other managers (eg. WebViewManager) in the same way and it's worked a treat. It just seems like TextViewManager is a special case.
Ok I got itworking and it was because I didn't run react-native run-ios after changing my TextViewManager category source in Xcode. I mistakingly thought react-native log-ios built, installed and logged but it only logs.
I'm coming from Ionic 2 where I write my code once, and it runs everywhere.
According to this page https://facebook.github.io/react-native/docs/platform-specific-code.html "When building a cross-platform app, you'll want to re-use as much code as possible."
How can I "reuse" code across iOS and Android in ReactNative? In the starter app I see two files: index.ios.js and index.android.js. Is there something like index.js that I can use for sharing across platforms?
It seems like there should be one file for shareable code, since that web page mentioned above also shows how you can use the Platform module to check what OS you are on.
I realize that sometimes you need different behavior on different platforms, but, assuming that my app is simple enough, and my code ends up exactly the same on both platforms, do I have to copy/paste from one to the other? How can I pull same-functionality into it’s own file to be shared on both platforms?
What am I missing?
Thanks!
Here's what you can do. Create a file say main.js that will act as your root page.
main.js
import React, { Component } from 'react';
import { Text } from 'react-native';
export default class Main extends Component {
render() {
return (
<Text>Hello world! from both IOS and Android</Text>
);
}
}
Now on your index.android.js and index.ios.js import that main file and register your Main component as root using AppRegistry.
index.android.js and index.ios.js
import React from 'react';
import {
AppRegistry
} from 'react-native';
import Main from './main';
AppRegistry.registerComponent('DemoApp', () => Main);
if you run react-native run-android and react-native run-ios the Main component will be rendered for both the platforms.
All of the Components with No IOS and Android suffix works for both platforms. Like Navigator works for both ios and android but NavigatorIOS works only for ios. So you'll have to make sure that you're using the cross platform components.
If you need to use platform specific components, then you can use platform detection login to do so:
import { Platform } from 'react-native';
if(Platform.OS === 'ios').....
or
if(Platform.OS === 'android')...
Hai i am trying to show alert message, i tried different ways like alert,AlertIOS,Alert.alert
AlertIOS is working in IPhone but not working in android and alert also same
In Docs i saw that Alert.alert will work for both Android an IOS,But i got an error like undefined is not an object(evaluating 'Alert.alert')
I wrote like this:
Alert.alert('Alert', 'email is not valid, Please enter correct email', [{text: 'Ok'}]);
I got an error like this:
Any one give suggestions that how to show the alert in Android and IOS in react-native
Any help much appreciated
Are you sure you are including it from the correct path?
I get the same error when I imported Alert from react library and NOT react-native.
so the working thingie is:
import React, { Component } from 'react';
import { View, Alert } from 'react-native';
and the non-working one was:
import React, { Component, Alert } from 'react';
import { View } from 'react-native';
I think you forget to import Alert from react-native
import { Alert } from 'react-native';
and then you can show Alert like this
Alert.alert("Alert message");
We just need to import it correctly:
import { Alert } from 'react-native';
Then use it in your project as written in your code and it will work for both platforms :
Alert.alert('Alert', 'email is not valid, Please enter correct email', [{text: 'Ok'}]);
refer: https://facebook.github.io/react-native/docs/alert