Develop Reference

React Native PDF Preview

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>
);
}
}

LottieView shuts down the app on android and works on IOS

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

React Native Native Java/Android Module - not showing toast message

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

TextInput not working in android react native

TextInput in android is not working when i click on the input and start typing, no text is shown as input. I tested it on android 8.1 and 7.1.
react-native-cli : 2.0.1
react-native : 0.55.4
class LoginForm extends Component{
state={text: ''};
render(){
return(
<Card>
<CardSection>
<TextInput
value={this.state.text}
onChangeText={(text)=>this.setState({text})}
style={{height: 20, width: 1.0}}
/>
</CardSection>
<CardSection/>
<CardSection>
<Button>Log In</Button>
</CardSection>
</Card>
);
}
}

We can give padding: 0;.
For me its working fine.

Try doubling the height of the text input style. I was having the same issue, and doubling the height to 40 fixed it for me. Seems to be an issue with android specifically.
Where I found this solution

implementation 'androidx.appcompat:appcompat:1.6.0' // remove this library and it works from build.gradle in app file

Integrating react native app with smooch api

I am trying to integrate my react native app with smooch.io following this instructions. I have succesfully installing the module and configure MainApplication.java. Now i have problem when trying to show the conversation screen. Where should i put Smooch.show() in my react native app? Here is my index.android.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View
} from 'react-native';
import Smooch from 'react-native-smooch';
export default class SmoochTest extends Component {
componentDidMount() {
Smooch.show();
}
render() {
return (
<View style={styles.container}>
</View>
);
}
}
const styles = StyleSheet.create({
// some style
});
AppRegistry.registerComponent('SmoochTest', () => SmoochTest);

I ran into a similar issue - did you link it? react-native link react-native-smooch. That solved it for me.