I have a project where I must put some videos on my page. I didn't what they would be so I used this :
const video = React.useRef(null);
...
...
<Video
ref={video}
style={styles.video}
source={{
uri: "https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4",
//https://www.youtube.com/watch?v=g57_0gejMig
}}
useNativeControls
isLooping
onPlaybackStatusUpdate={(status) => setStatus(() => status)}
/>
Howether it doesn't seems to work with url. Any idea?
You can try the below implementation.
It uses a video id from a link that just pastes the ID of the Youtube video in the below code.
import React from 'react';
import {View} from 'react-native';
import YoutubePlayer from 'react-native-youtube-iframe';
const App = () => {
return (
<View>
<YoutubePlayer
height={300}
play={true}
videoId={'84WIaK3bl_s'}
/>
</View>
);
};
Related
attached is the code below for a little app I am making with React Native. I was trying to use react icons but for some reason they are not working and idk why. I imported them and everything and they should be working but I keep getting this error. Does anyone know why my react icons are not functioning properly? Thanks in advance.
import { View, Text, SafeAreaView, Image } from 'react-native';
import React, { useLayoutEffect } from 'react';
import { useNavigation } from '#react-navigation/native';
import { FaBeer } from 'react-icons/fa';
const HomeScreen = () => {
const navigation = useNavigation();
useLayoutEffect(() => {
navigation.setOptions({
headerShown: false,
});
}, []);
return (
<SafeAreaView>
<Text className="text-red-500">
<View className="flex-row pb-3 items-center mx-4 space-x-2">
<Image
source={{
url:"https://links.papareact.com/wru",
}}
className="h-7 w-7 bg-gray-300 p-4 rounded-full"
/>
<View>
<Text className="font-bold text-gray-400 text-xs">
Deliver Now
</Text>
<Text className="font-bold text-xl">Current Location
<FaBeer />
</Text>
</View>
</View>
</Text>
</SafeAreaView>
);
};
export default HomeScreen;
react-icons doesn't work with react native (i think). You need to use react-native-vector-icons (https://www.npmjs.com/package/react-native-vector-icons)
you cant use normal react icons since in react native icons can be either an image or can be SVG, so for SVG icons, you need to add react-native-svg package.
You should install as #dev404 said https://github.com/oblador/react-native-vector-icons
Also do follow their installation process for both android and ios.
YOu can check the below available icon sets.
Hope it helps, feel free for doubts
I have created a function that returns WebView
const WebviewComponent = () => (
<webview id="test" src="https://www.google.com" style={{ height: "700px", width:"800px", autoSize:"on", minWidth:"576", minHeight:"432" }} />
)
and I called this function in app.js. When I try to launch the application the src url is not loading.
WebView source type is not a string. You should check WebView documentation or see the usage below to understand how it works.
Usage
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native-webview';
class MyWebComponent extends Component {
render() {
return <WebView source={{ uri: 'https://reactnative.dev/' }} />;
}
}
In your case, It will be
const WebviewComponent = () => (
<WebView
style={{ flex: 1 }}
source={{ uri: 'https://www.google.com' }} />
)
i create an app based on react-admin
and a fake server using json-server
my file structure is the following :
client ( here goes the react app )
node_modules
db.json
package-lock.json
pachake.json
range.js
then i created products and orders lists and show page :
the link for the show page of an order is ( for example order 3 ) :
http://localhost:3000/#/orders/3/show
and it shows the orders datils
what i wanna do is to download a pdf file contains this details , i tried the following code as a starting point :
import * as React from "react";
import {useQuery, Show, SimpleShowLayout, TextField } from 'react-admin';
import { PDFDownloadLink, Document, Page , View , Text } from '#react-pdf/renderer'
const MyDoc = ({}) => {
return (
<Document>
<Page size="A4">
<View>
<Text>
details must go here
</Text>
</View>
</Page>
</Document>
)};
const OrderShow = (props) => (
<Show {...props}>
<SimpleShowLayout>
<TextField source='order_number' />
<TextField source='reference_number' />
<TextField source='status' />
<TextField source='payment' />
<TextField source='shipment' />
<TextField source='created_at' />
<div>
<PDFDownloadLink document={<MyDoc /> } fileName="somename.pdf">
{({ loading }) => (loading ? 'Loading document...' : 'Download now!')}
</PDFDownloadLink>
</div>
</SimpleShowLayout>
</Show>
);
export default OrderShow
with this i got the following output :
when i click on Download now! a pdf with the content ' details must go here ' but instead of that i want the data about the current order
Try having a look at useShowController: https://marmelab.com/react-admin/Show.html#useshowcontroller
By using that, I think you will be able to access the data from the currently shown record, and build the PDF from there.
i did it this way and it works fine :
import React, {Component, PropTypes} from 'react';
// download html2canvas and jsPDF and save the files in app/ext, or somewhere else
// the built versions are directly consumable
// import {html2canvas, jsPDF} from 'app/ext';
export default class Export extends Component {
constructor(props) {
super(props);
}
printDocument() {
const input = document.getElementById('divToPrint');
html2canvas(input)
.then((canvas) => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF();
pdf.addImage(imgData, 'JPEG', 0, 0);
// pdf.output('dataurlnewwindow');
pdf.save("download.pdf");
})
;
}
render() {
return (<div>
<div className="mb5">
<button onClick={this.printDocument}>Print</button>
</div>
<div id="divToPrint" className="mt4" {...css({
backgroundColor: '#f5f5f5',
width: '210mm',
minHeight: '297mm',
marginLeft: 'auto',
marginRight: 'auto'
})}>
<div>Note: Here the dimensions of div are same as A4</div>
<div>You Can add any component here</div>
</div>
</div>);
}
}
I am trying to decide on the best way to set up routing in my React Native Web project. I am using expo and followed this guide to use Next JS https://docs.expo.io/versions/latest/guides/using-nextjs/ so I have App.js like this:
import index from "./pages/index";
import alternate from "./pages/alternate";
import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";
const AppNavigator = createStackNavigator(
{
index,
alternate
},
{
initialRouteName: "index"
}
);
const AppContainer = createAppContainer(AppNavigator);
export default AppContainer;
My concern is how best to handle routing. I have my index.js page setup like this currently.
import * as React from 'react'
import { StyleSheet, Button, Text, View } from 'react-native'
export default function App ({navigation}) {
return (
<View style={styles.container}>
{/* Native route */}
<Button
title="Go to Details"
onPress={() => navigation.navigate("alternate")}
/>
{/* Web route */}
<Text style={styles.link} accessibilityRole="link" href={`/alternate`}>
A universal link
</Text>
</View>
);
}
As you can see this is currently requiring separate code to render a Native vs Web route. I am wondering what is the best way to handle this sort of rendering. I looked into using React Navigation for web and wouldn't be opposed to this but it seems like I should probably stick with the Next Router.
Thanks in advance for any advice on handling conditional rendering like this.
Use reactnavigation web support for that
https://reactnavigation.org/docs/en/web-support.html
import { createSwitchNavigator } from "#react-navigation/core";
import { createBrowserApp } from "#react-navigation/web";
const MyNavigator = createSwitchNavigator(routes);
const App = createBrowserApp(MyNavigator);
// now you can render "App" normally
There is import { Platform } from 'react-native':
{Platform.OS === 'web' ? (
<Text
style={styles.link}
accessibilityRole="link"
href={`/alternate`}
>
A universal link
</Text>
) : (
<Button
title="Go to Details"
onPress={() => navigation.navigate("alternate")}
/>
)}
I have a website written with React (https://new.sacatucita.com/).
On my website, I have a search bar using react-select (https://github.com/JedWatson/react-select).
I want to make an application showing my website with React Native, so I have this code:
import React from "react";
import { WebView } from "react-native-webview";
export default function App() {
return (
<WebView
originWhitelist={["*"]}
source={{ uri: "https://new.sacatucita.com/" }}
/>
);
}
The problem is that when I open my application and click on the search bar, the keyboard and results do not show. It appears that the click has no effect. I need to first click elsewhere (like on the title text for example), and then the search bah will work.
I already tried to select the webview with the ref:
ref={ref => {
const e = ref && ref.webViewRef && ref.webViewRef.current;
e && e.focus();
}}
And to click injecting HTML:
const js = `
const e = document.getElementsByTagName("h1")[0];
e.click();
`;
export default function App() {
return (
<WebView
originWhitelist={["*"]}
source={{ uri: url }}
injectedJavaScript={js}
/>
);
}
I found out that the problem is only present on android devices.
Is there a solution?
When you do this, the keyboard will come out normally.
I made a link so you could test it yourself.
import React, {Component} from 'react';
import {WebView} from 'react-native';
class App extends Component {
render() {
return (
<WebView
source={{uri: 'https://new.sacatucita.com/'}}
style={{marginTop: 20}}
/>
);
}
}
export default App;