Im trying to display a video on screen in my react native project (with expo).
I put the video inside the project, and I see the message :
The file is not displayed in the editor because it is either binary or uses an unsupported text encoding
How can I resolve this issue?
As sidverma pointed out, this is a VS Code related error.
You cannot open large files inside the editor as it might crash.
I remember opening large bin files a long time ago with other editors and it would freeze my computer!
Anyhow, you can still use that file inside your React Native application. This is just your editor being careful about opening large files.
If want to use Video in react-native take help of this library: react-native-video
import Video from "react-native-video";
<View>
<Video
source={require("./../assets/video1.mp4")}
style={styles.backgroundVideo}
muted={true}
repeat={true}
resizeMode={"cover"}
rate={1.0}
ignoreSilentSwitch={"obey"}
/>
</View>
Alternative: Expo LINK
Related
I am using react native with android studio simulature (Device). I want to create a button "search image" which opens the folder of the images of the device used as a simulator. Come I can i do? Then after selecting an image from the device images folder, I want to open it in react native and transfer the image to base64.I know thant react native fetch blob is deprecated. How can i do?
<View>
<Button title="search image"></Button>
</View>
This is a fresh React Native app using React Native Paper. I followed the instructions at https://callstack.github.io/react-native-paper/getting-started.html and installed react-native-paper and react-native-vector-icons.
For some reason, none of the icons are showing in the app -- see below:
For example, I have a Searchbar at the top of this screen with the following code. As far as I can see, I don't even have to specify an icon there. It should automatically display a magnifying glass but no icon is showing.
<Searchbar placeholder="New to do item..." />
Any idea why and how to fix it?
Stop your application. Then go to project directory > open cmd > run npx react-native link react-native-vector-icons
cmd will show you linking is successful
Now run your app again
Just follow the installation steps as described here: https://github.com/oblador/react-native-vector-icons#android
React-native-paper uses MaterialCommunityIcons so remember to add it in the iconFontNames list in the steps above.
I have been trying to open documents like (pdf, docx, xslx) file into (inside the app, not in any other installed app) my react-native application. From research I got some PDF viewer only that will be used to open pdf inside the app but not the other two types DOCx and XSLx.
I got some doc-viewer also, that full fill some of my requirement that it can be used to open document of all three of it's type but in other installed app not inside my react-native app.
I have created demo projects for these and checked but non of it help me with my requirements.
For the developers,
We can use WebView from 'react-native-webview' module to display docs from URL.
I have done as below,
<WebView
source={{ uri: `https://drive.google.com/viewerng/viewer?embedded=true&url=${YOUR_URL}`}}
startInLoadingState={true} />
Important part is https://drive.google.com/viewerng/viewer?embedded=true&url=${} which will display your doc from URL.
I've got some questions regarding React Native Web. I haven't really wrapped my head around how it works so I'm hoping to get some answers.
Exactly, what happens when we "alias" the React Native to Web?
When working with Expo, why isn't some packages available? For
example, the LinearGradient get's an error saying it can't be found.
I want to use Netlify Identity Widget, but that renders in HTML. How
do I use that with React Native Web?
So in general, how do I develop in React Native Web? I need to know how to port npm packages so I can work with them.
Super thankful for any advice!
Exactly, what happens when we "alias" the React Native to Web?
It means the library react-native-web will convert the react-native components into HTML/CSS tags.
Here an example:
<View>
<Text style={{color: 'red'}}>I'm an awesome text</Text>
</View>
Will become into when rendered on browser:
<div>
<span style="color: red">I'm an awesome text</span>
</div>
When working with Expo, why isn't some packages available? For example, the LinearGradient get's an error saying it can't be found.
Expo offers a very simple way to start developing React Native apps. But it's a closed box where you cannot add community native packages, only the native packages that comes with Expo. There is an exception, the js-only packages, like: https://github.com/crazycodeboy/react-native-check-box
For the native packages, you need to link them in the native side of your app and compile it. To achieve this I suggest you to start in the native development, you can found the path here: https://facebook.github.io/react-native/docs/getting-started#the-react-native-cli
I want to use Netlify Identity Widget, but that renders in HTML. How do I use that with React Native Web?
You can use any package/widget/library that renders HTML, because you will run it on browsers. You can start using it just typing yarn add netlify-identity-widget
or npm install netlify-identity-widget --save into your react-native-web root folder.
Hope I helped!
I am using react-native-camera and react-native-qrcode-scanner libraries for scanning qr codes in my app. In android I have tested this and it was working fine, but in IOS I am facing lot of issues. The camera opens successfully on first attempt but after scanning the camera gets freezes and then a blank screen appears instead of camera. I have also given permissions in info.plist file in Xcode related to camera. Here is the code for the QRcode scan which I am using in the app
render() {
return (
<View>
<QRCodeScanner
onRead={this.onSuccess.bind(this)}
showMarker={true}
/>
</View>
);
}
Current versions in my app -
react-native - 0.57.5
react-native-camera - 1.10.1
react-native-qr-code-scanner - 1.1.2
Any answer or suggestions would be helpful to me Thanks.