When using lottie in expo and react-native, all animations work on ios however crash the app on android. Is there something special for android I am missing?
I have created a new project and duplicated the issue by coping the code from the docs here
import React from 'react';
import { Button, StyleSheet, View } from 'react-native';
import LottieView from "lottie-react-native";
export default class App extends React.Component {
componentDidMount() {
this.animation.play();
// Or set a specific startFrame and endFrame with:
// this.animation.play(30, 120);
}
resetAnimation = () => {
this.animation.reset();
this.animation.play();
};
render() {
return (
<View style={styles.animationContainer}>
<LottieView
ref={animation => {
this.animation = animation;
}}
style={{
width: 400,
height: 400,
backgroundColor: '#eee',
}}
source={require('./assets/gradientBall.json')}
// OR find more Lottie files # https://lottiefiles.com/featured
// Just click the one you like, place that file in the 'assets' folder to the left, and replace the above 'require' statement
/>
<View style={styles.buttonContainer}>
<Button title="Restart Animation" onPress={this.resetAnimation} />
</View>
</View>
);
}
}
If you are using Expo, you can't use Lottie 3 Files. From the expo api reference (https://docs.expo.io/versions/latest/sdk/lottie/):
"
Known Issues:
The Lottie SDK is currently considered to be under Expo's "DangerZone" because it's implementation is still in Alpha.
Importing Lottie 3 files causes the previewer to crash without a visible error, because Expo relies on lottie-react-native v2.
"
Run Yarn add lottie-react-native#3.0.3 or npm install lottie-react-native#3.0.3
Related
I want to develope a pdf printing app in React Native.
In preview page, I should show a pdf file in a view.
I tried this tutorial https://www.pdftron.com/blog/mobile/how-to-build-a-pdf-viewer-react-native/ but when I put react-native link react-native-view-pdf I get error unknown command 'link'.
So, I ignored this command and tried npx react-native run-android but I got error.
The emulator shows red screen with error can't find module "3"...
This is the react native code in that tutorial I tried.
import PDFView from 'react-native-view-pdf';
const resources = {
file: Platform.OS === 'ios' ? 'test-pdf.pdf' : '/sdcard/Download/test-pdf.pdf',
url: 'https://www.ets.org/Media/Tests/TOEFL/pdf/SampleQuestions.pdf',
base64: 'JVBERi0xLjMKJcfs...',
};
export default class App extends React.Component {
render() {
const resourceType = 'base64';
return (
<View style={{ flex: 1 }}>
{/* Some Controls to change PDF resource */}
<PDFView
fadeInDuration={250.0}
style={{ flex: 1 }}
resource={resources[resourceType]}
resourceType={resourceType}
onLoad={() => console.log(`PDF rendered from ${resourceType}`)}
onError={() => console.log('Cannot render PDF', error)}
/>
</View>
);
}
}
I'm trying to use svg images on my native react application, I'm developing on Android.
So I followed this tutorial =>
https://medium.com/faun/add-custom-svg-icons-to-your-expo-app-279b492f6a15
I have an error Unable to read the 'fill' property of undefined while I manage to display the image, so I try to downgrade the version of react-native- svg and the image is displayed but as soon as I integrated react-navigation my application expo on crash at startup.
So I looked for a long time for the cause of this crash.
I tried to delete the react-native-svg library, the metroconfig.js file, and expo worked again, I don't know if this was the cause of the problem.
I would like to know if people have encountered these problems or if not what is the best method which works with the current version of RN to import a svg image in a react-native application?
Thank you in advance for your help and your answers.
EDIT
I tested react-native-svg and react-native-transformer-svg with the latest version of react native / expo / sdk expo
From the moment I create the metro.config.js file and link it with expo by updating the app.json file, my expo application crashes at startup.
I had to use react-native-svg without react-native-transformer-svg, that is to say that I have to convert an SVG file into a reactable SVG file.
If someone has a working solution to import svg files automatically, it would be of great help to me.
Important Note - I develop on a real Android device, not in Expo!
Here is some code from an issue opened on Github that actually worked for me after some modification.
Link to Github issue
In my metro.config.js file I finally have this code:
const { getDefaultConfig } = require("metro-config")
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts },
} = await getDefaultConfig()
// here I extend the extensions needed for RN because I use JSX.
// you don't need this if you use pure JS files
const updatedSourceExts = [...sourceExts, "jsx", "js", "json", "ts", "tsx"]
return {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
babelTransformerPath: require.resolve("react-native-svg-transformer"),
},
resolver: {
assetExts: assetExts.filter((ext) => ext !== "svg"),
sourceExts: [...updatedSourceExts, "svg"],
},
}
})()
A part of my package-json file:
"react-native": "0.63.2",
"react-native-svg": "^12.1.0",
"react-native-svg-transformer": "^0.14.3"
Install react-native-svg-transformer
npm i react-native-svg-transformer --save
I'm using SVG as following and it works fine
import LOGOSVG from "assets/svg/logo.svg"
in render
<View>
<LOGOSVG
width="100%"
height="70%"
/>
</View>
I have use react-native, the version is "version": "0.57.1". I have installed react-navigation via:
npm install --save react-navigation
The react-navigation version is react-navigation#3.4.0. The content of app.js file is below:
import * as React from 'react';
import { Text, View } from 'react-native';
// import { createStackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Home Screen</Text>
</View>
);
}
}
export default HomeScreen;
This sample works fine on expo. But when I run third line, an error occurs.
[16:57:50] While trying to resolve module react-navigation from file
/home/ubuntu/workspace/App.js, the package
/home/ubuntu/workspace/node_modules/react-navigation/package.json
was successfully found. However, this package itself specifies a
main module field that could not be resolved
(/home/ubuntu/workspace/node_modules/react-navigation/src/react-navigation.js.
Indeed, none of these files exist: [16:57:50] [16:57:50] *
/home/ubuntu/workspace/node_modules/react-navigation/src/react-navigation.js(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
[16:57:50] *
/home/ubuntu/workspace/node_modules/react-navigation/src/react-navigation.js/index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
This is odd you should not need to install react navigation specifically this should be installed automatically when making an expo project I would recommend deleting your node-modules and installing again with the following
rm -rf node_module && npm install
npm audit fix
expo start
If this doesn’t do the trick try making a new project and just copy your class to it hope this helps
I'm using the example found here & currently facing issue with the toast not showing at all... I just have the initial 'Welcome to React Native!' screen in the emulator. My app structure is as follows:
testApp
android
app
src
main
java
com
testApp
CustomToastPackage.java
MainActivity.java
MainApplication.java
ToastModule.java
res
assets
index.android.bundle
AndroidManifest.xml
ios
node_modules
app.json
App.js
index.js
package.json
ToastExample.js
yarn.lock
My index.js
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import {NativeModules} from 'react-native'; //Added this
module.exports = NativeModules.testApp; //Added this
AppRegistry.registerComponent(appName, () => App);
My App.js
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import ToastExample from './ToastExample'; //Added this
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
As you can see from the file structure I created an additional file named ToastExample.js that contains following based upon the answer found here
import {NativeModules} from 'react-native';
module.exports = NativeModules.ToastExample;
Package name is simply
com.testapp
I can't figure out why the toast never shows? I know react comes with toast support but looking to build upon an initial example to include more advanced Java/Android code...
In your example you didn't add ToastExample in index.js you need to add this into rendering method in index.js like below.
return(
<ToastExample/>
)
In addition to that, you are going to create an android native module which can be used only for android.
But According to my point of view, you can use toast messages module which can be used in both Android and Ios. Otherwise, you need to create ios base native module for creating toast for ios. If u don't want to ios base implementation, it's ok to use this native module. But you block your Ios deployment by it.
I would like to suggest this https://github.com/crazycodeboy/react-native-easy-toast#readme
easy-toast for u. It will work on both Android and IOS devices. You can customize it like android native toast as well. It is easy to implement in your application.
Thanks #Ariel & #Lucefer for feedback, I made the update you suggested but ran into another error. Posting this answer to save anyone potential headache caused by using Android Studio as IDE with React Native. Turns out the MainApplication.java file had 2 items (import of CustomToastPackage & ReactPackage) greyed out & could never figure out why? See the screenshot below
I created a separate application (react-native init newapp) & used a simple text editor (Atom or gedit will do instead of Android Studio) to make the changes & the example runs just fine now.
try this:
<Root>
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
</Root>
just import Root to react native
I am developing Android app using React Native. I tried running a simple code of a screen being displayed, but I get the following error. I tried closing all command line windows and emulator and re-starting React Native package and run it, but doesn't work. The code is provided below:
index.android.js:
import React, { Component} from 'react';
import {Text, View, AppRegistry,Button} from 'react-native';
import {StackNavigator} from 'react-navigation';
import dhrumil from '.\dhrumil.js';
export default class MainApp extends Component{
render(){
return(
<dhrumil />
);
}
}
const SimpleApp = StackNavigator({
Home: {screen: dhrumil }
});
AppRegistry.registerComponent("MainApp",()=>SimpleApp);
dhrumil.js:
import React, { Component} from 'react';
import {Text, View, AppRegistry,Button,StyleSheet} from 'react-native';
const dhrumil = () =>{
return(
<View style={styles.container}>
<Text style={styles.texter}>Hello World!</Text>
<Button
onPress={() => navigate('dharmin')}
title="Chat with Lucy"
/>
</View>
);
}
const styles = StyleSheet.create({
container:{
justifyContent: 'center',
alignItems: 'center',
flex: 1
}
texter:
{
fontSize: 20,
textAlign: 'center'
}
});
dhrumil.navigationOptions = {
title:'dhrumil'
}
export default dhrumil
How do I solve this?
In index.android.js change the import dhrumil from '.\dhrumil.js'; to import dhrumil from './dhrumil';. You have to use / to specify the path and it is not necessary use dhrumil.js when we are importing the js file.
#Jeffrey Rajan 's suggestion was absolutely correct here.
This error occurs mostly due to :
Issue 1:
A wrong file name in import statement
Using the wrong case in file name
Using '\' instead of '/' in file name
Hope that using this list you can easily find errors causing this in your code.
Issue 2:
An issue with the material design.To resolve this install material design locally using :
react-native-material-design
Issue 3:
babel-preset-react-native making trouble code. To resolve this issue run:
yarn remove babel-preset-react-native
yarn add babel-preset-react-native#2.1.0
Try troubleshooting in this order.Mostly the Issue 1 will solve the problem.