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
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 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.
I'm trying to use react-native-picker-select package. and #react-native-picker/picker is a dependency according to their docs. but..
After adding this package to my RN app, it builds without error but the app crashes.
Looked for issues on their repo, but i dont think there are resources for the fix. Already created an issue also on their repo.
Add a <Text></Text> component after the <Picker></Picker> component, inside the parent <View></View> component of the <Picker></Picker> component, just like in the code snippet below:
<View style={{flex: 1, borderWidth: 1, borderColor: '#0f0'}}>
<Picker
style={{...styles.itemPicker, color: theme.TEXT}}
mode="dropdown"
selectedValue={unit_elevation}
onValueChange={(value) => this.changeUserPreferences('unit_elevation', value)}
>
<Picker.Item label={messages.meters} value="M" />
<Picker.Item label={messages.feet} value="FT" />
</Picker>
<Text style={{width: '100%', height: 60, position: 'absolute', bottom: 0, left: 0}}>{' '}</Text>
</View>
For me, the issue was caused because I was passing a label integer value in Picker.Item component.
By passing a string value, the issue was fixed.
After hours of figuring out, instead of using #react-native-picker/picker... use #react-native-community/picker instead even tho they said it's already deprecated.
I've finally successfully run my app while using react-native-picker-select and #react-native-community/picker.
From my testing it seems like if you're running on Expo 34 or previous, you are not required to provide the extra dependency in most cases, but the #react-native-community/picker package works as well.
If you have upgraded to Expo SDK 35 or beyond however, the additional dependency is required and only #react-native-picker/picker will work correctly and not crash.
I'm trying to run my application from Xcode version 10.3 and react native version 0.57.8
open a terminal Running Metro Bundler on port 8081. and it's done but the simulation did not bundle project brings an older version.
I tried to delete node_modules again install and same way for pod file but it's still not working also I tried clear bundle but still not bundle my project?
any idea?
Try adding overflow: 'hidden' as below
const SCREEN_WIDTH = Dimensions.get("window").width;
const SCREEN_HEIGHT = Dimensions.get("window").height;
<View style={{ height: SCREEN_HEIGHT , width: SCREEN_WIDTH ,overflow:'hidden' }}>
<WebView
source={{ uri: 'https://github.com/facebook/react-native' }}
scalesPageToFit={true}
/>
</View>
As many others before me, I'm looking for the way to customize expo android's theme colors and styles in order to customize native components styles like DatePicker.
I found a lot of posts explaining the same old thing: "Update your style the native android way!"
Ok then, but my React native project doesn't have any "res/values/styles.xml" and so on. Creating them from scratch has no effect.
There's one step that I'm deadly missing here, but which one?
My repo looks a bit like this actually:
.expo
/* a bunch of folders containing my custom js */
App.js
app.json
babel.config.js
package.json
package-lock.json
You can use Style Sheet.
Create a new StyleSheet:
const styles = StyleSheet.create({
container: {
borderRadius: 4,
borderWidth: 0.5,
borderColor: '#d6d7da',
},
title: {
fontSize: 19,
fontWeight: 'bold',
},
activeTitle: {
color: 'red',
},
});
Use a StyleSheet:
<View style={styles.container}>
<Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
</View>
this is detail link
To configure a style, such as Android.xml, you can separate it by doing expo eject.
When you do expo eject, you get Android folder.
about `expo eject' link