I installed react-native and the global cli.
But when I run npm start, I'm having this error:
Cannot find module 'react-native'
Here is my App.js file. Thank you...
import React from "react";
import { SafeAreaView, View, Text } from "react-native";
function App() {
return (
<SafeAreaView
style={{
flex: 1,
alignItems: "center",
justifyContent: "center",
}}
>
<View
style={{
flex: 1,
alignItems: "center",
justifyContent: "center",
}}
>
<View style={{ flex: 3 }}>
<Text>Kayıt Listesi</Text>
</View>
</View>
</SafeAreaView>
);
}
export default App;
Execute the following steps:
Remove your node_modules directory.
Run npm install.
Run npm start.
The command npm install install everything your project needs into the node_modules directory.
If this does not help, try to add react-native individually by executing the command npm install react-native --save.
It is usually a good idea to initialize a new project using npm init, which creates a package.json file in which npm stores names and versions of all installed packages.
Edit: After we have investigated the whole stack trace it is apparent that we need to install react-native-web via the command npm install react-native-web.
Related
I have problem with lottie-react-native.
import React from 'react';
import { StyleSheet, View } from 'react-native';
import LottieView from 'lottie-react-native';
export default function App() {
return (
<View style={styles.animationContainer}>
<LottieView
autoPlay
style={{
width: 200,
height: 200,
backgroundColor: '#eee',
}}
// Find more Lottie files at https://lottiefiles.com/featured
source={require('./assets/gradientBall.json')}
/>
</View>
);
}
const styles = StyleSheet.create({
animationContainer: {
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
flex: 1,
},
buttonContainer: {
paddingTop: 20,
},
});
and it throws error :
Error: Requiring module "node_modules/lottie-react-native/lib/index.js", which threw an exception: Error: Requiring unknown module "2236". If you are sure the module exists, try restarting Metro. You may also want to run `yarn` or `npm install`.
I've tried restart metro and run yarn, but it still got errors.
Is there any way to resolve this error?
To resolve this issue just remove your node_modules and reInstall the Lottie npm package using this command:
yarn add lottie-react-native lottie-ios#3.4.0
After that reset your metro cache using this command:
npx react-native start --reset-cache
Hope it will solve your issue.
I'm newly developing in react native.
To start I used npx react-native init hello_world --template react-native-template-typescript to create the basic code and then I replaced app.tsx with this code:
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
const App = () => {
return (
<View style={styles.helloWorldContainer}>
<Text style={{fontSize: 18}}>Hello, world!</Text>
</View>
);
};
const styles = StyleSheet.create({
helloWorldContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
export default App;
And these are the errors that I get when I am in debug mode:
If I remove the style of the component Text the error disappears.
My question is how can I fix the error while keeping the style in the component Text.
I saw that chrome has a lot of errors, exist another better debugger?
As what Lucas Azambuja Santos referred to, it's a bug in react-native 0.65.* check out the new issue https://github.com/facebook/react-native/issues/32197
it should be fixed with 0.66, to workaround downgrade to 0.64.x and rebuild:
cd android && ./gradlew clean cleanBuildCache
I saw this article:
https://expo.canny.io/feature-requests/p/react-native-fast-image
I install expo react native fast image. So I want to use it but I get this err message:
Invariant Violation: requireNativeComponent: "FastImageView" was not found in the UIManager.
Code:
...
import FastImage from 'react-native-fast-image';
...
{ /* Modal Shipping */ }
<Modal
isVisible={modalView}
swipeDirection="down"
swipeThreshold={20}
propagateSwipe={true}
backdropTransitionOutTiming={0}
>
<View style={{ justifyContent: 'center', padding: 12, alignItems: 'center', backgroundColor: '#fff', borderRadius: 12, padding: 12, borderWidth: 4, borderColor: '#ac67f9'}}>
<FastImage source={{uri: 'https://i.ebayimg.com/thumbs/images/g/QSIAAOSw3gNggE1r/s-l225.webp'}} resizeMode="contain" />
</View>
</Modal>
Is there any new option for this? In expo project, "FastImageView was not found in the UIManager." still occurs.
I've managed to install react-native-fast-image to my expo project. Here is what I've done:
Make sure you run the eas build -p all --profile development Ensure
eas-cli is installed prior to run this script.
After running it, you will have an eas.json file in the root dir of
the project.
The next step is to run expo run:ios or expo run:android, then
you will notice the generated native folders (android, ios) in the
root dir again...
All should work just fine after these steps.
Use this package it is super fast
expo fast image
I have added the package: react-native-community/blur in my app. And tried running it. But it throws an error while running as mentioned below. Any fix to it or any solution??
Error:"Invariant Violation: requireNativeComponent: "BlurView" was not found in the UIManager".
I have tried re-installing pods, also have checked with my yarn versions.
import React, { Component } from "react";
import { View, Image, Text, findNodeHandle, StyleSheet } from "react-native";
import { BlurView } from "#react-native-community/blur";
export default class Menu extends Component {
constructor(props) {
super(props);
this.state = { viewRef: null };
}
imageLoaded() {
this.setState({ viewRef: findNodeHandle(this.backgroundImage) });
}
render() {
return (
<View style={styles.container}>
<Text>Hi, I am some unblurred text</Text>
<BlurView
style={styles.absolute}
viewRef={this.state.viewRef}
blurType="light"
blurAmount={10}
/>
<Image
ref={img => {
this.backgroundImage = img;
}}
//source={{ uri }}
source={{uri: 'https://facebook.github.io/react-native/img/tiny_logo.png'}}
style={styles.absolute}
onLoadEnd={this.imageLoaded.bind(this)}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
justifyContent: "center",
alignItems: "center"
},
absolute: {
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0
}
});
flow this instruction:
Close your app
run it again with command: react-native run-ios
Note: Do not use npx or any other command, just run react-native run-ios
First, close your app.
if you are on android, open the android directory of your project in Android Studio and then sync your project with Gradle ( it may happen automatically but if it doesn't then do so yourself).
if ios, run npx pod-install or cd into the ios folder and run pod install.
Re-run your app. if android then run npx react-native run-android. if ios, run npx react-native run-ios
in react native 60 >= on functional component
npm install --save #react-native-community/blur
then
react-native unlink #react-native-community/blur
react-native-fontawesome was working just fine for me at version 5. I upgraded to 6.0.1 but downloading the new font-awesome files, adding the new tff files into the assets/fonts folder, running react-native link react-native-fontawesome.
I closed my simulators and ran react-native run-ios and see that the icons that worked before are now question marks. They don't show up on Android either
Firstly you need to install the dependency and link the library by the following ways...
Run the following command to install the dependency.
npm install react-native-vector-icons --save
Linking of Dependency...
After the updation of React Native 0.60, they have introduced the auto-linking feature means we do not require to link the library but they have also mentioned that some libraries need linking and react-native-vector-icons is one of those cases. So for that, we need to link the library using.
react-native link react-native-vector-icons
And copy the given App.js file that shows below.
/*Example of React Native Vector Icon*/
import React, {Component} from 'react';
//import React
import {Platform, StyleSheet, Text, View} from 'react-native';
//import all the basic components
import Icon from 'react-native-vector-icons/FontAwesome';
//import vector icons
type Props = {};
export default class App extends Component<Props> {
render() {
Icon.getImageSource('user', 20, 'red').then((source) => this.setState({ userIcon: source }));
return (
<View style={styles.container}>
<Text>Example of Vector Icon</Text>
<View style={{marginTop:16, marginBottom:16, justifyContent:'center', alignItems:'center', textAlign:'center'}}>
<Text><Icon name="rocket" size={'{30}'} color="#900" /></Text>
{/*Icon Component*/}
<Icon name="rocket" size={30} color="#900" />
</View>
<View style={{marginTop:16, marginBottom:16}}>
{/*Icon.Button Component*/}
<Icon.Button name="facebook" backgroundColor="#3b5998" onPress={()=>alert("Login with Facebook")}>
Login with Facebook
</Icon.Button>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
or you can follow the following link...
https://aboutreact.com/react-native-vector-icons/