I am unable to import and successfully use ActivityIndcator without getting the following screen.
I am not doing anything special and my code looks like the following
import { View, Text, ActivityIndicator } from 'react-native';
...
...
render(){
return (
<ActivityIndicator animating={true} />
)
}
If I change this to ActivityIndicatorIOS it works perfectly fine.
My React Native and React Native CLI versions are the following
react-native-cli: 0.2.0
react-native: 0.27.2
Full Stack Trace Is
import { ActivityIndicator, StyleSheet, View } from 'react-native';
You should update to 0.28.0 or later since cross platform ActivityIndicator was added in React Native 0.28.0:
Add cross platform ActivityIndicator (26e8426) - #janicduplessis
Related
the error above is shown in this import
import React from 'react';
import {
View,
Text,
TouchableOpacity,
Dimensions,
StyleSheet,
StatusBar,
Image
} from 'react-native';
import * as Animatable from 'react-native-animatable';
import LinearGradient from 'react-native-linear-gradient';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { useTheme } from '#react-navigation/native';
this is the import statement bringing the error
Try:
For iOS
cd ios
pod install
rebuild project
For Android:
Uninstall application in Android emulator
cd Android
./gradlew clean && ./gradlew cleanBuildCache
npm run android
It worked but first, I need to upgrade my Java version.
Thanks.
*** getting white screen while ***
I install React Native with Expo.
When I start the app its work normally.
After I play for a while with NativeBase UI, it gave me this white screen. Any help.
import { StatusBar } from "expo-status-bar";
import React from "react";
import Index from "./src/Home";
import { NativeBaseProvider, Box } from "native-base";
export default function App() {
return (
<NativeBaseProvider>
<Index />
</NativeBaseProvider>
);
}
Here is the white screen
here is the code
As I know about it, This checks and gives warnings for React-Native code and its lifecycles.
I read about it from What is StrictMode in react?
How can I use it in react native ?
Here is a simple example to use StrictMode in React Native
StrictMode can be directly imported from React and can used like wrapping up View inside it.
import React, {Component, StrictMode} from 'react';
import {View} from 'react-native';
class Example extends Component {
render() {
return (
<StrictMode>
<View />
</StrictMode>
);
}
}
export default Example;
I use to set the main file of my project using AppRegistry.registerComponent(), but projects created with Expo does not support it.
import { AppRegistry } from 'react-native';
import App from './src/App';
AppRegistry.registerComponent('my App', () => App);
Then, I use src/App.js as my main file. How can I do it using Expo?
Thanks
Straight from React Native docs facebook.github.io/react-native/docs/appregistry
AppRegistry is the JS entry point to running all React Native apps. App root components should register themselves with AppRegistry.registerComponent, then the native system can load the bundle for the app and then actually run the app when it's ready by invoking AppRegistry.runApplication.
In other words, since Expo isn't a complete real app because it's running on your device Expo app, doesn't have many methods available for you from react-native. Read Expo's docs for more information.
You only need on your App.js:
import React from 'react';
import { View, Text } from 'react-native';
export default () => (
<View>
<Text>Some Text</Text>
</View>
);
Check out this snack: #abranhe/stackoverflow-56694295
I wonder how I can save the value from qrcode scanner used in React Native and show the value to another page automatically. Thus, once the qrcode has been scanned, it will be redirected automatically to another page.
Is it possible to use React Navigation?
You can use react-native-qrcode-scanner the library to create this type of functionality.
react-native-camera is a dependency for this package that you'll need to add to your project. To install, run the following commands:
npm install react-native-camera --save
react-native link react-native-camera
After that install and link react-native-qrcode-scanner by the following commands:
npm install react-native-qrcode-scanner --save
react-native link react-native-qrcode-scanner
react-native link react-native-permissions
Here is a sample code for QR scanner
import React, {Component} from 'react';
import {StyleSheet, Text, View, AppRegistry, TouchableOpacity, Linking} from 'react-native';
import QRCodeScanner from 'react-native-qrcode-scanner';
export default class App extends Component {
onSuccess(e) {
//here you can do whatever you want to do on a successful scan
alert(e.data);
}
render() {
return (
<View style={{flex:1, justifyContent: 'center',}}>
<QRCodeScanner
showMarker={true}
onRead={this.onSuccess.bind(this)}
/>
</View>
);
}
}
If have face any difficulty in installation you can visit this link: https://www.npmjs.com/package/react-native-qrcode-scanner