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.
Related
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.
Does anyone know how to configure stylelint for react native (typescript) and StyleSheet?
src/sample.tsx
import React from "react";
import { StyleSheet, Text, View } from "react-native";
const App = () => (
<View style={styles.container}>
<Text style={styles.title}>React Native</Text>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
backgroundColor: "#eaeaea"
},
title: {
marginTop: 16,
paddingVertical: 8,
borderWidth: 4,
borderColor: "#20232a",
borderRadius: 6,
backgroundColor: "#61dafb",
color: "#20232a",
textAlign: "center",
fontSize: 30,
fontWeight: "bold"
},
example: {
unknown: "property"
}
});
export default App;
.stylelintrc.js
module.exports = {
"plugins": ["stylelint-react-native"],
"rules": {
"react-native/css-property-no-unknown": true
}
}
When I run stylelint '/src/**/.tsx'*, I got error like "you need use postcss". Ok, I found this #stylelint/postcss-css-in-js package, but no matter how I connect it, nothing works.
In the best case, the command runs without errors, although I added a property of which does not exist.
PS. stylelint version - 14, react native version - 0.66.4
You can use the #stylelint/postcss-css-in-js custom syntax.
test.ts
import React from "react";
import { StyleSheet, Text, View } from "react-native";
const App = () => (
<View style={styles.container}>
<Text style={styles.title}>React Native</Text>
</View>
);
const styles = StyleSheet.create({
container: {
color: "#eaeae",
background: "linear-gradient(#e66465, #9198e5)",
},
title: {
fontWeight: "bold",
},
});
export default App;
.stylelintrc.json (with three example rules turned on)
{
"customSyntax": "#stylelint/postcss-css-in-js",
"rules": {
"color-no-invalid-hex": true,
"font-weight-notation": "numeric",
"function-disallowed-list": ["linear-gradient"]
}
}
output
% npx stylelint "test.ts"
test.ts
12:12 ✖ Unexpected invalid hex color "#eaeae" color-no-invalid-hex
13:17 ✖ Unexpected function "linear-gradient" function-disallowed-list
16:17 ✖ Expected numeric font-weight notation font-weight-notation
You may want to use both Stylelint and the eslint-plugin-react-native plugin for ESLint together as they are complementary tools that do different things.
The ESLint plugin has 7 rules. Only one of which, sort-styles, overlaps with Stylelint. The other rules don't touch on the actual CSS inside your object notation. So you can use that plugin and then use Stylelint to spot possible errors and limit what language features are used in your CSS.
I found this #stylelint/postcss-css-in-js package, but no matter how I connect it, nothing works
You may have encountered a bug in the package. It is a monolithic package that tries to support every flavour of CSS-in-JS. It'll likely be deprecated in the future in favour of leaner packages dedicated to specific CSS-in-JS libraries, the first of which is postcss-lit.
That's what happens when you recycle. In fact, we shouldn't use the stylelint, because we have a typescript. Just use eslint for this. For example: https://github.com/Intellicode/eslint-plugin-react-native
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 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
I'm trying to use react-native-image-picker, but I'm getting the error: NativeModule.ImagePickermanager is null.
import React, { Component } from 'react';
import { Text, View, StyleSheet, Alert, PixelRatio, Image } from 'react-native';
import ImagePicker from 'react-native-image-picker';
...
handleChoosePhoto = () => {
const options = {
noData: true,
};
ImagePicker.launchImageLibrary(options, response => {
if (response.uri) {
this.setState({ photo: response });
}
});
};
...
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
{this.state.photo && (
<Image
source={{ uri: this.state.photo.uri }}
style={{ width: 300, height: 300 }}
/>
)}
<Button title="Choose Photo" onPress={this.handleChoosePhoto} />
</View>
I tried to run react-native link react-native-image-picker. When I run this command, nothing happens. It does not show anything in the terminal. I'm using IOS simulator.
I have been trying to resolve this error from last 8 hours but couldn't succeed. Please use ImagePicker from expo and here is its link. https://docs.expo.io/versions/latest/sdk/imagepicker/
It will resolve your error.
I also have the same problem . This is what worked for me.
Unistall the latest version
npm uninstall react-native-image-picker
Installed version 0.28.0
npm install react-native-image-picker#0.28.0 --save
react-native link react-native-image-picker