Now I am using firebase JS SDK to use phone authentication. I followed the web method.
Here is my code:
handleClick = () => {
this.state.verify_otp = "flex";
this.state.register = "none";
this.recaptcha = new firebase.auth.RecaptchaVerifier("recaptcha1");
this.number = this.state.phone;
};
.
<View
style={{
alignItems: "center",
justifyContent: "center",
flex: 1,
display: this.state.captcha,
}}
>
<div>
<div id="recaptcha1"></div>
</div>
</View>
Is it possible to use a tag in react-native code?
No, not natively. React Native doesn't support direct HTML, as it is not a web framework.
For rendering HTML in React Native, see Render HTML in React Native
No, it's not possible to use html tags in react-native
edit: list of basic RN components https://reactnative.dev/docs/components-and-apis#basic-components
No, you cannot use the <div> element inside a react native component because React Native does not have a DOM.
Unfortunately its not possible. Div is an HTML element which can be read by Browser. For mobile app, Its View
However you can build your own div
class Div extends Component { //or Class Span extends Component
static propTypes = {
style : PropTypes.obj
onClick : PropTypes.func // ...
}
render (){
return (
<View>
/* whatever is needed to pass everything through ... */
</View>
) }
}
You could use react-native-render-html to achieve like follow.
(if couldn't work have to install react-native-webview)
import * as React from 'react';
import { Text, View, StyleSheet,ScrollView, Dimensions } from 'react-native';
import Constants from 'expo-constants';
import HTML from 'react-native-render-html';
const htmlContent = `
<h1>This HTML snippet is Using react-native-render-html !</h1>
<h2>Trying many tag to render html</h2>
<img src="https://i.imgur.com/fJ71V9b.jpg" />
<div>Here is what you want to add!!!!!<div>`
;
export default function App() {
return (
<View style={styles.container}>
<ScrollView style={{ flex: 1 }}>
<HTML html={htmlContent} imagesMaxWidth={Dimensions.get('window').width} />
</ScrollView>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
}
});
Code example on snack
Related
I want to add translate drop-down inside mobile app to translate the app text without using language json file.
I just want to add the select list at the top of app to change the language of text, like this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_google_translate
Is this possible with react native app?
Here is an example of how you can achieve that.
Working Example: Expo Snack
import React, { useState } from 'react';
import { Text, View, StyleSheet, Picker } from 'react-native';
import Constants from 'expo-constants';
const engToHindi = {
english: 'hello',
hindi: 'नमस्कार',
};
export default function App() {
const [language, setLanguage] = useState('english');
return (
<View style={styles.container}>
<Picker
selectedValue={language}
style={{ height: 50, width: 100 }}
onValueChange={(itemValue) => setLanguage(itemValue)}>
<Picker.Item label="English" value="english" />
<Picker.Item label="हिन्दी" value="hindi" />
</Picker>
<Text>{engToHindi[language]}</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});
Online Implementation using Google Translate API would be possible but I don't have the API keys so could not give you the example of that implementation.
If I understand correctly -- making the outermost container as "flex: 1" should let the component span the whole screen.
However, the code I wrote is not working properly.
import React from 'react';
import { View, Text } from 'react-native';
export default function test() {
return (
<View style={{ flex: 1, borderColor: 'red', borderWidth: 5 }}>
<Text>test</Text>
</View>
);
}
The simulator screenshot is here
Can anyone please point out where I did wrong?
Thank a lot!
Where are you calling this component? Yes, the flex will expand, but it is dependent on that parent component container. It looks like your parent is the one restricting this component.
Ensure the parent is also flexing and filling the content. Here is some more details around flex layout: https://facebook.github.io/react-native/docs/flexbox
Change your code to import the Component as a class:
import React from 'react';
import { View, Text } from 'react-native';
export default test extends React.Component {
render() {
return (
<View style={{ flex: 1, borderColor: 'red', borderWidth: 5 }}>
<Text>test</Text>
</View>
);
}
}
using the snack below:
https://snack.expo.io/ry_5rCk84
I am trying to display the icon 'wifi_off' using Material Icons in my react native app (just shared this as a snack on expo for easier sharing) but this is not a recognised value for prop 'name'.
and ends up displaying a '?' for unknown icon.
I am able to use wifi-off icon using 'material-community' icon set
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';
import {Icon} from 'react-native-elements';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Change code in the editor and watch it change on your phone! Save to get a shareable url.
</Text>
<Card>
<AssetExample />
</Card>
<Icon name='wifi' size={50} type='material'/>
<Icon name='wifi-off' size={50} type='material-community' />
<Icon name='wifi_off' size={50} type='material' />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
react-native-elements uses react-native-vector-icons to display the icons.
react-native-vector-icons has a directory where you can check which icons are available, you can look them up by name. https://oblador.github.io/react-native-vector-icons/
If you search for all the icons that have wifi in their name you find the following result for MaterialIcons and MaterialCommunityIcons
If you search for wifi_off you will find that there are no results.
Therefore wifi_off is not available to use.
It is also worth noting that react-native-elements currently doesn't support the latest version of react-native-vector-icons, you can see that in this currently open issue.
When you are using react native elements Icon, behind the scenes it is searching in a list https://github.com/oblador/react-native-vector-icons/blob/master/glyphmaps/MaterialIcons.json, here you can find the names of the Icons that are supported and as you can see "wifi_off" is not here, maybe you can try "signal-wifi-off".
I am working with react native, and I am using a video component from the expo. during this how I can change the value for URI attribute dynamically
(As you mentioned in the comment that you already solved the problem and want to play youtube videos)
You can use WebView to play Youtube video.
Working demo: https://snack.expo.io/Syhzx-VvX
Here is the sample code:
import React, { Component } from 'react';
import { StyleSheet, View, WebView, Platform } from 'react-native';
export default class App extends Component<{}> {
render() {
return (
<View style={{ height: 300 }}>
<WebView
style={ styles.WebViewContainer }
javaScriptEnabled={true}
domStorageEnabled={true}
source={{uri: 'https://www.youtube.com/embed/YE7VzlLtp-4' }}
/>
</View>
);
}
}
const styles = StyleSheet.create({
WebViewContainer: {
marginTop: (Platform.OS == 'android') ? 20 : 0,
}
});
Otherwise if you don't want to use WebView, use a third party package like react-native-youtube
I'm trying to detect when a user presses on a custom UI component I have written (it displays a video feed). I've tried using all the touchable components, and would ideally want to use the TouchableWithoutFeedback component, but none of them detect presses on my component. Additionally, when I select my component with the inspector, I get the error Expected to find at least one React renderer but I'm not sure how to set up my component correctly to have a renderer.
The native UI component:
public class DroneVideoFeedManager extends SimpleViewManager<DroneVideoFeed> {
#Override
public String getName() {
return "DroneLiveVideo";
}
#Override
public DroneVideoFeed createViewInstance(ThemedReactContext context) {
return new DroneVideoFeed(context, null);
}
}
My UI component Javascript wrapper is as follows:
import PropTypes from 'prop-types';
import {
requireNativeComponent,
ViewPropTypes,
} from 'react-native';
const iface = {
name: 'DroneLiveVideo',
propTypes: {
resizeMode: PropTypes.oneOf(['cover', 'contain', 'stretch']),
...ViewPropTypes, // include the default view properties
},
};
module.exports = requireNativeComponent('DroneLiveVideo', iface);
And my attempt to detect a press:
<TouchableWithoutFeedback
onPress={() => console.log('pressed!')}
>
<DroneLiveView
style={{
width: '100%',
height: '100%',
}}
/>
</TouchableWithoutFeedback>
This is the first time I have attempted to implement a native UI component in React Native, so apologies in advance if I am doing things incorrectly.
I found a solution, it's perhaps a little convoluted and not the best way of doing things but it works!
I changed my javascript wrapper to return a view with my native UI component, and another view above it (using absolute positioning). This view appears to handle touches and allows touchables to work with my component.
My changed UI component wrapper is as follows:
import React, {
Component,
} from 'react';
import {
requireNativeComponent,
View,
} from 'react-native';
class DroneVideo extends Component<{}> {
constructor(props) {
super(props);
}
render() {
return (
<View
{...this.props}
>
<View
style={{
width: '100%',
height: '100%',
position: 'absolute',
zIndex: 2,
}}
></View>
<DroneVideoNative
style={{
width: '100%',
height: '100%',
position: 'absolute',
zIndex: 1,
}}
/>
</View>
);
}
}
let DroneVideoNative = requireNativeComponent('DroneLiveVideo', DroneVideo);
export default DroneVideo;